/* CollabAI Multi-Theme Design System */
:root {
  /* Default Dark Mode Variables */
  --bg-canvas: #111111;
  --bg-sidebar: #141414;
  --bg-surface: #171717;
  --bg-elevated: #1c1c1c;
  --bg-input: #1f1f1f;
  --bg-hover: #262626;
  --bg-hover-subtle: rgba(255, 255, 255, 0.06);
  --border-subtle: #262626;
  --border-med: #303030;
  --border-active: #3c3c3c;
  --text-primary: #EDEDED;
  --text-secondary: #A1A1AA;
  --text-muted: #71717A;
  --btn-primary-bg: #EDEDED;
  --btn-primary-text: #171717;
  --btn-primary-hover: #DFDFDF;
  --code-bg: #161616;
  --code-text: #34D399;
  --inline-code-bg: #1f1f1f;
  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-border: rgba(255, 255, 255, 0.08);
  --icon-invert: 0;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --btn-border: 1px solid transparent;
  --btn-shadow: none;
}

html.light {
  /* Refined Minimalist Light Mode Variables */
  --bg-canvas: #F9F9F8;
  --bg-sidebar: #F3F3F2;
  --bg-surface: #FFFFFF;
  --bg-elevated: #F4F4F3;
  --bg-input: #FFFFFF;
  --bg-hover: #EBEBEA;
  --bg-hover-subtle: rgba(0, 0, 0, 0.04);
  --border-subtle: #E5E5E5;
  --border-med: #D4D4D8;
  --border-active: #A1A1AA;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-muted: #71717A;
  --btn-primary-bg: #18181B;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #27272A;
  --code-bg: #F4F4F5;
  --code-text: #059669;
  --inline-code-bg: #F0F0F2;
  --badge-bg: rgba(0, 0, 0, 0.04);
  --badge-border: rgba(0, 0, 0, 0.08);
  --icon-invert: 1;
  --shadow-color: rgba(0, 0, 0, 0.06);
  --btn-border: 1px solid transparent;
  --btn-shadow: none;
}

html.pink {
  /* Warm Japanese Washi Cream & Sakura Blossom Neo-Brutalist Wireframe Theme */
  --bg-canvas: #FAF6F0;
  --bg-sidebar: #F5EFE6;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFBF7;
  --bg-input: #FFFFFF;
  --bg-hover: #F2E9DC;
  --bg-hover-subtle: rgba(255, 93, 162, 0.12);
  --border-subtle: #E8DDCF;
  --border-med: #231C18;
  --border-active: #FF5DA2;
  --text-primary: #231C18;
  --text-secondary: #5C5248;
  --text-muted: #968A7D;
  
  /* Neo-Brutalist Sakura Wireframe Tokens */
  --btn-primary-bg: #FF5DA2;
  --btn-primary-text: #111111;
  --btn-primary-hover: #FF4092;
  --code-bg: #FFF5F9;
  --code-text: #D81B60;
  --inline-code-bg: #FFEBF3;
  --badge-bg: #FFEBF3;
  --badge-border: #231C18;
  --icon-invert: 1;
  --shadow-color: rgba(35, 28, 24, 0.15);
  --btn-border: 2px solid #231C18;
  --btn-shadow: 3px 3px 0px #231C18;
}

html.crt {
  /* Retro Phosphor Green CRT Monitor Interface Theme */
  --bg-canvas: #060A06;
  --bg-sidebar: #080E08;
  --bg-surface: #0C150C;
  --bg-elevated: #101C10;
  --bg-input: #080F08;
  --bg-hover: #162B16;
  --bg-hover-subtle: rgba(51, 255, 102, 0.08);
  --border-subtle: #142814;
  --border-med: #1F3F1F;
  --border-active: #33FF66;
  --text-primary: #33FF66;
  --text-secondary: #22B852;
  --text-muted: #167032;
  --btn-primary-bg: #163016;
  --btn-primary-text: #33FF66;
  --btn-primary-hover: #1F451F;
  --code-bg: #040804;
  --code-text: #33FF66;
  --inline-code-bg: #0E1A0E;
  --badge-bg: rgba(51, 255, 102, 0.08);
  --badge-border: rgba(51, 255, 102, 0.20);
  --icon-invert: 0;
  --shadow-color: rgba(0, 255, 102, 0.15);
  --btn-border: 1px solid #33FF66;
  --btn-shadow: 0 0 8px rgba(51, 255, 102, 0.20);
}

