/* ═══════════════════════════════════════════════════════════════════════
   GENERATED FILE — do not edit by hand.
   Regenerate with:  venv/bin/python3 scripts/build_unified_css.py
   Sources (cascade order preserved): tokens.css, clajama-app.css, clajama-auth.css, eos-app.css, clajama-blog.css, clajama-compat.css + ui-shim
   Dead-rule pruning: scripts/data/dead_selectors.json (scripts/analyze_dead_css.py)
   ═══════════════════════════════════════════════════════════════════════ */
:root {
--color-base:          #07070B;
  --color-surface:       #0E1018;
  --color-raised:        #13152A;

  --bg:                  var(--color-base);
  --bg-deep:             var(--color-base);
  --bg-soft:             var(--color-surface);
  --bg-surface:          var(--color-raised);
  --surface:             var(--color-surface);
  --raised:              var(--color-raised);

  
  --color-text-primary:   #D8D9E2;
  --color-text-secondary: rgba(168, 169, 184, 0.75);
  
  --color-text-muted:     rgba(168, 169, 184, 0.72);

  --text-primary:   var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:     var(--color-text-muted);

  
  --color-border:         rgba(255, 255, 255, 0.08);
  --color-border-subtle:  rgba(255, 255, 255, 0.04);

  --border:          var(--color-border);
  --border-subtle:   var(--color-border-subtle);
  --border-light:    var(--color-border);
  --border-medium:   var(--color-border);
  --border-strong:   rgba(255, 255, 255, 0.14);

  
  --color-accent:       #7B4DFF;
  --color-accent-hover: #9C6BFF;
  --color-accent-tint:  rgba(123, 77, 255, 0.08);
  --color-accent-on:    #0f0f0d;   

  --accent:           var(--color-accent);
  --accent-hover:     var(--color-accent-hover);
  --accent-mid:       var(--color-accent-hover);
  --accent-tint:      var(--color-accent-tint);
  --accent-on:        var(--color-accent-on);
  --accent-soft:      var(--color-accent-tint);
  --accent-muted:     color-mix(in oklab, var(--accent), transparent 40%);
  --accent-text:      var(--accent);
  --accent-border:    color-mix(in oklab, var(--accent), transparent 60%);
  --accent-purple:    var(--accent);
  --accent-purple-mid: var(--accent-hover);
  --accent-purple-tint: var(--accent-tint);
  --accent-glow:      #B38CFF;
  --accent-cyan:      #00ffe0;     

  
  --violet:        #8b5cf6;
  --violet-soft:   #a855f7;
  --info:          #3b82f6;
  --cyan:          #06b6d4;
  --emerald:       #2ecc71;
  --amber:         #F59E0B;
  --teal:          #14b8a6;   
  --pink:          #ec4899;   
  --rose:          #f43f5e;   
  --orange:        #f97316;   
  --slate:         #64748b;   
  --facebook:      #1877f2;   

  
  --color-status-green: #2ecc8a;
  --color-status-red:   #e74c3c;
  --color-status-warn:  #F59E0B;
  --color-status-green-tint: rgba(46, 204, 138, 0.12);
  --color-status-red-tint:   rgba(231, 76, 60, 0.12);
  --color-status-warn-tint:  rgba(245, 158, 11, 0.12);

  --status-green: var(--color-status-green);
  --status-red:   var(--color-status-red);
  --status-warn:  var(--color-status-warn);
  --green:        var(--color-status-green);
  --red:          var(--color-status-red);
  --warn:         var(--color-status-warn);
  --success:      var(--color-status-green);
  --danger:       var(--color-status-red);

  
  --font-display:  Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:     Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --font-family:   var(--font-body);

  --font-weight-heading: 200;
  --font-weight-body:    300;
  --font-weight-label:   500;

  
  --text-xs:  10px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-base: 15px;
  --text-lg:  20px;
  --text-xl:  26px;
  --text-2xl: 36px;
  --text-3xl: 64px;

  --leading-body: 1.7;
  --leading-tight: 1.0;
  --tracking-display: -0.025em;
  --letter-spacing-display: var(--tracking-display);
  --letter-spacing-h1: -0.02em;
  --letter-spacing-h2: -0.01em;
  --letter-spacing-label: 0.06em;
  --letter-spacing-caption: 0.1em;

  
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;

  --spacing-section-padding: 80px;
  --spacing-block-gap: 40px;
  --spacing-card-padding: 24px;
  --spacing-element-gap: 16px;
  --spacing-content-max-width: 1200px;

  
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-raised: 0 2px 8px color-mix(in oklab, var(--fg, #D8D9E2), transparent 92%);
  --focus-ring:  0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);

  --depth-glass-bg:     color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-surface) 20%, transparent);
  --depth-glass-blur:   12px;
  --depth-surface-grad: linear-gradient(135deg, var(--color-surface), color-mix(in oklch, var(--color-accent) 8%, var(--color-surface)));
  --depth-accent-glow:  0 0 24px color-mix(in oklab, var(--accent), transparent 70%);
  --depth-shadow-sm: 0 2px 8px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-md: 0 4px 20px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-lg: 0 8px 40px color-mix(in oklch, var(--color-base) 40%, transparent);

  
  --motion-fast:    150ms;
  --motion-base:    200ms;
  --motion-hover-duration: 0.2s;
  --motion-hover-easing:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);

  
  --bp-mobile-max: 639px;
  --bp-tablet-min: 640px;
  --bp-tablet-max: 1023px;
  --bp-desktop-min: 1024px;
}
:root {
--resp-padding-mobile: 16px;
  --resp-padding-tablet: 24px;
  --resp-padding-desktop: 36px;

  --resp-gap-mobile: 12px;
  --resp-gap-tablet: 16px;
  --resp-gap-desktop: 20px;

  --resp-section-mobile: 32px;
  --resp-section-tablet: 48px;
  --resp-section-desktop: 60px;

  
  --resp-h1-mobile: 28px;
  --resp-h1-desktop: 48px;

  --resp-body-mobile: 15px;
  --resp-body-desktop: 16px;

  
  --resp-grid-min-2col: 300px;
  --resp-grid-min-3col: 240px;
  --resp-grid-min-4col: 220px;

  
  --resp-sidebar-width-desktop: 220px;
  --resp-sidebar-width-tablet: 60px;
  --resp-sidebar-width-mobile: 0px;
}
.hide-mobile {
display: revert;
}
.show-mobile {
display: none;
}
.hide-tablet {
display: revert;
}
@media (min-width: 640px) {
.hide-tablet {
display: none;
}
}
@media (min-width: 1024px) {
.hide-mobile {
display: revert;
}
.show-mobile {
display: none;
}
}
@media (max-width: 639px) {
.hide-mobile {
display: none !important;
}
.show-mobile {
display: revert;
}
}
:root {
--font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-weight-heading: 700;
  --font-weight-body: 400;
  --font-weight-label: 600;

  
  --color-base: #07070B;
  --color-surface: #0E1018;
  --color-raised: #13152A;
  --color-accent: #7B4DFF;
  --color-accent-hover: #9C6BFF;
  --color-accent-tint: rgba(123, 77, 255, 0.08);
  --color-text-primary: #D8D9E2;
  --color-text-secondary: rgba(168, 169, 184, 0.75);
  --color-text-muted: rgba(168, 169, 184, 0.72);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-subtle: rgba(255, 255, 255, 0.04);
  --color-status-green: #2ecc8a;
  --color-status-red: #e74c3c;
  --color-status-warn: #F59E0B;
  --color-status-green-tint: rgba(46, 204, 138, 0.12);
  --color-status-red-tint: rgba(231, 76, 60, 0.12);
  --color-status-warn-tint: rgba(245, 158, 11, 0.12);

  
  --typo-headline-size: 48px;
  --typo-headline-line-height: 1.1;
  --typo-headline-letter-spacing: -0.02em;
  --weight-headline-weight: 700;

  
  --typo-body-size: 16px;
  --typo-body-line-height: 1.7;
  --weight-body-opacity: 0.75;

  
  --typo-measure: 68ch;

  
  --spacing-section-padding: 80px;
  --spacing-block-gap: 40px;
  --spacing-element-gap: 16px;
  --spacing-card-padding: 24px;
  --spacing-content-max-width: 1200px;
  --spacing-text-max-width: 680px;
  --spacing-page: 24px;

  
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  
  --weight-border-width: 1px;
  --weight-border-opacity: 0.10;
  --weight-surface-opacity: 0.6;

  
  --resp-grid-min: 260px;
  --resp-grid-gap: 16px;
}
:root {
--typo-h1-size: clamp(2rem, 5vw + 1rem, 4rem);
  --typo-h1-weight: 700;
  --typo-h1-leading: 1.05;
  --typo-h1-tracking: -0.03em;

  --typo-h2-size: clamp(1.25rem, 3vw + 0.5rem, 2rem);
  --typo-h2-weight: 600;
  --typo-h2-leading: 1.2;

  --typo-h3-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  --typo-h3-weight: 600;

  --typo-body-size: clamp(0.875rem, 0.75vw + 0.75rem, 1.0625rem);
  --typo-body-leading: 1.65;

  --typo-small-size: clamp(0.75rem, 0.5vw + 0.625rem, 0.875rem);
}
:root {
--depth-shadow-sm: 0 1px 3px color-mix(in oklch, var(--color-base) 30%, transparent);
  --depth-shadow-md: 0 4px 12px color-mix(in oklch, var(--color-base) 20%, transparent);
  --depth-shadow-lg: 0 12px 40px color-mix(in oklch, var(--color-base) 15%, transparent);

  --depth-glass-bg: color-mix(in oklch, var(--color-surface) 60%, transparent);
  --depth-glass-border: color-mix(in oklch, var(--color-border) 50%, transparent);
  --depth-glass-blur: 12px;

  --depth-accent-glow: 0 0 20px color-mix(in oklch, var(--color-accent) 25%, transparent);
  --depth-surface-grad: linear-gradient(
    135deg,
    var(--color-surface) 0%,
    color-mix(in oklch, var(--color-surface) 90%, var(--color-accent)) 100%
  );

  --depth-bleed-width: 100vw;
  --depth-bleed-offset: calc(-1 * (var(--depth-bleed-width) - min(var(--depth-bleed-width), 1200px)) / 2);
}
:root {
--motion-entrance-duration: 0.6s;
  --motion-entrance-delay: 0.15s;
  --motion-entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-hover-duration: 0.2s;
  --motion-hover-easing: ease;
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slide-left {
from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slide-right {
from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.reveal.visible {
animation: fade-up var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-scale.visible {
animation: scale-in var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-left.visible {
animation: slide-left var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
.reveal-right.visible {
animation: slide-right var(--motion-entrance-duration) var(--motion-entrance-easing) forwards;
}
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0;
}
html {
scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-sans);
  background: var(--bg-deep);
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--header-h);
  padding-bottom: calc(var(--input-h) + 16px);
  margin: 0;
  width: 100%;
  max-width: 100vw;
  position: relative;
  min-height: 100vh;
}
body::before {
content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(123, 77, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(123, 77, 255, 0.03) 0%, transparent 50%);
}
body::after {
content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(123, 77, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 77, 255, 0.015) 1px, transparent 1px);
  background-size: 80px 80px;
}
body.chat-active {
padding-bottom: 0;
}
:root {
--bg-deep:         #07070B;
  --bg-soft:         #0E1018;
  --bg-surface:      #13152A;
  --bg-panel:        rgba(14, 16, 24, 0.88);
  --bg-raised:       rgba(19, 21, 42, 0.92);
  --bg-card:         var(--bg-surface);   
  --bg-input:        var(--bg-soft);      
  --bg-elevated:     var(--bg-surface);   

  
  --surface:         var(--bg-surface);
  --raised:          var(--bg-raised);
  --border:          var(--border-subtle);
  --accent-text:     rgba(255, 255, 255, 0.95);

  
  --accent:          #7B4DFF;
  --accent-mid:      #9C6BFF;
  --accent-glow:     #B38CFF;
  --accent-soft:     rgba(123, 77, 255, 0.12);
  --accent-border:   rgba(123, 77, 255, 0.20);
  --accent-tint:     rgba(123, 77, 255, 0.06);
  --accent-on:       #fff;      

  
  --accent-purple:     #7B4DFF;
  --accent-purple-mid: #9C6BFF;
  --accent-purple-tint: rgba(123, 77, 255, 0.10);
  --accent-hover:      rgba(123, 77, 255, 0.12);

  
  --accent-cyan:       #00ffe0; 
  --accent-cyan-tint:  rgba(0, 255, 224, 0.08); 

  
  --status-green:    #2ecc8a;
  --status-red:      #e74c3c;
  --status-yellow:   #F59E0B;

  
  --info:            #3b82f6;
  --info-tint:       rgba(59, 130, 246, 0.1);
  --info-light:      #93c5fd;   
  --cyan:            #06b6d4;   
  --violet:          #8b5cf6;
  --violet-soft:     #a855f7;
  --violet-light:    #a78bfa;   
  --teal:            #14b8a6;   
  --link:            #3498db;   
  --link-tint:       rgba(52, 152, 219, 0.12);
  --emerald:         #2ecc71;   

  
  --bg:              var(--bg-deep);
  --bg-hover:        rgba(255, 255, 255, 0.04);
  --base:            var(--bg-deep);
  --accent-muted:    rgba(123, 77, 255, 0.12);   
  --danger:          var(--color-status-red);
  --red:             var(--color-status-red);
  --surface-card:    var(--bg-surface);
  --pink:            #ec4899;   
  --rose:            #f43f5e;   
  --orange:          #f97316;   
  --amber:           #fbbf24;   
  --slate:           #64748b;   
  --facebook:        #1877f2;   

  
  --text-primary:    rgba(255, 255, 255, 0.92);
  --text-body:       rgba(255, 255, 255, 0.80);
  --text-secondary:  rgba(255, 255, 255, 0.55);
  --text-muted:      rgba(255, 255, 255, 0.40);

  
  --border-subtle:   rgba(255, 255, 255, 0.12);
  --border-light:    rgba(255, 255, 255, 0.06);
  --border-medium:   rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.10);
  --border-color:    var(--border-medium);

  
  --glow-primary:    0 0 40px rgba(123, 77, 255, 0.35);
  --glow-subtle:     0 0 20px rgba(123, 77, 255, 0.25);
  --glow-modal:      0 0 40px rgba(123, 77, 255, 0.15);
  --shadow-modal:    0 25px 50px rgba(0, 0, 0, 0.50);
  --glow-bg:         radial-gradient(circle at 50% 0%, rgba(123, 77, 255, 0.20) 0%, transparent 70%);

  
  --radius-sm:       10px;
  --radius-md:       12px;
  --radius-lg:       20px;
  --radius-xl:       24px;
  --radius-pill:     50px;
  --radius-full:     9999px;

  
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-md: 16px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   18px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  42px;

  
  --motion-fast:  150ms ease;
  --motion-base:  240ms ease;
  --motion-slow:  400ms ease;

  
  --header-h:     56px;
  --sidebar-w:    240px;
  --sidebar-w-collapsed: 60px;

  --input-h:      68px;

  
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
}
.mobile-overlay {
display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 200;
  align-items: flex-end;
  justify-content: center;
  transition: opacity 0.2s ease;
  opacity: 0;
}
.mobile-overlay.open {
display: flex;
  opacity: 1;
}
.mobile-overlay.open,
.mobile-panel.open {
transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-panel {
position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: var(--surface, var(--bg-surface, #0b0d12));
  border: 0.5px solid var(--border, rgba(255,255,255,0.06));
  border-radius: 12px 12px 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 45vh;
  overflow-y: auto;
  padding: 16px 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  z-index: 201;
}
.mobile-panel-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--border);
}
.mobile-panel-title {
font-size: 13px;
  font-weight: 300;
  color: var(--text-primary);
  letter-spacing: 0.04em;
}
.mobile-panel-close {
width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--raised);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.12s;
  font-family: inherit;
}
.mobile-panel-close:hover {
color: var(--text-primary);
  border-color: var(--text-muted);
}
.mobile-items {
display: flex;
  flex-direction: column;
  gap: 1px;
}
.mobile-item {
display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.1s;
}
.mobile-item:hover {
background: var(--accent-tint);
  color: var(--accent);
}
.mobile-item .mi-icon {
font-size: 17px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.mobile-item-divider {
height: 0.5px;
  background: var(--border);
  margin: 6px 10px;
}
body.menu-open {
overflow: hidden !important;
  position: fixed;
  width: 100%;
}
.heading-xl {
font-size: clamp(32px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
}
.accent {
color: var(--accent);
}
.muted {
color: var(--text-secondary);
}
.btn-primary {
display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-base);
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  color: var(--accent-on);
}
.btn-primary:hover {
transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(123, 77, 255, 0.20);
}
.btn-secondary {
display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-base);
  background: rgba(123, 77, 255, 0.10);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.btn-secondary:hover {
background: rgba(123, 77, 255, 0.18);
  transform: translateY(-1px);
}
.btn-ghost {
display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-fast);
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
}
.btn-ghost:hover {
border-color: var(--accent-border);
  color: var(--accent);
}
.btn {
display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--motion-base);
  border: none;
  cursor: pointer;
}
.btn.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--accent-mid)); color: var(--accent-on);
}
.btn.btn-primary:hover {
transform: translateY(-2px); box-shadow: 0 10px 30px rgba(123,77,255,0.2);
}
.btn.btn-outline {
background: transparent; color: var(--text-primary); border: 1px solid var(--border-medium);
}
.btn.btn-outline:hover {
border-color: var(--accent); color: var(--accent);
}
.app-shell {
margin-left: var(--sidebar-w);
  min-height: calc(100vh - var(--header-h));
  display: flex;
}
.app-shell.has-context .main-content {
max-width: 900px;
}
.app-shell.has-context .context-panel {
display: flex;
  flex-direction: column;
}
.context-panel {
width: var(--context-w, 280px);
  background: var(--bg-surface, #0e0e14);
  border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.context-panel .sidebar-inner {
flex: 1;
  overflow-y: auto;
  padding: 20px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.context-panel .section-icon {
width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.context-panel .section-icon.icon-project {
background: rgba(123, 77, 255, 0.12);
  color: var(--accent);
}
.context-panel .section-icon.icon-actions {
background: rgba(34, 197, 94, 0.10);
  color: var(--color-status-green, #22c55e);
}
.context-panel .section-icon.icon-memory {
background: rgba(245, 158, 11, 0.10);
  color: var(--color-status-warn, var(--status-warn));
}
.context-section-header {
display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.context-section-header .section-title {
font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  line-height: 1.3;
}
.context-section-header .section-subtitle {
font-size: 10px;
  color: rgba(255,255,255,0.18);
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.context-section {
margin-bottom: 16px;
}
.context-project-card {
background: var(--raised, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.06));
  border-radius: var(--radius-md, 8px);
  padding: 12px;
  margin: 0 4px;
  transition: border-color 0.2s ease;
}
.context-project-card:hover {
border-color: var(--accent, var(--accent));
}
.context-project-card-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.context-project-name {
font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
  line-height: 1.3;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-project-prompt {
font-size: 11px;
  color: var(--text-muted, #5a5a6a);
  margin-top: 8px;
  line-height: 1.4;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
}
.context-empty {
text-align: center;
  padding: 16px 8px;
}
.context-empty-text {
font-size: 13px;
  color: var(--text-muted, #5a5a6a);
}
.context-divider {
height: 1px;
  background: var(--border-subtle, rgba(255,255,255,0.06));
  margin: 12px 0;
}
.context-action-btn {
display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px);
  color: var(--text-secondary, #a0a0b0);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  font-family: inherit;
}
.context-action-btn:hover {
background: rgba(255,255,255,0.04);
  border-color: var(--border, rgba(255,255,255,0.08));
  color: var(--text-primary, #fff);
}
.context-action-btn svg {
width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.6;
}
.context-action-btn:hover svg {
opacity: 0.9;
}
.context-action-shortcut {
margin-left: auto;
  font-size: 10px;
  color: rgba(255,255,255,0.15);
  font-weight: 400;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.03);
  padding: 1px 5px;
  border-radius: 4px;
}
.context-stats {
display: flex;
  gap: 8px;
  margin: 0 4px;
}
.context-stat {
flex: 1;
  background: var(--raised);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: var(--radius-sm, 6px);
  padding: 10px;
  text-align: center;
}
.context-action-btn + .context-action-btn {
margin-top: 6px;
}
.app-shell.has-context + .input-bar-wrapper,
.app-shell.has-context ~ .input-bar-wrapper,
.app-shell.has-context ~ * .input-bar-wrapper {
right: var(--context-w, 280px);
}
.app-shell[data-collapsed="true"] {
margin-left: var(--sidebar-w-collapsed);
}
.main-content {
overflow-y: auto;
  padding: 20px 24px;
  max-width: 100%;
}
.app-header {
position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 50;
}
.header-left {
display: flex;
  align-items: center;
  gap: 12px;
}
.header-hamburger {
display: none;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast);
}
.header-hamburger:hover {
background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.header-logo {
display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.app-header .header-logo {
margin-left: 16px;
  flex-shrink: 0;
}
.header-logo-mark {
width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  color: var(--accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.header-logo-text {
font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
}
.header-center {
flex: 1;
  display: flex;
  justify-content: center;
}
.header-search {
display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  transition: all var(--motion-fast);
}
.header-search:focus-within {
border-color: var(--accent-border);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 10px rgba(123, 77, 255, 0.08);
}
.header-search-icon {
flex-shrink: 0;
  color: var(--text-muted);
  display: flex;
  align-items: center;
}
.header-search-input {
flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 2px 0;
}
.header-search-input::placeholder {
color: var(--text-muted);
}
.header-search-kbd {
flex-shrink: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: inherit;
}
.header-right {
display: flex;
  align-items: center;
  gap: 4px;
}
.header-icon-btn {
position: relative;
  background: none;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast);
}
.header-icon-btn:hover {
background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.header-avatar-btn {
background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: all var(--motion-fast);
}
.header-avatar-btn:hover {
background: rgba(255,255,255,0.06);
}
.header-avatar {
width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  color: var(--accent-on);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guest-user-menu {
display: flex;
  align-items: center;
  gap: 12px;
}
.guest-signin {
color: var(--text-secondary, #D8D9E2);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}
.guest-cta {
background: var(--accent, #7B4DFF);
  color: #07070B;
  border-radius: 8px;
  padding: 8px 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.header-user-menu {
position: relative;
  display: flex;
}
.header-user-dropdown {
display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 1002;
  overflow: hidden;
  animation: fadeSlideIn 0.15s ease;
}
.header-user-dropdown.open {
display: block;
}
.user-dropdown-header {
padding: 14px 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.user-dropdown-name {
font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #fff);
}
.user-dropdown-email {
font-size: 12px;
  color: var(--text-muted, #888);
}
.user-dropdown-divider {
height: 1px;
  background: var(--border-subtle, rgba(255,255,255,0.06));
  margin: 4px 0;
}
.user-dropdown-item {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--text-primary, #fff);
  text-decoration: none;
  transition: background 0.1s ease;
  cursor: pointer;
}
.user-dropdown-item:hover {
background: rgba(255,255,255,0.06);
}
.user-dropdown-item svg {
flex-shrink: 0;
  opacity: 0.6;
}
.user-dropdown-danger {
color: var(--color-status-red);
}
.user-dropdown-danger:hover {
background: rgba(239,68,68,0.1);
}
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sidebar {
width: var(--sidebar-w);
  background: rgba(7, 10, 16, 0.95);
  border-right: 1px solid var(--border-subtle);
  overflow-y: auto;
  height: calc(100vh - var(--header-h));
  position: fixed;
  top: var(--header-h);
  left: 0;
  padding: 12px 8px;
}
.sidebar[data-collapsed="true"] {
width: var(--sidebar-w-collapsed);
}
.sidebar[data-collapsed="true"] .sidebar-item-label,
.sidebar[data-collapsed="true"] .sidebar-group-label,
.sidebar[data-collapsed="true"] .sidebar-spacer,
.sidebar[data-collapsed="true"] .sidebar-footer {
display: none;
}
.sidebar[data-collapsed="true"] .sidebar-item {
justify-content: center;
  padding: 8px;
}
.sidebar[data-collapsed="true"] .sidebar-item-icon {
margin: 0;
}
.sidebar-item {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  transition: all var(--motion-fast);
  cursor: pointer;
  width: 100%;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
}
.sidebar-item:hover {
background: rgba(123, 77, 255, 0.06);
  color: var(--text-primary);
}
.sidebar-item.active {
background: rgba(123, 77, 255, 0.08);
  color: var(--accent);
}
.sidebar-spacer {
flex: 1; min-height: 12px;
}
.sidebar-footer {
border-top: 1px solid var(--border-subtle); padding-top: 8px; margin-top: 4px;
}
.sidebar-quick-stats {
display: flex;
  gap: 4px;
  padding: 4px 8px;
  margin-bottom: 4px;
}
.sidebar-stat {
flex: 1;
  background: var(--raised);
  border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  border-radius: var(--radius-sm, 6px);
  padding: 6px;
  text-align: center;
}
.sidebar-stat-value {
display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}
.sidebar-stat-label {
display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 1px;
}
.sidebar[data-collapsed="true"] .sidebar-quick-stats {
display: none;
}
.sidebar .sidebar-inner {
display: flex; flex-direction: column; height: 100%;
}
.sidebar-new-chat {
display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 16px);
  margin: 8px 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.sidebar-new-chat:hover {
background: var(--accent-hover, #6a3de8);
  border-color: var(--accent-hover, #6a3de8);
}
.sidebar-new-chat-icon {
display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sidebar-new-chat-label {
white-space: nowrap;
}
.sidebar[data-collapsed="true"] .sidebar-new-chat {
width: auto;
  margin: 8px auto;
  padding: 8px;
  justify-content: center;
}
.sidebar[data-collapsed="true"] .sidebar-new-chat-label {
display: none;
}
.card {
background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 24px;
  transition: all var(--motion-base);
}
.card:hover {
border-color: var(--accent-border);
  background: var(--bg-raised);
}
.card .card-icon {
font-size: 1.3rem;
  margin-bottom: 12px;
  display: block;
}
.card h3, .card h4 {
font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.card p {
font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}
.chat-messages {
display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 0 140px;
}
.chat-container .chat-messages {
flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.chat-container .chat-thinking {
padding: 8px 24px 0;
}
.chat-msg {
display: flex;
  gap: 10px;
  max-width: 85%;
}
.chat-msg.jama,
.chat-msg.ai {
align-self: flex-start;
}
.chat-msg.user {
align-self: flex-end; flex-direction: row-reverse;
}
.chat-avatar.ai {
background: rgba(123, 77, 255, 0.12);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.chat-avatar.user {
background: rgba(123, 77, 255, 0.12);
  color: var(--accent-purple);
  border: 1px solid rgba(123, 77, 255, 0.20);
}
.chat-bubble {
padding: 12px 16px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  word-wrap: break-word;
}
.chat-bubble.jama,
.chat-bubble.ai {
background: rgba(11, 13, 18, 0.70);
  border: 1px solid var(--border-subtle);
  color: var(--text-body);
  border-radius: 20px 20px 20px 4px;
}
.chat-bubble.user {
background: rgba(123, 77, 255, 0.10);
  border: 1px solid rgba(123, 77, 255, 0.16);
  color: var(--text-primary);
  border-radius: 20px 20px 4px 20px;
}
.chat-msg-content {
display: flex;
  flex-direction: column;
  gap: 4px;
}
.chat-timestamp {
font-size: 11px;
  color: var(--text-muted);
  opacity: 0.5;
  padding: 0 4px;
}
.chat-msg-avatar {
flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.jama-avatar-sm {
width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-thinking {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  animation: thinkPulse 1.5s ease-in-out infinite;
}
.chat-thinking-dots {
display: flex;
  gap: 4px;
}
.chat-thinking-dots span {
width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.4;
  animation: thinkDot 1.2s ease-in-out infinite;
}
.chat-thinking-dots span:nth-child(2) {
animation-delay: 0.2s;
}
.chat-thinking-status {
display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    letter-spacing: 0.04em;
}
.chat-thinking-step {
font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
}
.chat-thinking-dots span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes thinkDot {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}
.chat-thinking-text {
font-size: 13px;
  color: var(--text-muted);
  font-weight: 300;
}
.input-mode-indicator {
display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 4px 4px;
}
.input-mode-badge {
font-size: 10px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  background: rgba(123, 77, 255, 0.1);
  color: var(--accent);
  border: 0.5px solid rgba(123, 77, 255, 0.2);
}
.input-mode-badge.input-mode-project {
background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.2);
}
.input-bar-wrapper {
position: fixed;
  bottom: 0;
  left: var(--sidebar-w);
  right: 0;
  z-index: 40;
  padding: 8px 24px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(3,4,6,0.97) 30%);
  transition: opacity var(--motion-fast), transform var(--motion-fast);
}
.input-bar {
display: flex;
  align-items: flex-end;
  gap: 8px;
  background: rgba(11, 13, 18, 0.88);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 6px 6px 6px 12px;
  backdrop-filter: blur(18px);
  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}
.input-bar:focus-within {
border-color: var(--accent-border);
  box-shadow: 0 0 16px rgba(123, 77, 255, 0.10);
}
.input-field-wrap {
flex: 1;
  display: flex;
  align-items: center;
}
.input-field {
flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 300;
  font-family: var(--font-sans);
  outline: none;
  resize: none;
  min-height: 38px;
  max-height: 110px;
  line-height: 1.5;
  padding: 6px 0;
}
.input-field::placeholder {
color: var(--text-muted);
  font-weight: 300;
  opacity: 0.6;
}
.input-attach-btn,
.input-voice-btn,
.input-send-btn {
display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--motion-fast), background var(--motion-fast);
  flex-shrink: 0;
  padding: 0;
}
.input-attach-btn:hover,
.input-voice-btn:hover {
color: var(--text-secondary);
  background: rgba(255,255,255,0.04);
}
.input-send-btn {
background: var(--accent);
  color: var(--accent-on, #fff);
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
}
.input-send-btn:hover {
background: var(--accent-hover);
  filter: brightness(1.1);
}
.input-send-btn:disabled,
.input-attach-btn:disabled,
.input-voice-btn:disabled {
opacity: 0.4;
  cursor: not-allowed;
}
.input-chips {
display: flex;
  gap: 6px;
  padding: 8px 2px 0;
  flex-wrap: wrap;
}
.chip {
display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
  font-family: var(--font-sans);
  line-height: 1;
}
.chip:hover {
background: rgba(123, 77, 255, 0.10);
  color: var(--text-primary);
  border-color: var(--accent-border);
}
.chip svg {
flex-shrink: 0;
}
.input-bar-wrapper.is-loading .input-bar {
opacity: 0.6;
  pointer-events: none;
}
.input-bar-wrapper.thinking::after {
content: 'Jama is thinking…';
  position: absolute;
  top: -24px;
  left: 16px;
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  animation: thinking-pulse 1.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes thinking-pulse {
0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.modal-overlay {
position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.60);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
  display: flex;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--motion-base), visibility 0s var(--motion-base);
}
.modal-overlay.open {
visibility: visible;
  opacity: 1;
  transition: opacity var(--motion-base), visibility 0s 0s;
}
.modal-panel {
background: rgba(7, 10, 16, 0.92);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-xl);
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 0 40px rgba(123, 77, 255, 0.10), 0 25px 50px rgba(0, 0, 0, 0.50);
  transform: translateY(20px) scale(0.98);
  opacity: 0;
  transition: transform var(--motion-slow), opacity var(--motion-base);
}
.modal-overlay.open .modal-panel {
transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
}
.modal-grip {
display: none;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--border-medium);
  margin: 8px auto 0;
}
.show-mobile.modal-grip {
display: none;
}
.modal-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-header h2 {
font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
}
.modal-close {
width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast);
}
.modal-close:hover {
background: rgba(123, 77, 255, 0.08);
  color: var(--text-primary);
}
.modal-body {
padding: 24px;
}
.modal-panel-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.modal-panel-title {
font-size: 18px;
  font-weight: 400;
  color: var(--text-primary);
}
.modal-panel-close {
width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--motion-fast);
}
.modal-panel-close:hover {
background: rgba(123, 77, 255, 0.08);
  color: var(--text-primary);
}
.modal-panel-body {
padding: 24px;
  overflow-y: auto;
}
.modal-panel-footer {
display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-subtle);
}
.modal-form {
display: flex;
  flex-direction: column;
  gap: 20px;
}
.modal-field {
display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-label {
font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-input,
.modal-textarea {
background: var(--bg-surface);
  border: 0.5px solid var(--border-medium);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  padding: 12px 14px;
  outline: none;
  transition: all var(--motion-fast);
}
.modal-input:focus,
.modal-textarea:focus {
border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-tint);
}
.modal-input::placeholder,
.modal-textarea::placeholder {
color: var(--text-muted);
}
.modal-textarea {
resize: vertical;
  min-height: 72px;
  line-height: 1.5;
}
.modal-type-grid {
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 639px) {
.modal-type-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 639px) {
.form-row {
grid-template-columns: 1fr;
}
}
.modal-type-btn {
display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  cursor: pointer;
  transition: all var(--motion-fast);
}
.modal-type-btn:hover {
border-color: var(--accent-border);
  background: var(--accent-tint);
  color: var(--text-primary);
}
.modal-type-btn.active {
border-color: var(--accent);
  background: rgba(123, 77, 255, 0.08);
  color: var(--text-primary);
}
.modal-type-btn svg {
flex-shrink: 0;
  opacity: 0.7;
}
.modal-type-btn.active svg {
opacity: 1;
}
.modal-actions {
display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}
@media (max-width: 639px) {
.show-mobile {
display: block;
}
}
.grid-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.grid-3 {
display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;
}
.grid-4 {
display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 16px;
}
@media (max-width: 1023px) {
.grid-2, .grid-3, .grid-4 {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
}
#hm-btn {
display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  gap: 4px;
  padding: 8px;
  position: relative;
  z-index: 1001;
}
#hm-btn span {
display: block;
  width: 20px;
  height: 2px;
  background: var(--text-primary, #fff);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.stats-row {
display: flex;
  justify-content: center;
  gap: 40px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.stat {
text-align: center;
}
.stat-value {
font-size: 28px;
  font-weight: 200;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.stat-label {
font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
}
table {
width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13px;
}
th {
text-align: left;
  padding: 10px 12px;
  color: var(--text-muted);
  font-weight: 400;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(123, 77, 255, 0.03);
}
td {
padding: 10px 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.input {
width: 100%;
  background: var(--raised, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 300;
  font-family: var(--font-sans);
  outline: none;
  transition: all var(--motion-fast);
  caret-color: var(--accent, #8b5cf6);
}
.input::placeholder {
color: var(--text-muted, rgba(255,255,255,0.35));
}
.input:focus {
border-color: var(--accent-border);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 8px rgba(123, 77, 255, 0.06);
}
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 30px #1a1a2e inset !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  caret-color: var(--accent, #8b5cf6);
}
.section-divider {
border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: 0;
}
.section-divider-lg {
margin: 40px 0;
}
@media (max-width: 639px) {
.guest-signin {
display: none;
}
.guest-cta {
padding: 6px 10px; font-size: 12px;
}
.app-header .header-logo {
margin-left: 8px;
}
.header-icon-btn.rem-80 {
display: none;
}
}
@media (max-width: 639px) {
.app-shell {
margin-left: 0;
}
.sidebar {
display: none;
}
.context-panel {
display: none;
}
.app-shell.has-context .context-panel {
display: none;
}
#hm-btn {
display: flex;
}
.header-hamburger {
display: flex;
}
.header-search {
display: none;
}
.app-header .header-left {
position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 52;
}
.app-header .header-logo {
margin-right: 44px;
}
.main-content {
padding: 12px 12px;
}
.input-bar-wrapper {
left: 0;
    right: 0;
    padding: 6px 10px 10px;
}
.app-shell.has-context + .input-bar-wrapper,
  .app-shell.has-context ~ .input-bar-wrapper,
  .app-shell.has-context ~ * .input-bar-wrapper {
right: 0;
}
.input-chips {
gap: 4px; padding-top: 6px;
}
.chip {
font-size: 11px; padding: 4px 9px; gap: 4px;
}
.chip svg {
width: 12px; height: 12px;
}
.chat-msg-content {
max-width: 88%;
}
.chat-bubble {
font-size: 15px; padding: 10px 14px;
}
.input-field {
font-size: 15px; min-height: 40px;
}
.input-send-btn {
width: 40px; height: 40px;
}
.modal-overlay {
padding: 0; align-items: flex-end;
}
.modal-panel {
max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-grip {
display: block;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.footer-links {
flex-wrap: wrap; justify-content: flex-end; gap: 12px 18px;
}
.app-shell {
margin-left: 60px;
}
.app-shell[data-collapsed="false"] {
margin-left: 240px;
}
.sidebar {
width: 60px;
}
.sidebar[data-collapsed="false"] {
width: 240px;
}
.sidebar-item span {
display: none;
}
.sidebar[data-collapsed="false"] .sidebar-item span {
display: inline;
}
.sidebar[data-collapsed="false"] .sidebar-group-label {
display: block;
}
.sidebar-spacer {
display: none;
}
.sidebar[data-collapsed="false"] .sidebar-spacer {
display: block;
}
.sidebar-footer {
display: none;
}
.sidebar[data-collapsed="false"] .sidebar-footer {
display: flex;
}
.context-panel {
display: none;
}
.app-shell.has-context .context-panel {
display: none;
}
.input-bar-wrapper {
left: 60px;
    right: 0;
}
.app-shell.has-context + .input-bar-wrapper,
  .app-shell.has-context ~ .input-bar-wrapper,
  .app-shell.has-context ~ * .input-bar-wrapper {
right: 0;
}
#hm-btn {
display: flex;
}
.header-hamburger {
display: flex;
}
}
@media (min-width: 1024px) {
#hm-btn {
display: none !important;
}
.header-hamburger {
display: none !important;
}
.mobile-overlay {
display: none !important;
}
.mobile-panel {
display: none !important;
}
#mobileMenu {
display: none !important;
}
}
.onboarding-card {
max-width: 680px;
  margin: auto;
  padding: 40px 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 30px rgba(123, 77, 255, 0.04);
  text-align: center;
}
.onboarding-jama-icon {
width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-on);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 400;
  margin: 0 auto 16px;
}
.onboarding-title {
font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.onboarding-sub {
font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.6;
}
.wt-wrap {
max-width: 720px; margin: 0 auto; padding: 24px 16px 64px;
}
.wt-head {
margin-bottom: 20px;
}
.wt-title {
font-size: 24px; font-weight: 400; color: var(--text-primary); margin-bottom: 6px;
}
.wt-sub {
font-size: 14px; color: var(--text-secondary); line-height: 1.6;
}
.wt-steps {
display: flex; flex-direction: column; gap: 14px;
}
.wt-step {
background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
}
.wt-step-head {
display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.wt-step-num {
width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--accent-on);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.wt-step-title {
font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.wt-step-guide {
font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 10px;
}
.wt-step-guide a {
color: var(--accent); text-decoration: none;
}
.wt-stat-row {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.wt-stat {
background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 8px 12px; font-size: 12px; color: var(--text-secondary);
}
.wt-stat b {
color: var(--text-primary); font-weight: 600;
}
.wt-run-btn {
padding: 10px 18px; border-radius: var(--radius-md);
  border: none; cursor: pointer; font-family: inherit; font-size: 14px;
  background: var(--accent); color: var(--accent-on);
  transition: all var(--motion-fast);
}
.wt-run-btn:hover {
filter: brightness(1.12);
}
.wt-run-btn:disabled {
opacity: 0.55; cursor: default;
}
.wt-checks {
display: flex; flex-direction: column; gap: 8px; margin-top: 12px;
}
.wt-check {
display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px;
}
.wt-check-ok {
border-left: 3px solid var(--color-status-green, #22c55e);
}
.wt-check-fail {
border-left: 3px solid var(--color-status-red, #ef4444);
}
.wt-check-label {
color: var(--text-primary); font-weight: 500;
}
.wt-check-detail {
color: var(--text-muted); font-size: 12px; margin-top: 2px;
}
.wt-check .wt-dot {
width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0;
}
.wt-check-ok .wt-dot {
background: var(--color-status-green, #22c55e);
}
.wt-check-fail .wt-dot {
background: var(--color-status-red, #ef4444);
}
.wt-note {
font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.5;
}
.qc-result.active {
display: block;
}
.page-title {
font-size: 26px;
  font-weight: 200;
  color: var(--text-primary);
}
.onboarding-wrapper {
display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 20px;
}
.qc-loading.active {
display: block;
}
.project-grid {
display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
}
.project-card {
display: block;
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  text-decoration: none;
  transition: all var(--motion-fast);
}
.project-card:hover {
border-color: var(--accent);
  box-shadow: 0 0 20px rgba(123, 77, 255, 0.06);
}
.project-card-name {
font-size: 16px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.project-card-meta {
font-size: 12px;
  color: var(--text-muted);
}
.edit-toggle-btn {
bottom: 100px; right: 12px; width: 38px; height: 38px;
}
.edit-toggle-btn:hover {
background: rgba(123, 77, 255,0.15);
  transform: scale(1.05);
}
.edit-toggle-btn.is-active {
background: var(--accent);
  color: var(--bg-deep);
  box-shadow: 0 0 20px rgba(123, 77, 255,0.3);
}
.edit-toggle-btn svg {
width: 16px; height: 16px;
}
.edit-mode-bar {
display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow), var(--accent));
  background-size: 200% 100%;
  animation: edit-bar-shimmer 2s infinite linear;
}
body.edit-mode .edit-mode-bar {
display: block;
}
@keyframes edit-bar-shimmer {
0% { background-position: 200% 0;
}

100% {
    background-position: -200% 0;
}
}
body.edit-mode [data-edit] {
outline: 2px dashed rgba(123, 77, 255,0.5);
  outline-offset: 2px;
  border-radius: 4px;
  cursor: text;
  transition: outline 0.2s ease, background 0.2s ease;
  padding: 2px 4px;
}
body.edit-mode [data-edit]:hover {
outline-color: var(--accent);
  background: rgba(123, 77, 255,0.05);
}
body.edit-mode [data-edit]:focus {
outline-color: var(--accent);
  background: rgba(123, 77, 255,0.08);
  box-shadow: 0 0 12px rgba(123, 77, 255,0.15);
}
body.edit-mode [data-edit-img] {
outline: 2px dashed rgba(123, 77, 255,0.5);
  outline-offset: 2px;
  border-radius: 6px;
  cursor: pointer;
  transition: outline 0.2s ease;
}
body.edit-mode [data-edit-img]:hover {
outline-color: var(--accent);
  filter: brightness(1.1);
}
.edit-actions {
top: 8px; left: 8px; right: 8px; transform: none; width: auto; flex-wrap: wrap; justify-content: center;
}
body.edit-mode .edit-actions {
display: flex;
}
.edit-actions-btn {
padding: 6px 18px;
  border-radius: 8px;
  border: none;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.edit-actions-btn.save {
background: var(--accent);
  color: var(--bg-deep);
}
.edit-actions-btn.save:hover {
filter: brightness(1.15);
}
.edit-actions-btn.save:disabled {
opacity: 0.4; cursor: not-allowed;
}
.edit-actions-btn.cancel {
background: transparent;
  color: var(--text-secondary, #999);
  border: 0.5px solid rgba(255,255,255,0.1);
}
.edit-actions-btn.cancel:hover {
background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.edit-actions-status {
font-size: 12px;
  color: var(--text-muted, #666);
  margin-left: 8px;
}
.edit-actions-status.saving {
color: var(--accent);
}
.edit-actions-status.success {
color: var(--emerald);
}
.edit-actions-status.error {
color: var(--status-red);
}
.welcome-bubble {
background: linear-gradient(135deg, rgba(123, 77, 255,0.15), rgba(123, 77, 255,0.05)) !important;
  border: 0.5px solid rgba(123, 77, 255,0.2) !important;
}
.chat-header {
padding: 16px 4px 12px; margin-bottom: 0;
}
.chat-messages {
padding: 4px 0 12px;
}
.chat-thinking {
gap: 10px; padding: 8px 16px; margin: 4px 0;
}
.chat-thinking-dots span {
background: var(--accent) !important;
}
.chat-thinking-text {
font-size: 13px;
  color: var(--accent) !important;
  font-weight: 400;
}
.chat-timestamp {
color: var(--text-muted); font-size: 11px; margin-top: 4px;
}
@media (max-width: 639px) {
.chat-header {
padding: 10px 0;
}
.chat-header-name {
font-size: 15px;
}
.jama-avatar {
width: 34px; height: 34px; font-size: 16px;
}
.chat-bubble {
font-size: 14px; padding: 10px 14px;
}
.welcome-bubble p:first-child {
font-size: 16px !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.chat-header {
padding: 14px 4px 12px;
}
}
.ctx-tab.active {
color: var(--accent);
  border-bottom-color: var(--accent);
}
.ctx-tab:hover:not(.active) {
color: var(--text-secondary);
}
@supports (-webkit-touch-callout: none) {
.chat-messages {
height: -webkit-fill-available;
}
}
.tab-content {
display: none;
    padding: var(--space-md) 0;
    animation: fadeIn 0.2s ease;
}
.tab-content.active {
display: block;
}
.tabs {
display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
display: none;
}
.tab {
padding: 12px 20px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  flex: 0 0 auto;
}
.tab:hover {
color: var(--text-secondary);
}
.tab.active {
color: var(--accent);
  border-bottom-color: var(--accent);
}
.section-label {
font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.flex-between {
display: flex;
  align-items: center;
  justify-content: space-between;
}
.mb-lg {
margin-bottom: 24px;
}
.btn-danger {
background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-danger:hover {
border-color: rgba(231,76,60,0.4); color: rgba(231,76,60,0.7);
}
.btn-sm {
padding: 8px 16px;
  font-size: 12px;
}
.badge {
display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  letter-spacing: 0.04em;
}
.badge-accent {
background: var(--accent-tint);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.badge-muted {
background: rgba(166,169,184,0.06);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge-green {
background: rgba(52,211,153,0.1);
  color: var(--status-green);
  border: 1px solid rgba(52,211,153,0.2);
}
.task-item {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(166,169,184,0.08);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.task-check {
width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  background: transparent;
  font-size: 11px;
  transition: all 0.15s;
}
.task-check.completed {
border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
}
.task-check:hover {
border-color: var(--accent);
}
.task-desc {
flex: 1;
}
.task-desc.completed {
color: var(--accent); text-decoration: line-through;
}
.task-delete {
opacity: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.task-item:hover .task-delete {
opacity: 1;
}
.task-delete:hover {
color: var(--status-red, var(--status-red));
}
.jama-welcome-card {
border: 0.5px solid var(--accent-border);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.jama-welcome-msg {
display: flex;
  gap: 12px;
  align-items: flex-start;
}
.jama-welcome-avatar {
flex-shrink: 0;
}
.jama-avatar-tiny {
width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-on);
}
.jama-welcome-text {
flex: 1;
}
.project-chat-messages {
margin-bottom: 16px;
  max-height: 400px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0;
}
.project-chat-messages .chat-msg {
display: flex;
  gap: 8px;
  animation: msg-slide-in 0.2s ease-out;
}
.project-chat-messages .chat-msg.user {
flex-direction: row-reverse;
}
.project-chat-messages .chat-msg-avatar {
align-self: flex-end;
  flex-shrink: 0;
}
.project-chat-messages .chat-msg.user .chat-msg-avatar {
display: none;
}
.project-chat-messages .chat-msg-content {
max-width: 85%;
  display: flex;
  flex-direction: column;
}
.project-chat-messages .chat-msg.user .chat-msg-content {
align-items: flex-end;
}
.project-chat-messages .chat-bubble {
padding: 10px 14px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.project-chat-messages .chat-bubble.user {
background: var(--accent);
  color: var(--accent-on);
  border-radius: 16px 4px 16px 16px;
}
.project-chat-messages .chat-bubble.jama,
.project-chat-messages .chat-bubble.ai,
.project-chat-messages .chat-bubble.assistant {
background: var(--raised);
  color: var(--text-primary);
  border: 0.5px solid var(--border);
  border-radius: 4px 16px 16px 16px;
}
.project-chat-messages .chat-time {
font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
  padding: 0 4px;
}
.build-card {
border: 0.5px solid var(--text-muted);
  border-radius: 8px;
  margin-bottom: 16px;
  background: var(--surface);
  overflow: hidden;
}
.build-card-body {
padding: 16px;
}
.build-card-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.build-card-version {
font-size: 15px;
  font-weight: 200;
  color: var(--text-primary);
}
.build-card-pages-count {
font-size: 12px;
  color: var(--text-muted);
  margin-left: 8px;
}
.build-card-actions {
display: flex;
  gap: 8px;
  align-items: center;
}
.build-card-live-link {
padding: 8px 16px;
  font-size: 12px;
  text-decoration: none;
  border: 0.5px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  background: rgba(245,158,11,0.08);
}
.build-card-page-btn {
font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 14px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.build-card-page-btn:hover {
border-color: var(--accent);
  color: var(--accent);
}
.build-card-pages {
display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.build-preview-close-btn {
background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.build-page-btn.active {

}
.build-preview-container {
border-top: 1px solid var(--border);
  background: #fff;
  position: relative;
  min-height: 400px;
}
.build-preview-iframe {
width: 100%;
  border: none;
  min-height: 400px;
}
.preview-loading {
display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: #fff;
  color: #888;
  font-size: 13px;
}
@keyframes msg-slide-in {
from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.si-icon,
.si-label {
display: inline-flex; align-items: center;
}
.si-icon {
margin-right: 0.25rem;
}
.si-label {
gap: 0.25rem;
}
.page-breadcrumb {
display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted, #999);
}
.page-header {
font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem;
}
.page-desc {
font-size: 0.875rem; color: var(--text-muted, #999); margin-bottom: 1rem;
}
.no-underline {
text-decoration: none;
}
.no-underline:hover {
text-decoration: underline;
}
.admin-nav-link {
display: block; padding: 0.5rem 0.75rem; color: var(--text-primary, #fff); text-decoration: none; border-radius: 0.375rem; transition: background 0.15s;
}
.admin-nav-link:hover {
background: rgba(123, 77, 255, 0.1);
}
.wc-bad {
color: var(--color-status-red);
}
.wc-good {
color: var(--color-status-green);
}
.field-input {
width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem; background: var(--bg-input, #1a1a1e); color: var(--text-primary, #fff);
}
.form-input {
width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); border-radius: 0.375rem;
}
.heading-3 {
font-size: 1.125rem; font-weight: 600;
}
.text-muted {
color: var(--text-muted, #999);
}
.uppercase {
text-transform: uppercase;
}
.sidebar-divider {
height: 1px; background: var(--border-color); margin: 0.5rem 0;
}
.msg-action-btn {
display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--text-muted, #999); cursor: pointer; border-radius: 0.375rem; transition: background 0.15s, color 0.15s;
}
.msg-action-btn:hover {
background: rgba(123, 77, 255, 0.1); color: var(--accent);
}
.form-header {
font-size: 1.125rem; font-weight: 600; margin-bottom: 1rem;
}
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.overflow-hidden {
overflow: hidden;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.chat-msg-actions {
display: flex; gap: 0.25rem; margin-top: 0.25rem;
}
.like-btn {
background: none; border: none; cursor: pointer; color: var(--text-muted, #999); padding: 0.25rem;
}
.like-btn.liked {
color: var(--accent);
}
.edi-badge {
display: inline-flex; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500;
}
.edi-badge.success {
background: #166534; color: #86efac;
}
.edi-badge.pending {
background: #713f12; color: #fde68a;
}
.edi-badge.error {
background: #7f1d1d; color: #fca5a5;
}
.current_status {
font-size: 0.875rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 0.25rem;
}
.chat-inbox-section {
padding: 0.5rem 0;
}
.chat-inbox-section-label {
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #999); padding: 0.25rem 0.75rem;
}
.chat-inbox-empty {
text-align: center; padding: 2rem; color: var(--text-muted, #999); font-size: 0.875rem;
}
.msg-avatar {
width: 2rem; height: 2rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.75rem; flex-shrink: 0;
}
.msg-avatar-icon {
font-size: 1rem;
}
.msg-content {
flex: 1; min-width: 0;
}
.msg-role {
font-size: 0.8rem; font-weight: 600; color: var(--text-primary, #fff);
}
.msg-bubble {
padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--bg-card); line-height: 1.5;
}
.msg-text {
font-size: 0.875rem; color: var(--text-primary, #fff);
}
.msg-time {
font-size: 0.7rem; color: var(--text-muted, #999); margin-top: 0.25rem;
}
.user-bubble {
background: var(--accent); color: var(--accent-on);
}
.jama-actions {
display: flex; gap: 0.25rem; margin-top: 0.25rem;
}
.modal-loading {
display: flex; align-items: center; justify-content: center; padding: 3rem; color: var(--text-muted, #999);
}
.notifications-empty {
text-align: center; padding: 2rem; color: var(--text-muted, #999); font-size: 0.875rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.loading-dots::after {
content: '...'; animation: dots 1.5s steps(4, end) infinite;
}
@keyframes dots {
0%, 20% { content: ''; } 40% { content: '.'; } 60% { content: '..'; } 80%, 100% { content: '...'; }
}
.edi-table {
width: 100%; border-collapse: collapse;
}
.edi-table th, .edi-table td {
padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 0.875rem;
}
.edi-table th {
font-weight: 600; color: var(--text-muted, #999); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;
}
.edi-table tr:hover td {
background: rgba(123, 77, 255, 0.03);
}
.stat-row {
display: flex; gap: 1rem; flex-wrap: wrap;
}
.stat-lbl {
font-size: 0.75rem; color: var(--text-muted, #999); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 500;
}
.founder-nav-item {
display: block; padding: 0.5rem 0.75rem; color: var(--text-muted, #999); text-decoration: none; font-size: 0.875rem; border-radius: 0.375rem; transition: background 0.15s;
}
.founder-nav-item:hover {
background: rgba(123, 77, 255, 0.08); color: var(--text-primary, #fff);
}
.admin-nav-divider {
height: 1px; background: var(--border-color); margin: 0.5rem 0.75rem;
}
.qs-platform-tabs {
display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.migration-upload {
border: 2px dashed var(--border-color); border-radius: 0.5rem; padding: 2rem; text-align: center;
}
.migration-result__errors {
font-size: 0.8rem; color: var(--color-status-red); margin-top: 0.5rem;
}
.active_filter {
background: var(--accent); color: var(--accent-on);
}
.block {
position: relative;
}
@keyframes btn-spin {
to { transform: rotate(360deg); }
}
.body_class {

}
.catalog-item {
padding: 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem; transition: border-color 0.15s;
}
.catalog-item:hover {
border-color: var(--accent);
}
.chat-inbox {
flex: 1; overflow-y: auto; padding: 0.5rem;
}
.chat-inbox-active {
background: rgba(123, 77, 255, 0.08); border-radius: 0.375rem;
}
.chat-inbox-body {
flex: 1; overflow-y: auto;
}
.chat-inbox-header {
display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color);
}
.chat-inbox-footer {
padding: 0.75rem 1rem; border-top: 1px solid var(--border-color);
}
.chat-inbox-threads {
list-style: none; padding: 0; margin: 0;
}
.chat-inbox-thread {
display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; cursor: pointer;
}
.chat-inbox-count {
font-size: 0.75rem; color: var(--accent); font-weight: 600; margin-left: auto;
}
.chat-inbox-title-row {
display: flex; align-items: center; gap: 0.5rem;
}
.chat-inbox-project-name {
font-size: 0.7rem; color: var(--text-muted, #999);
}
.chat-inbox-last-msg {
font-size: 0.8rem; color: var(--text-muted, #999); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-inbox-toggle {
background: none; border: none; color: var(--text-muted, #999); cursor: pointer; font-size: 0.875rem; padding: 0.25rem;
}
.chat-inbox-view-all {
display: block; text-align: center; padding: 0.5rem; font-size: 0.8rem; color: var(--accent); text-decoration: none;
}
.checklist {
display: flex; flex-direction: column; gap: 0.5rem;
}
.compliance_trend {
font-size: 0.8rem; padding: 0.125rem 0.375rem; border-radius: 0.25rem;
}
.count {
font-variant-numeric: tabular-nums;
}
.dot {
width: 0.375rem; height: 0.375rem; border-radius: 9999px; display: inline-block;
}
.dots {
display: flex; gap: 0.25rem;
}
.founder-hero {
padding: 4rem 1.5rem; text-align: center;
}
.founder-mission {
max-width: 36rem; margin: 0 auto; font-size: 1rem; line-height: 1.75;
}
.founder-nav {
display: flex; align-items: center; gap: 1.5rem; padding: 1rem 1.5rem;
}
.founder-nav-logo {
font-weight: 700; font-size: 1.125rem;
}
.founder-nav-mark {
display: inline-flex; align-items: center; gap: 0.375rem;
}
.founder-nav-text {
font-size: 0.875rem; color: var(--text-muted, #999);
}
.founder-page {
max-width: 48rem; margin: 0 auto; padding: 0 1.5rem;
}
.founder-quote {
font-style: italic; font-size: 1.125rem; line-height: 1.75; color: var(--text-muted); border-left: 3px solid var(--accent); padding-left: 1rem; margin: 1.5rem 0;
}
.blog-page {
padding-top: 16px;
  
  max-width: none;
  margin: 0;
}
.blog-page .section-label {
margin-bottom: 4px;
  font-size: 11px;
  font-weight: 300;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.blog-card .meta {
font-size: 10px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.empty-state {
text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
  font-size: 13px;
}
.blog-article-body {
font-size: 1rem;
  line-height: 1.75;
  color: var(--text-primary, #e8e4df);
}
.blog-article-body p {
margin-bottom: 1.25rem;
}
.blog-article-body h2 {
font-size: 1.5rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
}
.blog-article-body h3 {
font-size: 1.2rem;
  font-weight: 500;
  margin: 1.5rem 0 0.5rem;
}
.blog-article-body ul, .blog-article-body ol {
margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}
.blog-article-body li {
margin-bottom: 0.5rem;
}
.back-link {
font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 16px;
}
.back-link:hover {
color: var(--accent, var(--accent));
}
.quality-dot.ok {
background: #eab308;
}
.not-found {
text-align: center;
  padding: 80px 24px;
}
.not-found-title {
font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.not-found-text {
font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
.blog-page {
padding-top: 32px;
}
}
body {
overflow-x: hidden !important;
  overflow-y: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}
.nav-public {
position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  height: 64px;
  background: rgba(7, 7, 11, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(166,169,184,0.08);
}
.nav-logo {
display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text-primary);
}
.nav-logo-mark {
width: 28px;
  height: 28px;
  background: var(--accent);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--accent-text);
}
.nav-logo-text {
font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
}
.nav-links {
display: flex;
  gap: 24px;
  align-items: center;
}
.nav-group {
display: flex;
  align-items: center;
  gap: 24px;
}
.nav-link {
color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.15s;
}
.nav-link:hover {
color: var(--text-primary);
}
.nav-cta {
display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: var(--accent-text);
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.nav-cta:hover {
background: var(--accent-mid);
  transform: translateY(-1px);
}
.landing-badge-pulse {
display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(123, 77, 255, 0.12);
  border: 1px solid rgba(123, 77, 255, 0.3);
  border-radius: 100px;
  padding: 6px 16px 6px 8px;
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  animation: badgePulse 2.5s ease-in-out infinite;
  margin-bottom: 20px;
}
.landing-badge-dot {
display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes badgePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(123, 77, 255, 0); }
  50% { box-shadow: 0 0 12px 2px rgba(123, 77, 255, 0.25); }
}
@keyframes dotPulse {
0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}
.proof-row {
display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}
.proof-stat {
display: flex;
  flex-direction: column;
}
.proof-number {
font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.proof-label {
font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.proof-divider {
width: 1px;
  height: 36px;
  background: var(--border);
}
.demo-card {
background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.demo-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}
.demo-body {
flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-msg-user {
font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--text-muted);
}
.demo-task {
display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(166,169,184,0.08);
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.demo-task.demo-task-active {
background: rgba(123,77,255,0.08);
  border-color: rgba(123,77,255,0.25);
  color: var(--text-primary);
}
.demo-task-check {
width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}
.demo-task-check-done {
background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
.demo-input {
padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}
.badge {
font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
}
.badge-accent {
background: var(--accent-tint);
  color: var(--accent);
}
.section-label {
font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.step-card {
display: flex;
  flex-direction: column;
}
.step-number {
font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.tab {
background: none;
  border: none;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.footer {
border-top: 1px solid rgba(166,169,184,0.08);
  padding: 24px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 40px;
}
.footer-links {
display: flex;
  gap: 20px;
}
.footer-links a {
color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-links a:hover {
color: var(--text-secondary);
}
@media (min-width: 640px) and (max-width: 1023px) {
.nav-public {
padding: 0 24px;
}
.nav-links {
gap: 16px;
}
.nav-links a,
  .nav-link {
font-size: 13px;
}
.nav-cta {
font-size: 12px;
    padding: 8px 16px;
}
.features-grid .card.featured {
grid-column: span 2 !important;
}
.demo-card {
max-width: 100%;
}
.proof-row {
gap: 20px;
}
.proof-number {
font-size: 24px;
}
.heading-xl {
font-size: clamp(28px, 4vw, 42px);
}
.footer {
padding: 20px 28px;
}
}
@media (max-width: 639px) {
.footer {
flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 16px;
    font-size: 13px;
}
.footer-links {
flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
}
.footer-links a {
font-size: 13px;
    padding: 4px 2px;
}
.nav-public {
padding: 0 16px;
}
.nav-links,
  .nav-public .nav-links {
display: none;
}
.nav-cta {
display: none;
}
.hero-ctas .btn-primary,
  .hero-ctas .btn-ghost {
width: 100%;
    justify-content: center;
}
.landing-badge-pulse {
margin-bottom: 12px;
    font-size: 12px;
    padding: 5px 12px 5px 6px;
}
.proof-row {
flex-wrap: wrap;
    gap: 12px;
    row-gap: 16px;
}
.proof-divider {
display: none;
}
.proof-stat {
min-width: calc(50% - 12px);
}
.proof-number {
font-size: 22px;
}
.proof-label {
font-size: 11px;
}
.demo-card {
border-radius: var(--radius-md);
}
.demo-header {
padding: 10px 14px;
}
.demo-body {
padding: 14px;
    gap: 10px;
}
.demo-msg-user {
font-size: 12px;
    padding: 8px 10px;
}
.demo-task {
font-size: 12px;
    padding: 8px 10px;
    gap: 8px;
}
.demo-input {
padding: 10px 14px;
    font-size: 11px;
}
.features-grid .card.featured {
grid-column: span 1 !important;
}
.features-grid .card {
padding: 20px 16px !important;
}
.section .card {
padding: 20px 16px !important;
}
.footer {
flex-direction: column;
    gap: 12px;
    padding: 20px;
    text-align: center;
}
.footer-links {
gap: 16px;
}
#pricing-section > div > div[style*="repeat(auto-fit,minmax(280px,1fr))"] > div {
padding: 20px 16px !important;
}
.auth-card .heading-xl {
font-size: 26px;
}
.heading-xl {
font-size: 28px;
}
}
.nav-bar .nav-links {
display: flex; gap: 24px; align-items: center;
}
.nav-bar .nav-links a {
color: var(--text-secondary); text-decoration: none; font-size: 14px;
}
.nav-bar .nav-links a:hover {
color: var(--text-primary);
}
.container {
max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}
.cta-button {
display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-on);
  padding: 16px 40px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}
.cta-button:hover {
background: var(--accent-mid);
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(196,168,106,0.3);
}
.how-it-works {
padding: 80px 0;
  text-align: center;
}
.how-it-works h2 {
font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 48px;
}
.steps {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.step-num {
width: 40px;
  height: 40px;
  background: rgba(196,168,106,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-weight: 700;
  color: var(--accent);
  font-size: 18px;
}
.benefits {
padding: 80px 0;
}
.benefits h2 {
text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 48px;
}
.benefit-icon {
font-size: 28px; line-height: 1; flex-shrink: 0;
}
.cta-section .cta-button {
padding: 18px 48px;
  font-size: 18px;
}
@media (max-width: 639px) {
.steps, .benefits-grid {
grid-template-columns: 1fr;
}
.nav-bar .nav-links a:not(.cta-nav) {
display: none;
}
}
.container > .hero-section {
text-align: center;
  padding: 80px 0 40px;
}
.container > .hero-section h1 {
font-size: 48px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.container > .hero-section h1 span {
color: var(--accent);
}
.container > .hero-section p {
font-size: 18px;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 32px;
}
.container > .steps {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 48px 0;
}
.container > .steps .step-card {
background: var(--bg-surface);
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.container > .steps .step-number {
width: 40px;
  height: 40px;
  background: rgba(196,168,106,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-weight: 700;
  color: var(--accent);
  font-size: 18px;
}
.container > .steps .step-card h3 {
color: var(--text-primary); margin-bottom: 8px; font-size: 16px;
}
.container > .steps .step-card p {
color: var(--text-secondary); font-size: 14px;
}
.container .cta-button {
display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--accent-on);
  padding: 16px 40px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
  margin: 24px 0;
}
.container .cta-button:hover {
background: var(--accent-mid);
  transform: translateY(-1px);
  box-shadow: 0 0 30px rgba(196,168,106,0.3);
}
.container .cta-button:disabled {
opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.container .cta-button .spinner {
display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cta-spin 0.6s linear infinite;
}
.container .cta-button.loading .spinner {
display: inline-block;
}
.container .cta-button.loading .btn-text {
display: none;
}
@keyframes cta-spin {
to { transform: rotate(360deg); }
}
.container > .benefits {
display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 48px 0;
}
.container > .benefits .benefit-item {
display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
  border-radius: 12px;
}
.container > .benefits .benefit-icon {
font-size: 24px; line-height: 1;
}
.container > .benefits .benefit-item h4 {
color: var(--text-primary); font-size: 15px; margin-bottom: 4px;
}
.container > .benefits .benefit-item p {
color: var(--text-secondary); font-size: 13px;
}
.connected-badge {
display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(46,204,138,0.15);
  color: var(--status-green);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin: 16px 0;
}
.fb-badge {
background: rgba(24,119,242,0.15);
  color: #1877F2;
}
.status-message {
padding: 16px 20px;
  border-radius: 12px;
  margin: 16px 0;
  font-size: 14px;
}
.status-success {
background: rgba(46,204,138,0.1);
  border: 1px solid rgba(46,204,138,0.2);
  color: var(--status-green);
}
.status-error {
background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.2);
  color: var(--status-red);
}
.container > .results {
display: none;
  margin: 32px 0;
}
.container > .results.visible {
display: block;
}
.container > .result-stats {
display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.container > .result-stats .stat-card {
background: var(--bg-surface);
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 24px;
  text-align: center;
}
.container > .result-stats .stat-value {
font-size: 32px; font-weight: 800; color: var(--accent);
}
.container > .result-stats .stat-label {
color: var(--text-secondary); font-size: 13px; margin-top: 4px;
}
.container > .cross-sell {
display: flex;
  gap: 16px;
  margin: 32px 0;
}
.container > .cross-sell .cross-sell-card {
flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.container > .cross-sell .cross-sell-card h4 {
color: var(--text-primary); font-size: 14px; margin-bottom: 8px;
}
.container > .cross-sell .cross-sell-card p {
color: var(--text-secondary); font-size: 13px; margin-bottom: 12px;
}
.container > .cross-sell .cross-sell-card a {
color: var(--accent); font-size: 13px; text-decoration: none;
}
.container > .cross-sell .cross-sell-card a:hover {
text-decoration: underline;
}
.container ~ .footer {
text-align: center;
  padding: 48px 0;
  border-top: 1px solid var(--border-subtle);
  margin-top: 64px;
  color: var(--text-secondary);
  font-size: 13px;
}
.container ~ .footer a {
color: var(--accent); text-decoration: none;
}
@media (max-width: 639px) {
.container > .steps,
  .container > .benefits,
  .container > .result-stats,
  .container > .cross-sell {
grid-template-columns: 1fr;
}
.container > .cross-sell {
flex-direction: column;
}
.container > .hero-section h1 {
font-size: 32px;
}
}
.wc-comparison {
padding: 4rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
}
.wc-comparison__grid {
display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 639px) {
.wc-comparison__grid {
grid-template-columns: 1fr;
}
}
.wc-comparison__col {
padding: 2rem;
  border-radius: 8px;
}
.wc-comparison__col--bad {
background: rgba(255, 77, 109, 0.05);
  border: 1px solid rgba(255, 77, 109, 0.12);
}
.wc-comparison__col--good {
background: rgba(68, 215, 168, 0.05);
  border: 1px solid rgba(68, 215, 168, 0.12);
}
.wc-comparison__header {
display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wc-border);
}
.wc-comparison__header h3 {
font-size: 18px;
  font-weight: 300;
  margin: 0;
}
.wc-platform-icon {
font-size: 32px;
  line-height: 1;
}
.wc-comparison__list {
list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.wc-comparison__list li {
display: flex;
  gap: 12px;
  align-items: flex-start;
}
.wc-comparison__list li strong {
display: block;
  font-weight: 400;
  margin-bottom: 2px;
}
.wc-comparison__list li p {
margin: 0;
  font-size: 13px;
  line-height: 1.6;
}
.wc-icon {
font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}
.wc-bad .wc-icon {
color: var(--wc-bad);
}
.wc-bad p {
color: var(--wc-text-muted);
}
.wc-good .wc-icon {
color: var(--wc-good);
}
.wc-good p {
color: var(--wc-text-secondary);
}
.wc-pipeline {
padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.wc-pipeline__steps {
display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.wc-step {
display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 2rem;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
}
@media (max-width: 639px) {
.wc-step {
grid-template-columns: 1fr;
}
}
.wc-step__number {
width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: var(--wc-accent);
  background: var(--wc-accent-glow);
  border-radius: 50%;
}
.wc-step__title {
font-size: 20px;
  font-weight: 400;
  margin: 0 0 0.5rem;
}
.wc-step__desc {
font-size: 14px;
  color: var(--wc-text-secondary);
  margin: 0 0 1rem;
  line-height: 1.7;
}
.wc-step__code {
background: var(--wc-raised);
  border: 1px solid var(--wc-border);
  border-radius: 6px;
  overflow: hidden;
}
.wc-step__code pre {
margin: 0;
  padding: 1rem 1.25rem;
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
  color: var(--wc-text-secondary);
}
.wc-table-section {
padding: 4rem 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.wc-table-wrapper {
overflow-x: auto;
}
.wc-table {
width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.wc-table th,
.wc-table td {
padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--wc-border);
}
.wc-table th {
font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wc-text-muted);
}
.wc-table thead th:first-child {
width: 180px;
}
.wc-feature {
font-weight: 400;
  color: var(--wc-text);
}
.wc-col-bad {
color: var(--wc-bad);
}
.wc-col-good {
color: var(--wc-good);
}
.wc-cell-good {
color: var(--wc-good);
}
.wc-table tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}
.wc-extensibility {
padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.wc-code-block {
text-align: left;
  background: var(--wc-surface);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  overflow: hidden;
  margin: 2rem 0;
}
.wc-code-block pre {
margin: 0;
  padding: 1.5rem;
  font-size: 13px;
  line-height: 1.8;
  overflow-x: auto;
  color: var(--wc-text-secondary);
}
.wc-code-comment {
color: var(--wc-text-muted); font-style: italic;
}
.wc-keyword {
color: var(--wc-accent);
}
.wc-class {
color: #44D7A8;
}
.wc-function {
color: #7EB8FF;
}
.wc-string {
color: #FFB86C;
}
.wc-extensibility__note {
font-size: 13px;
  color: var(--wc-text-secondary);
  line-height: 1.8;
}
.wc-extensibility__note code {
background: var(--wc-raised);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: var(--wc-accent);
}
.adaptive-grid {
display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 260px), 1fr));
}
.ai-chat .chat-messages {
flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-chat .chat-msg {
max-width: 80%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
}
.ai-chat .chat-msg.user {
align-self: flex-end;
  background: var(--accent);
  color: white;
  border-radius: 16px 4px 16px 16px;
}
.ai-chat .chat-msg.assistant,
.ai-chat .chat-msg.ai,
.ai-chat .chat-msg.jama {
align-self: flex-start;
  background: var(--raised);
  color: var(--text-primary);
  border-radius: 4px 16px 16px 16px;
  border: 0.5px solid var(--border);
}
@media (max-width: 639px) {
.ai-chat .chat-msg {
max-width: 90%;
    font-size: 15px;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.ai-chat .chat-msg {
max-width: 75%;
}
}
@media (max-width: 639px) {
.input-field, .input-bar input, .input-bar textarea,
  .chat-input, input[type="text"], input[type="email"], input[type="password"],
  textarea {
font-size: 16px !important;
}
}
@media (max-width: 1023px) {
.chat-messages, .project-chat-messages, .chatlog {
padding-bottom: calc(var(--input-h, 68px) + 96px) !important;
}
}
@media (max-width: 1023px) {
h1, h2, h3, section, [id] {
scroll-margin-top: 72px;
}
main, .app-main, .page-content {
padding-top: 8px;
}
}
.hover-accent:hover {
color: var(--accent);
}
.hover-text-primary:hover {
color: var(--color-text-primary);
}
@media (max-width: 639px) {
.grid-2, .grid-3, .grid-4,
  .features-grid, .feature-grid, .feature-cards,
  .steps, .step-grid, .benefits-grid, .benefit-grid,
  .result-stats, .stats-grid, .stat-grid, .stat-cards,
  .blog-grid, .blog-post-grid, .blog-related-grid, .related-grid,
  .eos-steps, .eos-features, .eos-blog, .eos-pricing,
  .wc-comparison__grid, .pricing-grid, .plans-grid,
  .team-grid, .testimonials-grid, .reviews-grid, .gallery-grid,
  .modal-type-grid, .form-row, .ops-grid-2, .invoice-create-grid,
  .col-2, .col-3, .col-4, .columns-2, .columns-3, .columns-4 {
grid-template-columns: 1fr !important;
}
.row {
flex-direction: column !important;
}
.flex-row {
flex-direction: column !important;
}
.d-flex {
flex-wrap: wrap !important;
}
}
@media (min-width: 640px) and (max-width: 1023px) {
.grid-3, .grid-4, .features-grid, .steps, .benefits-grid,
  .eos-steps, .eos-features, .eos-blog, .eos-pricing,
  .blog-grid, .blog-post-grid, .related-grid, .team-grid,
  .testimonials-grid, .reviews-grid, .gallery-grid,
  .col-3, .col-4, .columns-3, .columns-4 {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.auth-heading {
font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  color: var(--text-primary, #F0F0F5);
  text-align: center;
  margin: 0 0 16px;
}
.auth-card .logo-text .accent {
color: var(--accent);
}
.flash-message {
padding: 12px 16px;
  border-radius: var(--radius-sm, 10px);
  margin-bottom: 16px;
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.nav-logo {
display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.nav-logo-mark {
width: 32px;
  height: 32px;
  background: var(--accent, #7B4DFF);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.nav-logo-text {
font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.nav-links {
display: flex;
  align-items: center;
  gap: 24px;
}
.nav-link {
font-size: 13px;
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.tab-bar .tab {
flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
}
.tab-bar .tab.active {
color: var(--text-primary);
  border-bottom-color: var(--accent);
}
.tab-bar .tab:hover {
color: var(--text-secondary);
}
.form-group {
margin-bottom: 18px;
  text-align: left;
}
.form-group label {
display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"] {
width: 100%;
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.form-group input:focus {
border-color: var(--accent);
}
.form-actions {
grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.remember-checkbox {
display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.remember-checkbox input[type="checkbox"] {
accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.flash-message {
padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  margin-bottom: 16px;
  text-align: center;
}
.flash-message.error {
background: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid rgba(231, 76, 60, 0.2);
}
.flash-message.success {
background: rgba(46, 204, 138, 0.1);
  color: #2ecc8a;
  border: 1px solid rgba(46, 204, 138, 0.2);
}
.nav-public .nav-logo {
display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.nav-public .nav-logo-mark {
width: 32px;
  height: 32px;
  background: var(--accent);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.nav-public .nav-logo-text {
font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
:root {
--color-base:#07070B;
  --color-surface:#0E1018;
  --color-raised:#13152A;
  --color-accent:#7B4DFF;
  --color-accent-hover:#9C6BFF;
  --color-accent-tint:rgba(123,77,255,.08);
  --color-text-primary:#D8D9E2;
  --color-text-secondary:rgba(168,169,184,.75);
  --color-text-muted:rgba(168,169,184,.72);
  --color-border:rgba(255,255,255,.08);
  --color-border-subtle:rgba(255,255,255,.04);
  --color-status-green:#2ecc8a;
  --color-status-red:#e74c3c;
  --color-status-warn:#f59e0b;
  --glass:rgba(14,16,24,.72);
  --glass-edge:rgba(255,255,255,.06);
  --head-h:56px;
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --t-sm:clamp(11px,.8vw,13px);
  --t-md:clamp(13px,1vw,15px);
  --t-lg:clamp(16px,1.4vw,20px);
}
.eos-body * {
box-sizing:border-box
}
.eos-body {
background:var(--color-base);
  color:var(--color-text-primary);
  font:var(--t-md)/1.45 var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
.eos-body .footer {
display:none
}
.eos-body a {
color:inherit
}
.eos-topbar {
position:fixed;inset:0 0 auto 0;height:var(--head-h);z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:0 18px;
  background:rgba(7,7,11,.72);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--color-border);
}
.eos-brand {
display:flex;align-items:center;gap:9px
}
.eos-brand-mark {
color:var(--color-accent);font-size:18px;text-shadow:0 0 14px rgba(123,77,255,.8)
}
.eos-brand-name {
font-weight:650;letter-spacing:.4px
}
.eos-topnav {
display:flex;align-items:center;gap:4px
}
.eos-topnav a {
padding:6px 12px;border-radius:999px;font-size:var(--t-sm);text-decoration:none;
  color:var(--color-text-secondary);transition:color .15s,background .15s;
}
.eos-topnav a:hover {
color:var(--color-text-primary);background:var(--color-raised)
}
.eos-topnav a.on {
color:#fff;background:var(--color-accent-tint);border:1px solid rgba(123,77,255,.4)
}
.eos-topbar-right {
display:flex;align-items:center;gap:10px
}
.chip-user {
width:32px;height:32px;justify-content:center;border-radius:50%;
  color:#fff;background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));
  border:1px solid rgba(123,77,255,.5);font-weight:700;
}
.eos-app {
position:fixed;inset:var(--head-h) 0 0 0;z-index:1;
  display:grid;gap:14px;padding:16px 18px 18px;max-width:1500px;margin:0 auto;
  grid-template-columns:2fr 7fr 3fr;
  grid-template-areas:"nav main context";
}
.eos-col {
display:flex;flex-direction:column;gap:12px;min-height:0;
  background:var(--color-surface);border:1px solid var(--color-border-subtle);
  border-radius:var(--r-lg);padding:14px;overflow:auto;
}
.admin-eos .eos-app {
grid-template-columns:2fr 10fr;grid-template-areas:"nav main";
}
.admin-eos .eos-context {
display:none
}
.eos-main > *:first-child {
margin-top:6px
}
.eos-main .page-header {
margin:4px 0 20px
}
.eos-nav {
grid-area:nav
}
.eos-main {
grid-area:main
}
.eos-context {
grid-area:context
}
.eos-col-head {
font-size:clamp(10px,.72vw,11px);letter-spacing:.16em;color:var(--color-text-muted);
  display:flex;align-items:center;justify-content:space-between;
  
  margin:2px 4px 8px;
}
.eos-col-head:not(:first-child) {
margin:18px 4px 8px
}
.takeover-banner {
position:sticky;top:0;z-index:40;   
  margin:14px 16px 0;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(239,68,68,.45);background:rgba(239,68,68,.10);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.takeover-banner .tb-icon {
font-size:17px
}
.takeover-banner .tb-text {
flex:1;min-width:220px;font-size:13px;color:var(--color-text-primary,#F0F0F5)
}
.takeover-banner .tb-text small {
display:block;color:var(--color-text-muted,#6B6B80);font-size:12px
}
.takeover-banner .tb-return {
background:var(--color-status-red,#ef4444);color:#fff;text-decoration:none;
  border:0;font-size:13px;font-weight:700;padding:8px 14px;border-radius:9px;cursor:pointer;
}
.takeover-banner .tb-return:hover {
filter:brightness(1.1)
}
.guidance-banner {
position:sticky;top:0;z-index:40;   
  margin:14px 16px 0;padding:12px 16px;border-radius:12px;
  border:1px solid rgba(123,77,255,.35);background:rgba(123,77,255,.08);
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.guidance-banner .gb-icon {
font-size:17px
}
.guidance-banner .gb-text {
flex:1;min-width:220px
}
.guidance-banner .gb-task {
font-size:13px;color:var(--color-text-primary,#F0F0F5)
}
.guidance-banner .gb-note {
color:var(--color-text-muted,#6B6B80);font-size:12px
}
.eos-nav-item {
display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:var(--r-md);
  border:1px solid var(--color-border-subtle);background:var(--color-raised);
  cursor:pointer;text-decoration:none;color:var(--color-text-primary);
  transition:transform .15s,border-color .15s,box-shadow .15s;
  animation:rise .4s both;
}
.eos-nav-item:hover {
transform:translateY(-2px);border-color:rgba(123,77,255,.45);box-shadow:0 4px 18px rgba(0,0,0,.35)
}
.eos-nav-item .n-icon {
font-size:20px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--color-accent-tint);border:1px solid rgba(123,77,255,.18)
}
.eos-nav-item .n-name {
font-weight:600;font-size:var(--t-md)
}
.eos-nav-item .eos-nav-badge {
display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 6px;margin-left:auto;border-radius:99px;background:var(--color-accent);color:#fff;font-size:10.5px;font-weight:800;line-height:1
}
.eos-nav-item .eos-nav-badge[hidden] {
display:none
}
.eos-nav-item.sel {
border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(123,77,255,.35),0 4px 22px rgba(123,77,255,.18)
}
.chip {
display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  font-size:var(--t-sm);color:var(--color-text-secondary);
  background:var(--color-raised);border:1px solid var(--color-border);
  white-space:nowrap;
}
.lc-nav-mobile {
display:none
}
@media (max-width:640px) {
.eos-footer .links a {
display:inline-block;padding:10px 8px;line-height:1.2
}
.modal-panel-close {
width:38px;height:38px;font-size:16px
}
}
.btn {
border:1px solid var(--color-border);border-radius:var(--r-sm);cursor:pointer;
  padding:8px 14px;font-size:var(--t-md);color:var(--color-text-primary);
  background:var(--color-raised);transition:transform .15s ease,border-color .15s,background .15s,box-shadow .15s;
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;
}
.btn:hover {
transform:translateY(-1px);border-color:var(--color-accent)
}
.btn:focus-visible,a:focus-visible,button:focus-visible {
outline:2px solid var(--color-accent);outline-offset:2px
}
.btn-accent {
background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));
  color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 2px 16px rgba(123,77,255,.35);
}
.btn-ghost {
background:transparent
}
.btn-sm {
padding:6px 10px;font-size:var(--t-sm)
}
.glass {
background:var(--glass);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--glass-edge);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);
}
.eos-card {
padding:14px;border-radius:var(--r-md);
  border:1px solid var(--color-border-subtle);background:var(--color-raised);
  animation:rise .4s both;
}
.eos-card-title {
font-weight:650;font-size:var(--t-md);margin-bottom:6px
}
.eos-card-line {
font-size:var(--t-sm);color:var(--color-text-secondary);margin-top:2px
}
.project-grid {
display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px
}
.project-card {
display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--r-md);
  border:1px solid var(--color-border-subtle);background:var(--color-raised);
  text-decoration:none;color:var(--color-text-primary);cursor:pointer;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.project-card:hover {
transform:translateY(-2px);border-color:rgba(123,77,255,.4);box-shadow:0 6px 24px rgba(0,0,0,.4)
}
.project-card .pc-name {
font-weight:600;font-size:var(--t-md);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.project-card .pc-meta {
font-size:var(--t-sm);color:var(--color-text-muted)
}
.progress {
display:flex;gap:5px;align-items:center
}
.pdot {
flex:1;height:4px;border-radius:99px;background:rgba(255,255,255,.07)
}
.pdot.on {
background:linear-gradient(90deg,var(--color-accent),var(--color-accent-hover));box-shadow:0 0 8px rgba(123,77,255,.6)
}
.pdot.done {
background:var(--color-status-green)
}
.chat-header {
display:flex;align-items:center;gap:12px;padding:2px 4px 10px;border-bottom:1px solid var(--color-border-subtle)
}
.chat-header-avatar {
width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--color-accent-hover),var(--color-accent));
  font-weight:700;color:#fff;box-shadow:0 0 18px rgba(123,77,255,.35)
}
.chat-header-name {
font-weight:650;font-size:var(--t-md)
}
.chat-header-status {
font-size:var(--t-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:6px
}
.status-dot {
width:7px;height:7px;border-radius:50%;background:var(--color-status-green);box-shadow:0 0 8px rgba(46,204,138,.8)
}
.chat-messages {
display:flex;flex-direction:column;gap:14px;overflow:auto;padding:12px 2px
}
.chat-msg {
display:flex;gap:10px;align-items:flex-start;animation:rise .3s both
}
.chat-msg.user {
flex-direction:row-reverse
}
.chat-msg-avatar {
flex-shrink:0
}
.jama-avatar-sm {
width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--color-accent-hover),var(--color-accent));font-weight:700;color:#fff;font-size:14px
}
.chat-bubble {
padding:10px 14px;border-radius:14px;font-size:var(--t-md);max-width:82%;line-height:1.5
}
.chat-bubble.jama {
background:var(--color-raised);border:1px solid var(--color-border-subtle);border-top-left-radius:4px
}
.chat-bubble.user {
background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));color:#fff;border-top-right-radius:4px
}
.chat-timestamp {
font-size:clamp(10px,.7vw,11px);color:var(--color-text-muted);margin-top:4px
}
.chat-thinking {
display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r-md);
  background:var(--color-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-secondary);font-size:var(--t-sm)
}
.chat-thinking-dots span {
width:6px;height:6px;border-radius:50%;background:var(--color-accent);display:inline-block;margin-right:4px;animation:blink 1.2s infinite
}
.chat-thinking-dots span:nth-child(2) {
animation-delay:.2s
}
.chat-thinking-dots span:nth-child(3) {
animation-delay:.4s
}
@keyframes blink {
0%,100%{opacity:.25}50%{opacity:1}
}
.input-bar-wrapper {
position:sticky;bottom:0;background:var(--color-base);padding-top:10px
}
.input-bar {
display:flex;align-items:flex-end;gap:8px;padding:8px;border-radius:var(--r-lg);background:var(--glass);
  backdrop-filter:blur(16px) saturate(1.2);border:1px solid var(--glass-edge);box-shadow:0 8px 32px rgba(0,0,0,.4)
}
.input-field-wrap {
flex:1
}
.input-field {
width:100%;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);
  font-size:var(--t-lg);padding:8px 10px;font-family:inherit;max-height:120px
}
.input-field::placeholder {
color:var(--color-text-muted)
}
.input-send-btn,.input-attach-btn,.input-voice-btn {
width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border);
  background:var(--color-raised);color:var(--color-text-secondary);cursor:pointer;display:grid;place-items:center;
}
.input-send-btn {
background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));color:#fff;border-color:transparent
}
.chat-room {
display:flex;flex-direction:column;
  height:calc(100vh - var(--head-h) - 32px);
  max-width:980px;margin:0 auto;padding:24px 28px;
}
.chat-room .chat-header {
padding-bottom:14px;margin-bottom:6px
}
.chat-room .chat-messages {
flex:1;gap:20px;padding:18px 4px
}
.chat-room .chat-bubble {
max-width:72%;padding:14px 18px;border-radius:18px;
  font-size:var(--t-lg);line-height:1.65;
}
.chat-room .chat-bubble.jama {
border-top-left-radius:6px
}
.chat-room .chat-bubble.user {
border-top-right-radius:6px
}
.chat-room .chat-timestamp {
margin-top:6px
}
.chat-room .quick-replies {
gap:10px;padding:4px 2px 12px
}
.chat-room .quick-reply {
padding:10px 18px;border-radius:24px;font-size:var(--t-md)
}
.chat-room .input-bar {
padding:10px 12px;border-radius:var(--r-lg)
}
.chat-room .input-field {
font-size:var(--t-md);padding:10px 12px
}
.chat-room .jama-avatar-sm {
width:34px;height:34px;border-radius:10px;font-size:15px
}
@media (max-width:640px) {
.chat-room {
padding:14px 14px;height:calc(100vh - var(--head-h) - 20px)
}
.chat-room .chat-bubble {
max-width:86%;padding:12px 14px
}
}
.context-card {
padding:11px 12px;border-radius:var(--r-md);border:1px solid rgba(123,77,255,.25);background:var(--color-accent-tint)
}
.context-card .cc-name {
font-weight:650;font-size:var(--t-md);margin-bottom:4px;word-break:break-word
}
.context-card .cc-line {
font-size:var(--t-sm);color:var(--color-text-secondary);margin-top:2px;word-break:break-word
}
.d-none {
display:none
}
.text-muted {
color:var(--color-text-muted)
}
.section-label {
font-size:clamp(10px,.72vw,11px);letter-spacing:.16em;color:var(--color-text-muted);text-transform:uppercase
}
.flex-between {
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap
}
.mb-lg {
margin-bottom:18px
}
.mb-8 {
margin-bottom:8px
}
.mt-8 {
margin-top:8px
}
.gap-6 {
gap:6px
}
.flex {
display:flex
}
.flex-wrap {
flex-wrap:wrap
}
.text-primary {
color:var(--color-text-primary)
}
.weight-200 {
font-weight:200
}
.text-26 {
font-size:26px
}
.badge {
padding:3px 10px;border-radius:999px;font-size:11px;border:1px solid var(--color-border)
}
.badge-accent {
color:var(--color-accent-hover);border-color:rgba(123,77,255,.4);background:var(--color-accent-tint)
}
@keyframes rise {
from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}
}
@keyframes fade {
from{opacity:0}to{opacity:1}
}
::-webkit-scrollbar {
width:8px;height:8px
}
::-webkit-scrollbar-thumb {
background:rgba(255,255,255,.12);border-radius:99px
}
::-webkit-scrollbar-thumb:hover {
background:rgba(123,77,255,.5)
}
::-webkit-scrollbar-track {
background:transparent
}
.eos-col {
min-width:0
}
.eos-nav {
min-width:0
}
.eos-main {
min-width:0
}
@media (max-width:1100px) {
.eos-app {
grid-template-columns:180px 1fr;grid-template-areas:"nav main" "nav main"
}
.admin-eos .eos-app {
grid-template-columns:180px 1fr;grid-template-areas:"nav main"
}
.eos-context {
display:none
}
}
@media (max-width:760px) {
.eos-body {
overflow:auto
}
.eos-app {
position:static;margin-top:calc(var(--head-h) + 10px);
    grid-template-columns:1fr;grid-template-areas:"main";gap:12px;padding:0 12px 28px
}
.admin-eos .eos-app {
position:static;margin-top:calc(var(--head-h) + 10px);
    grid-template-columns:1fr;grid-template-areas:"main";gap:12px;padding:0 12px 28px
}
.eos-topnav {
display:none
}
.eos-nav {
display:none;position:fixed;top:var(--head-h);left:0;right:0;bottom:0;z-index:45;
    flex-direction:column;gap:10px;overflow-y:auto;margin:0;padding:14px 14px 32px;
    background:var(--color-surface);border:0;border-top:1px solid var(--color-border);
    border-radius:0;animation:none
}
.eos-nav.open {
display:flex;animation:fade .16s ease
}
.eos-nav .eos-col-head {
display:flex
}
.eos-nav .eos-nav-item {
flex:0 0 auto;padding:13px 14px;animation:none
}
.eos-nav .eos-nav-item .n-icon {
width:30px;height:30px;font-size:18px
}
.eos-nav .eos-nav-item.signout {
margin-top:6px
}
.eos-nav .lc-nav-mobile {
display:block;margin-top:10px
}
.eos-col {
min-height:auto;overflow:visible;min-width:0
}
.eos-main {
min-width:0
}
.admin-eos .data-table-wrap {
overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)
}
.admin-eos .data-table {
min-width:640px
}
.admin-eos .action-grid {
grid-template-columns:1fr
}
.admin-eos .stats-grid {
grid-template-columns:repeat(auto-fit,minmax(140px,1fr))
}
.admin-eos .modal-panel {
width:min(94vw,480px)
}
.admin-eos .inline {
display:inline-block;margin:3px 6px 3px 0
}
.admin-eos .btn-sm {
min-height:40px;padding:9px 14px
}
.admin-eos .admin-back-row {
flex-wrap:wrap;gap:8px
}
.admin-eos .users-search-wrap {
max-width:100%
}
.admin-eos .users-search {
width:100%;max-width:100%
}
.admin-eos .users-table {
display:block;min-width:0;width:100%
}
.admin-eos .users-table thead {
display:none
}
.admin-eos .users-table tbody {
display:block
}
.admin-eos .users-table tr {
display:block;border:1px solid var(--color-border-subtle,#ffffff1a);
    border-radius:12px;margin:0 0 10px;padding:10px 12px;background:var(--color-raised,#14141F)
}
.admin-eos .users-table td {
display:grid;grid-template-columns:96px 1fr;gap:2px 12px;align-items:start;
    padding:6px 0;border:0;text-align:left
}
.admin-eos .users-table td::before {
content:attr(data-label);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--color-text-muted,#6B6B80);font-weight:800;padding-top:2px
}
.admin-eos .users-table td[data-label="Actions"] .btn-ghost {
min-height:38px;padding:8px 14px
}
}
@media (max-width:520px) {
:root {
--head-h:52px
}
.eos-brand-name {
display:block;font-size:15px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.btn {
padding:10px 14px;min-height:42px
}
.project-grid {
grid-template-columns:1fr
}
.input-field {
font-size:16px
}
}
.landing-body {
background:var(--color-base);color:var(--color-text-primary);font:var(--t-md)/1.5 var(--font-sans);-webkit-font-smoothing:antialiased
}
.landing-body * {
box-sizing:border-box
}
.landing-body a {
text-decoration:none;color:inherit
}
.glow {
position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0
}
.glow-a {
width:52vw;height:52vw;top:-22vw;left:-12vw;background:rgba(123,77,255,.14)
}
.glow-b {
width:44vw;height:44vw;bottom:-20vw;right:-14vw;background:rgba(46,204,138,.05)
}
html {
overflow-x:hidden
}
.eos-hero {
display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;padding:96px 0 64px
}
.landing-badge-pulse {
display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-size:var(--t-sm);color:var(--color-accent-hover);border:1px solid rgba(123,77,255,.35);background:var(--color-accent-tint);margin-bottom:18px
}
.landing-badge-dot {
width:7px;height:7px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 10px rgba(123,77,255,.9)
}
.eos-hero h1 {
font-size:clamp(34px,4.6vw,64px);line-height:1.05;font-weight:650;letter-spacing:-.02em;margin:0 0 18px
}
.eos-hero h1 .accent {
color:var(--color-accent-hover)
}
.eos-hero h1 .muted {
color:var(--color-text-muted)
}
.eos-hero-sub {
font-size:clamp(15px,1.4vw,18px);color:var(--color-text-secondary);max-width:560px;line-height:1.6;margin-bottom:26px
}
.eos-hero-ctas {
display:flex;gap:10px;flex-wrap:wrap
}
.proof-row {
display:flex;gap:22px;margin-top:34px;flex-wrap:wrap;justify-content:center
}
.proof-stat {
flex:1 1 0;min-width:0
}
.proof-stat .proof-number {
font-size:26px;font-weight:650;color:var(--color-text-primary)
}
.proof-stat .proof-label {
font-size:var(--t-sm);color:var(--color-text-muted);margin-top:2px
}
.proof-divider {
width:1px;background:var(--color-border)
}
.demo-card {
padding:16px;border-radius:var(--r-lg);border:1px solid rgba(123,77,255,.22);background:linear-gradient(160deg,var(--color-raised),rgba(123,77,255,.07));box-shadow:0 24px 70px rgba(0,0,0,.5)
}
.demo-header {
display:flex;align-items:center;justify-content:space-between;font-size:var(--t-sm);color:var(--color-text-secondary);margin-bottom:12px
}
.demo-body {
font-size:var(--t-sm)
}
.demo-msg-user {
padding:10px 12px;border-radius:12px;background:var(--color-accent-tint);border:1px solid rgba(123,77,255,.25);margin-bottom:10px;color:var(--color-text-primary)
}
.demo-task {
display:flex;align-items:center;gap:9px;padding:6px 4px;color:var(--color-text-secondary)
}
.demo-task-check {
width:17px;height:17px;border-radius:5px;border:1px solid var(--color-border);display:grid;place-items:center;font-size:11px;color:var(--color-status-green)
}
.demo-task-check-done {
background:rgba(46,204,138,.12);border-color:rgba(46,204,138,.4)
}
.demo-input {
margin-top:10px;padding:9px 12px;border-radius:10px;border:1px dashed var(--color-border);color:var(--color-text-muted);font-size:var(--t-sm)
}
.eos-section {
max-width:1180px;margin:0 auto;padding:56px 24px
}
.section-label {
font-size:clamp(10px,.72vw,11px);letter-spacing:.16em;color:var(--color-text-muted);text-transform:uppercase;margin-bottom:10px
}
.eos-section h2 {
font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0 0 12px
}
.eos-section h2 .accent {
color:var(--color-accent-hover)
}
.eos-section .lead {
color:var(--color-text-secondary);font-size:clamp(14px,1.2vw,16px);max-width:620px;margin-bottom:32px
}
.section-divider {
max-width:1180px;margin:0 auto;border-top:1px solid var(--color-border-subtle)
}
.eos-steps {
position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px
}
.eos-steps::before {
content:"";position:absolute;top:34px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,rgba(123,77,255,0),rgba(123,77,255,.55) 15%,rgba(123,77,255,.18) 50%,rgba(123,77,255,.55) 85%,rgba(123,77,255,0));pointer-events:none
}
.eos-step {
position:relative;z-index:1;padding:22px 18px 24px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);transition:transform .18s,border-color .18s,box-shadow .18s;display:flex;flex-direction:column;align-items:center;text-align:center
}
.eos-step:hover {
transform:translateY(-4px);border-color:rgba(123,77,255,.5);box-shadow:0 16px 40px rgba(0,0,0,.25),0 0 24px rgba(123,77,255,.08)
}
.step-node {
width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--color-accent,#7B4DFF),#9C6BFF);color:#fff;font-weight:800;font-size:15px;letter-spacing:.03em;box-shadow:0 0 0 4px var(--color-raised),0 0 0 5px rgba(123,77,255,.28),0 8px 22px rgba(123,77,255,.35);margin-bottom:14px;position:relative;z-index:2
}
.eos-step .step-icon {
font-size:24px;margin-bottom:8px;opacity:.95
}
.eos-step .step-num {
font-size:10px;color:var(--color-accent);font-weight:800;margin-bottom:8px;letter-spacing:.16em
}
.eos-step h3 {
font-size:var(--t-md);font-weight:650;margin:0 0 8px
}
.eos-step p {
font-size:var(--t-sm);color:var(--color-text-secondary);line-height:1.55;margin:0
}
.eos-features {
display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.eos-feature {
padding:20px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);transition:transform .15s,border-color .15s
}
.eos-feature:hover {
transform:translateY(-3px);border-color:rgba(123,77,255,.4)
}
.eos-feature .f-icon {
font-size:22px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--color-accent-tint);border:1px solid rgba(123,77,255,.18);margin-bottom:12px
}
.eos-feature h3 {
font-size:var(--t-md);font-weight:650;margin-bottom:6px
}
.eos-feature p {
font-size:var(--t-sm);color:var(--color-text-secondary);line-height:1.55
}
.eos-blog {
display:grid;grid-template-columns:repeat(3,1fr);gap:12px
}
.eos-blog-card {
padding:18px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);transition:transform .15s,border-color .15s;display:flex;flex-direction:column;gap:8px
}
.eos-blog-card:hover {
transform:translateY(-3px);border-color:rgba(123,77,255,.4)
}
.eos-blog-card .cat {
font-size:var(--t-sm);color:var(--color-accent-hover);text-transform:uppercase;letter-spacing:.08em
}
.eos-blog-card .ttl {
font-size:var(--t-md);font-weight:650;line-height:1.3
}
.eos-blog-card .dsc {
font-size:var(--t-sm);color:var(--color-text-secondary)
}
.eos-blog-card-img {
width:100%;height:160px;object-fit:cover;border-radius:10px;display:block;background:var(--color-raised)
}
.eos-pricing {
display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start
}
.eos-price {
padding:24px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);display:flex;flex-direction:column
}
.eos-price.featured {
border-color:var(--color-accent);box-shadow:0 0 0 1px rgba(123,77,255,.35),0 20px 60px rgba(123,77,255,.12)
}
.eos-price .p-tier {
font-size:var(--t-sm);color:var(--color-accent-hover);text-transform:uppercase;letter-spacing:.1em;font-weight:600
}
.eos-price .p-price {
font-size:38px;font-weight:200;margin:6px 0 2px
}
.eos-price .p-price small {
font-size:14px;color:var(--color-text-muted)
}
.eos-price .p-desc {
font-size:var(--t-sm);color:var(--color-text-secondary);margin-bottom:14px
}
.eos-price ul {
list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:7px
}
.eos-price li {
font-size:var(--t-sm);color:var(--color-text-secondary)
}
.eos-price li b {
color:var(--color-accent-hover);font-weight:600
}
.eos-price .btn {
margin-top:auto;justify-content:center
}
.most-popular {
position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;letter-spacing:.08em;padding:4px 14px;border-radius:999px;background:var(--color-accent);color:#fff;white-space:nowrap
}
.eos-about {
max-width:680px
}
.eos-about p {
font-size:var(--t-md);color:var(--color-text-secondary);line-height:1.7;margin:0 0 18px
}
.eos-auth {
max-width:440px;margin:0 auto;padding:28px;border-radius:var(--r-lg);border:1px solid rgba(123,77,255,.22);background:linear-gradient(160deg,var(--color-raised),rgba(123,77,255,.06));box-shadow:0 24px 70px rgba(0,0,0,.5)
}
.eos-auth h2 {
font-size:22px;font-weight:650;margin-bottom:6px
}
.eos-auth .auth-sub {
color:var(--color-text-muted);font-size:var(--t-sm);margin-bottom:18px
}
.eos-tabs {
display:flex;gap:6px;border-bottom:1px solid var(--color-border);margin-bottom:18px
}
.eos-tab {
flex:1;padding:10px;background:transparent;border:none;cursor:pointer;color:var(--color-text-muted);font-size:var(--t-md);border-bottom:2px solid transparent
}
.eos-tab.active {
color:var(--color-text-primary);border-bottom-color:var(--color-accent);font-weight:600
}
.eos-field {
margin-bottom:12px
}
.eos-field input {
width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--color-border);background:var(--color-base);color:var(--color-text-primary);font-size:var(--t-md);outline:none
}
.eos-field input:focus {
border-color:var(--color-accent)
}
.eos-field input::placeholder {
color:var(--color-text-muted)
}
.eos-auth .btn {
width:100%;justify-content:center;padding:12px
}
.eos-auth-error {
display:none;margin-top:12px;font-size:var(--t-sm);color:var(--color-status-red)
}
.eos-auth-error.show {
display:block
}
.tos-check {
display:flex;align-items:flex-start;gap:8px;font-size:var(--t-sm);color:var(--color-text-muted);cursor:pointer;margin-bottom:12px
}
.tos-check a {
color:var(--color-accent-hover);text-decoration:underline
}
.forgot-row {
text-align:right;margin:-4px 0 12px
}
.forgot-row a {
font-size:11px;color:var(--color-text-muted);letter-spacing:.06em
}
.eos-footer {
border-top:1px solid var(--color-border-subtle);padding:26px 24px;text-align:center;color:var(--color-text-muted);font-size:var(--t-sm)
}
.eos-footer .links {
display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-bottom:10px;align-items:center
}
.eos-footer .foot-group {
display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;padding:0 18px
}
.eos-footer .foot-group + .foot-group {
border-left:1px solid var(--color-border-subtle,#ffffff1a)
}
.eos-footer .links a {
color:var(--color-text-secondary)
}
.eos-footer .links a:hover {
color:var(--color-accent-hover)
}
@media (max-width:700px) {
.eos-footer .foot-group {
padding:6px 12px
}
.eos-footer .foot-group + .foot-group {
border-left:0
}
}
@media (max-width:900px) {
.eos-hero {
grid-template-columns:1fr;padding:72px 0 40px;gap:28px
}
.eos-steps,.eos-features,.eos-blog,.eos-pricing {
grid-template-columns:1fr 1fr
}
.eos-steps::before {
display:none
}
.demo-card {
max-width:480px
}
}
@media (max-width:560px) {
.eos-steps,.eos-features,.eos-blog,.eos-pricing {
grid-template-columns:1fr
}
.eos-step {
align-items:flex-start;text-align:left;padding:18px 16px 18px 66px;min-height:0
}
.step-node {
position:absolute;left:14px;top:16px;width:40px;height:40px;font-size:13px;margin:0;box-shadow:0 0 0 3px var(--color-raised),0 0 0 4px rgba(123,77,255,.25)
}
.eos-step .step-icon {
position:absolute;right:16px;top:20px;font-size:22px
}
.eos-section {
padding:40px 16px
}
.proof-row {
gap:14px
}
.proof-stat {
flex:1 1 45%
}
.proof-divider {
display:none
}
}
.eos-public {
max-width:1180px;margin:0 auto;padding:96px 24px 64px;min-height:calc(100vh - var(--head-h))
}
.eos-public .auth-wrap {
max-width:440px;margin:0 auto
}
.eos-public .legal {
max-width:760px
}
.eos-public .legal h1 {
font-size:clamp(24px,3vw,34px);font-weight:650;margin-bottom:8px
}
.eos-public .legal h2 {
font-size:20px;font-weight:650;margin:26px 0 8px
}
.eos-public .legal p,.eos-public .legal li {
font-size:var(--t-md);color:var(--color-text-secondary);line-height:1.7;margin-bottom:10px
}
.eos-public .legal a {
color:var(--color-accent-hover)
}
@media (max-width:760px) {
.eos-public {
padding:76px 16px 48px
}
}
.eos-menu-btn {
display:none;border:1px solid var(--color-border);background:var(--color-raised);
  color:var(--color-text-primary);width:38px;height:38px;border-radius:10px;
  font-size:17px;cursor:pointer;line-height:1;
}
.eos-mobile-cta {
display:none
}
@media (max-width:760px) {
.eos-menu-btn {
display:inline-flex;align-items:center;justify-content:center
}
.eos-topbar .eos-menu-btn {
margin-left:auto
}
.eos-topnav {
position:fixed;top:var(--head-h);left:10px;right:10px;z-index:45;
    flex-direction:column;align-items:stretch;gap:2px;padding:10px;
    background:rgba(14,16,24,.96);backdrop-filter:blur(20px);
    border:1px solid var(--color-border);border-radius:var(--r-md);
    box-shadow:0 18px 50px rgba(0,0,0,.6);
    display:none;
}
.eos-topnav.open {
display:flex;animation:fade .18s ease
}
.eos-topnav a {
padding:12px 14px;border-radius:var(--r-sm)
}
.eos-topnav a:hover {
background:var(--color-accent-tint)
}
.eos-topbar-right .btn-ghost {
display:none
}
.eos-topbar-right .eos-cta-public {
display:none
}
.eos-topnav a.eos-mobile-cta {
display:block;margin-top:8px;text-align:center;color:#fff;font-weight:600;
    background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));
}
.eos-topnav a.eos-mobile-cta:hover {
background:var(--color-accent-hover);color:#fff
}
.eos-topbar {
padding:0 12px
}
}
.eos-mobile-only {
display:none
}
@media (max-width:760px) {
.eos-topnav .eos-mobile-only {
display:block
}
}
.btn-primary,.btn-secondary {
background:linear-gradient(180deg,var(--color-accent-hover),var(--color-accent));
  color:#fff;border:1px solid transparent;border-radius:var(--r-sm);
  padding:8px 14px;font-weight:600;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 2px 16px rgba(123,77,255,.35);
  transition:transform .15s,box-shadow .15s;
}
.btn-primary:hover,.btn-secondary:hover {
transform:translateY(-1px);box-shadow:0 4px 22px rgba(123,77,255,.55)
}
.btn-ghost {
background:transparent;border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--r-sm);padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s
}
.btn-ghost:hover {
border-color:var(--color-accent)
}
.heading-xl {
font-size:clamp(26px,3vw,40px);font-weight:600;letter-spacing:-.01em;line-height:1.15
}
.heading-xl .accent,.heading-xl span.accent {
color:var(--color-accent-hover)
}
.card {
background:var(--color-raised);border:1px solid var(--color-border-subtle);border-radius:var(--r-lg)
}
.text-accent {
color:var(--color-accent-hover)!important
}
.why-clajama-page .wc-hero {
padding:60px 0 40px;max-width:820px
}
.why-clajama-page .wc-hero h1 {
font-size:clamp(28px,3.4vw,46px);font-weight:650;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px
}
.why-clajama-page .wc-hero .accent {
color:var(--color-accent-hover)
}
.why-clajama-page .wc-hero__subtitle {
color:var(--color-text-secondary);font-size:var(--t-lg);line-height:1.6;max-width:640px;margin-bottom:24px
}
.why-clajama-page .wc-hero__cta {
display:flex;gap:10px;flex-wrap:wrap
}
.why-clajama-page .wc-section-title {
font-size:clamp(22px,2.6vw,32px);font-weight:600;margin:40px 0 18px
}
.why-clajama-page .wc-comparison__grid {
display:grid;grid-template-columns:1fr 1fr;gap:14px
}
.why-clajama-page .wc-comparison__col {
padding:22px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised)
}
.why-clajama-page .wc-comparison__header {
display:flex;align-items:center;gap:10px;margin-bottom:14px
}
.why-clajama-page .wc-comparison__header h3 {
font-size:var(--t-md);font-weight:650
}
.why-clajama-page .wc-comparison__list {
list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px
}
.why-clajama-page .wc-comparison__list li {
display:flex;gap:10px;align-items:flex-start
}
.why-clajama-page .wc-comparison__list strong {
font-size:var(--t-md)
}
.why-clajama-page .wc-comparison__list p {
font-size:var(--t-sm);color:var(--color-text-secondary);line-height:1.55;margin:2px 0 0
}
.why-clajama-page .wc-icon {
color:var(--color-status-green)
}
.why-clajama-page li.wc-bad .wc-icon {
color:var(--color-status-red)
}
@media (max-width:760px) {
.why-clajama-page .wc-comparison__grid {
grid-template-columns:1fr
}
}
.blog-article {
max-width:760px;margin:0 auto
}
.blog-article-header {
margin-bottom:28px
}
.blog-back-link {
color:var(--color-text-muted);font-size:var(--t-sm);text-decoration:none
}
.blog-back-link:hover {
color:var(--color-accent-hover)
}
.blog-article-meta {
display:flex;gap:12px;align-items:center;margin:14px 0 10px;font-size:var(--t-sm);color:var(--color-text-muted);flex-wrap:wrap
}
.blog-category-badge {
color:var(--color-accent-hover);border:1px solid rgba(123,77,255,.4);background:var(--color-accent-tint);padding:3px 10px;border-radius:999px;font-size:var(--t-sm)
}
.blog-article-title {
font-size:clamp(26px,3.2vw,40px);font-weight:650;letter-spacing:-.02em;line-height:1.15;margin-bottom:12px
}
.blog-article-excerpt {
color:var(--color-text-secondary);font-size:var(--t-lg);line-height:1.6
}
.blog-article-author {
display:flex;align-items:center;gap:10px;margin-top:14px;font-size:var(--t-sm);color:var(--color-text-secondary)
}
.blog-author-avatar {
width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--color-accent-hover),var(--color-accent));color:#fff;font-weight:700
}
.blog-article-body {
font-size:var(--t-md);color:var(--color-text-secondary);line-height:1.75
}
.blog-article-body h2 {
font-size:24px;color:var(--color-text-primary);margin:28px 0 10px
}
.blog-article-body h3 {
font-size:19px;color:var(--color-text-primary);margin:22px 0 8px
}
.blog-article-body a {
color:var(--color-accent-hover)
}
.blog-article-body img {
border-radius:var(--r-md);max-width:100%
}
.blog-article-body blockquote {
border-left:3px solid var(--color-accent);padding-left:16px;color:var(--color-text-secondary);margin:18px 0;font-style:italic
}
.blog-related {
margin-top:36px
}
.blog-related-label {
font-size:11px;letter-spacing:.16em;color:var(--color-text-muted);text-transform:uppercase;margin-bottom:12px
}
.blog-related-grid {
display:grid;grid-template-columns:repeat(2,1fr);gap:12px
}
.blog-related-card {
padding:16px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);text-decoration:none;color:var(--color-text-primary);transition:transform .15s,border-color .15s
}
.blog-related-card:hover {
transform:translateY(-2px);border-color:rgba(123,77,255,.4)
}
.blog-related-card-tag {
font-size:var(--t-sm);color:var(--color-accent-hover);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px
}
.blog-related-card-title {
font-weight:650;font-size:var(--t-md);margin-bottom:6px
}
.blog-related-card-desc {
font-size:var(--t-sm);color:var(--color-text-secondary)
}
.blog-related-card-date {
font-size:11px;color:var(--color-text-muted);margin-top:8px
}
.blog-cta-section {
margin-top:40px;padding:26px;border-radius:var(--r-lg);border:1px solid rgba(123,77,255,.25);background:linear-gradient(160deg,var(--color-raised),rgba(123,77,255,.06));text-align:center
}
.blog-cta-title {
font-size:24px;font-weight:650;margin-bottom:8px
}
.blog-cta-text {
color:var(--color-text-secondary);font-size:var(--t-md);margin-bottom:18px
}
.blog-cta-buttons {
display:flex;gap:10px;justify-content:center;flex-wrap:wrap
}
@media (max-width:760px) {
.blog-related-grid {
grid-template-columns:1fr
}
}
.blog-page {
max-width:1000px;margin:0 auto
}
.blog-post-grid {
display:grid;grid-template-columns:repeat(3,1fr);gap:14px
}
.blog-post-card {
display:flex;flex-direction:column;padding:18px;border-radius:var(--r-lg);border:1px solid var(--color-border-subtle);background:var(--color-raised);text-decoration:none;color:var(--color-text-primary);transition:transform .15s,border-color .15s
}
.blog-post-card:hover {
transform:translateY(-3px);border-color:rgba(123,77,255,.4)
}
.blog-post-card-tag {
font-size:var(--t-sm);color:var(--color-accent-hover);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px
}
.blog-post-card-title {
font-weight:650;font-size:var(--t-md);line-height:1.35;margin-bottom:8px
}
.blog-post-card-excerpt {
font-size:var(--t-sm);color:var(--color-text-secondary);line-height:1.55;margin-bottom:10px
}
.blog-post-card-date {
font-size:11px;color:var(--color-text-muted)
}
.blog-section {
margin-top:30px
}
.blog-section-header {
display:flex;align-items:center;gap:10px;margin-bottom:12px
}
.blog-section-count {
font-size:var(--t-sm);color:var(--color-text-muted)
}
.blog-draft-card {
padding:16px;border-radius:var(--r-lg);border:1px dashed rgba(123,77,255,.35);background:var(--color-accent-tint);margin-bottom:10px
}
.blog-empty-state {
padding:40px 20px;text-align:center;border-radius:var(--r-lg);border:1px dashed var(--color-border);color:var(--color-text-muted)
}
@media (max-width:900px) {
.blog-post-grid {
grid-template-columns:1fr 1fr
}
}
@media (max-width:600px) {
.blog-post-grid {
grid-template-columns:1fr
}
}
.eos-page-head {
max-width:760px;margin-bottom:36px
}
.eos-page-head h1 {
font-size:clamp(28px,3.4vw,44px);font-weight:650;letter-spacing:-.02em;line-height:1.1;margin-bottom:12px
}
.eos-page-head h1 .accent {
color:var(--color-accent-hover)
}
.eos-page-head .eos-hero-sub {
color:var(--color-text-secondary);font-size:var(--t-lg);line-height:1.6;max-width:560px
}
.input {
width:100%;padding:12px 14px;border-radius:var(--r-sm);border:1px solid var(--color-border);background:var(--color-base);color:var(--color-text-primary);font-size:var(--t-md);outline:none;font-family:inherit
}
.input:focus {
border-color:var(--color-accent)
}
.input::placeholder {
color:var(--color-text-muted)
}
.contact-page {
max-width:680px;margin:0 auto
}
.contact-page .heading-xl {
font-size:clamp(26px,3vw,38px);font-weight:650;letter-spacing:-.02em
}
.contact-form {
display:flex;flex-direction:column;gap:14px;margin-top:22px
}
.contact-form label {
font-size:var(--t-sm);color:var(--color-text-muted);display:block;margin-bottom:6px
}
.contact-form textarea {
min-height:130px;resize:vertical
}
.contact-form button[type=submit] {
align-self:flex-start;padding:13px 32px
}
.contact-error {
color:var(--color-status-red);font-size:var(--t-sm);padding:10px 12px;border:1px solid rgba(231,76,60,.3);background:rgba(231,76,60,.08);border-radius:var(--r-sm)
}
.contact-success {
color:var(--color-status-green);font-size:var(--t-sm);padding:10px 12px;border:1px solid rgba(46,204,138,.3);background:rgba(46,204,138,.08);border-radius:var(--r-sm)
}
.landing-body .eos-public {
padding-top:36px
}
.jama-fab {
position:fixed;right:18px;bottom:18px;z-index:2000;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:99px;border:1px solid rgba(123,77,255,.55);background:var(--color-accent,#7B4DFF);color:#fff;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 26px rgba(123,77,255,.45)
}
.jama-fab:hover {
filter:brightness(1.12)
}
.jama-fab .jama-fab-icon {
font-size:17px
}
.jama-panel {
position:fixed;right:16px;bottom:78px;z-index:2000;width:min(380px,calc(100vw - 32px));height:min(520px,calc(100vh - 150px));display:none;flex-direction:column;border-radius:16px;border:1px solid var(--color-border,rgba(255,255,255,.12));background:var(--color-surface,#0e1018);box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden
}
.jama-panel.open {
display:flex;animation:fade .16s ease
}
.jama-panel-head {
display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--color-border-subtle,rgba(255,255,255,.07));font-weight:700;font-size:14px
}
.jama-panel-close {
background:none;border:0;font-size:20px;line-height:1;cursor:pointer;color:var(--color-text-muted,#6B6B80);padding:2px 6px
}
.jama-panel-msgs {
flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px
}
.jama-msg {
display:flex
}
.jama-msg.user {
justify-content:flex-end
}
.jama-bubble {
max-width:86%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;background:var(--color-raised,#161824);border:1px solid var(--color-border-subtle,rgba(255,255,255,.07))
}
.jama-msg.jama .jama-bubble {
background:rgba(123,77,255,.13);border-color:rgba(123,77,255,.28)
}
.jama-msg.user .jama-bubble {
background:var(--color-accent,#7B4DFF);color:#fff;border-color:transparent
}
.jama-panel-empty {
color:var(--color-text-muted,#6B6B80);font-size:12.5px;text-align:center;padding:22px 8px
}
.jama-panel-input {
display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--color-border-subtle,rgba(255,255,255,.07))
}
.jama-panel-input textarea {
flex:1;resize:none;border:1px solid var(--color-border-subtle,rgba(255,255,255,.09));background:var(--color-raised,#161824);border-radius:10px;padding:9px 11px;font-size:13px;color:var(--color-text-primary,#F0F0F5);outline:none
}
.jama-panel-input textarea:focus {
border-color:rgba(123,77,255,.5)
}
.jama-panel-send {
border:0;border-radius:10px;background:var(--color-accent,#7B4DFF);color:#fff;font-weight:700;padding:0 16px;cursor:pointer
}
.jama-panel-send:hover {
filter:brightness(1.1)
}
.blog-page {
max-width: none;
  margin: 0;
  padding: 24px 0 64px;
}
.blog-page-title .accent {
color: var(--accent, var(--color-accent, #7B4DFF));
}
.blog-section {
margin-bottom: 40px;
}
.blog-section-header {
display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.blog-section-count {
font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.40));
}
.blog-post-grid {
display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
.blog-post-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-post-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-post-card {
display: flex;
  flex-direction: column;
  background: var(--bg-raised, rgba(11,13,18,0.92));
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.blog-post-card:hover {
border-color: var(--accent-border, rgba(123,77,255,0.35));
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 24px rgba(123,77,255,0.10);
}
.blog-article-hero {
margin: 0 0 28px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-light, rgba(255,255,255,0.08));
}
.blog-article-hero-img {
width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.blog-post-card:hover .blog-post-card-image img {
transform: scale(1.05);
}
.blog-post-card-body {
display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}
.blog-post-card-meta {
display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.blog-post-card-tag {
display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid, var(--color-accent-hover, #9C6BFF));
  background: var(--accent-tint, rgba(123,77,255,0.10));
  border: 1px solid var(--accent-border, rgba(123,77,255,0.20));
  border-radius: var(--radius-pill, 50px);
  padding: 3px 10px;
}
.blog-post-card-date {
font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.40));
}
.blog-post-card-title {
font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin: 0 0 10px;
}
.blog-post-card:hover .blog-post-card-title {
color: var(--accent-glow, var(--accent-glow, #B38CFF));
}
.blog-post-card-excerpt {
font-size: 13px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-post-card-link {
margin-top: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, var(--color-accent, #7B4DFF));
  transition: letter-spacing 0.15s ease;
}
.blog-post-card:hover .blog-post-card-link {
letter-spacing: 0.03em;
}
.blog-empty-state {
text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--border-medium, rgba(255,255,255,0.10));
  border-radius: var(--radius-lg, 20px);
  background: var(--bg-surface, rgba(11,13,18,0.5));
}
.blog-empty-icon {
font-size: 40px;
  margin-bottom: 14px;
  filter: grayscale(0.3);
}
.blog-empty-state p {
font-size: 14px;
  font-weight: 300;
  color: var(--text-muted, rgba(255,255,255,0.40));
  margin: 0;
}
.blog-draft-list {
display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-draft-card {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px;
  background: var(--bg-raised, rgba(11,13,18,0.92));
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  transition: border-color 0.15s ease;
}
.blog-draft-card:hover {
border-color: var(--border-strong, rgba(255,255,255,0.16));
}
.blog-draft-card-body {
flex: 1;
  min-width: 220px;
}
.blog-draft-card-header {
display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.blog-draft-card-title {
font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin: 0;
}
.blog-draft-badge {
font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--status-yellow, var(--color-status-warn, #F59E0B));
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.25);
  border-radius: var(--radius-pill, 50px);
  padding: 2px 9px;
}
.blog-draft-card-meta {
font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.40));
  margin-bottom: 6px;
}
.blog-draft-card-excerpt {
font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin: 0;
}
.blog-draft-card-actions {
display: flex;
  align-items: center;
  gap: 8px;
}
.blog-admin-tools {
margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--accent-border, rgba(123,77,255,0.20));
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, var(--accent-tint, rgba(123,77,255,0.10)), transparent 60%);
}
.blog-admin-tools-label {
font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.40));
  margin-bottom: 12px;
}
.blog-admin-tools-actions {
display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.blog-article {
max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}
.blog-article-header {
padding-bottom: 28px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.06));
}
.blog-back-link {
display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.15s ease;
}
.blog-back-link:hover {
color: var(--accent, var(--color-accent, #7B4DFF));
}
.blog-article-meta {
display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.blog-category-badge {
display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid, var(--color-accent-hover, #9C6BFF));
  background: var(--accent-tint, rgba(123,77,255,0.10));
  border: 1px solid var(--accent-border, rgba(123,77,255,0.20));
  border-radius: var(--radius-pill, 50px);
  padding: 4px 12px;
}
.blog-article-meta time {
font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.40));
}
.blog-reading-time {
font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,0.40));
  padding-left: 12px;
  border-left: 1px solid var(--border-medium, rgba(255,255,255,0.10));
}
.blog-article-title {
font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin: 0 0 16px;
}
.blog-article-excerpt {
font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin: 0 0 20px;
  max-width: 600px;
}
.blog-article-author {
display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.55));
}
.blog-author-avatar {
width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-glow, var(--accent-glow, #B38CFF));
  background: var(--accent-tint, rgba(123,77,255,0.12));
  border: 1px solid var(--accent-border, rgba(123,77,255,0.25));
  border-radius: 50%;
}
.blog-article-body {
font-size: 15px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-body, rgba(255,255,255,0.80));
}
.blog-article-body > *:first-child {
margin-top: 0;
}
.blog-article-body p {
margin: 0 0 20px;
}
.blog-article-body h1,
.blog-article-body h2,
.blog-article-body h3,
.blog-article-body h4,
.blog-article-body h5,
.blog-article-body h6 {
color: var(--text-primary, rgba(255,255,255,0.92));
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 36px 0 14px;
}
.blog-article-body h2 {
font-size: 26px;
}
.blog-article-body h3 {
font-size: 21px;
}
.blog-article-body h4 {
font-size: 18px;
}
.blog-article-body h5 {
font-size: 16px;
}
.blog-article-body h6 {
font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary, rgba(255,255,255,0.55));
}
.blog-article-body ul,
.blog-article-body ol {
margin: 0 0 20px;
  padding-left: 24px;
}
.blog-article-body li {
margin-bottom: 8px;
}
.blog-article-body li::marker {
color: var(--accent, var(--color-accent, #7B4DFF));
}
.blog-article-body a {
color: var(--accent-mid, var(--color-accent-hover, #9C6BFF));
  text-decoration: none;
  border-bottom: 1px solid var(--accent-border, rgba(123,77,255,0.30));
  transition: color 0.15s ease, border-color 0.15s ease;
}
.blog-article-body a:hover {
color: var(--accent-glow, var(--accent-glow, #B38CFF));
  border-color: var(--accent, var(--color-accent, #7B4DFF));
}
.blog-article-body blockquote {
margin: 28px 0;
  padding: 18px 24px;
  border-left: 3px solid var(--accent, var(--color-accent, #7B4DFF));
  background: var(--accent-tint, rgba(123,77,255,0.06));
  border-radius: 0 var(--radius-sm, 10px) var(--radius-sm, 10px) 0;
  color: var(--text-primary, rgba(255,255,255,0.92));
  font-style: italic;
}
.blog-article-body blockquote p:last-child {
margin-bottom: 0;
}
.blog-article-body pre {
margin: 24px 0;
  padding: 18px 20px;
  background: var(--bg-deep, var(--color-base, #07070B));
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  border-radius: var(--radius-sm, 10px);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}
.blog-article-body code {
font-family: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  font-size: 0.9em;
  color: var(--accent-glow, var(--accent-glow, #B38CFF));
  background: var(--bg-raised, rgba(11,13,18,0.92));
  border: 1px solid var(--border-light, rgba(255,255,255,0.06));
  padding: 2px 6px;
  border-radius: 4px;
}
.blog-article-body pre code {
background: transparent;
  border: none;
  padding: 0;
  color: var(--text-body, rgba(255,255,255,0.80));
}
.blog-article-body img {
max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  margin: 24px 0;
}
.blog-article-body table {
width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.blog-article-body th,
.blog-article-body td {
padding: 10px 14px;
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  text-align: left;
}
.blog-article-body th {
color: var(--text-primary, rgba(255,255,255,0.92));
  background: var(--bg-raised, rgba(11,13,18,0.92));
  font-weight: 600;
}
.blog-article-body hr {
border: none;
  border-top: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  margin: 36px 0;
}
.blog-related {
margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border-light, rgba(255,255,255,0.06));
}
.blog-related-label {
font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted, rgba(255,255,255,0.40));
  margin-bottom: 18px;
}
.blog-related-grid {
display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 640px) {
.blog-related-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.blog-related-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.blog-related-card {
display: block;
  padding: 18px;
  background: var(--bg-raised, rgba(11,13,18,0.92));
  border: 1px solid var(--border-medium, rgba(255,255,255,0.08));
  border-radius: var(--radius-md, 12px);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.blog-related-card:hover {
border-color: var(--accent-border, rgba(123,77,255,0.35));
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.40), 0 0 20px rgba(123,77,255,0.08);
}
.blog-related-card-body {
display: flex;
  flex-direction: column;
}
.blog-related-card-tag {
align-self: flex-start;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-mid, var(--color-accent-hover, #9C6BFF));
  background: var(--accent-tint, rgba(123,77,255,0.10));
  border: 1px solid var(--accent-border, rgba(123,77,255,0.20));
  border-radius: var(--radius-pill, 50px);
  padding: 2px 9px;
  margin-bottom: 10px;
}
.blog-related-card-title {
font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin-bottom: 8px;
}
.blog-related-card:hover .blog-related-card-title {
color: var(--accent-glow, var(--accent-glow, #B38CFF));
}
.blog-related-card-desc {
font-size: 12px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin-bottom: 12px;
}
.blog-related-card-date {
margin-top: auto;
  font-size: 11px;
  color: var(--text-muted, rgba(255,255,255,0.40));
}
.blog-cta-content {
display: flex;
  flex-direction: column;
  align-items: center;
}
.blog-cta-section {
margin-top: 56px;
  padding: 44px 32px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(123,77,255,0.16) 0%, transparent 70%),
    var(--bg-raised, rgba(11,13,18,0.92));
  border: 1px solid var(--accent-border, rgba(123,77,255,0.22));
  border-radius: var(--radius-lg, 20px);
}
.blog-cta-title {
font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin: 0 0 12px;
}
.blog-cta-text {
font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  max-width: 440px;
  margin: 0 auto 24px;
}
.blog-cta-buttons {
display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.not-found {
position: relative;
  text-align: center;
  padding: 72px 24px;
  max-width: 560px;
  margin: 0 auto;
}
.not-found-accent {
width: 48px;
  height: 4px;
  border-radius: var(--radius-pill, 50px);
  background: linear-gradient(90deg, var(--accent, var(--color-accent, #7B4DFF)), var(--accent-glow, var(--accent-glow, #B38CFF)));
  margin: 0 auto 24px;
  box-shadow: 0 0 16px rgba(123,77,255,0.5);
}
.not-found-title {
font-size: 24px;
  font-weight: 600;
  color: var(--text-primary, rgba(255,255,255,0.92));
  margin-bottom: 12px;
}
.not-found-text {
font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-secondary, rgba(255,255,255,0.55));
  margin-bottom: 28px;
}
@media (prefers-reduced-motion: no-preference) {
.blog-post-card,
  .blog-related-card {
animation: blog-rise 0.5s ease both;
}
.blog-post-grid > .blog-post-card:nth-child(2) {
animation-delay: 0.05s;
}
.blog-post-grid > .blog-post-card:nth-child(3) {
animation-delay: 0.1s;
}
.blog-post-grid > .blog-post-card:nth-child(4) {
animation-delay: 0.15s;
}
.blog-post-grid > .blog-post-card:nth-child(5) {
animation-delay: 0.2s;
}
.blog-post-grid > .blog-post-card:nth-child(6) {
animation-delay: 0.25s;
}
}
@keyframes blog-rise {
from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.col-6 {
flex: 0 0 50%; max-width: 50%;
}
.col-auto {
flex: 0 0 auto; width: auto; max-width: 100%;
}
.col-md-2 {
flex: 0 0 16.6667%; max-width: 16.6667%;
}
@media (max-width: 768px) {
.col-md-2 {
flex: 0 0 100%; max-width: 100%;
}
}
.card-body {
flex: 1 1 auto; padding: 16px;
}
.card-header {
padding: 12px 16px; border-bottom: 1px solid var(--color-border, rgba(255,255,255,.08)); font-weight: 700;
}
.btn-success {
background: var(--color-status-green, #2ecc71);
  border: 1px solid transparent;
  color: var(--color-base, #07070B);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 700;
  cursor: pointer;
}
.btn-outline-secondary {
background: transparent;
  border: 1px solid var(--color-border, rgba(255,255,255,.2));
  color: var(--color-text-secondary, #9494a8);
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 600;
  cursor: pointer;
}
.badge-warn {
display: inline-block;
  background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 16%, transparent);
  color: var(--color-status-warn, #f59e0b);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
}
.badge-secondary {
display: inline-block;
  background: var(--color-raised, #13152a);
  color: var(--color-text-secondary, #9494a8);
  border: 1px solid var(--color-border, rgba(255,255,255,.1));
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
}
.alert-warning {
background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 10%, var(--color-surface, #0e1018));
  border: 1px solid color-mix(in srgb, var(--color-status-warn, #f59e0b) 35%, transparent);
  color: var(--color-text-primary, #d8d9e2);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
}
.align-items-center {
align-items: center;
}
.align-middle {
vertical-align: middle;
}
.d-block {
display: block;
}
.d-inline {
display: inline;
}
.disabled {
opacity: 0.5; pointer-events: none;
}
.fw-semibold {
font-weight: 600;
}
.g-2 {
gap: 0.5rem;
}
.gap-14 {
gap: 14px;
}
.form-control, .form-select {
width: 100%;
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 13px;
  color: var(--color-text-primary, #d8d9e2);
  background: var(--color-raised, #13152a);
  border: 1px solid var(--color-border, rgba(255,255,255,.12));
  border-radius: 8px;
  padding: 8px 12px;
}
.form-control-sm, .form-select-sm {
font-size: 12px; padding: 5px 10px;
}
.form-select {
appearance: none;
}
.error-box, .errors {
background: color-mix(in srgb, var(--color-status-red, #e74c3c) 10%, var(--color-surface, #0e1018));
  border: 1px solid color-mix(in srgb, var(--color-status-red, #e74c3c) 35%, transparent);
  color: var(--color-status-red, #e74c3c);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin: 8px 0;
}
.eos-auth-success {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 12%, transparent);
  color: var(--color-status-green, #2ecc71);
  border: 1px solid color-mix(in srgb, var(--color-status-green, #2ecc71) 30%, transparent);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
}
.eos-primary-btn {
appearance: none;
  background: var(--color-accent, #7b4dff);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.eos-primary-btn:hover {
filter: brightness(1.12);
}
.demo-tools {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--color-border, rgba(255,255,255,.15));
  border-radius: 10px;
  margin-bottom: 14px;
}
mt-* family) */
.mb-0 {
margin-bottom: 0;
}
.mb-3 {
margin-bottom: 1rem;
}
.mb-20 {
margin-bottom: 20px;
}
.mb-6px {
margin-bottom: 6px;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-10 {
margin-top: 2.5rem;
}
.justify-content-between {
justify-content: space-between;
}
.page-subtitle {
font-size: 13px; color: var(--color-text-secondary, #9494a8); margin-top: 2px;
}
.icon-jama {
color: var(--color-accent, #7b4dff);
}
.live-dot {
display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-green, #2ecc71);
  box-shadow: 0 0 6px var(--color-status-green, #2ecc71);
}
.intake-grid {
display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.table-sm {
font-size: 12px;
}
.table-responsive {
overflow-x: auto;
}
.table-striped tbody tr:nth-child(odd) {
background: color-mix(in srgb, var(--color-raised, #13152a) 40%, transparent);
}
.text-danger {
color: var(--color-status-red, #e74c3c);
}
.text-warning {
color: var(--color-status-warn, #f59e0b);
}
.text-success {
color: var(--color-status-green, #2ecc71);
}
.text-accent {
color: var(--color-accent, #7b4dff);
}
.text-end {
text-align: right;
}
.small {
font-size: 12px;
}
.badge-off, .badge-on {
display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.badge-off {
background: color-mix(in srgb, var(--color-status-red, #e74c3c) 14%, transparent); color: var(--color-status-red, #e74c3c);
}
.badge-on {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 14%, transparent); color: var(--color-status-green, #2ecc71);
}
.status-warn {
display: inline-block;
  background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 16%, transparent);
  color: var(--color-status-warn, #f59e0b);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
}
.qr-page {
max-width: 640px; margin: 0 auto; padding: 20px;
}
.qr-edit-form {
display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0;
}
.settings-card-title {
font-size: 14px; font-weight: 700; color: var(--color-text-primary, #d8d9e2); margin-bottom: 8px;
}
.render-err {
color: var(--color-status-red, #e74c3c);
}
.flag-chip {
display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 15%, transparent);
  color: var(--color-status-warn, #f59e0b);
  border: 1px solid color-mix(in srgb, var(--color-status-warn, #f59e0b) 35%, transparent);
}
.lk-line {
padding: 2px 0; border-bottom: 1px solid var(--color-raised, #13152a);
}
.prog-track {
background: var(--color-raised, #13152a); border-radius: 6px; height: 8px; overflow: hidden;
}
.prog-fill {
height: 100%; background: var(--color-accent, #7b4dff); border-radius: 6px;
}
.prog-fill.warn {
background: var(--color-status-red, #e74c3c);
}
.err-line {
border-left: 2px solid var(--color-status-red, #e74c3c); padding-left: 8px; margin-bottom: 6px; color: var(--color-text-primary, #d8d9e2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-row {
display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-raised, #13152a); padding: 2px 0;
}
.build-card {
margin-bottom: 14px; border: 1px solid var(--color-raised, #13152a); border-radius: 10px; padding: 10px 12px;
}
.build-card-head {
display: flex; justify-content: space-between;
}
.intake-chip {
display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px;
}
.chip-g {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 15%, transparent); color: var(--color-status-green, #2ecc71); border: 1px solid color-mix(in srgb, var(--color-status-green, #2ecc71) 35%, transparent);
}
.chip-w {
background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 12%, transparent); color: var(--color-status-warn, #f59e0b); border: 1px solid color-mix(in srgb, var(--color-status-warn, #f59e0b) 35%, transparent);
}
.chip-r {
background: color-mix(in srgb, var(--color-status-red, #e74c3c) 14%, transparent); color: var(--color-status-red, #e74c3c); border: 1px solid color-mix(in srgb, var(--color-status-red, #e74c3c) 40%, transparent);
}
.chip-m {
background: var(--color-base, #07070b); color: var(--color-text-muted, #6b6b80); border: 1px solid var(--color-raised, #13152a);
}
.intake-alert {
padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--color-status-green, #2ecc71) 35%, transparent);
  background: color-mix(in srgb, var(--color-status-green, #2ecc71) 12%, transparent);
  color: var(--color-status-green, #2ecc71);
}
.intake-alert.error {
border-color: color-mix(in srgb, var(--color-status-red, #e74c3c) 35%, transparent);
  background: color-mix(in srgb, var(--color-status-red, #e74c3c) 12%, transparent);
  color: var(--color-status-red, #e74c3c);
}
.chip-action {
font-size: 12px;
  border-radius: 6px;
  padding: 4px 12px;
  border: 1px solid;
  cursor: pointer;
}
.chip-apply {
background: color-mix(in srgb, var(--info, #3b82f6) 18%, transparent); color: var(--info, #3b82f6); border-color: color-mix(in srgb, var(--info, #3b82f6) 40%, transparent);
}
.chip-rollback {
background: color-mix(in srgb, var(--color-status-warn, #f59e0b) 15%, transparent); color: var(--color-status-warn, #f59e0b); border-color: color-mix(in srgb, var(--color-status-warn, #f59e0b) 40%, transparent);
}
.chip-close {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 15%, transparent); color: var(--color-status-green, #2ecc71); border-color: color-mix(in srgb, var(--color-status-green, #2ecc71) 35%, transparent);
}
.stat-card-link {
text-decoration: none; color: inherit; display: block;
}
.store-scope {
font-size: 12px; color: var(--color-text-muted, #6b6b80); font-family: ui-monospace, Menlo, monospace;
}
.task-proof {
margin-top: 8px; font-size: 12px; color: var(--color-text-secondary, #9494a8);
}
.trust-cards {
display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px;
}
.users-table-card {
border: 1px solid var(--color-border, rgba(255,255,255,.08)); border-radius: 12px; overflow: hidden; background: var(--color-surface, #0e1018);
}
.preview-toolbar {
display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--color-border, rgba(255,255,255,.08));
  border-radius: 10px;
  background: var(--color-surface, #0e1018);
  margin-bottom: 10px;
}
.pv-size-desktop {
border: 1px solid var(--color-accent, #7b4dff);
  color: var(--color-accent-hover, #9c6bff);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.avail-slot {
display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--color-border, rgba(255,255,255,.15));
  background: var(--color-raised, #13152a);
  color: var(--color-text-primary, #d8d9e2);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}
.avail-slot:hover {
border-color: var(--color-accent, #7b4dff);
}
.avail-slot.slot-row.open {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 16%, var(--color-raised, #13152a));
}
.avail-slot.slot-row.blocked {
background: color-mix(in srgb, var(--color-status-red, #e74c3c) 16%, var(--color-raised, #13152a));
}
.slot-state {
font-weight: 700;
}
.booking-act {
border: 1px solid var(--color-border, rgba(255,255,255,.15));
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.booking-confirm {
background: color-mix(in srgb, var(--color-status-green, #2ecc71) 14%, transparent); color: var(--color-status-green, #2ecc71);
}
.booking-done {
background: var(--color-raised, #222); color: var(--color-text-secondary, #ccc);
}
.booking-cancel {
background: color-mix(in srgb, var(--color-status-red, #e74c3c) 14%, transparent); color: var(--color-status-red, #f0a0a0);
}
.booking-del {
color: var(--color-text-muted, #6b6b80);
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
.booking-del:hover {
color: var(--color-status-red, #e74c3c);
  border-color: color-mix(in srgb, var(--color-status-red, #e74c3c) 35%, transparent);
}
.chat-link {
font-size: 13px; color: var(--accent, #7B4DFF); text-decoration: none;
}
.attribution {
font-size: 12px; color: var(--text-muted, var(--color-text-muted)); font-style: normal;
}
.emoji {
font-size: 20px;
}
.footer-text {
font-size: 12px; color: var(--text-muted, var(--color-text-muted));
}
.stat-num {
font-size: 26px; font-weight: 700; color: var(--accent, #7B4DFF);
}
.subtitle {
font-size: 13px; color: var(--text-secondary, var(--color-text-secondary));
}
.weight-400 {
font-weight: 400;
}
.legal-page {
max-width: 720px; margin: 0 auto; font-size: 14px; line-height: 1.8; color: var(--text-secondary, var(--color-text-secondary));
}
.text-center {
text-align: center;
}
.updated {
font-size: 12px; color: var(--text-muted, var(--color-text-muted));
}
.text-red {
color: var(--status-red);
}
.error-page {
min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.error-container {
text-align: center; max-width: 480px;
}
.error-code {
font-size: 88px; font-weight: 800; line-height: 1; color: var(--accent, #7B4DFF); margin: 0 0 12px;
}
.error-title {
font-size: 22px; font-weight: 600; color: var(--text-primary, var(--color-text-primary)); margin: 0 0 8px;
}
.error-message {
font-size: 14px; color: var(--text-secondary, var(--color-text-secondary)); line-height: 1.6; margin: 0 0 24px;
}
.error-actions {
display: flex; gap: 10px; justify-content: center;
}
.not-found-shell {
min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 40px 24px;
}
.not-found-card {
position: relative; text-align: center; max-width: 560px; background: var(--bg-surface, var(--surface)); border: 1px solid var(--border, var(--color-border)); border-radius: 24px; padding: 56px 40px; overflow: hidden;
}
.not-found-glow {
position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(123,77,255,0.25), transparent 70%); pointer-events: none;
}
.not-found-orb {
margin-bottom: 16px;
}
.not-found-code {
font-size: 88px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent, #7B4DFF), var(--violet-soft, #a855f7)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; margin: 0 0 12px;
}
.not-found-heading {
font-size: 22px; font-weight: 600; color: var(--text-primary, var(--color-text-primary)); margin: 0 0 8px;
}
.not-found-message {
font-size: 14px; color: var(--text-secondary, var(--color-text-secondary)); line-height: 1.6; margin: 0 0 28px;
}
.not-found-quick-links {
display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px;
}
.not-found-suggestion {
display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--text-muted, var(--color-text-muted)); padding: 12px 16px; background: var(--raised, var(--color-raised)); border-radius: 12px;
}
.not-found-suggestion strong {
color: var(--accent, #7B4DFF); font-weight: 600; margin: 0 4px;
}
.nf-btn {
display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500; text-decoration: none; transition: opacity 0.2s ease, border-color 0.2s ease;
}
.nf-btn-primary {
background: var(--accent, #7B4DFF); color: var(--accent-on, #0f0f0d);
}
.nf-btn-primary:hover {
opacity: 0.9;
}
.nf-btn-ghost {
background: transparent; color: var(--text-secondary, var(--color-text-secondary)); border: 1px solid var(--border, var(--color-border));
}
.nf-btn-ghost:hover {
border-color: var(--accent, #7B4DFF); color: var(--accent, #7B4DFF);
}
.nf-suggestion-icon {
font-size: 16px;
}
.quickstart-page {
max-width: 720px; margin: 0 auto;
}
.qs-header {
text-align: center; margin-bottom: 32px;
}
.qs-subtitle {
font-size: 14px; color: var(--text-secondary, var(--color-text-secondary));
}
.qs-steps {
list-style: none; margin: 0 0 24px; padding: 0; counter-reset: qs;
}
.qs-step {
display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border, var(--color-border)); counter-increment: qs;
}
.qs-step__number {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--accent, #7B4DFF); color: var(--accent-on, #0f0f0d); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.qs-code {
background: var(--raised, var(--color-raised)); border-radius: 8px; padding: 12px 16px; font-family: monospace; font-size: 13px; color: var(--text-secondary, var(--color-text-secondary)); overflow-x: auto;
}
.qs-faq {
font-size: 13px; color: var(--text-secondary, var(--color-text-secondary)); line-height: 1.7;
}
.qs-tip {
font-size: 13px; color: var(--text-muted, var(--color-text-muted)); padding: 12px 16px; background: var(--raised, var(--color-raised)); border-radius: 10px;
}
.qs-cta {
margin-top: 24px;
}
.bg-accent {
background: var(--accent);
}
.fade-in {
animation: fadeIn 0.4s ease;
}
.flex-1 {
flex: 1;
}
.form-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.inline {
display: inline;
}
.inline-block {
display: inline-block;
}
.lh-16 {
line-height: 1.6;
}
.m-0 {
margin: 0;
}
.mb-4 {
margin-bottom: 4px;
}
.mb-6 {
margin-bottom: 6px;
}
.mb-16 {
margin-bottom: 16px;
}
.mb-24 {
margin-bottom: 24px;
}
.mb-32 {
margin-bottom: 32px;
}
.mt-12 {
margin-top: 12px;
}
.mt-16 {
margin-top: 16px;
}
.mt-24 {
margin-top: 24px;
}
.mw-480px {
max-width: 480px;
}
.p-8 {
padding: 32px;
}
.radius-md {
border-radius: var(--radius-md);
}
.sub {
font-size: 13px; color: var(--text-muted);
}
.text-12 {
font-size: 12px;
}
.text-13 {
font-size: 13px;
}
.text-14 {
font-size: 14px;
}
.text-15 {
font-size: 15px;
}
.text-48 {
font-size: 48px;
}
.text-secondary {
color: var(--text-secondary, var(--color-text-secondary));
}
.w-100 {
width: 100%;
}
.bg-none {
background: none;
}
.bg-surface-tint {
background: var(--bg-surface);
}
.border-none {
border: none;
}
.cursor-pointer {
cursor: pointer;
}
.mb-12 {
margin-bottom: 12px;
}
.mb-20px {
margin-bottom: 20px;
}
.mt-4 {
margin-top: 4px;
}
.mw-420px {
max-width: 420px;
}
.p-40px {
padding: 40px;
}
.p-5 {
padding: 20px;
}
.p-6 {
padding: 24px;
}
.px-5 {
padding-left: 20px; padding-right: 20px;
}
.py-10 {
padding-top: 40px; padding-bottom: 40px;
}
.py-5 {
padding-top: 20px; padding-bottom: 20px;
}
.radius-lg {
border-radius: var(--radius-lg);
}
.text-18 {
font-size: 18px;
}
.text-20 {
font-size: 20px;
}
.weight-500 {
font-weight: 500;
}
.weight-600 {
font-weight: 600;
}
.alert {
padding: 12px 16px; border-radius: 10px; font-size: 13px; margin-bottom: 14px;
}
.alert-info {
background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--info, #3b82f6);
}
.alert-success {
background: rgba(46,204,138,0.1); border: 1px solid rgba(46,204,138,0.3); color: var(--status-green, #2ecc8a);
}
.billing-summary {
background: var(--raised, var(--color-raised)); border-radius: 12px; padding: 16px; font-size: 14px; color: var(--text-secondary, var(--color-text-secondary));
}
.flex-center {
display: flex; align-items: center; justify-content: center;
}
.flex-column {
display: flex; flex-direction: column;
}
.flex-shrink-0 {
flex-shrink: 0;
}
.gap-12 {
gap: 12px;
}
.items-start {
align-items: flex-start;
}
.mb-2 {
margin-bottom: 2px;
}
.mt-20px {
margin-top: 20px;
}
.mt-6px {
margin-top: 6px;
}
.notification-item {
display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border, var(--color-border)); font-size: 14px; color: var(--text-secondary, var(--color-text-secondary));
}
.project-grid-modal {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
}
.radius-pill {
border-radius: var(--radius-pill);
}
.settings-summary {
background: var(--raised, var(--color-raised)); border-radius: 12px; padding: 16px; font-size: 14px; color: var(--text-secondary, var(--color-text-secondary));
}
.text-11 {
font-size: 11px;
}
.text-16 {
font-size: 16px;
}
.modal-confirm-body {
font-size: 14px; color: var(--text-secondary, var(--color-text-secondary)); line-height: 1.6;
}
.modal-confirm-icon {
font-size: 32px; text-align: center; margin-bottom: 8px;
}
.modal-confirm-text {
font-size: 14px; color: var(--text-secondary, var(--color-text-secondary));
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}