:root {
  --accent-color: #4f46e5;
  --accent-color-light: #818cf8;
  --accent-color-dark: #3730a3;
}

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

body {
  background-color: #0a0a0a;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 24px;
  margin: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
}

.card {
  background-color: #141414;
  padding: 51px 37px !important; /* Equal top and bottom padding for perfect vertical centering */
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: max-content !important;
  max-width: 500px !important;
  position: relative;
  overflow: visible;
}

.input-field {
  width: 288px;
  height: 60px !important; /* Exact height for 2 lines of text */
  padding: 10px 12px !important; /* Comfortable padding */
  background-color: #1c1c1c;
  color: #f0f0f0;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.4 !important; /* Proper spacing between lines */
  resize: none !important; /* Prevent user from breaking layout */
  font-family: inherit;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}


.input-field:focus {
  outline: none;
  border: 1px solid #444;
  box-shadow: none;
}

.button {
  width: 120px;
  height: 40px !important; /* Increased from 38px (+2px) for perfect alignment */
  background-color: #ffffff;
  color: #000000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #cccccc;
}

.button:active {
  background-color: #d0d0d0;
}

.error-message {
  color: #dc2626;
  font-size: 14px;
  margin-top: 8px;
  text-align: center;
}

.main-row {
  display: flex;
  gap: 20px !important; /* Decreased from 32px for a tighter layout */
  align-items: center;
}

.params-row {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 14px 24px;
  align-items: start;
  justify-content: center;
  display: none;
}

.params-grid {
  display: grid;
  grid-template-columns: 200px 200px;
  gap: 14px 24px;
  margin-top: 16px !important; /* Subtle adjustment to visually center the grid */
}

.param-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.param-label {
  font-size: 12px;
  color: #aaaaaa;
  text-transform: uppercase;
  font-weight: 500;
}

.param-input {
  height: 40px;
  padding: 0 10px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #f0f0f0;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s ease;
  font-family: inherit;
}


.param-input:focus {
  outline: none;
  border: 1px solid #444;
}

.toggle-group {
  display: flex;
  gap: 8px;
  height: 38px;
}

.toggle-btn {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.05);
  color: #888888;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
}

.toggle-btn:hover {
  border-color: #444;
  color: #aaaaaa;
}

.toggle-btn.active {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
}

.quick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px !important; /* Decreased from 32px to center it perfectly between the input and bottom edge */
}

.quick-label {
  color: #888;
  font-size: 15px;
}

.quick-btn {
  background-color: transparent;
  border: 1px solid #444;
  color: #888888;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-btn:hover {
  border-color: #666;
  color: #aaaaaa;
}

.quick-btn.active {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
}

/* Generated Form Elements */
.form-field-wrapper {
  display: flex;
  margin: auto;
  box-sizing: border-box;
}