html.synthwave {
  /* Cyberpunk Synthwave Neon Theme */
  --bg-canvas: #0D0B18;
  --bg-sidebar: #110D20;
  --bg-surface: #17112B;
  --bg-elevated: #22173D;
  --bg-input: #120E22;
  --bg-hover: #2B1D4B;
  --bg-hover-subtle: rgba(255, 42, 133, 0.12);
  --border-subtle: #2A1D47;
  --border-med: #452C70;
  --border-active: #FF2A85;
  --text-primary: #F7EFFF;
  --text-secondary: #BCA8DC;
  --text-muted: #7E67A2;
  --btn-primary-bg: #FF2A85;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #E61570;
  --code-bg: #0D071B;
  --code-text: #00F0FF;
  --inline-code-bg: #1F1238;
  --badge-bg: rgba(255, 42, 133, 0.12);
  --badge-border: rgba(255, 42, 133, 0.30);
  --icon-invert: 0;
  --shadow-color: rgba(255, 42, 133, 0.22);
  --btn-border: 1px solid #FF2A85;
  --btn-shadow: 0 0 12px rgba(255, 42, 133, 0.35);
}

html.saas {
  /* Modern SaaS Glassmorphic Theme with #315EFF Highlight */
  --bg-canvas: #090D16;
  --bg-sidebar: #0D121F;
  --bg-surface: #121829;
  --bg-elevated: #182035;
  --bg-input: #0E1424;
  --bg-hover: #1E293B;
  --bg-hover-subtle: rgba(49, 94, 255, 0.10);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-med: rgba(255, 255, 255, 0.14);
  --border-active: #315EFF;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --btn-primary-bg: #315EFF;
  --btn-primary-text: #FFFFFF;
  --btn-primary-hover: #254BDB;
  --code-bg: #070B14;
  --code-text: #60A5FA;
  --inline-code-bg: #151D30;
  --badge-bg: rgba(49, 94, 255, 0.12);
  --badge-border: rgba(49, 94, 255, 0.25);
  --icon-invert: 0;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --btn-border: 1px solid rgba(255, 255, 255, 0.2);
  --btn-shadow: 0 0 20px rgba(49, 94, 255, 0.35);
}

@layer base {
  * {
    border-color: var(--border-subtle);
    font-weight: 400;
  }
  body {
    background-color: var(--bg-canvas);
    color: var(--text-primary);
  }
}