.form-field-wrapper label {
  font-size: var(--font-size, 14px);
  color: var(--label-color, #e0e0e0);
  font-family: inherit;
  font-weight: 500;
  margin: 0;
  background: var(--label-bg, transparent);
  padding: var(--label-padding, 0);
  border-radius: var(--label-radius, 0);
}

.form-field-wrapper input {
  width: var(--input-width, 200px);
  height: var(--input-height, 45px);
  font-size: var(--font-size, 14px);
  border-radius: var(--input-radius, 8px);
  box-sizing: border-box;
  padding: 0 15px;
  outline: none;
  transition: all 0.3s ease;
  font-family: inherit;
  color: #fff;
  background: var(--input-bg, #1a1a1a);
  border: var(--input-border, 1px solid #444);
  border-bottom: var(--input-border-bottom, var(--input-border, 1px solid #444));
  backdrop-filter: var(--backdrop-filter, none);
  box-shadow: var(--input-shadow, none);
}

/* Archetype Focus States */
.form-field-wrapper input:focus {
  border-color: #ffffff;
}

.archetype-minimal-underline input:focus {
  border-bottom-color: #fff;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.1);
}

.archetype-glass-input input:focus {
  border-color: white;
}

.archetype-neon-field input:focus {
  border-color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2), inset 0 0 5px rgba(255, 255, 255, 0.05);
}

.archetype-soft-3d-inset input:focus {
  background: #1c1c1c;
}

.archetype-bold-outline input:focus {
  border-color: white;
}

.archetype-cyber-split input:focus {
  border-color: white;
}

.archetype-aurora-glow input {
  animation: var(--input-animation, none);
  background-size: 200% 200% !important;
}

.archetype-aurora-glow input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

@keyframes aurora-mesh {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes liquid-border {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes stealth-pulse-anim {
  0% { border-color: #222; box-shadow: none; }
  50% { border-color: #fff; box-shadow: 0 0 15px rgba(255,255,255,0.1); }
  100% { border-color: #222; box-shadow: none; }
}

.archetype-liquid-outline input {
  background-image: var(--input-bg-image);
  background-origin: var(--input-bg-origin);
  background-clip: var(--input-bg-clip);
}

.archetype-liquid-outline input:focus {
  background-image: var(--input-focus-image);
}

.archetype-cyberpunk-angular input {
  clip-path: var(--clip-path);
}

.archetype-soft-neomorphism input {
  background-color: #1a1a1a;
  box-shadow: var(--input-shadow);
}

.archetype-soft-neomorphism input:focus {
  box-shadow: var(--input-focus-shadow);
}

.archetype-double-border input {
  outline: var(--input-outline);
  outline-offset: var(--input-outline-offset);
}

.archetype-double-border input:focus {
  outline: var(--input-focus-outline);
}

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

@keyframes neon-pulse-anim {
  0% { box-shadow: 0 0 5px rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 20px rgba(255,255,255,0.6); }
  100% { box-shadow: 0 0 5px rgba(255,255,255,0.2); }
}

@keyframes rotate-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes holographic-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes input-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes glitch-anim {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

.archetype-neon-pulse input:focus {
  animation: neon-pulse-anim 2s infinite;
}

.archetype-apple-modern input:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15) !important;
}

.archetype-retro-terminal input {
  font-family: "Courier New", monospace !important;
  color: #00ff00 !important;
  border-color: rgba(0, 255, 0, 0.2) !important;
}

.archetype-retro-terminal input:focus {
  border-color: #00ff00 !important;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.2) !important;
}

.archetype-soft-shadow-float input {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.archetype-soft-shadow-float input:focus {
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.archetype-glass-v3-dark input {
  background: rgba(0,0,0,0.4) !important;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(192,192,192,0.2) !important;
}

.archetype-pixel-art input {
  border-radius: 0 !important;
  box-shadow: 4px 4px 0px #000;
}

.archetype-pixel-art input:focus {
  box-shadow: 2px 2px 0px #000;
}

.archetype-high-contrast-thick input {
  background: #000 !important;
  border: 3px solid white !important;
  color: white !important;
}

.claude-button {
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0.15) 100%);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 12px 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
}

.model-tabs {
  display: flex;
  gap: 8px;
  margin: -5px 0 28px;
  justify-content: center;
}

.model-tab {
  background-color: transparent;
  color: #888888;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.model-tab.active {
  background-color: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.model-tab:hover {
  border-color: #ffffff;
  color: #ffffff;
}

.result-card {
  background-color: #141414;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 8px 29px 30px 29px;
  margin: 16px auto 0;
  width: 800px;
  max-width: none;
  position: relative;
}

.result-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 12px !important;
  margin: 0 !important;
  height: 56px !important;
  box-sizing: border-box !important;
  margin-bottom: 12px;
}

.header-tab-container {
  position: absolute;
  top: 32px !important; /* Increased to move the badge down */
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.ai-tab-badge, 
.ai-tab-badge * {
  color: #4A4A4A !important; /* Premium soft dark gray for better visual balance */
}

.ai-tab-badge {
  background-color: #ffffff;
  font-weight: 700 !important;
  font-size: 14px;
  padding: 6px 16px 6px 20px;
  border-radius: 0 6px 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 35px !important; /* Increased from 30px (+5px) */
}

.company-name {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
}

.result-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}






.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #28a745;
}

.gpt-card .status-dot {
  background-color: #22c55e;
}

.claude-card .status-dot {
  background-color: #ff6b35;
}

.gemini-card .status-dot {
  width: 8px;
  height: 8px;
  background-color: #4285F4;
}

.llama-card .status-dot {
  width: 8px;
  height: 8px;
  background-color: #8B5CF6;
}

.model-name {
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
}

.provider {
  color: #888888;
  font-size: 12px;
}

/* Modern Icon Toggle Container */
.result-tabs {
  position: absolute !important;
  top: 32px !important;
  right: 37px !important;
  margin: 0 !important;
  z-index: 50 !important;
  display: inline-flex !important; /* Forces horizontal structure */
  flex-direction: row !important;  /* Strictly side-by-side */
  flex-wrap: nowrap !important;    /* Prevents vertical stacking */
  align-items: center !important;
  background-color: #000000;
  border-radius: 8px;
  padding: 4px 5px; /* Adjust padding to fit the 30px buttons inside a 40px container */
  height: 40px !important;
  box-sizing: border-box;
  gap: 0;
  border: 1px solid #222;
}

/* Safely clear the switch for ALL views */
.result-tabs ~ div {
  margin-top: 96px !important; /* Increased from 72px to push the content further down into the perfect vertical center */
  min-height: 520px !important; /* Keeps height proportional */
}

/* Toggle Buttons */
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 30px !important; /* Adjusted from 32px to 30px */
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #888888;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVG Icon Styling */
.tab svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Active State (White background, Black icon) */
.tab.active {
  background-color: #ffffff;
  color: #000000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tab:not(.active):hover {
  color: #cccccc;
}

.preview-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column !important;
  height: 578px !important;
  min-height: 578px !important;
  width: 100%;
  max-width: none;
  margin: 0 auto 12px auto;
  background-color: #1a1a1a;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  border: 1px solid #222;
  border-radius: 8px;
  overflow: auto;
  box-sizing: border-box !important;
}

.code-area {
  font-family: monospace;
  color: #a8ff78;
  font-size: 13px;
  height: 578px !important;
  min-height: 578px !important;
  box-sizing: border-box !important;
  margin: 0 auto 12px auto;
  overflow-y: auto;
  background-color: #1a1a1a;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

.code-area pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  margin: 0;
  padding-right: 10px;
}

.code-split {
  display: flex;
  width: 100%;
  height: 578px !important;
  min-height: 578px !important;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.code-panel {
  flex: 1;
  padding: 16px;
  background-color: #141414;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  position: relative; /* For absolute positioning of copy buttons */
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
}

.code-panel::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

/* Elite 2026 Copy Button */
.copy-btn-visual {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 6px !important;
  color: #000000 !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.copy-btn-visual svg {
  width: 14px !important;
  height: 14px !important;
  stroke: #000000 !important;
  stroke-width: 2 !important;
}

.copy-btn-visual:hover {
  background: #e5e5e5 !important;
  border-color: #e5e5e5 !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4) !important;
}

.copy-btn-visual:active {
  transform: translateY(0);
  background: #d4d4d4 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.panel-label {
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}

.code-panel pre {
  margin: 0;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.45;
  padding-right: 10px;
}


.code-panel.css-panel pre {
  white-space: pre-wrap !important;
  word-break: break-word !important;
}

.panel-divider {
  width: 1px;
  background-color: #2a2a2a;
}

.token-tag {
  color: #569cd6;
}

.token-selector {
  color: #dcdcaa;
}

.token-brace {
  color: #569cd6;
}

.token-attr {
  color: #9cdcfe;
}

.token-value {
  color: #ce9178;
}

.token-css-prop {
  color: #4ec9b0;
}

.token-css-value {
  color: #b5cea8;
}

.result-footer {
  display: flex;
  justify-content: flex-start;
}

#main-input,
#input-title,
#textarea-desc,
#input-width,
#input-height,
#card-input-width,
#card-input-height,
#card-input-radius,
#input-color-card,
#input-border-radius {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: white !important;
}

#textarea-desc {
  resize: none;
  padding-top: 10px;
}

#main-input::placeholder,
#input-title::placeholder,
#textarea-desc::placeholder,
#input-width::placeholder,
#input-height::placeholder,
#card-input-width::placeholder,
#card-input-height::placeholder,
#card-input-radius::placeholder,
#input-color-card::placeholder,
#input-border-radius::placeholder,
#input-mode-width::placeholder,
#input-mode-height::placeholder,
#input-mode-label::placeholder,
#input-mode-font-size::placeholder,
#input-mode-radius::placeholder,
#modal-input-width::placeholder,
#modal-input-height::placeholder,
#modal-input-title::placeholder,
#modal-input-desc::placeholder,
#modal-input-radius::placeholder,
#modal-input-btn-text::placeholder {
  font-family: system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.4) !important;
  opacity: 1;
  letter-spacing: normal !important;
}

/* Global Premium Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* GLOBAL SCROLL RULE DELETED - CONFLICT RESOLVED */

/* Premium Generated Button Base */
.btn-generated {
  /* Layout */
  width: var(--btn-width, 200px);
  height: var(--btn-height, 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Typography */
  font-family: 'system-ui', -apple-system, sans-serif;
  font-weight: var(--btn-font-weight, 600);
  font-size: 15px;
  color: #ffffff !important;
  letter-spacing: var(--btn-letter-spacing, normal);
  text-shadow: var(--btn-text-shadow, none);
  text-transform: none;

  /* Background & Borders */
  background: var(--btn-bg, #ffffff) !important;
  border: var(--btn-border, none);
  border-top: var(--btn-border-top, none);
  border-bottom: var(--btn-border-bottom, none);
  border-left: var(--btn-border-left, none);
  border-right: var(--btn-border-right, none);
  border-radius: var(--btn-radius, 12px);
  box-shadow: var(--btn-shadows, none) !important;
  
  /* FX */
  backdrop-filter: var(--btn-blur, none);
  -webkit-backdrop-filter: var(--btn-blur, none);
  animation: var(--btn-animation, none);
}

.btn-generated span {
  position: relative;
  z-index: 2;
}

.btn-generated .glow-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 4px;
  height: 4px;
  background: var(--main-color);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--main-color);
  z-index: 3;
}

.btn-generated .shine-layer {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: var(--btn-shine-anim, none);
  pointer-events: none;
  z-index: 1;
}

.btn-generated .fx-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: var(--btn-noise-opacity, 0);
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

.btn-generated .edge-highlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.5);
  z-index: 2;
  pointer-events: none;
}

.btn-generated .gradient-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: var(--btn-border-gradient, transparent);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Premium AI Card Base */
.ai-card {
  /* Layout */
  width: var(--card-width, 300px);
  height: var(--card-height, 180px);
  padding: var(--card-padding, 24px) !important;
  border-radius: var(--card-radius, 12px);
  background: var(--card-bg, #ffffff) !important;
  color: var(--card-color, #000000);
  font-family: var(--card-font, 'Inter', sans-serif);
  
  /* Flex Settings */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: var(--card-gap, 12px) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease;
  
  /* Borders & FX */
  border: var(--card-border, none);
  border-bottom: var(--card-border-bottom, none);
  box-shadow: var(--card-shadow, none) !important;
  backdrop-filter: var(--card-blur, none);
  -webkit-backdrop-filter: var(--card-blur, none);
}

.ai-card h3 {
  margin: var(--card-h3-margin, 0 0 8px 0);
  font-size: var(--card-h3-size, 18px);
  font-weight: var(--card-h3-weight, 700);
  letter-spacing: var(--card-h3-spacing, normal);
  text-transform: var(--card-h3-transform, none);
  line-height: var(--card-h3-lh, 1.2);
  color: var(--card-h3-color, inherit);
}

.ai-card p {
  margin: var(--card-p-margin, 0);
  font-size: var(--card-p-size, 13px);
  line-height: var(--card-p-lh, 1.5);
  color: var(--card-p-color, inherit);
  opacity: var(--card-p-opacity, 1);
}

.ai-card button {
  margin-top: var(--card-btn-mt, auto);
  align-self: var(--card-btn-align, flex-start);
  padding: var(--card-btn-padding, 8px 14px);
  background: var(--card-btn-bg, #000000);
  color: var(--card-btn-color, #ffffff);
  border: var(--card-btn-border, none);
  border-radius: var(--card-btn-radius, 8px);
  font-size: var(--card-btn-size, 11px);
  font-weight: var(--card-btn-weight, 600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-card a {
  margin-top: var(--card-link-mt, auto);
  color: var(--card-link-color, inherit);
  font-size: var(--card-link-size, 12px);
  text-decoration: var(--card-link-decor, none);
}

.ai-card .icon-box {
  width: var(--card-icon-size, 44px);
  height: var(--card-icon-size, 44px);
  border-radius: var(--card-icon-radius, 12px);
  background: var(--card-icon-bg, rgba(255,255,255,0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: var(--card-icon-margin, 0);
  font-size: var(--card-icon-fs, 18px);
  color: var(--card-icon-color, inherit);
}

.ai-card .top-bar {
  margin: var(--card-topbar-margin, -18px -18px 12px -18px);
  padding: var(--card-topbar-padding, 8px 12px);
  background: var(--card-topbar-bg, rgba(0,0,0,0.1));
  font-size: 11px;
  font-weight: 600;
  text-transform: var(--card-topbar-transform, none);
  letter-spacing: var(--card-topbar-spacing, normal);
}

.ai-card .footer {
  margin-top: var(--card-footer-mt, 10px);
  display: flex;
  gap: 8px;
  font-size: 11px;
  opacity: 0.8;
}

.ai-card .card-overlay {
  position: absolute;
  inset: 0;
  background: var(--card-overlay-bg, transparent);
  pointer-events: none;
  z-index: 0;
}

/* Internal Containers */
.ai-card .content-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap, 12px);
  height: 100%;
  width: 100%;
}

/* Specific Archetypes */
.glass-glass {
  display: flex !important;
  flex-direction: column !important;
  padding: 20px !important;
}

.glass-glass .card-title,
.glass-glass .card-desc,
.glass-glass h3,
.glass-glass p {
  position: static !important;
  margin: 0 !important;
}

/* Ultra-Procedural Button Architectures */
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.9; }
}

@keyframes shine-sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Ultra-Procedural Button Architectures */
:root {
  --btn-primary: #ffffff;
  --btn-secondary: #000000;
  --btn-accent: #3b82f6;
  --btn-glow-color: rgba(255, 255, 255, 0.5);
  --btn-glow-spread: 15px;
}

.pro-btn-canvas {
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.proto-btn-architecture {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  outline: none;
  border: none;
  text-transform: none;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.proto-btn-simple {
  background-color: var(--btn-primary);
  color: var(--btn-secondary);
}

.proto-btn-gradient {
  background: linear-gradient(135deg, var(--btn-primary), var(--btn-secondary), var(--btn-accent));
  color: #ffffff;
}

.proto-btn-glow {
  background-color: var(--btn-primary);
  color: var(--btn-secondary);
  box-shadow: 
    0 0 var(--btn-glow-spread) var(--btn-glow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.proto-btn-outline {
  background-color: transparent;
  border: 2px solid var(--btn-primary);
  color: var(--btn-primary);
}

/* Atomic Style Parts & FX Layers */
.shine-layer {
  position: absolute;
  top: 0;
  left: -150%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transition: all 0.8s;
  pointer-events: none;
  z-index: 1;
}

.pro-btn-canvas:hover .shine-layer {
  left: 150%;
}

.fx-grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 0;
}

.fx-scanline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.03) 50%,
    rgba(0, 0, 0, 0.03) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 0;
}

/* Animations */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px var(--btn-glow-color); }
  50% { box-shadow: 0 0 20px var(--btn-glow-color); }
}

@keyframes shine-sweep {
  0% { transform: translateX(-200%) skewX(-25deg); }
  100% { transform: translateX(200%) skewX(-25deg); }
}

@keyframes glitch-anim {
  0% { transform: translate(0); clip-path: inset(0 0 0 0); }
  20% { transform: translate(-2px, 2px); clip-path: inset(10% 0 20% 0); }
  40% { transform: translate(-2px, -2px); clip-path: inset(30% 0 5% 0); }
  60% { transform: translate(2px, 2px); clip-path: inset(5% 0 40% 0); }
  80% { transform: translate(2px, -2px); clip-path: inset(25% 0 15% 0); }
  100% { transform: translate(0); clip-path: inset(0 0 0 0); }
}

.animate-pulse {
  animation: pulse-glow 2s infinite;
}

.animate-glitch:hover {
  animation: glitch-anim 0.3s infinite;
}

/* Dark Text Overrides for Archetypes */
.btn-generated.archetype-ocean-breeze-pill,
.btn-generated.archetype-mystic-violet-solid,
.btn-generated.archetype-pop-art-shadow-bold,
.btn-generated.archetype-bold-cartoon-color,
.btn-generated.archetype-3d-color-block {
  color: #000000 !important;
}

.btn-generated.archetype-neon-carved-inset:focus,
.btn-generated.archetype-neon-carved-inset:hover {
  text-shadow: 0 0 10px var(--btn-color, #ffffff), 0 0 20px var(--btn-color, #ffffff) !important;
}

.btn-generated.archetype-underlined-color-filled:hover {
  border-bottom-width: 6px !important;
  transform: translateY(-2px) !important;
}

.btn-generated.archetype-minimal-outline-dynamic:hover {
  background: var(--btn-color, #ffffff) !important;
  color: #ffffff !important;
}

/* ========================================
   ELITE 2026 BUTTON STYLES
   ======================================== */

/* 1. Neural Pulse - elite-style-1 */
.btn-generated.elite-style-1 {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark)) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.3) !important;
  animation: neuralPulse 3s ease-in-out infinite !important;
}

.btn-generated.elite-style-1::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 20% 50%, var(--accent-color-light) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, var(--accent-color-light) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, var(--accent-color-light) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, var(--accent-color-light) 0%, transparent 50%) !important;
  opacity: 0.3 !important;
  animation: neuralNetwork 4s linear infinite !important;
}

.btn-generated.elite-style-1:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.6) !important;
  border-color: var(--accent-color-light) !important;
}