/* Smooth, flicker-free theme color transitions */
body, aside, nav, .content-area, .sidebar-panel,
.bg-app-canvas, .bg-app-sidebar, .bg-app-surface, .bg-app-elevated, .bg-app-input {
  transition: background-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 160ms cubic-bezier(0.4, 0, 0.2, 1),
              color 120ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fluid animations for sidebar collapse/expand */
.sidebar-panel {
  transition: width 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
  will-change: width, transform;
}

.content-area {
  transition: margin-left 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Resizer handle on sidebar */
.resizer-handle {
  width: 6px;
  cursor: col-resize;
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  z-index: 50;
  transition: background-color 0.15s;
}
.resizer-handle:hover, .resizer-handle.resizing {
  background-color: rgba(120, 120, 120, 0.25);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-med);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Shimmer animation for thinking states */
@keyframes shimmer {
  0% { opacity: 0.3; transform: translateX(-10%); }
  50% { opacity: 0.8; transform: translateX(0%); }
  100% { opacity: 0.3; transform: translateX(10%); }
}
.skeleton-shimmer {
  animation: shimmer 1.6s infinite ease-in-out;
}

/* Open AI Assistant Response Styling */
.prose-open {
  color: var(--text-primary);
  font-size: 14.5px;
  line-height: 1.7;
  user-select: text;
  -webkit-user-select: text;
}
.prose-open h1 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 14px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.prose-open h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-top: 12px;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.prose-open h3 {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 10px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.prose-open h4 {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-top: 8px;
  margin-bottom: 4px;
}
.prose-open p {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 10px;
  font-weight: 400;
}
.prose-open hr {
  display: none;
}
.prose-open ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 12px;
}
.prose-open ol {
  list-style-type: decimal;
  padding-left: 20px;
  margin-bottom: 12px;
}
.prose-open li {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.6;
  font-weight: 400;
}
.prose-open strong {
  color: var(--text-primary);
  font-weight: 600;
}
.prose-open pre {
  background-color: var(--code-bg);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: 'Cousine', monospace;
  font-size: 12.5px;
  color: var(--code-text);
  line-height: 1.55;
  margin: 12px 0;
  user-select: text;
}
.prose-open code:not(pre code) {
  background-color: var(--inline-code-bg);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Cousine', monospace;
  font-size: 12px;
  color: var(--text-primary);
  user-select: text;
}
.prose-open a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose-open blockquote {
  border-left: 2px solid var(--text-muted);
  padding-left: 14px;
  color: var(--text-secondary);
  margin: 10px 0;
}

/* User Message bubble text selectable */
.user-msg-bubble {
  user-select: text;
  -webkit-user-select: text;
}

/* Dynamic Primary Button Styling: Theme Aware */
.btn-primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: 500;
  transition: all 0.15s ease;
}
.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

/* =========================================================
   SAKURA BLOSSOM & NEO-BRUTALIST WIREFRAME THEME ENHANCEMENTS
   ========================================================= */

/* Neo-Brutalist Wireframe Cards & Panels */
html.pink .bg-app-surface,
html.pink .bg-app-elevated {
  border: 1.5px solid #231C18 !important;
  box-shadow: 3px 3px 0px #231C18 !important;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Lift on Interactive Cards */
html.pink .bg-app-surface.hover\:border-app-borderMed:hover,
html.pink .bg-app-surface.cursor-pointer:hover,
html.pink .bg-app-surface:hover {
  box-shadow: 4px 4px 0px #231C18 !important;
  transform: translate(-1px, -1px);
}

/* Standalone Form Inputs & Search Bars in Pink Theme */
html.pink input[type='text']:not(#dashboard-composer-input),
html.pink input[type='password'],
html.pink input[type='search'],
html.pink select {
  border: 1px solid #E8DDCF !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
  color: #231C18 !important;
  border-radius: 12px;
  padding: 8px 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
html.pink input:focus:not(#dashboard-composer-input),
html.pink select:focus {
  border-color: #FF5DA2 !important;
  box-shadow: 0 0 0 3px rgba(255, 93, 162, 0.20) !important;
  outline: none !important;
}

/* Embedded Message Typing Areas (Chat & Dashboard Composer) - Zero inner borders, clean & spacious */
html.pink #dashboard-composer-input,
html.pink #chat-message-input,
html.pink .prompt-input-wrapper textarea,
html.pink .prompt-input-wrapper input,
html.pink textarea.flex-1,
html.pink input.flex-1 {
  border: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
  padding: 6px 10px !important;
  outline: none !important;
}

/* Neo-Brutalist Tactile Primary Buttons */
html.pink .btn-primary {
  background-color: #FF5DA2 !important;
  color: #111111 !important;
  font-weight: 700 !important;
  border: 2px solid #231C18 !important;
  box-shadow: 3px 3px 0px #231C18 !important;
  letter-spacing: 0.02em;
  transition: transform 0.1s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s ease !important;
}
html.pink .btn-primary:hover {
  background-color: #FF75B3 !important;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #231C18 !important;
}
html.pink .btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #231C18 !important;
}

/* Secondary & Wireframe Buttons */
html.pink .wireframe-btn,
html.pink button.border {
  border: 1.5px solid #231C18 !important;
  box-shadow: 2px 2px 0px #231C18 !important;
  font-weight: 600 !important;
  transition: all 0.12s ease !important;
}
html.pink .wireframe-btn:hover,
html.pink button.border:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #231C18 !important;
}
html.pink .wireframe-btn:active,
html.pink button.border:active {
  transform: translate(2px, 2px);
  box-shadow: 0.5px 0.5px 0px #231C18 !important;
}

/* Sticker-Style Badges & Pills */
html.pink span[class*="rounded-full"][class*="border"] {
  border: 1.5px solid #231C18 !important;
  box-shadow: 1.5px 1.5px 0px #231C18 !important;
  font-weight: 700 !important;
}

/* Popover & Dialog Windows */
html.pink #user-menu-popover,
html.pink [role="dialog"],
html.pink .modal-container {
  border: 2px solid #231C18 !important;
  box-shadow: 5px 5px 0px #231C18 !important;
}

/* Pink mode logo - crisp clean solid dark */
html.pink .logo-img {
  filter: invert(1) brightness(0);
}

/* Light mode logo - crisp solid black */
html.light .logo-img {
  filter: invert(1) brightness(0);
}

/* Pink Theme Clean & Highly Legible Typography */
html.pink,
html.pink body,
html.pink button,
html.pink input,
html.pink textarea,
html.pink select,
html.pink [role='button'],
html.pink .font-sans {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  letter-spacing: normal;
}

/* Cute Marshmallow Scrollbar for Pink Theme */
html.pink ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
html.pink ::-webkit-scrollbar-track {
  background: #FAF6F0;
}
html.pink ::-webkit-scrollbar-thumb {
  background: #FFB3CD;
  border: 1.5px solid #231C18;
  border-radius: 9999px;
}
html.pink ::-webkit-scrollbar-thumb:hover {
  background: #FF7FA9;
}

/* /* --- Pink Theme Custom Cursor with Clean Soft Curves --- */
html.pink,
html.pink body,
html.pink #app-root,
html.pink div,
html.pink p,
html.pink span,
html.pink h1,
html.pink h2,
html.pink h3,
html.pink aside,
html.pink nav,
html.pink header {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 3.5L4 18.5L8.5 14L12.5 19.5L14.8 18L10.5 12.8L16.5 12.8L4 3.5Z' fill='%23FF7FA9' stroke='%23231C18' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto;
}

/* Interactive Clickable Elements: Pink Theme Hand Cursor */
html.pink button,
html.pink a,
html.pink [onclick],
html.pink .cursor-pointer,
html.pink input[type='button'],
html.pink input[type='submit'],
html.pink select,
html.pink [role='button'],
html.pink label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 3C8.2 3 7.5 3.7 7.5 4.5V12.5L6.2 11.2C5.5 10.5 4.4 10.5 3.7 11.2C3 11.9 3 13 3.7 13.7L8.5 18.5C9.8 19.8 11.6 20.5 13.5 20.5H16.5C18.4 20.5 20 18.9 20 17V13C20 12.2 19.3 11.5 18.5 11.5C18.2 11.5 17.9 11.6 17.7 11.8C17.4 11 16.6 10.5 15.7 10.5C15.4 10.5 15.1 10.6 14.8 10.7C14.5 10 13.7 9.5 12.8 9.5C12.5 9.5 12.2 9.6 12 9.7V4.5C12 3.7 11.3 3 10.5 3H9Z' fill='%23FF7FA9' stroke='%23231C18' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 8 3, pointer !important;
}

/* Text Selection and Input Cursors in Pink Theme */
html.pink input[type='text'],
html.pink input[type='password'],
html.pink input[type='search'],
html.pink textarea {
  cursor: text !important;
}

html.pink ::selection {
  background-color: #FF7FA9;
  color: #111111;
}

/* Fade In Animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 180ms ease-out forwards;
}

/* =========================================================
   RETRO PHOSPHOR GREEN CRT MONITOR THEME ENHANCEMENTS
   ========================================================= */

/* CRT Monitor Scanline Raster Overlay */
html.crt::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.26) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.015), rgba(0, 255, 0, 0.01), rgba(0, 255, 0, 0.015));
  z-index: 9999;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.65;
}