@keyframes neuralPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.3) !important; }
  50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.8) !important; }
}

@keyframes neuralNetwork {
  0% { transform: rotate(0deg) scale(1) !important; }
  50% { transform: rotate(180deg) scale(1.1) !important; }
  100% { transform: rotate(360deg) scale(1) !important; }
}

/* 2. Liquid Mercury - elite-style-2 */
.btn-generated.elite-style-2 {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5) !important;
  color: #333333 !important;
  border: 1px solid #cccccc !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
}

.btn-generated.elite-style-2::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    45deg,
    transparent 30%,
    var(--accent-color) 50%,
    transparent 70%
  ) !important;
  animation: liquidMercury 3s ease-in-out infinite !important;
  opacity: 0.6 !important;
}

.btn-generated.elite-style-2:hover {
  transform: translateY(-1px) !important;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
}

@keyframes liquidMercury {
  0% { transform: translate(-50%, -50%) rotate(0deg) !important; }
  100% { transform: translate(-50%, -50%) rotate(360deg) !important; }
}

/* 3. Glass Morphism Pro - elite-style-3 */
.btn-generated.elite-style-3 {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-generated.elite-style-3::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.1) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 16px !important;
  padding: 1px !important;
  margin: -1px !important;
}

.btn-generated.elite-style-3:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    0 12px 40px rgba(79, 70, 229, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* 4. Cyber Blade - elite-style-4 */
.btn-generated.elite-style-4 {
  background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
  color: var(--accent-color-light) !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 10% 80%, 10% 20%, 0 20%) !important;
}

.btn-generated.elite-style-4::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent) !important;
  animation: cyberBlade 2s linear infinite !important;
}

.btn-generated.elite-style-4:hover {
  background: linear-gradient(135deg, #2a2a2a, #3a3a3a) !important;
  color: #ffffff !important;
  transform: translateX(2px) !important;
}

@keyframes cyberBlade {
  0% { left: -100% !important; }
  100% { left: 100% !important; }
}

/* 5. Holographic Depth - elite-style-5 */
.btn-generated.elite-style-5 {
  background: linear-gradient(45deg, var(--accent-color), var(--accent-color-light), var(--accent-color-dark)) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  mask-image: linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black) !important;
  mask-size: 20px 20px !important;
  mask-position: 0 0 !important;
  animation: holographicShift 3s linear infinite !important;
}

.btn-generated.elite-style-5::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  ) !important;
  animation: holographicDepth 4s linear infinite !important;
}

.btn-generated.elite-style-5:hover {
  transform: translateY(-2px) rotateX(10deg) !important;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.5) !important;
}

@keyframes holographicShift {
  0% { mask-position: 0 0 !important; }
  100% { mask-position: 20px 20px !important; }
}

@keyframes holographicDepth {
  0% { transform: rotate(0deg) scale(1) !important; }
  100% { transform: rotate(360deg) scale(1.2) !important; }
}