/* CRT Phosphor Glow on Headings, Code, & Logo */
html.crt h1,
html.crt h2,
html.crt h3,
html.crt .font-mono {
  text-shadow: 0 0 3px rgba(51, 255, 102, 0.40), 0 0 8px rgba(51, 255, 102, 0.12);
}

/* CRT Theme Font Family - VT323 */
html.crt,
html.crt body,
html.crt button,
html.crt input,
html.crt textarea,
html.crt select,
html.crt [role='button'],
html.crt .font-sans,
html.crt .font-mono,
html.crt code,
html.crt pre {
  font-family: 'VT323', monospace !important;
  letter-spacing: 0.04em;
}
html.crt h1, html.crt h2, html.crt h3 {
  letter-spacing: 0.06em;
}

/* CRT Logo - Phosphor Green Hue with Soft Glow */
html.crt .logo-img {
  filter: invert(56%) sepia(98%) saturate(1400%) hue-rotate(90deg) brightness(1.25) drop-shadow(0 0 3px #33FF66);
}

/* CRT Retro Terminal Primary Buttons */
html.crt .btn-primary {
  background-color: #163016 !important;
  color: #33FF66 !important;
  border: 1px solid #33FF66 !important;
  box-shadow: 0 0 8px rgba(51, 255, 102, 0.20) !important;
  font-family: 'VT323', monospace !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s ease !important;
}
html.crt .btn-primary:hover {
  background-color: #1F451F !important;
  box-shadow: 0 0 14px rgba(51, 255, 102, 0.35) !important;
  text-shadow: 0 0 5px rgba(51, 255, 102, 0.7) !important;
}
html.crt .btn-primary:active {
  transform: translateY(1px);
  background-color: #122812 !important;
}

/* --- CRT Theme Custom Cursor: Retro Phosphor Green --- */
html.crt,
html.crt body,
html.crt #app-root,
html.crt div,
html.crt p,
html.crt span,
html.crt h1,
html.crt h2,
html.crt h3,
html.crt aside,
html.crt nav,
html.crt header {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 3.5L4 18.5L8.5 14L12.5 19.5L14.8 18L10.5 12.8L16.5 12.8L4 3.5Z' fill='%2333FF66' stroke='%23050A05' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto;
}

/* Interactive Clickable Elements: CRT Pointer Cursor */
html.crt button,
html.crt a,
html.crt [onclick],
html.crt .cursor-pointer,
html.crt input[type='button'],
html.crt input[type='submit'],
html.crt select,
html.crt [role='button'],
html.crt label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 3C8.2 3 7.5 3.7 7.5 4.5V12.5L6.2 11.2C5.5 10.5 4.4 10.5 3.7 11.2C3 11.9 3 13 3.7 13.7L8.5 18.5C9.8 19.8 11.6 20.5 13.5 20.5H16.5C18.4 20.5 20 18.9 20 17V13C20 12.2 19.3 11.5 18.5 11.5C18.2 11.5 17.9 11.6 17.7 11.8C17.4 11 16.6 10.5 15.7 10.5C15.4 10.5 15.1 10.6 14.8 10.7C14.5 10 13.7 9.5 12.8 9.5C12.5 9.5 12.2 9.6 12 9.7V4.5C12 3.7 11.3 3 10.5 3H9Z' fill='%2333FF66' stroke='%23050A05' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 8 3, pointer !important;
}