/* 6. Aurora Flow - elite-style-6 */
.btn-generated.elite-style-6 {
  background: linear-gradient(
    45deg,
    var(--accent-color-dark) 0%,
    var(--accent-color) 25%,
    var(--accent-color-light) 50%,
    var(--accent-color) 75%,
    var(--accent-color-dark) 100%
  ) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  animation: auroraFlow 4s ease-in-out infinite !important;
}

.btn-generated.elite-style-6::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.2) 0%, transparent 70%) !important;
  animation: auroraPulse 2s ease-in-out infinite !important;
}

.btn-generated.elite-style-6:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(79, 70, 229, 0.6) !important;
}

@keyframes auroraFlow {
  0%, 100% { background-position: 0% 50% !important; }
  50% { background-position: 100% 50% !important; }
}

@keyframes auroraPulse {
  0%, 100% { opacity: 0.2 !important; }
  50% { opacity: 0.6 !important; }
}

/* 7. Bento Minimalist - elite-style-7 */
.btn-generated.elite-style-7 {
  background: #ffffff !important;
  color: #333333 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 500 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

.btn-generated.elite-style-7::before {
  content: '' !important;
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--accent-color) !important;
  border-radius: 50% !important;
  animation: bentoPulse 2s ease-in-out infinite !important;
}

.btn-generated.elite-style-7:hover {
  background: #f8f8f8 !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-color-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.06) !important;
}

@keyframes bentoPulse {
  0%, 100% { transform: scale(1) !important; opacity: 1 !important; }
  50% { transform: scale(1.2) !important; opacity: 0.8 !important; }
}

/* 8. Cosmic Dust - elite-style-8 */
.btn-generated.elite-style-8 {
  background: linear-gradient(135deg, #1a1a2e, #16213e) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-generated.elite-style-8::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: 
    radial-gradient(2px 2px at 20% 30%, var(--accent-color), transparent),
    radial-gradient(2px 2px at 60% 70%, var(--accent-color-light), transparent),
    radial-gradient(1px 1px at 50% 50%, var(--accent-color), transparent),
    radial-gradient(1px 1px at 80% 10%, var(--accent-color-light), transparent) !important;
  background-size: 50px 50px !important;
  animation: cosmicSparkle 3s linear infinite !important;
}

.btn-generated.elite-style-8:hover {
  background: linear-gradient(135deg, #2a2a3e, #26314e) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    0 6px 20px rgba(79, 70, 229, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@keyframes cosmicSparkle {
  0% { background-position: 0% 0%, 30% 30%, 60% 60%, 90% 90% !important; }
  100% { background-position: 100% 100%, 130% 130%, 160% 160%, 190% 190% !important; }
}

/* 9. Biometric Glow - elite-style-9 */
.btn-generated.elite-style-9 {
  background: linear-gradient(135deg, #2a2a2a, #3a3a3a) !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-generated.elite-style-9::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    radial-gradient(circle at 50% 50%, transparent 30%, var(--accent-color) 31%, transparent 32%),
    radial-gradient(circle at 30% 30%, transparent 20%, var(--accent-color-light) 21%, transparent 22%),
    radial-gradient(circle at 70% 70%, transparent 20%, var(--accent-color-light) 21%, transparent 22%) !important;
  opacity: 0.3 !important;
  animation: biometricScan 3s ease-in-out infinite !important;
}

.btn-generated.elite-style-9:hover {
  background: linear-gradient(135deg, #3a3a3a, #4a4a4a) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    0 6px 20px rgba(79, 70, 229, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@keyframes biometricScan {
  0%, 100% { transform: scale(1) rotate(0deg) !important; opacity: 0.3 !important; }
  50% { transform: scale(1.1) rotate(180deg) !important; opacity: 0.6 !important; }
}

/* 10. Void Depth - elite-style-10 */
.btn-generated.elite-style-10 {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    inset 0 2px 10px rgba(0, 0, 0, 0.8),
    0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

.btn-generated.elite-style-10::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
    linear-gradient(135deg, transparent 30%, rgba(79, 70, 229, 0.1) 50%, transparent 70%),
    linear-gradient(45deg, transparent 30%, rgba(79, 70, 229, 0.1) 50%, transparent 70%) !important;
  animation: voidDepth 4s ease-in-out infinite !important;
}

.btn-generated.elite-style-10::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent) !important;
  animation: voidRim 2s linear infinite !important;
}

.btn-generated.elite-style-10:hover {
  background: #1a1a1a !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    inset 0 2px 15px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(79, 70, 229, 0.3),
    0 0 0 1px var(--accent-color) !important;
}

@keyframes voidDepth {
  0%, 100% { opacity: 0.3 !important; }
  50% { opacity: 0.7 !important; }
}

@keyframes voidRim {
  0%, 100% { opacity: 0.3 !important; }
  50% { opacity: 1 !important; }
}

/* ========================================
   COSMIC COLLECTION 2026 BUTTON STYLES
   ======================================== */

/* cosmic-1 (Quantum Glass) */
.btn-generated.cosmic-1 {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    inset 0 2px 10px rgba(79, 70, 229, 0.4),
    inset 0 -2px 10px rgba(79, 70, 229, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.btn-generated.cosmic-1:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    inset 0 2px 15px rgba(79, 70, 229, 0.6),
    inset 0 -2px 15px rgba(79, 70, 229, 0.3),
    0 8px 30px rgba(79, 70, 229, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* cosmic-2 (Liquid Plasma) */
.btn-generated.cosmic-2 {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-color), transparent 50%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  animation: liquidPlasma 4s ease-in-out infinite !important;
}

.btn-generated.cosmic-2:hover {
  animation-duration: 2s !important;
  transform: scale(1.05) !important;
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.5) !important;
}

@keyframes liquidPlasma {
  0%, 100% { background-position: 0% 50% !important; }
  50% { background-position: 100% 50% !important; }
}

/* cosmic-3 (Interstellar Edge) */
.btn-generated.cosmic-3 {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  background-image: 
    linear-gradient(#000, #000),
    conic-gradient(from var(--angle, 0deg), var(--accent-color), transparent) !important;
  background-origin: border-box !important;
  background-clip: content-box, border-box !important;
  animation: interstellarRotate 3s linear infinite !important;
}

.btn-generated.cosmic-3:hover {
  --angle: 360deg !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.4) !important;
}

@keyframes interstellarRotate {
  0% { --angle: 0deg !important; }
  100% { --angle: 360deg !important; }
}

/* cosmic-4 (Obsidian Glow) */
.btn-generated.cosmic-4 {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  filter: drop-shadow(0 0 10px rgba(79, 70, 229, 0.3)) !important;
}

.btn-generated.cosmic-4:hover {
  filter: drop-shadow(0 0 20px rgba(79, 70, 229, 0.6)) drop-shadow(0 0 40px rgba(79, 70, 229, 0.3)) !important;
  transform: translateY(-2px) !important;
  border-color: var(--accent-color) !important;
}

/* cosmic-5 (Bio-Luminescence) */
.btn-generated.cosmic-5 {
  background: linear-gradient(135deg, #1a1a2e, #0f0f1e) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  animation: bioLuminescence 2s infinite ease-in-out !important;
}

.btn-generated.cosmic-5::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: radial-gradient(circle at 50% 50%, var(--accent-color) 0%, transparent 70%) !important;
  opacity: 0.3 !important;
  animation: bioPulse 2s infinite ease-in-out !important;
}

.btn-generated.cosmic-5:hover {
  animation-duration: 1s !important;
  transform: scale(1.02) !important;
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.4) !important;
}

@keyframes bioLuminescence {
  0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.2) !important; }
  50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.6) !important; }
}

@keyframes bioPulse {
  0%, 100% { opacity: 0.3 !important; transform: scale(1) !important; }
  50% { opacity: 0.6 !important; transform: scale(1.1) !important; }
}

/* cosmic-6 (Hologram Shift) */
.btn-generated.cosmic-6 {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  mix-blend-mode: screen !important;
}

.btn-generated.cosmic-6::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(45deg, transparent, var(--accent-color), transparent) !important;
  animation: hologramShift 3s linear infinite !important;
  mix-blend-mode: screen !important;
}

.btn-generated.cosmic-6::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(-45deg, transparent, var(--accent-color-light), transparent) !important;
  animation: hologramShift 3s linear infinite reverse !important;
  mix-blend-mode: screen !important;
}

.btn-generated.cosmic-6:hover {
  animation-duration: 1.5s !important;
  transform: translateY(-1px) scale(1.02) !important;
}

@keyframes hologramShift {
  0% { transform: translate(-50%, -50%) rotate(0deg) !important; }
  100% { transform: translate(-50%, -50%) rotate(360deg) !important; }
}