/* Text Selection and Input Cursors in CRT Theme */
html.crt input[type='text'],
html.crt input[type='password'],
html.crt input[type='search'],
html.crt textarea {
  cursor: text !important;
}

html.crt ::selection {
  background-color: #33FF66;
  color: #060A06;
}

/* =========================================================
   CYBERPUNK SYNTHWAVE NEON THEME ENHANCEMENTS
   ========================================================= */

/* Cyberpunk Synthwave Font Family - Orbitron */
html.synthwave,
html.synthwave body,
html.synthwave button,
html.synthwave input,
html.synthwave textarea,
html.synthwave select,
html.synthwave [role='button'],
html.synthwave .font-sans {
  font-family: 'Orbitron', sans-serif !important;
  letter-spacing: 0.02em;
}

/* Synthwave Neon Glow on Headings & Badges */
html.synthwave h1,
html.synthwave h2,
html.synthwave h3 {
  text-shadow: 0 0 4px rgba(255, 42, 133, 0.45), 0 0 12px rgba(138, 43, 226, 0.25);
}

/* Synthwave Logo - Hot Neon Magenta Hue with Electric Glow */
html.synthwave .logo-img {
  filter: invert(32%) sepia(85%) saturate(3500%) hue-rotate(310deg) brightness(1.15) drop-shadow(0 0 4px #FF2A85);
}

/* Synthwave Primary Buttons with Electric Magenta / Purple Gradient */
html.synthwave .btn-primary {
  background: linear-gradient(135deg, #FF2A85 0%, #7928CA 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 0 14px rgba(255, 42, 133, 0.40) !important;
  font-weight: 600 !important;
  transition: all 0.15s ease !important;
}
html.synthwave .btn-primary:hover {
  background: linear-gradient(135deg, #FF459B 0%, #8A2BE2 100%) !important;
  box-shadow: 0 0 20px rgba(255, 42, 133, 0.60) !important;
  transform: translateY(-1px);
}
html.synthwave .btn-primary:active {
  transform: translateY(1px);
}

/* --- Synthwave Theme Custom Cursor: Hot Neon Magenta with Electric Cyan Highlight --- */
html.synthwave,
html.synthwave body,
html.synthwave #app-root,
html.synthwave div,
html.synthwave p,
html.synthwave span,
html.synthwave h1,
html.synthwave h2,
html.synthwave h3,
html.synthwave aside,
html.synthwave nav,
html.synthwave header {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 3.5L4 18.5L8.5 14L12.5 19.5L14.8 18L10.5 12.8L16.5 12.8L4 3.5Z' fill='%23FF2A85' stroke='%23080511' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M5.5 6L5.5 14L8 11.5L11 11.5L5.5 6Z' fill='%2300F0FF' opacity='0.8'/%3E%3C/svg%3E") 4 3, auto;
}

/* Interactive Clickable Elements: Synthwave Pointer Cursor */
html.synthwave button,
html.synthwave a,
html.synthwave [onclick],
html.synthwave .cursor-pointer,
html.synthwave input[type='button'],
html.synthwave input[type='submit'],
html.synthwave select,
html.synthwave [role='button'],
html.synthwave label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 3C8.2 3 7.5 3.7 7.5 4.5V12.5L6.2 11.2C5.5 10.5 4.4 10.5 3.7 11.2C3 11.9 3 13 3.7 13.7L8.5 18.5C9.8 19.8 11.6 20.5 13.5 20.5H16.5C18.4 20.5 20 18.9 20 17V13C20 12.2 19.3 11.5 18.5 11.5C18.2 11.5 17.9 11.6 17.7 11.8C17.4 11 16.6 10.5 15.7 10.5C15.4 10.5 15.1 10.6 14.8 10.7C14.5 10 13.7 9.5 12.8 9.5C12.5 9.5 12.2 9.6 12 9.7V4.5C12 3.7 11.3 3 10.5 3H9Z' fill='%23FF2A85' stroke='%23080511' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3Cpath d='M9 5V11' stroke='%2300F0FF' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") 8 3, pointer !important;
}

/* Text Selection and Input Cursors in Synthwave Theme */
html.synthwave input[type='text'],
html.synthwave input[type='password'],
html.synthwave input[type='search'],
html.synthwave textarea {
  cursor: text !important;
}

html.synthwave ::selection {
  background-color: #FF2A85;
  color: #FFFFFF;
}

/* =========================================================
   MODERN SAAS GLASSMORPHISM THEME ENHANCEMENTS (#315EFF)
   (Inspired by React Bits GlassSurface)
   ========================================================= */

/* SaaS Frosted Glass Surfaces */
html.saas .bg-app-surface {
  background: linear-gradient(135deg, rgba(18, 24, 43, 0.72) 0%, rgba(13, 17, 32, 0.82) 100%) !important;
  backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.08),
    inset 0 0 12px 1px rgba(255, 255, 255, 0.04),
    0 8px 32px 0 rgba(0, 0, 0, 0.40),
    0 2px 16px 0 rgba(31, 38, 135, 0.15) !important;
}

html.saas .bg-app-elevated,
html.saas .glass-surface {
  background: linear-gradient(135deg, rgba(25, 34, 60, 0.72) 0%, rgba(17, 23, 42, 0.84) 100%) !important;
  backdrop-filter: blur(22px) saturate(210%) brightness(1.12);
  -webkit-backdrop-filter: blur(22px) saturate(210%) brightness(1.12);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 16px 2px rgba(255, 255, 255, 0.06),
    0 12px 40px 0 rgba(0, 0, 0, 0.45),
    0 4px 20px 0 rgba(31, 38, 135, 0.20) !important;
}

html.saas .bg-app-input {
  background: rgba(10, 15, 29, 0.65) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.10) !important;
}

/* SaaS Glassmorphic Primary Buttons (New Chat, Send, Actions) */
html.saas .btn-primary {
  background: linear-gradient(135deg, rgba(49, 94, 255, 0.90) 0%, rgba(30, 68, 219, 0.96) 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.65),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.20),
    inset 0 0 8px 1px rgba(255, 255, 255, 0.20),
    0 8px 28px rgba(49, 94, 255, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.35) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(14px) saturate(200%) brightness(1.10);
  -webkit-backdrop-filter: blur(14px) saturate(200%) brightness(1.10);
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

html.saas .btn-primary:hover {
  background: linear-gradient(135deg, #4F78FF 0%, #315EFF 100%) !important;
  border-color: rgba(255, 255, 255, 0.60) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.30),
    inset 0 0 12px 2px rgba(255, 255, 255, 0.30),
    0 10px 36px rgba(49, 94, 255, 0.65),
    0 4px 14px rgba(0, 0, 0, 0.40) !important;
  transform: translateY(-1px);
}

html.saas .btn-primary:active {
  transform: translateY(1px);
}

/* SaaS Secondary Glass Buttons & Tool Pills */
html.saas button.border,
html.saas .wireframe-btn,
html.saas button[class*="rounded-full"][class*="border"],
html.saas button[class*="rounded-xl"][class*="border"],
html.saas button[class*="rounded-2xl"][class*="border"] {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(14px) saturate(190%) brightness(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.15);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.10),
    0 4px 16px 0 rgba(0, 0, 0, 0.25) !important;
  color: #F8FAFC !important;
  transition: all 0.18s ease !important;
}

html.saas button.border:hover,
html.saas .wireframe-btn:hover,
html.saas button[class*="rounded-full"][class*="border"]:hover,
html.saas button[class*="rounded-xl"][class*="border"]:hover,
html.saas button[class*="rounded-2xl"][class*="border"]:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(49, 94, 255, 0.65) !important;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.20),
    0 0 20px rgba(49, 94, 255, 0.35),
    0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transform: translateY(-1px);
}

/* SaaS Suggestion Action Cards (e.g., "Draft async architecture") */
html.saas .prompt-suggestion-btn,
html.saas div[class*="rounded-2xl"][class*="border"] button {
  backdrop-filter: blur(14px) saturate(190%) brightness(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(190%) brightness(1.12);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.30),
    0 4px 16px 0 rgba(0, 0, 0, 0.20);
}

/* SaaS Modern Logo - Pure Crisp White */
html.saas .logo-img {
  filter: brightness(0) invert(1) !important;
}

/* --- SaaS Theme Custom Precision Cursor: Electric Indigo with Soft Glow --- */
html.saas,
html.saas body,
html.saas #app-root,
html.saas div,
html.saas p,
html.saas span,
html.saas h1,
html.saas h2,
html.saas h3,
html.saas aside,
html.saas nav,
html.saas header {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 3.5L4 18.5L8.5 14L12.5 19.5L14.8 18L10.5 12.8L16.5 12.8L4 3.5Z' fill='%23315EFF' stroke='%23FFFFFF' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 4 3, auto;
}