/* cosmic-7 (Anodic Metal) */
.btn-generated.cosmic-7 {
  background: linear-gradient(145deg, #222222, #050505) !important;
  color: #ffffff !important;
  border: none !important;
  border-left: 2px solid var(--accent-color) !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn-generated.cosmic-7::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 2px !important;
  height: 100% !important;
  background: linear-gradient(to bottom, var(--accent-color), transparent) !important;
  animation: anodicFlow 2s ease-in-out infinite !important;
}

.btn-generated.cosmic-7:hover {
  background: linear-gradient(145deg, #2a2a2a, #0a0a0a) !important;
  border-left-width: 3px !important;
  transform: translateX(2px) !important;
  box-shadow: 
    0 6px 20px rgba(79, 70, 229, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@keyframes anodicFlow {
  0%, 100% { opacity: 0.5 !important; }
  50% { opacity: 1 !important; }
}

/* cosmic-8 (Neumorphic Air) */
.btn-generated.cosmic-8 {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    -5px -5px 15px rgba(255, 255, 255, 0.05),
    5px 5px 15px var(--accent-color),
    inset 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.btn-generated.cosmic-8:hover {
  box-shadow: 
    -8px -8px 20px rgba(255, 255, 255, 0.08),
    8px 8px 20px var(--accent-color),
    inset 0 0 15px rgba(0, 0, 0, 0.4) !important;
  transform: scale(1.02) !important;
}

/* cosmic-9 (Fusion Core) */
.btn-generated.cosmic-9 {
  background: radial-gradient(circle at 50% 50%, #1a1a2e, #000000) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  width: 120px !important;
  height: 120px !important;
  padding: 0 !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 
    0 0 30px rgba(79, 70, 229, 0.3),
    inset 0 0 20px rgba(0, 0, 0, 0.5) !important;
}

.btn-generated.cosmic-9::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 80% !important;
  height: 80% !important;
  background: radial-gradient(circle, var(--accent-color) 0%, transparent 70%) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  filter: blur(10px) !important;
  animation: fusionCore 4s linear infinite !important;
}

.btn-generated.cosmic-9:hover {
  transform: scale(1.1) !important;
  box-shadow: 
    0 0 50px rgba(79, 70, 229, 0.5),
    inset 0 0 30px rgba(0, 0, 0, 0.6) !important;
}

@keyframes fusionCore {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1) !important; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.2) !important; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1) !important; }
}

/* cosmic-10 (Silk Kinetic) */
.btn-generated.cosmic-10 {
  background: linear-gradient(135deg, #1a1a2e, #0f0f1e) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-weight: 600 !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

.btn-generated.cosmic-10::before {
  content: '' !important;
  position: absolute !important;
  top: -100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent) !important;
  transition: top 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.btn-generated.cosmic-10:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 
    0 8px 25px rgba(79, 70, 229, 0.3),
    0 0 20px rgba(79, 70, 229, 0.2) !important;
}

.btn-generated.cosmic-10:hover::before {
  top: 100% !important;
}

/* ========================================
   SPATIAL INPUTS 2026 FIELD STYLES
   ======================================== */

/* elite-input-1 (Glass Portal) */
.form-field-wrapper.elite-input-1 input {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(20px) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: inset 0 0 15px var(--accent-color) !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-1 input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 
    inset 0 0 20px var(--accent-color),
    0 0 20px rgba(79, 70, 229, 0.3) !important;
}

.form-field-wrapper.elite-input-1 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-2 (Neural Trace) */
.form-field-wrapper.elite-input-2 input {
  background: transparent !important;
  color: #ffffff !important;
  border: none !important;
  border-bottom: 2px solid #333333 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transition: border-image 0.5s ease !important;
}

.form-field-wrapper.elite-input-2 input:focus {
  border-image: conic-gradient(from var(--angle, 0deg), var(--accent-color), transparent) 1 !important;
  animation: neuralTrace 3s linear infinite !important;
}

.form-field-wrapper.elite-input-2 input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

@keyframes neuralTrace {
  0% { --angle: 0deg !important; }
  100% { --angle: 360deg !important; }
}

/* elite-input-3 (Liquid Edge) */
.form-field-wrapper.elite-input-3 input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 2px solid var(--accent-color) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  animation: liquidEdge 3s ease-in-out infinite !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-3 input:focus {
  animation-duration: 1.5s !important;
  box-shadow: 0 0 25px rgba(79, 70, 229, 0.4) !important;
}

.form-field-wrapper.elite-input-3 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

@keyframes liquidEdge {
  0%, 100% { border-radius: 12px !important; }
  50% { border-radius: 16px !important; }
}

/* elite-input-4 (Bento Depth) */
.form-field-wrapper.elite-input-4 input {
  background: #0a0a0a !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: 
    inset 4px 4px 10px #000000,
    inset -4px -4px 10px rgba(255, 255, 255, 0.02),
    0 0 10px var(--accent-color) !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-4 input:focus {
  box-shadow: 
    inset 6px 6px 15px #000000,
    inset -6px -6px 15px rgba(255, 255, 255, 0.03),
    0 0 20px var(--accent-color) !important;
}

.form-field-wrapper.elite-input-4 input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* elite-input-5 (Holographic Scan) */
.form-field-wrapper.elite-input-5 input {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-5 input::after {
  content: '' !important;
  position: absolute !important;
  top: -100% !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(180deg, transparent, var(--accent-color), transparent) !important;
  opacity: 0 !important;
  transition: all 0.5s ease !important;
}

.form-field-wrapper.elite-input-5 input:focus::after {
  top: 100% !important;
  opacity: 0.6 !important;
}

.form-field-wrapper.elite-input-5 input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 20px rgba(79, 70, 229, 0.3) !important;
}

.form-field-wrapper.elite-input-5 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-6 (Floating Aurora) */
.form-field-wrapper.elite-input-6 {
  position: relative !important;
}

.form-field-wrapper.elite-input-6 input {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  position: relative !important;
  z-index: 2 !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-6::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 100% !important;
  height: 100% !important;
  background: var(--accent-color) !important;
  filter: blur(30px) !important;
  opacity: 0.3 !important;
  border-radius: 12px !important;
  transform: translate(-50%, -50%) !important;
  transition: opacity 0.3s ease !important;
  z-index: 1 !important;
}

.form-field-wrapper.elite-input-6 input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 25px rgba(79, 70, 229, 0.4) !important;
}

.form-field-wrapper.elite-input-6 input:focus + .form-field-wrapper.elite-input-6::before {
  opacity: 0.6 !important;
}

.form-field-wrapper.elite-input-6 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-7 (Obsidian Inset) */
.form-field-wrapper.elite-input-7 input {
  background: linear-gradient(145deg, #111111, #050505) !important;
  color: #ffffff !important;
  border: 1px solid #222222 !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 255, 255, 0.02) !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-7 input:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 
    inset 3px 3px 8px rgba(0, 0, 0, 0.6),
    inset -3px -3px 8px rgba(255, 255, 255, 0.03),
    0 0 15px rgba(79, 70, 229, 0.3) !important;
}

.form-field-wrapper.elite-input-7 input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* elite-input-8 (Focus Pulse) */
.form-field-wrapper.elite-input-8 input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  animation: focusPulse 2s infinite ease-in-out !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-8 input:focus {
  animation-duration: 1s !important;
  border-color: var(--accent-color) !important;
}

.form-field-wrapper.elite-input-8 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

@keyframes focusPulse {
  0%, 100% { box-shadow: 0 0 10px var(--accent-color) !important; }
  50% { box-shadow: 0 0 25px var(--accent-color) !important; }
}

/* elite-input-9 (Prism Shadow) */
.form-field-wrapper.elite-input-9 input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  filter: drop-shadow(0 10px 15px var(--accent-color)) !important;
  transition: filter 0.3s ease !important;
}

.form-field-wrapper.elite-input-9 input:focus {
  filter: drop-shadow(0 15px 25px var(--accent-color)) drop-shadow(0 0 20px rgba(79, 70, 229, 0.4)) !important;
  border-color: var(--accent-color) !important;
}

.form-field-wrapper.elite-input-9 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-10 (Silk Focus) */
.form-field-wrapper.elite-input-10 input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.form-field-wrapper.elite-input-10 input:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: var(--accent-color) !important;
  border-radius: 24px !important;
  transform: scale(1.02) !important;
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.4) !important;
}