/* Interactive Clickable Elements: SaaS Pointer Cursor */
html.saas button,
html.saas a,
html.saas [onclick],
html.saas .cursor-pointer,
html.saas input[type='button'],
html.saas input[type='submit'],
html.saas select,
html.saas [role='button'],
html.saas label {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 3C8.2 3 7.5 3.7 7.5 4.5V12.5L6.2 11.2C5.5 10.5 4.4 10.5 3.7 11.2C3 11.9 3 13 3.7 13.7L8.5 18.5C9.8 19.8 11.6 20.5 13.5 20.5H16.5C18.4 20.5 20 18.9 20 17V13C20 12.2 19.3 11.5 18.5 11.5C18.2 11.5 17.9 11.6 17.7 11.8C17.4 11 16.6 10.5 15.7 10.5C15.4 10.5 15.1 10.6 14.8 10.7C14.5 10 13.7 9.5 12.8 9.5C12.5 9.5 12.2 9.6 12 9.7V4.5C12 3.7 11.3 3 10.5 3H9Z' fill='%23315EFF' stroke='%23FFFFFF' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 8 3, pointer !important;
}

/* Text Selection and Input Cursors in SaaS Theme */
html.saas input[type='text'],
html.saas input[type='password'],
html.saas input[type='search'],
html.saas textarea {
  cursor: text !important;
}

/* SaaS Text Input Placeholder Palette */
html.saas input::placeholder,
html.saas textarea::placeholder {
  color: #64748B !important;
}

html.saas ::selection {
  background-color: #315EFF;
  color: #FFFFFF;
}

/* =========================================================
   REACT BITS - BORDER GLOW COMPONENT CSS (All Dark Themes)
   ========================================================= */
.border-glow-card {
  --edge-proximity: 0;
  --cursor-angle: 45deg;
  --edge-sensitivity: 25;
  --color-sensitivity: calc(var(--edge-sensitivity) + 15);
  --border-radius: 18px;
  --glow-padding: 36px;
  --cone-spread: 25;

  position: relative;
  border-radius: var(--border-radius);
  isolation: isolate;
  transform: translate3d(0, 0, 0.01px);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  background: var(--card-bg, var(--bg-surface));
  overflow: visible;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

/* --- Dark Minimal Theme: Pure Crisp White Glow --- */
html.dark .border-glow-card {
  --glow-color: hsl(0deg 0% 100% / 100%);
  --glow-color-60: hsl(0deg 0% 100% / 60%);
  --glow-color-50: hsl(0deg 0% 100% / 50%);
  --glow-color-40: hsl(0deg 0% 100% / 40%);
  --glow-color-30: hsl(0deg 0% 100% / 30%);
  --glow-color-20: hsl(0deg 0% 100% / 20%);
  --glow-color-10: hsl(0deg 0% 100% / 10%);

  --gradient-one: radial-gradient(at 80% 55%, #FFFFFF 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #E2E8F0 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #CBD5E1 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #FFFFFF 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #E2E8F0 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #CBD5E1 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #94A3B8 0px, transparent 50%);
  --gradient-base: linear-gradient(#FFFFFF 0 100%);
}

/* --- CRT Terminal Theme: Phosphor Green Glow --- */
html.crt .border-glow-card {
  --glow-color: hsl(135deg 100% 60% / 100%);
  --glow-color-60: hsl(135deg 100% 60% / 60%);
  --glow-color-50: hsl(135deg 100% 60% / 50%);
  --glow-color-40: hsl(135deg 100% 60% / 40%);
  --glow-color-30: hsl(135deg 100% 60% / 30%);
  --glow-color-20: hsl(135deg 100% 60% / 20%);
  --glow-color-10: hsl(135deg 100% 60% / 10%);

  --gradient-one: radial-gradient(at 80% 55%, #33FF66 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #00FF41 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #00CC33 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #33FF66 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #00FF41 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #00CC33 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #00AA22 0px, transparent 50%);
  --gradient-base: linear-gradient(#33FF66 0 100%);
}

/* --- Synthwave 80s Theme: Neon Magenta & Laser Cyan Glow --- */
html.synthwave .border-glow-card {
  --glow-color: hsl(333deg 100% 58% / 100%);
  --glow-color-60: hsl(333deg 100% 58% / 60%);
  --glow-color-50: hsl(333deg 100% 58% / 50%);
  --glow-color-40: hsl(333deg 100% 58% / 40%);
  --glow-color-30: hsl(333deg 100% 58% / 30%);
  --glow-color-20: hsl(333deg 100% 58% / 20%);
  --glow-color-10: hsl(333deg 100% 58% / 10%);

  --gradient-one: radial-gradient(at 80% 55%, #FF2A85 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #00F0FF 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #BD00FF 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #FF2A85 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #00F0FF 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #BD00FF 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #FF0055 0px, transparent 50%);
  --gradient-base: linear-gradient(#FF2A85 0 100%);
}

/* --- Modern SaaS Theme: Royal Indigo & Sky Cyan Glow --- */
html.saas .border-glow-card {
  --glow-color: hsl(225deg 100% 60% / 100%);
  --glow-color-60: hsl(225deg 100% 60% / 60%);
  --glow-color-50: hsl(225deg 100% 60% / 50%);
  --glow-color-40: hsl(225deg 100% 60% / 40%);
  --glow-color-30: hsl(225deg 100% 60% / 30%);
  --glow-color-20: hsl(225deg 100% 60% / 20%);
  --glow-color-10: hsl(225deg 100% 60% / 10%);

  --gradient-one: radial-gradient(at 80% 55%, #315EFF 0px, transparent 50%);
  --gradient-two: radial-gradient(at 69% 34%, #6366F1 0px, transparent 50%);
  --gradient-three: radial-gradient(at 8% 6%, #38BDF8 0px, transparent 50%);
  --gradient-four: radial-gradient(at 41% 38%, #315EFF 0px, transparent 50%);
  --gradient-five: radial-gradient(at 86% 85%, #6366F1 0px, transparent 50%);
  --gradient-six: radial-gradient(at 82% 18%, #38BDF8 0px, transparent 50%);
  --gradient-seven: radial-gradient(at 51% 4%, #6366F1 0px, transparent 50%);
  --gradient-base: linear-gradient(#315EFF 0 100%);
}

/* Border Glow Layer Elements for active dark themes */
html.dark .border-glow-card::before,
html.dark .border-glow-card > .edge-light,
html.crt .border-glow-card::before,
html.crt .border-glow-card > .edge-light,
html.synthwave .border-glow-card::before,
html.synthwave .border-glow-card > .edge-light,
html.saas .border-glow-card::before,
html.saas .border-glow-card > .edge-light {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transition: opacity 0.25s ease-out;
  z-index: 1;
  pointer-events: none;
}

/* Hide glow on inactive hover (unless typing or active) */
html.dark .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active)::before,
html.dark .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active) > .edge-light,
html.crt .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active)::before,
html.crt .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active) > .edge-light,
html.synthwave .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active)::before,
html.synthwave .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active) > .edge-light,
html.saas .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active)::before,
html.saas .border-glow-card:not(:hover):not(:focus-within):not(.sweep-active) > .edge-light {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

/* Steady illumination when typing in the composer */
.border-glow-card:focus-within::before {
  opacity: 0.85 !important;
}
.border-glow-card:focus-within > .edge-light {
  opacity: 0.95 !important;
}

/* Colored mesh-gradient border (Edge Only) */
html.dark .border-glow-card::before,
html.crt .border-glow-card::before,
html.synthwave .border-glow-card::before,
html.saas .border-glow-card::before {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card-bg, var(--bg-surface)) 0 100%) padding-box,
    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
    var(--gradient-one) border-box,
    var(--gradient-two) border-box,
    var(--gradient-three) border-box,
    var(--gradient-four) border-box,
    var(--gradient-five) border-box,
    var(--gradient-six) border-box,
    var(--gradient-seven) border-box,
    var(--gradient-base) border-box;

  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center,
      black calc(var(--cone-spread) * 1%),
      transparent calc((var(--cone-spread) + 15) * 1%),
      transparent calc((100 - var(--cone-spread) - 15) * 1%),
      black calc((100 - var(--cone-spread)) * 1%)
    );
}

/* Outer Edge Light Glow Layer */
html.dark .border-glow-card > .edge-light,
html.crt .border-glow-card > .edge-light,
html.synthwave .border-glow-card > .edge-light,
html.saas .border-glow-card > .edge-light {
  inset: calc(var(--glow-padding) * -1);
  pointer-events: none;
  z-index: 1;

  mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );
  -webkit-mask-image:
    conic-gradient(
      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
    );

  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
  mix-blend-mode: plus-lighter;
}

html.dark .border-glow-card > .edge-light::before,
html.crt .border-glow-card > .edge-light::before,
html.synthwave .border-glow-card > .edge-light::before,
html.saas .border-glow-card > .edge-light::before {
  content: "";
  position: absolute;
  inset: var(--glow-padding);
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--glow-color),
    inset 0 0 1px 0 var(--glow-color-60),
    inset 0 0 3px 0 var(--glow-color-50),
    inset 0 0 6px 0 var(--glow-color-40),
    inset 0 0 15px 0 var(--glow-color-30),
    0 0 1px 0 var(--glow-color-60),
    0 0 3px 0 var(--glow-color-50),
    0 0 6px 0 var(--glow-color-40),
    0 0 15px 0 var(--glow-color-30),
    0 0 25px 2px var(--glow-color-20);
}

/* Light and Pink Themes: Standard Clean Borders without glow */
html.light .border-glow-card::before,
html.light .border-glow-card > .edge-light,
html.pink .border-glow-card::before,
html.pink .border-glow-card > .edge-light {
  display: none !important;
}