.form-field-wrapper.elite-input-10 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.form-field-wrapper.elite-input-10 input:focus::placeholder {
  opacity: 0.7 !important;
}

/* ========================================
   HYPER-MATERIALISM 2026 INPUT STYLES
   ======================================== */

/* elite-input-11 (Ethereal Pulse) */
.form-field-wrapper.elite-input-11 input {
  background: rgba(255, 255, 255, 0.01) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transition: all 0.4s ease !important;
}

.form-field-wrapper.elite-input-11 input:focus {
  box-shadow: 0 0 20px var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.form-field-wrapper.elite-input-11 input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  transition: opacity 0.4s ease !important;
}

.form-field-wrapper.elite-input-11 input:focus::placeholder {
  opacity: 0.6 !important;
}

/* elite-input-12 (Gravity Field) */
.form-field-wrapper.elite-input-12 input {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transform: translateZ(0) !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-12 input:focus {
  transform: scale(0.98) !important;
  box-shadow: inset 0 0 25px var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

.form-field-wrapper.elite-input-12 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-13 (Crystalline Flow) */
.form-field-wrapper.elite-input-13 input {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent) !important;
  backdrop-filter: contrast(120%) brightness(120%) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent-color) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-13 input:focus {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), transparent) !important;
  backdrop-filter: contrast(130%) brightness(130%) !important;
  box-shadow: 0 0 25px rgba(79, 70, 229, 0.4) !important;
}

.form-field-wrapper.elite-input-13 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-14 (Nano-Mesh Glow) */
.form-field-wrapper.elite-input-14 input {
  background-color: rgba(0, 0, 0, 0.6) !important;
  background-image: radial-gradient(var(--accent-color) 1px, transparent 1px) !important;
  background-size: 10px 10px !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  outline: none !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-14 input:focus {
  background-color: rgba(0, 0, 0, 0.8) !important;
  background-image: radial-gradient(var(--accent-color) 2px, transparent 2px) !important;
  background-size: 8px 8px !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 30px rgba(79, 70, 229, 0.4) !important;
}

.form-field-wrapper.elite-input-14 input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* elite-input-15 (Supernova Inset) */
.form-field-wrapper.elite-input-15 input {
  background: #000000 !important;
  color: var(--accent-color) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  outline: none !important;
  box-shadow: 0 0 40px -10px var(--accent-color) !important;
  transition: all 0.3s ease !important;
}

.form-field-wrapper.elite-input-15 input:focus {
  box-shadow: 
    0 0 60px -15px var(--accent-color),
    inset 0 0 20px rgba(79, 70, 229, 0.3) !important;
  transform: scale(1.02) !important;
}

.form-field-wrapper.elite-input-15 input::placeholder {
  color: var(--accent-color) !important;
  opacity: 0.6 !important;
  font-weight: normal !important;
}

.form-field-wrapper.elite-input-15 input:focus::placeholder {
  opacity: 0.8 !important;
}

/* Fix Outer Wrappers - Kill Outer Scrollbar */
.preview-area { overflow-y: auto !important; overflow-x: hidden !important; }
.code-area, .code-split { overflow: hidden !important; }

/* Enable 2 Independent Scrolls for HTML and CSS */
.code-panel { overflow-y: auto !important; overflow-x: hidden !important; }
.code-panel pre { overflow: visible !important; white-space: pre-wrap !important; }

/* 2026 Elite Scrollbar Design for Code Panels */
.code-panel::-webkit-scrollbar { 
    width: 4px !important; 
    display: block !important; 
}
.code-panel::-webkit-scrollbar-track { 
    background: transparent !important; 
}
.code-panel::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.12) !important; 
    border-radius: 10px !important; 
}
.code-panel:hover::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.3) !important; 
}

/* Help Corner Styles */
.help-corner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: inherit;
    border-bottom-right-radius: 100%;
    z-index: 50;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.help-corner-wrapper:hover {
    background: #d1d1d1;
}

.help-icon {
    color: #444444;
    font-weight: 800;
    font-size: 20px;
    line-height: 1;
    display: block;
    transform: translate(-2px, -2px);
}

.help-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 0;
    width: 240px;
    padding: 12px;
    border-radius: 8px;
    background: #e8e8e8;
    color: #1a1a1a;
    font-size: 13px;
    line-height: 1.4;
    z-index: 1000;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.help-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 15px;
    border-width: 8px;
    border-style: solid;
    border-color: #e8e8e8 transparent transparent transparent;
}

.help-corner-wrapper:hover .help-tooltip {
    visibility: visible;
    opacity: 1;
}

.collapse-corner-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 12px 0 44px;
    z-index: 50;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
}

.collapse-corner-wrapper:hover {
    background: #d1d1d1;
}

.collapse-corner-wrapper.visible {
    opacity: 1;
    visibility: visible;
}

.collapse-icon {
    transform: translate(4px, -4px);
}