/* ===========================================================
   IMPORTS & ROOT VARIABLES
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  /* Fonts */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Fira Code', 'Monaco', 'Courier New', monospace;

  /* Base Colors */
  --color-text-body: #2c3e50;
  --color-text-light: #ffffff;
  --color-text-light-subtle: rgba(255, 255, 255, 0.8);
  --color-text-light-faded: rgba(255, 255, 255, 0.7);
  --color-text-dark-primary: #1a1c2e;
  --color-text-dark-secondary: #2d3561;
  --color-text-muted: #5a6c7d;

  /* Background Colors */ 
  --bg-dark-solid: #0a0b0f;
  --bg-light-solid: #ffffff;
  --bg-glass-light: rgba(255, 255, 255, 0.25);
  --bg-glass-light-medium: rgba(255, 255, 255, 0.2);
  --bg-glass-light-low: rgba(255, 255, 255, 0.08);
  --bg-glass-light-input: rgba(248, 249, 250, 0.8);
  --bg-glass-light-fieldset: rgba(255, 255, 255, 0.95);

  /* Accent Colors */
  --accent-blue: #64b5f6;
  --accent-blue-dark: #42a5f5;
  --accent-blue-darker: #2196f3;
  --accent-blue-alpha-low: rgba(100, 181, 246, 0.1);
  --accent-blue-alpha-mid: rgba(100, 181, 246, 0.15);
  --accent-blue-alpha-border: rgba(100, 181, 246, 0.3);

  --accent-premium: #FFD700; /* Gold */
  --accent-premium-dark: #B8860B;
  --accent-premium-alpha-low: rgba(255, 215, 0, 0.12);
  --accent-premium-alpha-border: rgba(255, 215, 0, 0.4);

  --accent-super: #8A2BE2; /* Purple */
  --accent-super-dark: #4B0082; /* Indigo */
  --accent-super-alt: #0000FF; /* Blue for gradient */

  --accent-danger: #ef4444;
  --accent-danger-alpha-low: rgba(239, 68, 68, 0.1);
  --accent-danger-alpha-border: rgba(239, 68, 68, 0.3);

  --accent-success: #22c55e;
  --accent-success-dark: #16a34a;
  --accent-success-alpha-low: rgba(34, 197, 94, 0.1);
  --accent-success-alpha-border: rgba(34, 197, 94, 0.2);

  /* Borders & Radii */
  --border-light-alpha: rgba(255, 255, 255, 0.2);
  --border-light-alpha-faded: rgba(255, 255, 255, 0.1);
  --border-medium: #e1e8ed;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 25px;
  --radius-round: 50%;

  /* Effects */
  --blur-sm: 5px;
  --blur-md: 10px;
  --blur-lg: 20px;
  --blur-xl: 40px;

  --transition-fast: all 0.2s ease;
  --transition-std: all 0.3s ease; 

  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.12);
  --inset-shadow-light: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --inset-shadow-mid: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===========================================================
   GLOBAL RESET & BASE STYLES
   =========================================================== */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  color: var(--color-text-body);
  font-family: var(--font-primary);
  font-size: 16px; 
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: var( --bg-dark-solid);
}

/* Remove spinners for number inputs */
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
 

/* ===========================================================
   MODERN HERO HEADER
   =========================================================== */
.hero-header {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-dark-gradient);
}
 

.brand-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--radius-sm);
  background: var(--accent-blue-alpha-low);
  border: 1px solid var(--accent-blue-alpha-border);
  padding: var(--radius-sm) var(--radius-lg);
  border-radius: var(--radius-pill);
  margin-bottom: var(--radius-xl);
  animation: glow 3s ease-in-out infinite alternate;
}

.ai-icon {
  font-size: 1.2rem;
  filter: drop-shadow(0 0 5px rgba(100, 181, 246, 0.5));
}

.badge-text {
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.main-title {
  margin: 0 0 20px 0;
  font-weight: 300;
  color: var(--color-text-light);
  line-height: 1.1;
}
.title-line {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: var(--radius-md);
  padding: 10px 20px; 
  border: 1px solid var(--accent-blue-alpha-border);
  border-radius: var(--radius-md);
  color: var(--color-text-light-subtle);
  letter-spacing: 0.02em;
  box-shadow:
    0 4px 20px var(--accent-blue-alpha-low),
    var(--inset-shadow-light);
  transition: var(--transition-std);
  position: relative;
  overflow: hidden;
}
.title-line::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 25%,
    var(--accent-blue-alpha-low) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 100%
  );
  transition: left 0.8s ease;
  pointer-events: none;
}
.title-line::after {
  content: '\f3a5';  /* Font Awesome gem icon */
    font-family: 'Font Awesome 6 Free';
  font-weight: 900;  /* Add this! */
  position: absolute; 
  top: 3px; right: 3px;
  font-size: 0.7rem;
  opacity: 0.6;
  background: var(--accent-blue-alpha-low);
  border-radius: var(--radius-round);
  width: var(--radius-lg); height: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse-gem 3s ease-in-out infinite;
}
.title-line:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg,
    rgba(100, 181, 246, 0.25) 0%,
    rgba(64, 181, 246, 0.15) 50%,
    rgba(33, 150, 243, 0.1) 100%);
  border-color: rgba(100, 181, 246, 0.5);
  box-shadow:
    0 8px 30px rgba(100, 181, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: var(--color-text-light);
}
.title-line:hover::before { left: 100%; }
.title-line:hover::after { opacity: 1; transform: scale(1.1); }
.title-line.minimal {
  font-size: 0.85rem;
  padding: 6px 12px;
  background: var(--accent-blue-alpha-low);
  border: 1px solid rgba(100, 181, 246, 0.2);
  border-radius: 20px;
  color: var(--accent-blue);
  font-weight: 600;
}
.title-line.minimal::after { display: none; }

.title-highlight {
  display: block;
  font-size: 3.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 50%, var(--accent-blue-darker) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 30px var(--accent-blue-alpha-border);
  animation: titlePulse 4s ease-in-out infinite;
}
.subtitle {
  color: var(--color-text-light-faded);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0 auto 32px;
  max-width: 600px;
}
.tech-indicators {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.indicator {
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
  font-weight: 500;
}
.indicator-dot {
  width: var(--radius-sm); height: var(--radius-sm);
  border-radius: var(--radius-round);
  background: var(--color-text-dark-secondary);
  position: relative;
}
.indicator-dot.active {
  background: var(--accent-blue);
  box-shadow: 0 0 10px rgba(100, 181, 246, 0.5);
}
.indicator-dot.active::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border: 1px solid var(--accent-blue-alpha-border);
  border-radius: var(--radius-round);
  animation: pulse 2s infinite;
}

/* ===========================================================
   CONTENT WRAPPER
   =========================================================== */
.setup-content-wrapper {
  position: relative;
  padding: 60px 32px 80px;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: start;
  z-index: 1;
  overflow: hidden;
}
.setup-content-wrapper::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: #1e1e1e;
  z-index: -2;
}
.setup-content-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Placeholder for additional geometric backgrounds */
}

/* ===========================================================
   MAIN FORM AREA
   =========================================================== */
#main-form-area {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--radius-xl);
}


/* ===========================================================
   FORM-CARD - CORRECTED COLOR HIERARCHY
   =========================================================== */

.form-card {
  position: relative;
  background: var(--color-background-panel);
  backdrop-filter: blur(20px) saturate(110%);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 0;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.form-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-highlight);
}

/* Top accent line matching connected panel exactly */
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-accent-primary) 30%,
    #AACCFF 50%,
    var(--color-accent-primary) 70%,
    transparent 100%
  );
  background-size: 250% 100%;
  animation: panelAccentShine 6s ease-in-out infinite;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  box-shadow: 0 0 12px 2px var(--color-accent-glow-primary);
}

/* ==== FORM HEADER - EXACT COPY OF CONNECTED PANEL ==== */
.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 36px;
  margin-bottom: 0;
}

.form-title-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.form-logo {
  position: relative;
  width: 36px; height: 36px;
  background: linear-gradient(145deg, var(--color-surface-interactive), var(--color-surface-raised));
  border-radius: var(--radius-standard);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 1.2rem;
  color: var(--color-text-primary); /* PRIMARY TEXT - NOT ACCENT */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.03),
    0 1px 4px rgba(0,0,0,0.25);
  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
  transition: var(--transition-smooth);
  overflow: hidden;
}

.form-title {
  margin: 0;
  line-height: 1.1;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary); /* PRIMARY TEXT - READABLE WHITE */
  letter-spacing: 0.1px;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 0 10px rgba(var(--color-accent-primary-rgb), 0.2);
  transition: color var(--transition-smooth), text-shadow var(--transition-smooth);
}

.form-meta-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-xs);
}

.form-version-badge {
  background: rgba(var(--color-accent-primary-rgb), 0.2);
  color: var(--color-text-on-accent-bg); /* WHITE ON ACCENT */
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: var(--radius-sharp);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  border: 1px solid rgba(var(--color-accent-primary-rgb), 0.5);
  line-height: 1.2;
  text-shadow: 0 0 5px rgba(var(--color-accent-primary-rgb),0.5);
}

.form-subtitle {
  font-size: 0.75rem;
  color: var(--color-text-secondary); /* SECONDARY TEXT - MEDIUM GRAY */
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* ==== AI INFO - EXACT COPY OF CONTRACT INFO ==== */
.ai-intelligence-info {
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  padding: var(--spacing-sm);
  margin: 0 var(--spacing-lg) var(--spacing-sm) var(--spacing-lg);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  position: relative;
  z-index: 1;
  transition: background-color var(--transition-gentle), box-shadow var(--transition-gentle);
}

.ai-intelligence-label {
  font-size: 0.65rem;
  color: var(--color-text-secondary); /* SECONDARY TEXT - NOT ACCENT */
  margin-bottom: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: var(--font-weight-semibold);
  transition: color var(--transition-smooth);
}

.ai-intelligence-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: var(--color-background-deep);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sharp);
  padding: var(--spacing-xs) var(--spacing-sm);
  transition: border-color var(--transition-smooth);
}

.ai-intelligence-desc {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-secondary); /* SECONDARY TEXT - NOT ACCENT */
  flex: 1;
  word-break: break-all;
  line-height: 1.3;
  transition: color var(--transition-smooth);
}

.ai-brain-indicator {
  background: transparent;
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-sharp);
  padding: var(--spacing-xs);
  color: var(--color-text-secondary); /* SECONDARY TEXT - NOT ACCENT */
  cursor: pointer;
  transition: var(--transition-snap);
  font-size: 0.7rem;
  line-height: 0;
}

.ai-brain-indicator:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary); /* ACCENT ONLY ON HOVER */
  transform: scale(1.08);
}

/* ==== INPUT GROUPS - PROPER TEXT HIERARCHY ==== */
.input-group {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.input-group:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.28);
}

.input-label {
  font-size: 0.65rem;
  color: var(--color-text-secondary); /* SECONDARY TEXT - LABELS */
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
  padding-right: 2%;
}

.input-label i {
  font-size: 0.85em;
  color: var(--color-text-tertiary); /* TERTIARY TEXT - SUBTLE ICONS */
}

.input-group:hover .input-label i {
  color: var(--color-text-secondary); /* BRIGHTEN TO SECONDARY ON HOVER */
}

.required-asterisk {
  color: #ef4444; /* DANGER COLOR - NOT ACCENT */
  margin-left: 4px;
}

/* Enhanced Input Styling */
.enhanced-input,
.enhanced-textarea {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-main);
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary); /* PRIMARY TEXT - MAIN CONTENT */
  line-height: 1.15;
  transition: var(--transition-smooth);
  outline: none;
}

.enhanced-textarea {
  min-height: 120px;
  resize: vertical;
  font-size: 0.95rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.enhanced-input::placeholder,
.enhanced-textarea::placeholder {
  color: var(--color-text-tertiary); /* TERTIARY TEXT - PLACEHOLDERS */
  opacity: 0.7;
}

.input-group:hover .enhanced-input,
.input-group:hover .enhanced-textarea {
  color: var(--color-text-accent); /* ACCENT ONLY ON HOVER - INTERACTIVE FEEDBACK */
}

/* ==== SMART INPUT ENHANCEMENTS - FIXED COLORS ==== */
.input-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-card);
}

.char-counter-display {
  font-size: 0.75rem;
  color: var(--color-text-secondary); /* SECONDARY TEXT - INFO */
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.char-counter-display.warning { 
  color: #f59e0b; /* WARNING COLOR - NOT ACCENT */
}

.char-counter-display.danger { 
  color: #ef4444; /* DANGER COLOR - NOT ACCENT */
}

.char-counter-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary); /* ACCENT FOR STATUS INDICATOR */
  box-shadow: 0 0 6px var(--color-accent-glow-primary);
}

.ai-processing-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--color-accent-primary); /* ACCENT FOR AI STATUS */
  font-weight: var(--font-weight-medium);
}

.ai-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-accent-primary); /* ACCENT FOR AI INDICATORS */
  animation: aiProcessingBounce 1.4s ease-in-out infinite;
}

/* ==== GUIDELINES SECTION - PROPER HIERARCHY ==== */
.smart-guidelines-section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.guidelines-header {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary); /* PRIMARY TEXT - IMPORTANT HEADERS */
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.guidelines-header i {
  color: var(--color-accent-primary); /* ACCENT ONLY FOR ICONS */
}

.guidelines-content {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-secondary); /* SECONDARY TEXT - BODY CONTENT */
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.guidelines-content strong {
  color: var(--color-text-primary); /* PRIMARY TEXT - EMPHASIS */
  font-weight: var(--font-weight-semibold);
}

/* ==== FORM ACTIONS - MATCHING CONNECTED PANEL BUTTONS ==== */
.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-sm);
  padding: var(--spacing-lg);
}

.create-persona-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  color: var(--color-text-primary); /* PRIMARY TEXT - DEFAULT STATE */
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-standard);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2px;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  box-shadow:
    0 1px 1.5px rgba(0,0,0,0.08),
    inset 0 0.5px 0px rgba(255,255,255,0.02);
}

.create-persona-btn:hover,
.create-persona-btn:focus-visible {
  transform: translateY(-2px);
  color: var(--color-text-on-accent-bg); /* WHITE ON ACCENT HOVER */
  border-color: var(--color-accent-primary);
  background: rgba(var(--color-accent-primary-rgb), 0.25);
  box-shadow:
    0 3px 8px var(--color-accent-glow-primary),
    inset 0 1px 0px rgba(var(--color-accent-primary-rgb), 0.1);
}

.create-persona-btn i {
  font-size: 0.9em;
  line-height: 1;
  transition: transform 0.2s ease-out;
  color: var(--color-accent-primary); /* ACCENT FOR ICON */
}

.create-persona-btn:hover i {
  transform: scale(1.15);
  color: var(--color-text-on-accent-bg); /* WHITE ON HOVER */
}/* ===========================================================
   FORM-CARD - FOLLOWING SECURITY BANNER DESIGN SYSTEM
   =========================================================== */

.form-card {
  position: relative;
  background: var(--color-background-panel);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 0;
  overflow: hidden;
  transition: var(--transition-smooth);
}

.form-card:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-highlight);
}

/* SAME ACCENT LINE AS SECURITY BANNER */
.form-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%);
  background-size: 200% 100%;
  animation: bannerAccentFlow 8s ease-in-out infinite;
  box-shadow: 0 0 12px 2px var(--color-accent-glow-primary);
}

/* SAME ACCENT ANIMATION AS SECURITY BANNER */
@keyframes bannerAccentFlow {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

/* ==== FORM CONTENT - GRID LAYOUT LIKE SECURITY BANNER ==== */
.form-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
}

/* ==== FORM HEADER - MATCHING SECURITY BRANDING ==== */
.form-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-standard);
  position: relative;
  z-index: 2;
}

.form-title-section {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.form-logo {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  
  background: linear-gradient(135deg, 
    var(--color-surface-interactive), 
    var(--color-surface-raised));
  border-radius: var(--radius-standard);
  border: 1px solid var(--color-border-highlight);
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 8px rgba(0,0,0,0.15);
  
  color: var(--color-accent-primary);
  transition: var(--transition-smooth);
}

.form-logo::before {
  content: 'P';
}

.form-logo:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
}

.form-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-title {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
  margin: 0;
}

.form-tagline {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* CORE MESSAGE - LIKE SECURITY MESSAGE */
.form-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.form-headline {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.form-description {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.form-highlights {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.form-highlight {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--spacing-sm);
  
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sharp);
  
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  
  transition: var(--transition-snap);
}

.form-highlight:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-accent);
  color: var(--color-text-accent);
}

.form-highlight-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  box-shadow: 0 0 6px rgba(var(--color-accent-primary-rgb), 0.6);
}

/* AI STATUS - LIKE SECURITY ACTION */
.form-ai-status {
  display: flex;
  align-items: center;
}

/* ==== AI STATUS - LIVING, BREATHING NEURAL ENGINE ==== */
.ai-status-indicator {
  background: linear-gradient(135deg, 
    var(--color-accent-primary) 0%, 
    var(--color-accent-primary) 100%);
  color: var(--color-text-on-accent-bg);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-standard);
  cursor: pointer;
  
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
  
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

/* Neural Activity Animation */
.ai-status-indicator::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%);
  animation: neuralActivity 3s ease-in-out infinite;
}

@keyframes neuralActivity {
  0% { left: -30%; opacity: 0; }
  50% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.ai-status-indicator:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 8px 30px rgba(var(--color-accent-primary-rgb), 0.4);
}

/* Animated Brain Icon */
.ai-status-icon {
  font-size: 1rem;
  animation: brainPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
}

@keyframes brainPulse {
  0%, 100% { 
    transform: scale(1); 
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
  }
  50% { 
    transform: scale(1.1); 
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
  }
}

/* Neural Flow Dots */
.ai-status-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  position: relative;
}

.ai-status-text::after {
  content: '';
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 0 6px rgba(255, 255, 255, 0.6),
    8px 0 0 rgba(255, 255, 255, 0.6),
    16px 0 0 rgba(255, 255, 255, 0.4);
  animation: dataFlow 1.5s ease-in-out infinite;
}

@keyframes dataFlow {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.ai-status-primary {
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.ai-status-secondary {
  font-size: 0.7rem;
  font-weight: var(--font-weight-regular);
  opacity: 0.9;
  line-height: 1;
}

/* ==== INPUT GROUPS - CLEAN SECTIONS LIKE SECURITY HIGHLIGHTS ==== */
.input-group {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
}

.input-group:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.input-label {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.input-label i {
  color: var(--color-accent-primary);
}

.required-asterisk {
  color: #ef4444;
  margin-left: 4px;
}

/* ==== INPUT FIELDS - PROPER INSET DESIGN ==== */
.enhanced-input,
.enhanced-textarea {
  width: 100%;
  background: rgba(8, 10, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: 1.4;
  transition: var(--transition-smooth);
  outline: none;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(0, 0, 0, 0.3);
}

.enhanced-textarea {
  min-height: 140px;
  resize: vertical;
  font-size: 0.95rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.5;
}

.enhanced-input:focus,
.enhanced-textarea:focus {
  background: rgba(20, 25, 35, 0.8);
  border-color: rgba(var(--color-accent-primary-rgb), 0.6);
  color: var(--color-text-on-accent-bg);
  box-shadow: 
    inset 0 3px 6px rgba(0, 0, 0, 0.5),
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    0 0 0 3px rgba(var(--color-accent-primary-rgb), 0.2),
    0 0 20px rgba(var(--color-accent-primary-rgb), 0.1);
}

.enhanced-input::placeholder,
.enhanced-textarea::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.6;
}

/* ==== SMART INPUT ENHANCEMENTS ==== */
.input-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  transition: var(--transition-smooth);
}

.input-stats-bar:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.char-counter-display {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.char-counter-display.warning { color: #f59e0b; }
.char-counter-display.danger { color: #ef4444; }

.char-counter-icon {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  box-shadow: 0 0 6px var(--color-accent-glow-primary);
}

.ai-processing-indicator {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 0.75rem;
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}

.ai-dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  animation: aiProcessingBounce 1.4s ease-in-out infinite;
}

/* ==== GUIDELINES SECTION ==== */
.smart-guidelines-section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
}

.smart-guidelines-section:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.guidelines-header {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.guidelines-header i {
  color: var(--color-accent-primary);
}

.guidelines-content {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin: 0;
  font-weight: var(--font-weight-regular);
}

.guidelines-content strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

/* ==== FORM ACTIONS ==== */
.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--color-border-standard);
}

.create-persona-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  background: linear-gradient(135deg, 
    var(--color-accent-primary) 0%, 
    var(--color-accent-primary) 100%);
  color: var(--color-text-on-accent-bg);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-standard);
  cursor: pointer;
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
  
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.create-persona-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.2), 
    transparent);
  transition: left 0.5s;
}

.create-persona-btn:hover::before {
  left: 100%;
}

.create-persona-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 8px 30px rgba(var(--color-accent-primary-rgb), 0.4);
}

.create-persona-btn i {
  font-size: 1rem;
}

/* ==== RESPONSIVE DESIGN - MATCHING SECURITY BANNER ==== */
@media (max-width: 1024px) {
  .form-header {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg);
  }
  
  .form-title-section {
    justify-content: center;
  }
  
  .form-highlights {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .form-ai-status {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .form-content {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-md);
  }
  
  .form-header {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-md);
  }
  
  .form-logo {
    width: 40px; height: 40px;
    font-size: 1.2rem;
  }
  
  .form-title {
    font-size: 1rem;
  }
  
  .form-headline {
    font-size: 1.1rem;
  }
  
  .form-description {
    font-size: 0.85rem;
  }
  
  .create-persona-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.8rem;
  }
  
  .form-highlights {
    gap: var(--spacing-sm);
  }
}























/* ===========================================================
   ADAPTIVE SECTION HEADER - SOPHISTICATED REDESIGN
   Matches Connected Panel Quality & Responsiveness
   =========================================================== */

.section-header {
  background: var(--color-background-panel);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
  color: var(--color-text-primary);
  font-family: var(--font-main);
  max-width: 100%;
}

.section-header:hover {
  transform: translateY(-2px) scale(1.002);
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-highlight);
}

/* Tier-Specific Accent Lines */
.section-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  transition: var(--transition-gentle);
}

.section-header.unconnected::before {
  background: linear-gradient(90deg, var(--color-text-secondary) 0%, var(--color-accent-primary) 100%);
  box-shadow: 0 0 8px 1px rgba(90, 155, 255, 0.2);
}

.section-header.connected-free::before {
  background: linear-gradient(90deg, var(--color-accent-primary) 0%, #4A90E2 100%);
  box-shadow: 0 0 8px 1px var(--color-accent-glow-primary);
}

.section-header.connected-premium::before {
  background: linear-gradient(90deg, var(--color-accent-secondary) 0%, #E0A800 100%);
  box-shadow: 0 0 8px 1px var(--color-accent-glow-secondary);
}

.section-header.connected-super::before {
  background: linear-gradient(90deg, #8A2BE2 0%, #4B0082 50%, #0000FF 100%);
  background-size: 200% 100%;
  animation: superTierShine 3s ease-in-out infinite;
  box-shadow: 0 0 12px 2px rgba(138, 43, 226, 0.4);
}

@keyframes superTierShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Header Content Layout */
.header-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Status Line - Top Info Bar */
.status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--spacing-sm);
  min-height: 32px;
}

/* Badges - Consistent with Connected Panel */
.access-badge,
.tier-badge {
  padding: var(--spacing-xxs) var(--spacing-sm);
  border-radius: var(--radius-sharp);
  font-size: 0.65rem;
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
  line-height: 1.2;
  transition: var(--transition-smooth);
}

.access-badge {
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-interactive));
  color: var(--color-text-secondary);
  border-color: var(--color-border-standard);
}

.tier-badge.free {
  background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-interactive));
  color: var(--color-text-secondary);
  border-color: var(--color-border-standard);
}

.tier-badge.premium {
  background: linear-gradient(135deg, #4A3C1E, #302512);
  color: var(--color-accent-secondary);
  border-color: rgba(var(--color-accent-secondary-rgb), 0.4);
  text-shadow: 0 0 10px rgba(var(--color-accent-secondary-rgb), 0.6);
  box-shadow:
    inset 0 0.5px 1px rgba(255,220,100,0.1),
    0 0 12px var(--color-accent-glow-secondary);
}

.tier-badge.super {
  background: linear-gradient(135deg,
    rgba(var(--color-accent-primary-rgb), 0.2),
    rgba(var(--color-accent-primary-rgb), 0.1));
  color: #8A2BE2;
  border-color: rgba(138, 43, 226, 0.4);
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.6);
  box-shadow:
    inset 0 0.5px 1px rgba(180,210,255,0.1),
    0 0 12px rgba(138, 43, 226, 0.3);
}

.platform-type,
.operations-info {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

/* Main Content Section */
.main-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.main-content h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* 
   CALL-TO-ACTION HIGHLIGHTING SYSTEM
   Elegant, Sophisticated Emphasis for Tier Incentives 

  Enhanced Tier Statement with CTA Highlighting */
.tier-statement {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
  position: relative;
  padding: var(--spacing-md);
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.02) 0%, 
    rgba(255, 255, 255, 0.01) 100%);
  border-radius: var(--radius-standard);
  border: 1px solid transparent;
  transition: var(--transition-gentle);
  overflow: hidden;
}

/* Subtle ambient glow effect */
.tier-statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, 
    transparent 0%, 
    transparent 40%, 
    rgba(var(--tier-glow-color), 0.03) 70%, 
    transparent 100%);
  opacity: 0;
  transition: opacity var(--transition-gentle);
  pointer-events: none;
  z-index: -1;
}

/* Tier-specific glow colors */
.unconnected-content .tier-statement {
  --tier-glow-color: var(--color-accent-primary-rgb);
}

.connected-free-content .tier-statement {
  --tier-glow-color: var(--color-accent-primary-rgb);
}

.connected-premium-content .tier-statement {
  --tier-glow-color: var(--color-accent-secondary-rgb);
}

.connected-super-content .tier-statement {
  --tier-glow-color: 138, 43, 226;
}

/* Hover state for subtle interaction */
.tier-statement:hover {
  border-color: rgba(var(--tier-glow-color), 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--tier-glow-color), 0.1);
}

.tier-statement:hover::before {
  opacity: 1;
}

/* Call-to-Action Text Highlighting */
.cta-highlight {
  position: relative;
  display: inline;
  background: linear-gradient(135deg, 
    rgba(var(--tier-glow-color), 0.08) 0%, 
    rgba(var(--tier-glow-color), 0.12) 50%, 
    rgba(var(--tier-glow-color), 0.08) 100%);
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid rgba(var(--tier-glow-color), 0.15);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  transition: var(--transition-smooth);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 rgba(var(--tier-glow-color), 0);
  animation: ctaPulse 4s ease-in-out infinite;
}

/* Subtle pulsing animation */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 8px rgba(var(--tier-glow-color), 0.2);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 0 16px rgba(var(--tier-glow-color), 0.3);
  }
}

.cta-highlight:hover {
  background: linear-gradient(135deg, 
    rgba(var(--tier-glow-color), 0.15) 0%, 
    rgba(var(--tier-glow-color), 0.2) 50%, 
    rgba(var(--tier-glow-color), 0.15) 100%);
  border-color: rgba(var(--tier-glow-color), 0.3);
  color: var(--color-text-on-accent-bg);
  transform: scale(1.02);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 20px rgba(var(--tier-glow-color), 0.4);
  animation-play-state: paused;
}

/* Alternative: Neon Text Effect for Super Tier */
.connected-super-content .cta-highlight {
  background: linear-gradient(135deg, 
    rgba(138, 43, 226, 0.1) 0%, 
    rgba(75, 0, 130, 0.15) 50%, 
    rgba(0, 0, 255, 0.1) 100%);
  border: 1px solid rgba(138, 43, 226, 0.3);
  text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
  animation: superCtaGlow 3s ease-in-out infinite;
}

@keyframes superCtaGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 15px rgba(138, 43, 226, 0.3);
  }
  50% {
    text-shadow: 
      0 0 15px rgba(138, 43, 226, 0.8),
      0 0 25px rgba(138, 43, 226, 0.4);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.2),
      0 0 25px rgba(138, 43, 226, 0.5);
  }
}

/* Premium Tier Gold Effect */
.connected-premium-content .cta-highlight {
  background: linear-gradient(135deg, 
    rgba(224, 184, 0, 0.1) 0%, 
    rgba(255, 215, 0, 0.15) 50%, 
    rgba(224, 184, 0, 0.1) 100%);
  border: 1px solid rgba(255, 215, 0, 0.3);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  animation: premiumCtaShine 4s ease-in-out infinite;
}

@keyframes premiumCtaShine {
  0%, 100% {
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 0 12px rgba(255, 215, 0, 0.2);
  }
  50% {
    text-shadow: 
      0 0 12px rgba(255, 215, 0, 0.6),
      0 0 20px rgba(255, 215, 0, 0.3);
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 0 20px rgba(255, 215, 0, 0.3);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tier-statement {
    padding: var(--spacing-sm);
    font-size: 0.8rem;
  }
  
  .cta-highlight {
    padding: 1px 6px;
    font-size: 0.8rem;
    border-radius: 4px;
  }
}

@media (max-width: 480px) {
  .tier-statement {
    font-size: 0.75rem;
  }
  
  .cta-highlight {
    padding: 1px 4px;
    font-size: 0.75rem;
  }
}

/* Benefits Section - Clean List */
.benefits-section {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  transition: var(--transition-smooth);
}

.benefits-section:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.benefits-header {
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-xs);
  border-bottom: 1px solid var(--color-border-subtle);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.benefits-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-xs);
}

.benefit-item {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sharp);
  border-left: 3px solid var(--color-accent-primary);
  transition: var(--transition-snap);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  line-height: 1.3;
}

.benefit-item::before {
    content: '\f00c';
  font-family: 'Font Awesome 6 Free' !important;
  color: var(--color-accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: 0.8rem;
}

.benefit-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text-primary);
  transform: translateX(2px);
}

/* Tier-specific benefit styling */
.connected-premium-content .benefit-item {
  border-left-color: var(--color-accent-secondary);
}

.connected-premium-content .benefit-item::before {
  color: var(--color-accent-secondary);
}

.connected-super-content .benefit-item {
  border-left-color: #8A2BE2;
}

.connected-super-content .benefit-item::before {
  color: #8A2BE2;
}

/* Upgrade Panel - Action Section */
.upgrade-panel {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  transition: var(--transition-smooth);
}

.upgrade-panel:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.upgrade-info {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

.upgrade-benefits {
  font-size: 0.8rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.upgrade-requirement {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  opacity: 0.8;
}

.upgrade-actions {
  display: flex;
  gap: var(--spacing-sm);
}

.upgrade-link {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-standard);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  text-align: center;
  transition: var(--transition-smooth);
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  position: relative;
  overflow: hidden;
}

.upgrade-link::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 0.5s;
}

.upgrade-link:hover::before {
  left: 100%;
}

.upgrade-link.primary {
  background: linear-gradient(135deg, var(--color-accent-primary) 0%, var(--color-accent-primary) 100%);
  color: var(--color-text-on-accent-bg);
  border-color: var(--color-accent-primary);
  box-shadow: 0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
}

.upgrade-link.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(var(--color-accent-primary-rgb), 0.4);
}

.upgrade-link.secondary {
  background: var(--color-surface-interactive);
  color: var(--color-text-primary);
  border-color: var(--color-border-standard);
  box-shadow: var(--shadow-card);
}

.upgrade-link.secondary:hover {
  background: var(--color-surface-raised);
  border-color: var(--color-border-highlight);
  transform: translateY(-2px);
  box-shadow: var(--shadow-interactive);
}

/* Responsive Design */
@media (max-width: 768px) {
  .section-header {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
  }
  
  .status-line {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    min-height: auto;
  }
  
  .main-content h1 {
    font-size: 1.1rem;
  }
  
  .tier-statement {
    font-size: 0.8rem;
  }
  
  .benefits-list {
    grid-template-columns: 1fr;
    gap: var(--spacing-xs);
  }
  
  .benefit-item {
    font-size: 0.7rem;
  }
  
  .upgrade-actions {
    flex-direction: column;
  }
  
  .upgrade-link {
    padding: var(--spacing-md);
    font-size: 0.8rem;
  }
  
  .benefits-header {
    font-size: 0.7rem;
  }
  
  .platform-type,
  .operations-info {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .section-header {
    padding: var(--spacing-sm);
  }
  
  .header-content {
    gap: var(--spacing-sm);
  }
  
  .main-content h1 {
    font-size: 1rem;
  }
  
  .tier-statement {
    font-size: 0.75rem;
  }
  
  .benefits-section,
  .upgrade-panel {
    padding: var(--spacing-sm);
  }
  
  .benefit-item {
    padding: var(--spacing-xs);
    font-size: 0.65rem;
  }
  
  .upgrade-benefits {
    font-size: 0.75rem;
  }
  
  .upgrade-requirement {
    font-size: 0.65rem;
  }
}

/* ===========================================================
   FLOATING HELPER
   =========================================================== */
.floating-helper {
  position: fixed;
  bottom: 32px; right: 32px;
  background: var(--accent-blue-alpha-mid);
  border: 1px solid var(--accent-blue-alpha-border);
  border-radius: var(--radius-round);
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-cubic);
  z-index: 1000;
  animation: helperPulse 4s ease-in-out infinite;
}
.floating-helper:hover {
  transform: scale(1.1);
  background: rgba(100,181,246,0.25);
  border-color: rgba(100,181,246,0.5);
}
.floating-helper i {
  color: var(--accent-blue);
  font-size: 1.25rem;
}
 
/* ===========================================================
   SOPHISTICATED PERSONA CARDS - MATCHING DESIGN SYSTEM
   =========================================================== */

#personas-sidebar {
  background: var(--color-background-panel);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: var(--spacing-lg);
  position: sticky; 
  overflow-y: auto;
  overflow-x: hidden;
  transition: var(--transition-smooth);
}

#personas-sidebar:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-highlight);
}

/* SAME ACCENT LINE AS SECURITY BANNER & FORM */
#personas-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%);
  background-size: 200% 100%;
  animation: bannerAccentFlow 8s ease-in-out infinite;
  box-shadow: 0 0 12px 2px var(--color-accent-glow-primary);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}

/* Scrollbar Styling */
#personas-sidebar::-webkit-scrollbar {
  width: 6px;
}

#personas-sidebar::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

#personas-sidebar::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg,
    var(--color-accent-primary) 0%,
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
  border-radius: 3px;
  transition: var(--transition-std);
}

#personas-sidebar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg,
    rgba(var(--color-accent-primary-rgb), 0.9) 0%,
    var(--color-accent-primary) 100%);
}

/* ==== SECTION HEADERS - SOPHISTICATED TYPOGRAPHY ==== */
#preset-personas {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#preset-personas h2 {
  font-size: 1.4rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  text-align: left;
  position: relative;
  padding-left: var(--spacing-lg);
  line-height: 1.2;
}

#preset-personas h2::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: var(--spacing-xl);
  background: linear-gradient(135deg, 
    var(--color-accent-primary) 0%, 
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--color-accent-glow-primary);
}

#preset-personas p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  text-align: left;
  line-height: 1.5;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-standard);
  padding: var(--spacing-md);
  border-left: 3px solid var(--color-accent-primary);
}

#preset-personas h3 {
  font-size: 1.1rem;
  color: var(--color-text-primary);
  margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  position: relative;
  overflow: hidden;
  transition: var(--transition-smooth);
}

#preset-personas h3:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

#preset-personas h3::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-accent-primary) 50%,
    transparent 100%);
  opacity: 0.6;
}

/* ==== DIVINE SECTION - PREMIUM STYLING ==== */
.divine-section-title {
  font-weight: var(--font-weight-bold);
  position: relative;
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.08) 0%,
    rgba(75, 0, 130, 0.05) 100%);
  border: 1px solid rgba(138, 43, 226, 0.25);
  border-radius: var(--radius-standard);
  margin: var(--spacing-xl) 0 var(--spacing-lg) 0;
  color: var(--color-text-primary);
  filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.2));
}

.divine-section-title:hover {
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.12) 0%,
    rgba(75, 0, 130, 0.08) 100%);
  border-color: rgba(138, 43, 226, 0.4);
  filter: drop-shadow(0 0 12px rgba(138, 43, 226, 0.3));
}

.divine-subtitle {
  font-size: 0.8rem;
  color: rgba(138, 43, 226, 0.9);
  font-weight: var(--font-weight-medium);
  font-style: italic;
  margin-left: var(--spacing-sm);
}

#divine-grid {
  margin-bottom: var(--spacing-xl);
  padding: var(--spacing-md);
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.05) 0%,
    rgba(75, 0, 130, 0.03) 100%);
  border-radius: var(--radius-standard);
  border: 1px solid rgba(138, 43, 226, 0.15);
}

/* ==== PERSONA GRID LAYOUT ==== */
.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

/* ==== PERSONA CARDS - SOPHISTICATED MATERIAL DESIGN ==== */
.persona-card {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-standard);
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
}

.persona-card:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-2px);
  box-shadow: var(--shadow-interactive);
}

.persona-card:active {
  transform: translateY(0);
  box-shadow: var(--shadow-card);
}

.persona-card img {
  width: 100%; 
  height: 80px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: var(--transition-smooth);
  filter: grayscale(20%) contrast(110%);
}

.persona-card:hover img {
  filter: grayscale(0%) contrast(120%) brightness(105%);
}

.persona-card .persona-info {
  padding: var(--spacing-sm);
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  font-size: 0.7rem;
  line-height: 1.3;
}

.persona-card .persona-info strong {
  display: block;
  margin-bottom: 0;
  color: var(--color-text-primary);
  line-height: 1.2;
  margin-right: 0;
  font-weight: var(--font-weight-semibold);
}

/* ==== TIER-SPECIFIC STYLING ==== */

/* PREMIUM TIER PERSONAS */
.persona-card[data-tier="premium"] {
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.08) 0%,
    rgba(255, 223, 0, 0.05) 50%,
    var(--color-surface-raised) 100%);
  border: 2px solid rgba(255, 215, 0, 0.25);
  box-shadow: 
    var(--shadow-card),
    0 0 20px rgba(255, 215, 0, 0.1);
}

.persona-card[data-tier="premium"]::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 0, 0.1) 50%,
    transparent 100%);
  transition: left 0.8s ease;
  z-index: 1;
}

.persona-card[data-tier="premium"]:hover::before {
  left: 100%;
}

.persona-card[data-tier="premium"]:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    var(--shadow-floating),
    0 0 30px rgba(255, 215, 0, 0.2);
  border-color: rgba(255, 215, 0, 0.5);
  background: linear-gradient(135deg,
    rgba(255, 215, 0, 0.15) 0%,
    rgba(255, 223, 0, 0.08) 50%,
    var(--color-surface-interactive) 100%);
}

.persona-card[data-tier="premium"] .persona-info strong {
  color: var(--color-accent-secondary);
  font-weight: var(--font-weight-bold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

/* SUPER TIER PERSONAS */
.persona-card[data-tier="super"] {
  background: linear-gradient(135deg,
    rgba(138, 43, 226, 0.12) 0%,
    rgba(75, 0, 130, 0.08) 30%,
    rgba(0, 0, 255, 0.04) 60%,
    var(--color-surface-raised) 100%);
  border: 3px solid transparent;
  background-clip: padding-box;
  position: relative;
  overflow: hidden;
}

.persona-card[data-tier="super"]::before {
  content: '';
  position: absolute;
  inset: 0; 
  padding: 3px;
  background: linear-gradient(45deg,
    #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, 
    #feca57, #ff9ff3, #54a0ff, #5f27cd);
  background-size: 300% 300%;
  border-radius: inherit;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rainbow-border 4s ease infinite;
  z-index: -1;
}

.persona-card[data-tier="super"]::after {
  content: '\f005';  /* Font Awesome solid star */
   font-family: 'Font Awesome 6 Free';
  font-weight: 900;  /* Add this! */
  position: absolute;
  top: 6px; right: 6px;
  z-index: 3;
  font-size: 0.8rem;
  animation: sparkle 2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

.persona-card[data-tier="super"]:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 
    var(--shadow-floating),
    0 0 40px rgba(138, 43, 226, 0.3);
  filter: brightness(110%) contrast(105%);
}

.persona-card[data-tier="super"]:hover::before {
  animation-duration: 2s;
}

.persona-card[data-tier="super"] .persona-info strong {
  background: linear-gradient(45deg,
    #8A2BE2, #4B0082, #0000FF, #8A2BE2);
  background-size: 200% 200%;
  animation: rainbow-text 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: var(--font-weight-bold);
}

/* ==== TIER BADGES ==== */
.premium-badge {
  color: var(--color-accent-secondary);
  font-size: 0.9rem;
  cursor: help;
  margin-left: 4px;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
  animation: golden-glow 2s ease-in-out infinite alternate;
}

.super-badge {
  background: linear-gradient(45deg, 
    #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 200% 200%;
  animation: rainbow-text 3s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  cursor: help;
  margin-left: 4px;
}

/* ==== LOCKED PERSONAS ==== */
.persona-card.locked {
  opacity: 0.6;
  cursor: not-allowed;
  position: relative;
}

.persona-card.locked::after {
  content: '\f023';  /* Replace with whatever you find */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;  /* Add this! */
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  z-index: 5;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-text-light);
  width: 32px; height: 32px;
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.persona-card.locked:hover {
  transform: none !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--color-border-standard) !important;
}

/* ==== SPECIAL ANIMATIONS ==== */
.persona-card[data-key="god"] {
  animation: divine-pulse 4s ease-in-out infinite;
}

@keyframes divine-pulse {
  0%, 100% { 
    box-shadow: 
      var(--shadow-card),
      0 0 20px rgba(138, 43, 226, 0.15);
  }
  50% { 
    box-shadow: 
      var(--shadow-floating),
      0 0 40px rgba(138, 43, 226, 0.3);
  }
}

/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 1024px) {
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
  
  #personas-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: var(--spacing-lg);
  }
}

@media (max-width: 768px) {
  #personas-sidebar {
    padding: var(--spacing-md);
  }
  
  .persona-grid {
    gap: var(--spacing-sm);
  }
  
  .persona-card img {
    height: 70px;
  }
  
  .persona-card .persona-info {
    font-size: 0.75rem;
    padding: var(--spacing-xs);
  }
  
  #preset-personas h2 {
    font-size: 1.2rem;
  }
  
  #preset-personas h3 {
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

@media (max-width: 480px) {
  .persona-grid {
    grid-template-columns: 1fr;
  }
  
  .persona-card img {
    height: 60px;
  }
  
  #preset-personas p {
    font-size: 0.8rem;
    padding: var(--spacing-sm);
  }
}

/* ===========================================================
   CHAT SECTION - MATCHING DESIGN SYSTEM (DARK GLASSMORPHISM)
   =========================================================== */

#chat {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  width: 100%;
  margin: 40px auto;
  
  /* SAME MATERIAL AS SECURITY BANNER & FORM */
  background: var(--color-background-panel);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  
  height: 75vh;
  max-height: 700px;
  position: relative;
  transition: var(--transition-smooth);
  overflow: hidden;
}

#chat:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.2),
    0 12px 24px rgba(0, 0, 0, 0.3),
    0 25px 50px rgba(0, 0, 0, 0.4);
  border-color: var(--color-border-highlight);
}

/* SAME ACCENT LINE AS OTHER COMPONENTS */
#chat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%);
  background-size: 200% 100%;
  animation: bannerAccentFlow 8s ease-in-out infinite;
  box-shadow: 0 0 12px 2px var(--color-accent-glow-primary);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  z-index: 10;
}

/* ==== CHAT HEADER - MATCHING FORM/SECURITY BANNER LAYOUT ==== */
.chat-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  border-bottom: 1px solid var(--color-border-standard);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.01) 100%);
  position: relative;
  z-index: 5;
}

/* Chat Persona Info - Like Security Branding */
.chat-persona-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.persona-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg,
    var(--color-accent-primary) 0%,
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
  display: flex; 
  align-items: center; 
  justify-content: center;
  color: var(--color-text-on-accent-bg);
  font-weight: var(--font-weight-bold);
  font-size: 1.2rem;
  border: 1px solid var(--color-border-highlight);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 8px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.persona-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.persona-details h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.persona-status {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-indicator {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-connected);
  box-shadow:
    0 0 0 2px rgba(var(--color-connected-rgb), 0.2),
    0 0 12px 3px var(--color-connected-glow);
  animation: connectionPulseBrighter 1.6s ease-in-out infinite;
}

/* Chat Actions - Like Security Action */
.chat-actions {
  display: flex;
  gap: var(--spacing-sm);
}

#reset-btn {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  color: var(--color-text-primary);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-standard);
  font-size: 0.75rem;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  box-shadow: var(--shadow-card);
}

#reset-btn:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-highlight);
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

/* ==== MESSAGES CONTAINER - PROPER DARK BACKGROUND ==== */
#messages {
  flex-grow: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  /* DARK BACKGROUND - NOT WHITE! */
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.2) 100%);
  position: relative;
  scroll-behavior: smooth;
}

/* Subtle background pattern */
#messages::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--color-accent-primary-rgb), 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

#messages > * {
  position: relative;
  z-index: 2;
}

/* Custom scrollbar */
#messages::-webkit-scrollbar {
  width: 8px;
}

#messages::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

#messages::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg,
    rgba(var(--color-accent-primary-rgb), 0.4) 0%,
    rgba(var(--color-accent-primary-rgb), 0.6) 100%);
  border-radius: 4px;
  transition: var(--transition-smooth);
}

#messages::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg,
    rgba(var(--color-accent-primary-rgb), 0.6) 0%,
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
}

/* ==== MESSAGE BUBBLES - SOPHISTICATED DARK DESIGN ==== */
.msg {
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--spacing-lg);
  gap: var(--spacing-sm);
  animation: messageSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes messageSlideIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.msg.user {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

.msg.assistant {
  flex-direction: row;
  justify-content: flex-start;
}

.msg-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: 0.9rem;
  margin-bottom: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.msg.user .msg-avatar {
  background: linear-gradient(135deg,
    var(--color-text-primary) 0%,
    rgba(var(--color-text-primary-rgb, 224, 232, 240), 0.8) 100%);
  color: var(--color-background-deep);
  box-shadow: 0 2px 8px rgba(224, 232, 240, 0.2);
}

.msg.assistant .msg-avatar {
  background: linear-gradient(135deg,
    var(--color-accent-primary) 0%,
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
  color: var(--color-text-on-accent-bg);
  box-shadow: 0 2px 8px var(--color-accent-glow-primary);
}

.msg-content {
  max-width: 70%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}

.msg-bubble {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: var(--transition-smooth);
  border: 1px solid var(--color-border-subtle);
}

/* USER MESSAGE BUBBLES */
.msg.user .msg-bubble {
  /* DARK USER BUBBLE - NOT WHITE */
  background: linear-gradient(135deg,
    rgba(var(--color-accent-primary-rgb), 0.2) 0%,
    rgba(var(--color-accent-primary-rgb), 0.15) 100%);
  color: var(--color-text-primary);
  margin-left: auto;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  border-color: rgba(var(--color-accent-primary-rgb), 0.3);
  box-shadow: var(--shadow-card);
}

.msg.user .msg-bubble::before {
  content: '';
  position: absolute;
  bottom: 0; right: -8px;
  width: 0; height: 0;
  border: 8px solid transparent;
  border-top-color: rgba(var(--color-accent-primary-rgb), 0.2);
  border-left-color: rgba(var(--color-accent-primary-rgb), 0.2);
  border-bottom: 0; border-right: 0;
  margin-bottom: -8px;
}

/* ASSISTANT MESSAGE BUBBLES */
.msg.assistant .msg-bubble {
  /* DARK ASSISTANT BUBBLE - NOT WHITE */
  background: var(--color-surface-raised);
  color: var(--color-text-primary);
  margin-right: auto;
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.msg.assistant .msg-bubble::before {
  content: '';
  position: absolute;
  bottom: 0; left: -8px;
  width: 0; height: 0;
  border: 8px solid transparent;
  border-top-color: var(--color-surface-raised);
  border-right-color: var(--color-surface-raised);
  border-bottom: 0; border-left: 0;
  margin-bottom: -8px;
}

.msg-bubble:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-interactive);
}

.msg-timestamp {
  font-size: 0.7rem;
  color: var(--color-text-tertiary);
  opacity: 0.8;
  margin-top: var(--spacing-xs);
  font-weight: var(--font-weight-medium);
}

.msg.user .msg-timestamp {
  text-align: right;
}

.msg.assistant .msg-timestamp {
  text-align: left;
}

/* ==== TYPING INDICATOR ==== */
.typing-indicator {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  animation: messageSlideIn 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.typing-indicator .msg-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg,
    var(--color-accent-primary) 0%,
    rgba(var(--color-accent-primary-rgb), 0.8) 100%);
  color: var(--color-text-on-accent-bg);
}

.typing-bubble {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  box-shadow: var(--shadow-card);
}

.typing-dots {
  display: flex;
  gap: 4px;
}

.typing-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-primary);
  animation: typingBounce 1.4s ease-in-out infinite;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

/* ==== CHAT INPUT FORM - SOPHISTICATED DESIGN ==== */
#chat-form {
  padding: var(--spacing-lg) var(--spacing-xl);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.02) 0%,
    rgba(255, 255, 255, 0.01) 100%);
  border-top: 1px solid var(--color-border-standard);
  position: relative;
}

#chat-form::before {
  content: '';
  position: absolute;
  top: 0; left: var(--spacing-xl); right: var(--spacing-xl);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--color-accent-primary-rgb), 0.3) 50%,
    transparent 100%);
}

.chat-input-container {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  /* DARK INPUT CONTAINER */
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-standard);
  border-radius: var(--radius-xl);
  padding: var(--spacing-xs);
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-card);
}

.chat-input-container:focus-within {
  border-color: var(--color-accent-primary);
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-interactive),
    0 0 0 3px rgba(var(--color-accent-primary-rgb), 0.2);
}

#chat-input {
  flex: 1;
  border: none;
  outline: none;
  /* DARK INPUT BACKGROUND */
  background: rgba(0, 0, 0, 0.2);
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text-primary);
  resize: none;
  min-height: 24px;
  max-height: 120px;
  line-height: 1.5;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

#chat-input::placeholder {
  color: var(--color-text-tertiary);
  opacity: 0.7;
}

#chat-input:focus {
  background: rgba(0, 0, 0, 0.3);
  color: var(--color-text-on-accent-bg);
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(var(--color-accent-primary-rgb), 0.2);
}

#chat-send {
  background: linear-gradient(135deg,
    var(--color-accent-primary) 0%,
    rgba(var(--color-accent-primary-rgb), 0.9) 100%);
  color: var(--color-text-on-accent-bg);
  border: none;
  border-radius: 50%;
  width: 48px; height: 48px;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 2px 8px rgba(var(--color-accent-primary-rgb), 0.3);
  position: relative;
  overflow: hidden;
}

#chat-send::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent);
  transition: left 0.5s;
}

#chat-send:hover::before { left: 100%; }

#chat-send:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.4);
}

#chat-send:active {
  transform: translateY(0) scale(1);
}

#chat-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 2px 8px rgba(var(--color-accent-primary-rgb), 0.3) !important;
}

/* ==== LOADING AND ERROR STATES ==== */
.msg.loading .msg-bubble {
  background: rgba(var(--color-accent-primary-rgb), 0.1);
  color: var(--color-text-secondary);
  font-style: italic;
  animation: loadingPulse 2s ease-in-out infinite;
}

.msg.error .msg-bubble {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* ==== RESPONSIVE DESIGN ==== */
@media (max-width: 768px) {
  #chat {
    margin: var(--spacing-lg) auto;
    height: calc(100vh - 60px);
    max-height: none;
    border-radius: var(--radius-lg);
  }
  
  .chat-header {
    padding: var(--spacing-md) var(--spacing-lg);
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    text-align: center;
  }
  
  .chat-persona-info {
    justify-content: center;
  }
  
  .persona-avatar {
    width: 40px; height: 40px;
  }
  
  .persona-details h3 {
    font-size: 1rem;
  }
  
  #reset-btn {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: 0.8rem;
  }
  
  #messages {
    padding: var(--spacing-md);
  }
  
  .msg-content {
    max-width: 85%;
  }
  
  .msg-bubble {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.9rem;
  }
  
  .msg-avatar {
    width: 32px; height: 32px;
    font-size: 0.8rem;
  }
  
  #chat-form {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  
  .chat-input-container {
    border-radius: var(--radius-lg);
  }
  
  #chat-input {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  #chat-send {
    width: 44px; height: 44px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  #chat {
    width: calc(100% - 16px);
    height: calc(100vh - 40px);
    border-radius: var(--radius-standard);
  }
  
  .chat-header {
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-sm);
  }
  
  #messages {
    padding: var(--spacing-sm);
  }
  
  .msg {
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-xs);
  }
  
  .msg-content {
    max-width: 90%;
  }
  
  .msg-bubble {
    padding: var(--spacing-sm);
    border-radius: var(--radius-md);
  }
  
  .msg.user .msg-bubble {
    border-bottom-right-radius: var(--radius-xs);
  }
  
  .msg.assistant .msg-bubble {
    border-bottom-left-radius: var(--radius-xs);
  }
  
  #chat-form {
    padding: var(--spacing-sm);
  }
  
  .chat-input-container {
    gap: var(--spacing-xs);
    padding: 3px;
  }
  
  #chat-input {
    padding: var(--spacing-sm);
  }
  
  #chat-send {
    width: 40px; height: 40px;
    font-size: 0.9rem;
  }
}

/* ===========================================================
   LOADING OVERLAY
   =========================================================== */
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,11,15,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--transition-cubic);
  color: var(--color-text-light);
  text-align: center;
  pointer-events: none;
  backdrop-filter: blur(var(--blur-md));
}
#loading-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
#loading-overlay p {
  margin-top: 25px;
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 0.5px;
}
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-spinner > div {
  width: var(--radius-lg); height: var(--radius-lg);
  background-color: var(--accent-blue);
  border-radius: var(--radius-round);
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  margin: 0 6px;
}
.loading-spinner .bounce1 { animation-delay: -0.32s; }
.loading-spinner .bounce2 { animation-delay: -0.16s; }
@keyframes sk-bouncedelay {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* ===========================================================
   VIEW TRANSITIONS
   =========================================================== */
.view-transition {
  transition: opacity var(--transition-cubic), transform var(--transition-cubic);
}
.view-hidden {
  opacity: 0;
  transform: scale(0.98) translateY(10px);
  pointer-events: none;
}
.view-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}










/* ===========================================================
    LUXURY TECH REDESIGN - CONNECTED PANEL (HEADER BY JN)
   =========================================================== */

/* --- Base Variables --- */
:root {
    /* Core Palette - Dark & Sophisticated */
    --color-background-deep: #0A0C0F; /* Deepened for more contrast */
    --color-background-panel-base: #121519; /* Slightly adjusted for depth */
    /* JN: "We're enhancing the background with a subtle inner glow and a faint directional sheen.
            This gives a sense of materiality, like a finely finished surface catching ambient light.
            It's about perceived quality without being distracting." */
    --color-background-panel:
        radial-gradient(ellipse at center, rgba(255,255,255,0.02) 0%, transparent 70%), /* Softer, more central ambient glow */
        linear-gradient(160deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0) 35%), /* Faint directional sheen */
        var(--color-background-panel-base);
    --color-surface-raised: #1A1D22; /* Slightly darker for better layering */
    --color-surface-interactive: #22262C; /* Adjusted for hover states */

    /* Borders & Dividers */
    --color-border-subtle: rgba(180, 190, 210, 0.08); /* Made even more subtle */
    --color-border-standard: rgba(180, 190, 210, 0.15); /* Slightly reduced opacity */
    --color-border-highlight: rgba(200, 215, 230, 0.3); /* Kept for clarity on hover */
    --color-border-accent: #5A9BFF; /* Slightly desaturated for sophistication */
    --color-border-accent-rgb: 90, 155, 255;

    /* Text Colors */
    --color-text-primary: #E0E8F0; /* Slightly softer white */
    --color-text-secondary: #909DAD; /* Adjusted for readability */
    --color-text-tertiary: #657385;
    --color-text-accent: var(--color-border-accent);
    --color-text-on-accent-bg: #FFFFFF;
    /* JN: "Added a specific color for text on darker interactive elements that don't take the full accent background.
            This ensures legibility remains high across various states." */
    --color-text-on-interactive-bg: #D0D9E3;


    /* Accent & Highlights */
    --color-accent-primary: var(--color-border-accent);
    --color-accent-primary-rgb: var(--color-border-accent-rgb);
    --color-accent-secondary: #E0B800; /* Gold, slightly less saturated */
    --color-accent-secondary-rgb: 224, 184, 0;
    /* JN: "The glows need to feel like light emanating from within or reflecting sharply.
            We'll make them a bit more focused and slightly brighter on key interactive elements." */
    --color-accent-glow-primary: rgba(var(--color-accent-primary-rgb), 0.3); /* Increased intensity for more 'shine' */
    --color-accent-glow-secondary: rgba(var(--color-accent-secondary-rgb), 0.3);
    --color-connected: #00E075; /* Vivid, 'digital' green */
    --color-connected-rgb: 0, 224, 117;
    --color-connected-glow: rgba(var(--color-connected-rgb), 0.6); /* More vibrant glow */
    --color-connected-glow-soft: rgba(var(--color-connected-rgb), 0.35);

    /* Shadows - Focused & Deep */
    --shadow-panel:
        0 2px 4px rgba(0, 0, 0, 0.15), /* Softer immediate shadow */
        0 8px 16px rgba(0, 0, 0, 0.25), /* Main shadow for depth */
        0 20px 40px rgba(0, 0, 0, 0.35); /* Deeper, ambient shadow */
    --shadow-card: 0 3px 10px rgba(0,0,0,0.2); /* Slightly refined card shadow */
    --shadow-interactive: 0 2px 6px rgba(0,0,0,0.25);

    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing & Radii - Fine-tuned for compactness */
    /* JN: "Compactness is key, but we must avoid a cramped feel. These values aim for a dense, information-rich
            layout that still allows elements to breathe. Harmony comes from consistent application." */
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 8px;   /* Standardized base for many small gaps */
    --spacing-md: 12px;  /* Common margin/padding between distinct elements */
    --spacing-lg: 16px;  /* For larger section separations and panel padding */
    --spacing-xl: 20px;

    --radius-sharp: 3px; /* Sharper for small interactive elements */
    --radius-standard: 6px; /* Slightly reduced for a more modern, crisp feel */
    --radius-panel: 10px; /* Reduced for a tighter, more integrated look */
    --radius-circular: 50%;

    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-snap: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    /* JN: "Added a slightly longer transition for effects that need to feel more 'organic', like glows appearing." */
    --transition-gentle: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}


/* --- Main Panel Styling --- */
.connected-panel {
    background: var(--color-background-panel);
    /* JN: "The background already has a subtle radial gradient. We ensure it's sourced from the variable for consistency.
            The blur and saturation on the backdrop give it that 'frosted glass' depth over content behind it." */
    backdrop-filter: blur(20px) saturate(110%); /* Slightly reduced blur for performance, adjusted saturation */
    -webkit-backdrop-filter: blur(20px) saturate(110%);
    border-radius: var(--radius-panel);
    border: 1px solid var(--color-border-standard);
    box-shadow: var(--shadow-panel);
    display: flex;
    flex-direction: column;
    /* JN: "Panel padding and gap between direct children are critical for internal rhythm.
            Using 'lg' for padding gives enough space from the edges, 'md' for internal sections maintains cohesion." */
    padding: var(--spacing-lg);
    gap: var(--spacing-md);
    position: fixed;
    top: 15px; /* JN: "Reduced top/right spacing for a slightly more 'anchored' feel to the viewport edge." */
    right: 15px;
    width: 385px; /* Slightly narrower for a sleeker profile */
    max-width: calc(100vw - 30px); /* Adjusted to match new top/right */
    z-index: 10000;
    color: var(--color-text-primary);
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
                box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1),
                border-color 0.3s ease;
    font-family: var(--font-main);
}

.connected-panel:hover {
    /* JN: "The hover elevation should be subtle but noticeable. A slight scale and Y-translate give a tactile feel.
            The shadow and border become more pronounced, indicating interactivity and focus." */
    transform: translateY(-2px) scale(1.005); /* Reduced scale for subtlety */
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.2),  /* Adjusted hover shadow */
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: var(--color-border-highlight);
}

/* Top accent line with animated shine */
.connected-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    /* JN: "The gradient on this accent line creates a 'sheen'. The animation makes it dynamic.
            Its glow should be tied to the primary accent, giving a hint of the interactive color language." */
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--color-accent-primary) 30%,
        #AACCFF 50%, /* Brighter midpoint for the shine */
        var(--color-accent-primary) 70%,
        transparent 100%
    );
    background-size: 250% 100%; /* Adjusted for a wider shine travel */
    animation: panelAccentShine 6s ease-in-out infinite; /* Slower, more sophisticated animation */
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    box-shadow: 0 0 12px 2px var(--color-accent-glow-primary); /* Enhanced glow */
}

@keyframes panelAccentShine {
    0%, 100% { background-position: 175% 50%; } /* Adjusted start/end for full travel */
    50% { background-position: -75% 50%; }
}

/* --- Brand Header --- */
.brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* JN: "Compactness here is vital. 'sm' padding at the bottom before the border, and a smaller 'xs' margin
            after the border to keep the next section feeling connected but distinct." */
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border-subtle);
    min-height: 36px; /* Reduced min-height for compactness */
    margin-bottom: var(--spacing-sm); /* Reduced from md for tighter feel */
}

.brand-title {
    display: flex;
    align-items: center;
    /* JN: "The gap between logo and title text should be just enough to separate them clearly. 'sm' is appropriate." */
    gap: var(--spacing-sm);
}
.brand-logo {
    position: relative;
    width: 36px; /* Slightly smaller */
    height: 36px;
    background: linear-gradient(145deg, var(--color-surface-interactive), var(--color-surface-raised));
    border-radius: var(--radius-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03), /* More subtle inset border */
        0 1px 4px rgba(0,0,0,0.25); /* Softer shadow */
    clip-path: polygon( /* Kept octagonal shape */
        25% 0%, 75% 0%, 100% 25%, 100% 75%,
        75% 100%, 25% 100%, 0% 75%, 0% 25%
    );
    transform: perspective(500px) rotateX(0deg) rotateY(0deg);
    transition: var(--transition-smooth);
    overflow: hidden;
}

.brand-logo-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the entire container */
    object-position: center; /* Centers the image */
    display: block;
}

.brand-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* JN: "The light sweep effect adds a premium touch. It should be quick and subtle." */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent); /* Reduced opacity */
    transform: skewX(-25deg);
    transition: left 0.6s ease-out;
    z-index: 1; /* Ensures the sweep effect appears over the image */
}

.brand-logo:hover {
    transform: perspective(500px) rotateX(4deg) rotateY(-4deg) scale(1.06); /* Slightly less aggressive tilt */
    /* JN: "On hover, the logo's shadow should subtly bloom with the accent color, reinforcing brand and interactivity." */
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.07),
        0 3px 10px rgba(var(--color-accent-primary-rgb), 0.3), /* Using accent glow for consistency */
        0 5px 12px rgba(0,0,0,0.3);
}

.brand-logo:hover::before {
    left: 100%;
    transition: left 0.5s ease-in;
}

/* Add this to your HTML head or CSS imports */
@import url('https://fonts.googleapis.com/css2?family=Lobster:wght@400&display=swap');

.brand-name {
    margin: 0;
    line-height: 1.1;
    font-size: 2.5rem; /* Slightly larger for logo presence */
    font-family: 'Lobster', cursive; /* Logo-style decorative font */
    font-weight: 400; /* Lobster looks best at normal weight */
    color: var(--color-text-primary);
    letter-spacing: 0.5px; /* Slightly more spacing for readability */
    /* JN: "The text shadow on the brand name gives it presence. The hover effect should make it 'shine'
            by intensifying the glow and using the on-accent text color for maximum contrast and impact." */
    text-shadow:
        0 1px 3px rgba(0,0,0,0.5),
        0 0 12px rgba(var(--color-accent-primary-rgb), 0.3); /* Enhanced glow for logo effect */
    transition: color var(--transition-smooth), text-shadow var(--transition-smooth), transform var(--transition-smooth);
    cursor: pointer; /* Indicates it's interactive */
}

.brand-name:hover {
    color: var(--color-text-on-accent-bg);
    transform: scale(1.02); /* Subtle scale effect for logo interaction */
    text-shadow:
        0 0 3px rgba(0,0,0,0.3), /* Deeper base shadow */
        0 0 18px var(--color-accent-primary), /* Stronger main glow */
        0 0 30px var(--color-accent-glow-primary), /* Wider, softer glow */
        0 0 40px rgba(var(--color-accent-primary-rgb), 0.4); /* Extra wide ambient glow */
}

/* --- Brand Action Links --- */
.brand-links {
    display: flex;
    align-items: center;
    /* JN: "The gap for these small icon buttons should be minimal ('xs') to keep them grouped as a toolbar." */
    gap: var(--spacing-xs);
}

.brand-link {
    width: 36px; /* Matched to logo height for visual rhythm */
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 220, 255, 0.05); /* More subtle base */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Slightly more defined border */
    border-radius: var(--radius-standard); /* Consistent rounded corners */
    color: var(--color-text-secondary); /* Use secondary text for less emphasis unless hovered */
    font-size: 0.9rem; /* Adjusted icon size */
    text-decoration: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* Faster transition for quick feedback */
    margin: 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 20, 40, 0.1); /* Softer shadow */
    backdrop-filter: blur(5px) saturate(1.05);
    --highlight-opacity: 0; /* Start with no highlight */
}

.brand-link::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    /* JN: "The radial highlight should be subtle and expand on hover, giving a sense of the button 'powering up'." */
    background: radial-gradient(
        circle,
        rgba(255,255,255,var(--highlight-opacity)) 0%,
        transparent 50% /* Faster falloff */
    );
    border-radius: inherit; /* Match parent's border-radius */
    top: 0;
    left: 0;
    transform: scale(0.8); /* Start smaller */
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, --highlight-opacity 0.3s ease;
}

.brand-link:hover {
    background: rgba(var(--color-accent-primary-rgb), 0.15); /* Use accent color for hover bg */
    color: var(--color-text-on-accent-bg); /* Brighter text on hover */
    transform: translateY(-2px) scale(1.03); /* Subtle lift */
    border-color: rgba(var(--color-accent-primary-rgb), 0.4); /* Accent border */
    /* JN: "The hover shadow should use the accent glow, reinforcing the interactive state with brand color." */
    box-shadow: 0 3px 10px rgba(var(--color-accent-primary-rgb), 0.25);
}

.brand-link:hover::before {
    --highlight-opacity: 0.1; /* Subtle highlight */
    transform: scale(1.2); /* Expand highlight */
    opacity: 1;
}

.brand-link:hover::after { /* Icon shimmer - kept as is, effective */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.1), /* Subtle shimmer */
        transparent
    );
    transform: skewX(-25deg);
    animation: iconShimmer 0.7s forwards 0.1s; /* Slightly delayed start */
}

@keyframes iconShimmer {
    to { left: 150%; }
}

.brand-link.telegram:hover {
    /* JN: "Brand consistency. Telegram gets its specific branded hover, which is good for recognition." */
    background: rgba(0, 136, 204, 0.25); /* Slightly more saturated */
    border-color: rgba(0, 136, 204, 0.45);
    box-shadow: 0 3px 10px rgba(0, 136, 204, 0.25);
}
.brand-link.telegram:hover i {
    color: #FFFFFF; /* Ensure Telegram icon is white on its brand blue hover */
}

.brand-link {
  cursor: pointer;
}

.brand-link.discord:hover {
    /* Discord brand color hover */
    background: rgba(88, 101, 242, 0.25); /* Discord's brand purple */
    border-color: rgba(88, 101, 242, 0.45);
    box-shadow: 0 3px 10px rgba(88, 101, 242, 0.25);
}

.brand-link.discord:hover i {
    color: #FFFFFF; /* Ensure Discord icon is white on its brand purple hover */
}

.brand-link:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 1px; /* Closer offset */
    background: rgba(var(--color-accent-primary-rgb), 0.2); /* Consistent with hover */
    color: var(--color-text-on-accent-bg);
}

/* --- Contract Info --- */
.contract-info {
    background: rgba(0,0,0,0.2); /* Slightly darker, more integrated background */
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-standard);
    padding: var(--spacing-sm); /* Reduced padding for compactness */
    /* JN: "Using 'sm' for bottom margin to maintain a tight but clear separation from the Wallet Status." */
    margin-bottom: var(--spacing-sm);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
    position: relative;
    z-index: 1;
    transition: background-color var(--transition-gentle), box-shadow var(--transition-gentle);
}

/* JN: "This is the 'backlight' for the contract address. It should appear gently on hover over the
        entire contract-info block, providing a subtle focus without being jarring.
        The effect should be soft and ambient." */
.contract-info::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%; /* Slightly smaller spread */
    height: 130%;
    border-radius: var(--radius-standard);
    background: radial-gradient(
        ellipse at center,
        rgba(var(--color-accent-primary-rgb), 0.5) 0%, /* Use accent color, slightly stronger */
        transparent 60% /* Faster falloff for a more focused glow */
    );
    opacity: 0;
    z-index: -1;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity var(--transition-gentle), transform var(--transition-gentle);
    pointer-events: none;
}

/* JN: "The backlight should activate when the user hovers over the .contract-info area,
        giving them early feedback that this entire block is interactive or important." */
.contract-info:hover::before {
    opacity: 0.5; /* Adjust opacity to make it visible but not overpowering */
    transform: translate(-50%, -50%) scale(1);
}
/* JN: "When hovering the contract info section, we also want the text to be slightly more prominent." */
.contract-info:hover .contract-label {
    color: var(--color-text-primary);
}
.contract-info:hover .contract-address-text {
    color: var(--color-text-accent); /* Highlight address text with accent color */
}


.contract-label {
    font-size: 0.65rem; /* Slightly smaller for de-emphasis */
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: var(--font-weight-semibold);
    transition: color var(--transition-smooth);
}

.contract-address {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--color-background-deep); /* Darker, distinct background for the address itself */
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sharp);
    padding: var(--spacing-xs) var(--spacing-sm);
    transition: border-color var(--transition-smooth);
}
.contract-info:hover .contract-address {
    border-color: rgba(var(--color-accent-primary-rgb), 0.3); /* Subtle border highlight */
}


.contract-address-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--color-text-secondary); /* Start with secondary, brighten on hover via parent */
    flex: 1;
    word-break: break-all;
    line-height: 1.3; /* Adjusted for font size */
    transition: color var(--transition-smooth);
}

.copy-contract-btn {
    background: transparent;
    border: 1px solid var(--color-border-standard);
    border-radius: var(--radius-sharp);
    padding: var(--spacing-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-snap);
    font-size: 0.7rem; /* Smaller icon button */
    line-height: 0; /* Helps align icon */
}
.copy-contract-btn i {
    display: block;
    transition: transform 0.2s ease, color 0.2s ease;
}


/* JN: "When the user hovers the copy button, it should clearly indicate interactivity.
        A brighter border, accent color for the icon, and a subtle scale provide this feedback.
        The text color change ensures legibility against the new background." */
.copy-contract-btn:hover {
    background: var(--color-surface-interactive);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary); /* Icon color changes to accent */
    transform: scale(1.08);
}

/* JN: "When the copy button is clicked (active state), provide immediate tactile feedback.
        A slight press-down effect (scale down) and a stronger background change confirm the action." */
.copy-contract-btn:active {
    background: var(--color-accent-primary);
    color: var(--color-text-on-accent-bg); /* Icon becomes white */
    transform: scale(0.95);
    transition-duration: 0.05s;
}

/* JN: "Visual feedback for 'copied' state. We'll add a class 'copied' via JS.
        The icon changes to a checkmark, and the background briefly flashes the accent color." */
.copy-contract-btn.copied {
    background: var(--color-accent-primary); /* Or a success green if preferred */
    color: var(--color-text-on-accent-bg);
    border-color: var(--color-accent-primary);
}
.copy-contract-btn.copied i::before {
    content: '\f00c'; /* FontAwesome check icon */
    font-family: "Font Awesome 6 Free"; /* Ensure correct font family */
    font-weight: 900; /* For solid icons */
}


/* --- Wallet Status Section --- */
.wallet-status-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    /* JN: "This section is a key status indicator. 'md' margin at the bottom provides good separation
            before the main wallet info grid. Padding top/bottom ensures the elements within don't touch borders." */
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) 0;
}

.connection-indicator {
    width: 9px; /* Slightly larger for visibility */
    height: 9px;
    border-radius: var(--radius-circular);
    background: var(--color-connected);
    /* JN: "The connected indicator's glow is crucial for 'at-a-glance' status.
            It should be vibrant and pulse gently to signify an active, 'live' connection.
            The 'inset' shadow gives it a slight 3D depth, like an LED." */
    box-shadow:
        0 0 0 2px rgba(var(--color-connected-rgb), 0.2), /* Base ring */
        0 0 12px 3px var(--color-connected-glow),      /* Main glow, more intense */
        0 0 25px 5px var(--color-connected-glow-soft), /* Softer, wider ambient glow */
        inset 0 0 4px rgba(220, 255, 230, 0.7);      /* Inner highlight for dimensionality */
    animation: connectionPulseBrighter 1.6s ease-in-out infinite; /* Slightly faster, more energetic pulse */
}

@keyframes connectionPulseBrighter {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(var(--color-connected-rgb), 0.2),
            0 0 10px 2px var(--color-connected-glow),
            0 0 20px 4px var(--color-connected-glow-soft),
            inset 0 0 3px rgba(220,255,230,0.6);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 0 3px rgba(var(--color-connected-rgb), 0.35), /* Brighter ring */
            0 0 15px 4px var(--color-connected-glow),      /* More intense main glow */
            0 0 30px 7px var(--color-connected-glow-soft), /* Wider ambient glow */
            inset 0 0 5px rgba(220,255,230,0.8);      /* Brighter inner highlight */
        transform: scale(1.05); /* Subtle scale pulse */
    }
}

.wallet-title {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    flex: 1;
}

.tier-badge {
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--radius-sharp);
    font-size: 0.65rem; /* Compacted badge text */
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid;
    box-shadow:
        inset 0 0.5px 1px rgba(255,255,255,0.05), /* More subtle inset */
        0 1px 1.5px rgba(0,0,0,0.15); /* Softer shadow */
    transition: var(--transition-smooth);
    line-height: 1.2; /* Ensure text fits well */
}

/* JN: "Tier badges should subtly reflect their status. 'Free' is understated.
        'Premium' and 'Super' use their respective accent colors with appropriate gradients
        and text shadows to create a richer, more distinct visual identity." */
.tier-badge.free {
    background: linear-gradient(135deg, var(--color-surface-raised), var(--color-surface-interactive));
    color: var(--color-text-secondary);
    border-color: var(--color-border-standard);
}

.tier-badge.premium {
    background: linear-gradient(135deg, #4A3C1E, #302512); /* Darker gold gradient */
    color: var(--color-accent-secondary);
    border-color: rgba(var(--color-accent-secondary-rgb), 0.4);
    text-shadow: 0 0 10px rgba(var(--color-accent-secondary-rgb), 0.6); /* Stronger text glow */
    box-shadow:
        inset 0 0.5px 1px rgba(255,220,100,0.1),
        0 0 12px var(--color-accent-glow-secondary); /* More prominent glow */
}

.tier-badge.super {
    background: linear-gradient(
        135deg,
        rgba(var(--color-accent-primary-rgb), 0.2), /* Slightly richer gradient */
        rgba(var(--color-accent-primary-rgb), 0.1)
    );
    color: var(--color-accent-primary);
    border-color: rgba(var(--color-accent-primary-rgb), 0.4);
    text-shadow: 0 0 10px var(--color-accent-glow-primary); /* Stronger text glow */
    box-shadow:
        inset 0 0.5px 1px rgba(180,210,255,0.1),
        0 0 12px var(--color-accent-glow-primary); /* More prominent glow */
}

/* --- Wallet Address & Info Grid --- */
.wallet-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* JN: "'sm' gap for items within the grid creates a tight, organized structure.
            'md' bottom margin before the AI operations panel clearly delineates sections." */
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.wallet-address-display {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-standard);
    border-radius: var(--radius-standard);
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    grid-column: 1 / -1; /* Full width */
    /* JN: "'xs' margin for very tight grouping with the cards below it." */
    margin-bottom: var(--spacing-xs);
    box-shadow: var(--shadow-card);
    position: relative; /* For potential future adornments */
}

.wallet-address {
    font-family: var(--font-mono);
    font-size: 0.8rem; /* Slightly smaller for density */
    color: var(--color-text-primary);
    flex: 1;
    word-break: break-all;
    line-height: 1.3;
}

/* JN: "Reusing copy button styles for consistency. Users learn an interaction pattern once." */
.copy-address-btn {
    background: transparent;
    border: 1px solid var(--color-border-standard);
    border-radius: var(--radius-sharp);
    padding: var(--spacing-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: var(--transition-snap);
    font-size: 0.7rem;
    line-height: 0;
}
.copy-address-btn i { display: block; transition: transform 0.2s ease, color 0.2s ease; }


.copy-address-btn:hover {
    background: var(--color-surface-interactive);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    transform: scale(1.08);
}
.copy-address-btn:active {
    background: var(--color-accent-primary);
    color: var(--color-text-on-accent-bg);
    transform: scale(0.95);
    transition-duration: 0.05s;
}
.copy-address-btn.copied {
    background: var(--color-accent-primary);
    color: var(--color-text-on-accent-bg);
    border-color: var(--color-accent-primary);
}
.copy-address-btn.copied i::before {
    content: '\f00c'; /* FontAwesome check icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.info-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-standard);
    border-radius: var(--radius-standard);
    /* JN: "Consistent 'md' padding within cards for readability and balance." */
    padding: var(--spacing-md);
    transition: var(--transition-smooth);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    /* JN: "'xxs' gap for very closely related items like value and subtitle, 'xs' for label to value." */
    gap: var(--spacing-xxs);
}

.info-card:hover {
    background: var(--color-surface-interactive);
    border-color: var(--color-border-highlight); /* Clearer border on hover */
    transform: translateY(-3px); /* Keep the subtle lift */
    /* JN: "The card shadow on hover should deepen, enhancing the 'lifted' effect and focus." */
    box-shadow: 0 5px 15px rgba(0,0,0,0.28);
}

.info-label {
    font-size: 0.65rem; /* Further compacting labels */
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs); /* Space between label and value group */
}

.info-label i {
    font-size: 0.85em; /* Icon size relative to label */
    color: var(--color-text-tertiary); /* Subtle icon color */
}
.info-card:hover .info-label i {
    color: var(--color-text-secondary); /* Brighten icon on card hover */
}


.info-value {
    font-size: 1.2rem; /* Slightly reduced for compactness */
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    line-height: 1.15; /* Tighter line height */
}
.info-card:hover .info-value {
    color: var(--color-text-accent); /* Highlight value on card hover */
}

.info-subtitle {
    font-size: 0.7rem; /* Compact subtitle */
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-medium);
}

/* --- AI Operations Panel --- */
.ai-operations-panel {
    /* JN: "This panel has a special purpose, so a distinct background using the accent color subtly
            sets it apart. The gradient should be very gentle." */
    background: linear-gradient(
        135deg,
        rgba(var(--color-accent-primary-rgb),0.06) 0%, /* Slightly less intense gradient */
        rgba(var(--color-accent-primary-rgb),0.02) 100%
    );
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.15); /* Border subtly tinted with accent */
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    /* JN: "Consistent 'md' bottom margin for section separation." */
    margin-bottom: var(--spacing-md);
    box-shadow:
        inset 0 0.5px 1px rgba(var(--color-accent-primary-rgb),0.05), /* Inset shadow with accent tint */
        0 2px 3px rgba(0,0,0,0.1);
}

.ai-operations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* JN: "'sm' margin for separation between header and progress bar within this panel." */
    margin-bottom: var(--spacing-sm);
}

.ai-operations-label {
    font-size: 0.75rem; /* Compact label */
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}
.ai-operations-label i {
    color: var(--color-accent-primary); /* Icon uses accent color for prominence */
}

.ai-operations-badge {
    background: rgba(var(--color-accent-primary-rgb), 0.2); /* Brighter badge background */
    color: var(--color-text-on-accent-bg); /* Ensure contrast */
    padding: var(--spacing-xxs) var(--spacing-sm);
    border-radius: var(--radius-sharp);
    font-size: 0.65rem; /* Compact badge text */
    font-weight: var(--font-weight-bold);
    border: 1px solid rgba(var(--color-accent-primary-rgb), 0.5); /* Stronger accent border */
    line-height: 1.2;
    text-shadow: 0 0 5px rgba(var(--color-accent-primary-rgb),0.5); /* Subtle glow for the text */
}

.ai-operations-progress-container {
    /* JN: Using 'sm' for consistency within this panel for margins around the progress bar. */
    margin-bottom: var(--spacing-sm); /* Space before the note */
}

.ai-operations-progress-bar {
    background: rgba(0,0,0,0.35); /* Darker track for more contrast */
    border-radius: var(--radius-sharp);
    height: 8px; /* Slightly thicker bar for better visibility */
    overflow: hidden;
    /* margin-bottom: var(--spacing-xs); Removed, container has margin */
    border: 1px solid var(--color-border-subtle);
}

.ai-operations-progress {
    background: var(--color-accent-primary);
    height: 100%;
    border-radius: 2px; /* Inner radius for the progress fill */
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    /* JN: "The progress fill should have a strong, direct shine to make it feel active and modern." */
    box-shadow:
        0 0 8px var(--color-accent-primary), /* More focused glow */
        0 0 12px var(--color-accent-glow-primary);
}

.ai-operations-progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%; /* More focused shine element */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.5), /* Brighter shine */
        transparent
    );
    transform: skewX(-25deg);
    animation: progressShineSophisticated 2.2s ease-in-out infinite; /* Slightly faster, more active */
}

@keyframes progressShineSophisticated { /* Kept as is, effective */
    0% { left: -150%; }
    50% { left: 150%; }
    100% { left: -150%; }
}

.ai-operations-note {
    font-size: 0.65rem; /* Compact note text */
    color: var(--color-text-secondary);
    text-align: center;
}

/* --- Wallet Actions (Buttons) --- */
.wallet-actions {
    display: flex;
    gap: var(--spacing-sm);
    /* JN: "'sm' margin-top provides just enough separation from the AI panel above. No margin-bottom needed
            as this is the last element, panel's main padding will handle space at the bottom." */
    margin-top: var(--spacing-sm);
}

.dashboard-button,
.disconnect-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border-standard);
    color: var(--color-text-primary); /* Default text color */
    /* JN: "'sm' padding for buttons strikes a balance between click target size and compactness." */
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-standard);
    font-size: 0.75rem; /* Compact button text */
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.2px; /* Tighter letter spacing */
    cursor: pointer;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition-smooth);
    box-shadow:
        0 1px 1.5px rgba(0,0,0,0.08), /* Softer default shadow */
        inset 0 0.5px 0px rgba(255,255,255,0.02); /* Very subtle top highlight */
}

/* JN: "Hover and focus states for buttons must be clear. We use a common transformation (lift)
        and an enhanced shadow to signal interactivity." */
.dashboard-button:hover,
.dashboard-button:focus-visible,
.disconnect-button:hover,
.disconnect-button:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px rgba(0,0,0,0.15), /* Enhanced shadow on hover/focus */
        inset 0 0.5px 0px rgba(255,255,255,0.04);
}

/* JN: "Active state (mouse press) provides immediate feedback of the button being pressed down." */
.dashboard-button:active,
.disconnect-button:active {
    transform: translateY(0px) scale(0.98); /* Press down effect */
    background: var(--color-surface-interactive); /* Darker background when pressed */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); /* Inset shadow for pressed feel */
    transition-duration: var(--transition-snap); /* Faster transition for active state */
}

/* Dashboard button specific hover: Accent color makes it primary action */
.dashboard-button:hover,
.dashboard-button:focus-visible {
    color: var(--color-text-on-accent-bg); /* White text for contrast on accent bg */
    border-color: var(--color-accent-primary);
    /* JN: "Using the accent color with some transparency for the background on hover makes the button 'glow'.
            The text color change to white ensures high contrast and readability, a Nielsen principle." */
    background: rgba(var(--color-accent-primary-rgb), 0.25); /* Slightly more intense accent bg */
    box-shadow:
        0 3px 8px var(--color-accent-glow-primary), /* Accent glow shadow */
        inset 0 1px 0px rgba(var(--color-accent-primary-rgb), 0.1);
}

/* Disconnect button variables and hover: Red for cautionary action */
.disconnect-button {
    --btn-disconnect-color: #F85555; /* Slightly less harsh red */
    --btn-disconnect-color-rgb: 248, 85, 85;
    --btn-disconnect-glow: rgba(var(--btn-disconnect-color-rgb), 0.3); /* Adjusted glow intensity */
}

.disconnect-button:hover,
.disconnect-button:focus-visible {
    /* JN: "For destructive actions like 'Disconnect', using a distinct color (red) is crucial for usability.
            The hover state should clearly show this color. Text must remain highly legible." */
    color: var(--color-text-on-accent-bg); /* White text for contrast */
    border-color: var(--btn-disconnect-color);
    background: rgba(var(--btn-disconnect-color-rgb), 0.25); /* Slightly more intense red bg */
    box-shadow:
        0 3px 8px var(--btn-disconnect-glow), /* Red glow shadow */
        inset 0 1px 0px rgba(var(--btn-disconnect-color-rgb), 0.1);
}

.dashboard-button i,
.disconnect-button i {
    font-size: 0.9em; /* Icon size relative to button font size */
    line-height: 1;
    transition: transform 0.2s ease-out;
}

.dashboard-button:hover i,
.disconnect-button:hover i {
    /* JN: "A subtle icon animation on hover adds a little delight and reinforces the interactive state." */
    transform: scale(1.15); /* Slightly more pronounced icon scale */
}

















/* ===========================================================
   SOPHISTICATED SECURITY BANNER - COMPLETE REDESIGN
   Dark, Elegant, Purpose-Driven
   =========================================================== */

.security-banner {
  position: relative;
  background: var(--color-background-panel);
  border-bottom: 1px solid var(--color-border-standard);
  box-shadow: var(--shadow-panel);
  z-index: 10000;
  transition: var(--transition-smooth);
  overflow: hidden;
}

/* Sophisticated top accent line */
.security-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--color-accent-primary) 0%,
    var(--color-accent-secondary) 50%,
    var(--color-accent-primary) 100%);
  background-size: 200% 100%;
  animation: bannerAccentFlow 8s ease-in-out infinite;
  box-shadow: 0 0 12px 2px var(--color-accent-glow-primary);
}

@keyframes bannerAccentFlow {
  0%, 100% { background-position: 100% 50%; }
  50% { background-position: 0% 50%; }
}

.security-banner.dismissed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* Clean, focused layout */
.security-content {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl);
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Minimal, sophisticated branding */
.security-branding {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.security-logo {
  position: relative;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  font-weight: var(--font-weight-bold);
  
  background: linear-gradient(135deg, 
    var(--color-surface-interactive), 
    var(--color-surface-raised));
  border-radius: var(--radius-standard);
  border: 1px solid var(--color-border-highlight);
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 2px 8px rgba(0,0,0,0.15);
  
  color: var(--color-accent-primary);
  transition: var(--transition-smooth);
}

.security-logo::before {
  content: 'CP';
}

.security-logo:hover {
  transform: scale(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
}

.security-brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.security-brand-name {
  font-size: 1.1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.security-brand-tagline {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Core message - clear and focused */
.security-message {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.security-headline {
  margin: 0;
  font-size: 1.2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

.security-value-prop {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.security-highlights {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xs);
}

.security-highlight {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--spacing-sm);
  
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sharp);
  
  font-size: 0.7rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  
  transition: var(--transition-snap);
}

.security-highlight:hover {
  background: var(--color-surface-interactive);
  border-color: var(--color-border-accent);
  color: var(--color-text-accent);
}

.security-highlight-icon {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-connected);
  box-shadow: 0 0 6px var(--color-connected-glow-soft);
}

/* Security banner dismiss button */
.security-dismiss-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: var(--color-text-secondary);
  border-radius: var(--radius-standard);
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  margin-left: var(--spacing-sm);
}

.security-dismiss-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-text-primary);
  transform: scale(1.05);
}

.security-dismiss-btn:active {
  transform: scale(0.95);
}

/* Update security action to accommodate both buttons */
.security-action {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .security-action {
    flex-direction: column;
    align-items: stretch;
  }
  
  .security-dismiss-btn {
    align-self: flex-end;
    margin-left: 0;
    margin-top: var(--spacing-sm);
  }
}



.connect-wallet-btn {
  background: linear-gradient(135deg, 
    var(--color-accent-primary) 0%, 
    var(--color-accent-primary) 100%);
  color: var(--color-text-on-accent-bg);
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-standard);
  cursor: pointer;
  
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.2),
    0 4px 20px rgba(var(--color-accent-primary-rgb), 0.3);
  
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.connect-wallet-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(255,255,255,0.2), 
    transparent);
  transition: left 0.5s;
}

.connect-wallet-btn:hover::before { 
  left: 100%; 
}

.connect-wallet-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.3),
    0 8px 30px rgba(var(--color-accent-primary-rgb), 0.4);
}

.connect-wallet-btn:active {
  transform: translateY(0) scale(1);
}

.connect-wallet-btn-icon {
  font-size: 1rem;
}

.connect-wallet-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.connect-wallet-btn-primary {
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.connect-wallet-btn-secondary {
  font-size: 0.7rem;
  font-weight: var(--font-weight-regular);
  opacity: 0.9;
  line-height: 1;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .security-content {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    text-align: center;
    padding: var(--spacing-lg) var(--spacing-lg);
  }
  
  .security-branding {
    justify-content: center;
  }
  
  .security-highlights {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .security-action {
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .security-content {
    padding: var(--spacing-md) var(--spacing-lg);
    gap: var(--spacing-md);
  }
  
  .security-logo {
    width: 40px; height: 40px;
    font-size: 1.2rem;
  }
  
  .security-brand-name {
    font-size: 1rem;
  }
  
  .security-headline {
    font-size: 1.1rem;
  }
  
  .security-value-prop {
    font-size: 0.85rem;
  }
  
  .connect-wallet-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.8rem;
  }
  
  .security-highlights {
    gap: var(--spacing-sm);
  }
}

@media (max-width: 480px) {
  .security-content {
    padding: var(--spacing-md) var(--spacing-md);
  }
  
  .security-branding {
    gap: var(--spacing-sm);
  }
  
  .security-logo {
    width: 36px; height: 36px;
    font-size: 1.1rem;
  }
  
  .security-brand-name {
    font-size: 0.95rem;
  }
  
  .security-brand-tagline {
    font-size: 0.7rem;
  }
  
  .security-headline {
    font-size: 1rem;
  }
  
  .security-value-prop {
    font-size: 0.8rem;
  }
  
  .connect-wallet-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
  
  .security-highlights {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
  }
}

 






























/* ===========================================================
   MODALS & OVERLAYS
   =========================================================== */
/* Common overlay for connection-required, persona-confirm, delete-confirm, xave-persona, auth */
.connection-required-overlay,
.persona-confirm-overlay,
.delete-confirm-overlay,
.xave-persona-overlay,
.auth-container {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: overlayFadeIn 0.3s ease-out;
  padding: 20px;
}


.auth-container {
  background: var(--bg-dark-gradient);
  color: var(--color-text-light);
}
/* Modal content styling */
.connection-required-modal,
.persona-confirm-modal,
.delete-confirm-modal,
.xave-persona-modal,
.auth-content {
  background: linear-gradient(135deg, var(--bg-glass-light-fieldset) 0%, rgba(248,249,250,0.9) 100%);
  backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--border-light-alpha);
  border-radius: 20px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.2), var(--inset-shadow-mid);
  position: relative;
  overflow: hidden;
  animation: modalSlideIn 0.4s var(--transition-cubic);
}
.auth-content {
  max-width: 500px;
  color: var(--color-text-body);
}
.xave-persona-modal {
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}
/* Top accent line for modals */
.connection-required-modal::before,
.persona-confirm-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue-dark) 25%, var(--accent-blue-darker) 50%, var(--accent-blue-dark) 75%, var(--accent-blue) 100%);
  background-size: 200% 100%;
  animation: connectionShimmer 3s linear infinite;
}
.persona-confirm-modal::before {
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue-dark) 25%, var(--accent-premium) 50%, var(--accent-super) 75%, var(--accent-blue) 100%);
}

/* Modal Headers and Text */
.connection-required-modal h3,
.persona-confirm-modal h3,
.delete-confirm-modal h3,
.auth-header h2,
.modal-header h3 {
  margin: 0 0 var(--radius-lg) 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-dark-primary);
  line-height: 1.2;
}
.connection-required-modal p,
.persona-confirm-modal p,
.delete-confirm-modal p,
.auth-header p {
  margin: 0 0 var(--radius-md) 0;
  color: var(--color-text-muted);
  font-size: 1rem;
  line-height: 1.5;
}
.persona-confirm-modal p:last-of-type {
  margin-bottom: var(--radius-xl);
  font-weight: 600;
  color: var(--color-text-dark-secondary);
}
.delete-confirm-modal .warning-text {
  color: var(--accent-danger);
  font-weight: 600;
}

/* Lists inside modals */
.connection-required-modal ul,
.auth-benefits ul,
.ai-operations-overlay ul {
  text-align: left;
  margin: 20px 0;
  padding-left: 0;
  list-style: none;
}
.connection-required-modal li,
.auth-benefits li,
.ai-operations-overlay li {
  display: flex;
  align-items: center;
  margin-bottom: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  padding: var(--radius-sm) var(--radius-md);
  background: var(--accent-blue-alpha-low);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent-blue);
}
.auth-benefits li i {
  color: var(--accent-blue);
  margin-right: var(--radius-md);
  width: var(--radius-lg);
  text-align: center;
}

/* Modal Actions */
.connection-actions,
.confirm-actions,
.modal-actions {
  display: flex;
  gap: var(--radius-md);
  justify-content: center;
  margin-top: var(--radius-xl);
  flex-wrap: wrap;
}
.modal-actions {
  padding: 0 32px 32px;
}

/* Primary modal buttons */
.connect-button,
.confirm-start-btn,
.pay-button,
.verify-button,
.continue-button {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
  color: var(--color-text-light);
  border: none;
  padding: 14px var(--radius-xl);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-cubic);
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
  text-transform: none;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(100,181,246,0.3), var(--inset-shadow-mid);
  text-decoration: none;
  flex: 1;
  justify-content: center;
  max-width: 200px;
}
.connect-button::before,
.confirm-start-btn::before,
.pay-button::before,
.verify-button::before,
.continue-button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
.connect-button:hover::before,
.confirm-start-btn:hover::before,
.pay-button:hover::before,
.verify-button:hover::before,
.continue-button:hover::before {
  left: 100%;
}
.connect-button:hover,
.confirm-start-btn:hover,
.pay-button:hover,
.verify-button:hover,
.continue-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(100,181,246,0.4), inset 0 2px 0 rgba(255,255,255,0.3) inset;
  color: var(--color-text-light);
  text-decoration: none;
}
.connect-button:active,
.confirm-start-btn:active,
.pay-button:active,
.verify-button:active,
.continue-button:active {
  transform: translateY(0) scale(1);
}
.connect-button:disabled,
.confirm-start-btn:disabled,
.pay-button:disabled,
.verify-button:disabled,
.continue-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 4px 20px rgba(100,181,246,0.3) !important;
}

/* Secondary modal buttons */
.dismiss-btn,
.confirm-cancel-btn,
.cancel-btn,
.back-button {
  background: rgba(90,108,125,0.1);
  color: var(--color-text-muted);
  border: 1px solid rgba(90,108,125,0.3);
  padding: 14px var(--radius-xl);
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-std);
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
}
.dismiss-btn:hover,
.confirm-cancel-btn:hover,
.cancel-btn:hover,
.back-button:hover {
  background: rgba(90,108,125,0.15);
  color: var(--color-text-body);
  border-color: rgba(90,108,125,0.5);
  transform: translateY(-1px);
}
.dismiss-btn:active,
.confirm-cancel-btn:active,
.cancel-btn:active,
.back-button:active {
  transform: translateY(0);
}

/* Delete button in modal */
.delete-btn {
  background: var(--accent-danger-alpha-low);
  color: var(--accent-danger);
  border: 1px solid var(--accent-danger-alpha-border);
  padding: var(--radius-md) var(--radius-xl);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-std);
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
}
.delete-btn:hover {
  background: var(--accent-danger);
  color: var(--color-text-light);
  transform: translateY(-1px);
}

/* Connection benefits badges */
.connection-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: var(--radius-sm);
  justify-content: center;
  margin: 20px 0;
}
.connection-benefits span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--radius-sm);
  background: var(--accent-success-alpha-low);
  border: 1px solid var(--accent-success-alpha-border);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--accent-success-dark);
  font-weight: 500;
}


























/* ===========================================================
   PAYMENT MODAL CONTENT (XAVE)
   =========================================================== */
/* Modal header for XAVE */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--radius-xl) 32px var(--radius-lg);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  background: linear-gradient(90deg, var(--accent-premium) 0%, #FFA500 50%, #FF8C00 100%);
  margin: 0;
  border-radius: 20px 20px 0 0;
}
.modal-close {
  background: rgba(0,0,0,0.1);
  border: none;
  border-radius: var(--radius-round);
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--color-text-dark-primary);
  transition: var(--transition-fast);
}
.modal-close:hover {
  background: rgba(0,0,0,0.2);
  transform: scale(1.1);
}
.modal-content {
  padding: var(--radius-xl) 32px;
}
.modal-step {
  animation: stepFadeIn 0.3s ease-out;
}
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

 .modal-content { 
    background: #e6e6e6;
  }

/* Feature Explanation, Payment Details, Safety Info, etc. */
.feature-explanation,
.payment-details,
.safety-info,
.technical-specs,
.verification-details,
.success-details,
.next-steps,
.error-reasons {
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: var(--radius-xl);
}
.feature-explanation {
  background: linear-gradient(135deg, #e8f4fd 0%, #f0f9ff 100%);
  border: 1px solid #b3d9f7;
}
.feature-explanation h4,
.safety-info h4,
.technical-specs h4,
.next-steps h4 {
  margin: 0 0 var(--radius-lg) 0;
  font-size: 1.1rem;
}
.feature-explanation h4,
.technical-specs h4 {
  color: #1e40af;
}
.feature-explanation ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.feature-explanation li {
  margin-bottom: var(--radius-sm);
  padding-left: 0;
  color: #1e40af;
  font-size: 0.95rem;
  line-height: 1.4;
}

.payment-details {
  background: var(--accent-premium-alpha-low);
  border: 2px solid rgba(255,215,0,0.3);
}
.payment-details h4 {
  color: var(--accent-premium-dark);
}
.payment-box {
  display: flex;
  flex-direction: column;
  gap: var(--radius-lg);
}
.payment-amount {
  display: flex;
  align-items: baseline;
  gap: var(--radius-sm);
  justify-content: center;
  padding: var(--radius-lg);
  background: rgba(255,255,255,0.6);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-premium-alpha-border);
}
.currency {
  font-size: 1.5rem;
  color: var(--accent-premium-dark);
  font-weight: bold;
}
.amount {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-text-dark-primary);
}
.usd-equivalent {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
}
.payment-address label {
  display: block;
  margin-bottom: var(--radius-sm);
  font-weight: 600;
  color: var(--accent-premium-dark);
}
.address-display {
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
  background: rgba(255,255,255,0.8);
  padding: var(--radius-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-premium-alpha-border);
}
.address-display span {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-text-dark-primary);
  word-break: break-all;
}

.safety-info {
  background: var(--accent-success-alpha-low);
  border: 1px solid var(--accent-success-alpha-border);
}
.safety-info h4,
.next-steps h4 {
  color: var(--accent-success-dark);
}
.safety-points {
  display: grid;
  gap: var(--radius-sm);
}
.safety-point {
  display: block;
  color: var(--accent-success-dark);
  font-size: 0.9rem;
  font-weight: 500;
}

.technical-specs {
  background: var(--accent-blue-alpha-low);
  border: 1px solid var(--accent-blue-alpha-border);
}
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--radius-md);
}
.spec-item {
  background: rgba(255,255,255,0.6);
  padding: var(--radius-md);
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent-blue-alpha-low);
  font-size: 0.9rem;
}
.spec-item strong { color: #1565c0; }

/* Verification, Success, Error Sections */
.verification-status,
.success-status,
.error-status {
  text-align: center;
  margin-bottom: var(--radius-xl);
}
.status-icon {
  font-size: 3rem;
  margin-bottom: var(--radius-lg);
}
.status-icon.success { color: var(--accent-success); }
.status-icon.error   { color: var(--accent-danger); }

.verification-details,
.success-details {
  background: var(--bg-glass-light-input);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: var(--radius-xl);
}
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--radius-sm) 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  font-size: 0.9rem;
}
.detail-row:last-child { border-bottom: none; }
.detail-row span:first-child { font-weight: 600; color: var(--color-text-muted); }
.detail-row span:last-child { font-family: var(--font-mono); color: var(--color-text-dark-primary); }

.verification-progress {
  margin: 20px 0;
}
.verification-progress .progress-bar {
  background: rgba(0,0,0,0.1);
  border-radius: 10px;
  height: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--radius-sm);
}
.progress-fill {
  background: linear-gradient(90deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width var(--transition-std);
  animation: progressPulse 2s ease-in-out infinite;
}
.progress-text {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin: 0;
}

.next-steps {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border: 1px solid #bbf7d0;
  margin-top: var(--radius-lg);
}
.next-steps ul {
  margin: 0;
  padding-left: 20px;
  color: var(--accent-success-dark);
}
.next-steps li {
  margin-bottom: var(--radius-sm);
  line-height: 1.4;
}

.error-reasons {
  background: var(--accent-danger-alpha-low);
  border: 1px solid var(--accent-danger-alpha-border);
  margin: var(--radius-lg) 0;
}
.error-reasons ul {
  margin: 0;
  padding-left: 20px;
  color: #dc2626;
}
.error-reasons li {
  margin-bottom: var(--radius-sm);
  line-height: 1.4;
}
.error-actions {
  text-align: center;
  margin-top: var(--radius-lg);
}
.error-actions p {
  margin: 0;
  color: var(--color-text-muted);
  font-style: italic;
}































/* ===========================================================
   DASHBOARD STYLES
   =========================================================== */
.dashboard-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  animation: fadeInUp 0.6s ease-out;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: var(--radius-xl) 32px;
  background: linear-gradient(135deg, rgba(138,43,226,0.1) 0%, rgba(75,0,130,0.05) 100%);
  border-radius: 20px;
  border: 1px solid rgba(138,43,226,0.2);
}
.dashboard-title-section h1 {
  margin: 0 0 var(--radius-sm) 0;
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent-super) 0%, var(--accent-super-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: var(--radius-md);
}
.dashboard-subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}
/* Reuse .back-button */

/* Dashboard Stats */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--bg-glass-light-fieldset);
  border: 1px solid rgba(225,232,237,0.8);
  border-radius: var(--radius-lg);
  padding: var(--radius-xl);
  text-align: center;
  transition: var(--transition-std);
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-dark-primary);
  margin-bottom: var(--radius-sm);
}
.stat-label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Dashboard Controls */
.dashboard-controls {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.search-box {
  flex: 1;
  position: relative;
  min-width: 250px;
}
.search-box i {
  position: absolute;
  left: var(--radius-lg);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
}
.search-box input {
  width: 100%;
  padding: var(--radius-md) var(--radius-lg) var(--radius-md) 44px;
  border: 1px solid rgba(225,232,237,0.8);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  transition: var(--transition-fast);
  background: rgba(255,255,255,0.9);
}
.search-box input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px var(--accent-blue-alpha-low);
}
.sort-controls {
  display: flex;
  align-items: center;
  gap: var(--radius-md);
}
.sort-controls label {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 500;
}
.sort-controls select {
  padding: 10px var(--radius-lg);
  border: 1px solid rgba(225,232,237,0.8);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
}

/* Saved Personas Grid */
.saved-personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--radius-xl);
  margin-bottom: 40px;
}
.saved-persona-card {
  background: var(--bg-glass-light-fieldset);
  border: 2px solid rgba(138,43,226,0.2);
  border-radius: var(--radius-lg);
  padding: var(--radius-xl);
  transition: var(--transition-std);
  position: relative;
  overflow: hidden;
}
.saved-persona-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-super) 0%, var(--accent-super-dark) 100%);
}
.saved-persona-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(138,43,226,0.2);
  border-color: rgba(138,43,226,0.4);
}

/* Persona Card Header */
.persona-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--radius-lg);
}
.persona-card-header h3 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-text-dark-primary);
  flex: 1;
  word-wrap: break-word;
}
.persona-actions {
  display: flex;
  gap: var(--radius-sm);
  margin-left: var(--radius-md);
}
.action-btn {
  background: var(--accent-blue-alpha-low);
  border: 1px solid var(--accent-blue-alpha-border);
  color: var(--accent-blue);
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-btn:hover {
  background: rgba(100,181,246,0.2);
  transform: scale(1.05);
}
.action-btn.delete-btn {
  background: var(--accent-danger-alpha-low);
  border-color: var(--accent-danger-alpha-border);
  color: var(--accent-danger);
}
.action-btn.delete-btn:hover {
  background: rgba(239,68,68,0.2);
}

/* Persona Preview & Meta */
.persona-preview {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--radius-lg);
  height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.persona-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--radius-lg);
  border-top: 1px solid rgba(225,232,237,0.8);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.persona-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.persona-value {
  font-weight: 600;
  color: var(--accent-premium);
}

/* Dashboard Loading & Empty States */
.dashboard-loading {
  text-align: center;
  padding: 60px 20px;
  color: var(--color-text-muted);
}
.dashboard-empty {
  text-align: center;
  padding: 80px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--radius-lg);
}
.empty-icon {
  font-size: 4rem;
  margin-bottom: var(--radius-lg);
  opacity: 0.5;
}
.dashboard-empty h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-text-dark-primary);
}
.dashboard-empty p {
  margin: 0 0 var(--radius-xl) 0;
  color: var(--color-text-muted);
  max-width: 400px;
}
.create-first-btn {
  background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-blue-dark) 100%);
  color: var(--color-text-light);
  border: none;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-std);
  display: flex;
  align-items: center;
  gap: var(--radius-sm);
}
.create-first-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(100,181,246,0.4);
}
































/* ===========================================================
   UTILITY & ACCESSIBILITY
   =========================================================== */
/* Reduced motion overrides */
@media (prefers-reduced-motion: reduce) {
  #chat,
  .msg,
  .typing-indicator,
  .chat-input-container,
  #chat-send,
  .xave-persona-button {
    animation: none !important;
    transition: none !important;
  }
  .msg-bubble:hover,
  #chat-send:hover,
  .xave-persona-button:hover {
    transform: none !important;
  }
}

/* High contrast overrides */
@media (prefers-contrast: high) {
  .msg.user .msg-bubble {
    background: #000000;
    color: #ffffff;
  }
  .msg.assistant .msg-bubble {
    background: #ffffff;
    color: #000000;
    border: 2px solid #000000;
  }
}

/* Focus states */
#chat-input:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
#chat-send:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
#reset-btn:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}
.xave-persona-button:focus {
  outline: 2px solid var(--accent-premium);
  outline-offset: 2px;
}

























/* ===========================================================
   CONNECTED PANEL ADJUSTMENTS FOR MOBILE (Bottom Inclusion)
   =========================================================== */
@media (max-width: 768px) {
  .connected-panel {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100%;
    max-width: none;
    min-width: auto;
    margin: 20px auto;
    padding: 15px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transform: none !important;
    animation: none !important;
  }
  .connected-panel .wallet-header {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 15px 20px 12px;
  }
  .connected-panel .tier-badge {
    align-self: auto;
  }
  .connected-panel .wallet-address-section {
    flex-direction: row;
    align-items: center;
  }
  .connected-panel .wallet-address {
    flex: 1;
  }
  .connected-panel .copy-address-btn {
    align-self: auto;
    margin-top: 0;
  }
  .connected-panel .balance-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  .connected-panel .ai-operations-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
}





/* ===========================================================
   RESPONSIVE DESIGN
   =========================================================== */
/* Common adjustments for smaller screens */
@media (max-width: 1200px) {
  .setup-content-wrapper {
    padding: 40px 24px 60px;
    gap: 32px;
  }
  .form-card {
    padding: 32px;
  }
  #personas-sidebar {
    padding: 24px;
  }
 
  .security-content {
    padding: 20px 24px;
  }
  .dashboard-container {
    padding: 0 15px;
  }
}

/* Tablet and Medium Screens (up to 1024px) */
@media (max-width: 1024px) {
  .hero-header {
    min-height: 350px;
  }
 
  .main-title {
    font-size: 2.8rem;
  }
  .title-highlight {
    font-size: 3rem;
  }
  .subtitle {
    font-size: 1rem;
  }
  .tech-indicators {
    gap: 20px;
  }

  .setup-content-wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 30px 15px 50px;
  }
  #personas-sidebar {
    position: relative;
    top: 0;
    max-height: none;
    margin-top: 30px;
  }
  .persona-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
 

  .security-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .security-icon {
    margin: 0 auto 15px;
  }
  .security-message {
    gap: 15px;
  }
  .security-benefits {
    justify-content: center; 
  } 
  #chat {
    margin: 30px auto;
    height: 65vh;
    max-height: 550px;
  }
  .msg {
    max-width: 85%;
  }

  .dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
  }
  .stat-card {
    padding: 20px;
  }
  .stat-value {
    font-size: 1.8rem;
  }
  .saved-personas-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
  }
  .dashboard-controls {
    flex-direction: column;
    gap: 15px;
  }

  .connected-panel {
    min-width: 300px; 
    top: 15px !important;
    right: 15px !important;
  }

  .wallet-header {
    padding: 15px 20px 12px;
  }
  .wallet-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
  .balance-grid {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  .balance-card {
    padding: 8px 16px;
    min-width: 120px;
  }
  .balance-value {
    font-size: 1.2rem;
  }

  .connection-required-modal,
  .persona-confirm-modal,
  .delete-confirm-modal,
  .xave-persona-modal,
  .auth-content {
    padding: 24px;
    max-width: 90vw;
  }
  .modal-content {
    padding: 20px 24px;
  }
  .modal-actions {
    padding: 0 24px 24px;
  }
}

/* Mobile Phones (up to 1567px) */
@media (max-width: 1890px) {
  body {
    font-size: 15px;
  }
  #main-app {
    margin-top: 20px;
  }
  .hero-header {
    min-height: auto;
    padding-bottom: 30px;
  }
 
  .main-title {
    font-size: 2rem;
  }
  .title-highlight {
    font-size: 2.2rem;
  }
  .title-line {
    font-size: 0.85rem;
    padding: 8px 15px;
  }
  .brand-badge {
    padding: 6px 12px;
    margin-bottom: 20px;
  }
  .subtitle {
    font-size: 0.9rem;
    margin-bottom: 24px;
  }
  .tech-indicators {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }

  .setup-content-wrapper {
    padding: 20px 10px 40px;
  }
  .form-card {
    padding: 20px;
  }
  fieldset {
    padding: 20px;
  }
  legend {
    font-size: 1.1rem;
    padding: 6px 15px;
  }
  input, textarea, .smart-input-wrapper textarea {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
  .smart-input-wrapper textarea {
    min-height: 150px;
    padding: 15px;
  }
  button {
    padding: 12px 25px;
    font-size: 0.85rem;
  }
  #create-btn {
    max-width: 100%;
  }

  #personas-sidebar {
    padding: 20px;
  }
  .persona-grid { gap: 12px; }
  .persona-card img { height: 70px; }
  .persona-card .persona-info {
    font-size: 0.75rem;
    padding: 8px;
  }
  #preset-personas h2 {
    font-size: 1.2rem;
  }
  #preset-personas h3 {
    font-size: 1rem;
    padding: 10px 15px;
  }

 

  .floating-helper {
    width: 48px; height: 48px;
    bottom: 15px; right: 15px;
  }
  .floating-helper i {
    font-size: 1.1rem;
  }

  #chat {
    margin: 20px auto;
    height: auto;
    min-height: 70vh;
    max-height: none;
    border-radius: 10px;
  }
  #messages {
    padding: 15px;
  }
  .msg {
    padding: 10px 15px;
    font-size: 0.9rem;
    max-width: 90%;
  }
  #chat-form {
    padding: 15px;
    flex-direction: column;
    gap: 10px;
  }
  #chat-input {
    font-size: 0.9rem;
    padding: 10px 15px;
  }
  #chat-send {
    font-size: 0.8rem;
    padding: 10px 15px;
  }
  .chat-header {
    flex-direction: column;
    gap: 10px;
    padding: 10px;
  }
  #reset-btn {
    align-self: stretch;
    text-align: center;
  }
  .xave-persona-button {
    width: 100%;
    max-width: 280px;
    margin: 10px auto 10px auto;
  }

  
  .connect-btn-small {
    padding: 12px 20px;
    font-size: 0.85rem;
    width: 100%;
    margin-bottom: 10px;
  }
  .dismiss-btn {
    width: 36px; height: 36px;
    font-size: 0.9rem;
    position: absolute;
    top: 10px; right: 10px;
  }
  
  

  /* Connected Panel Adjustments */
  .connected-panel {
     
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100%;
    max-width: 1440px; 
    min-width: auto;
    margin: 20px auto;
    padding: 15px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transform: none !important;
    animation: none !important;
  }
  .connected-panel .wallet-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px 8px;
  }
  .tier-badge {
    align-self: flex-start;
  }
  .wallet-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
  .balance-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .balance-card {
    padding: 8px 16px;
  }
  .balance-value {
    font-size: 1.2rem;
  }
  .ai-operations-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .wallet-header {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px 8px;
  }
  .tier-badge {
    align-self: flex-start;
  }
  .wallet-info {
    padding: 10px 12px;
  }
  .wallet-address-section {
    flex-direction: column;
    align-items: stretch;
  }
  .copy-address-btn {
    align-self: center;
    margin-top: 5px;
  }
  .balance-grid {
    grid-template-columns: 1fr;
  }
  .ai-operations-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .dashboard-container {
    margin-top: 20px;
    padding: 0 10px;
  }
  .dashboard-header {
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    text-align: center;
  }
  .dashboard-title-section h1 {
    font-size: 1.6rem;
    justify-content: center;
  }
  .dashboard-stats {
    grid-template-columns: 1fr;
  }
  .saved-personas-grid {
    grid-template-columns: 1fr;
  }
  .saved-persona-card {
    padding: 15px;
  }
  .saved-persona-card .card-main-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .saved-persona-card .persona-avatar-wrapper {
    margin-right: 0;
    margin-bottom: 10px;
  }
  .saved-persona-card .persona-info-and-actions {
    align-items: center;
  }
  .saved-persona-card .generate-avatar-btn {
    align-self: center;
  }
  .persona-card-header {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .persona-actions {
    margin-left: 0;
  }

  .connection-required-modal,
  .persona-confirm-modal,
  .delete-confirm-modal,
  .xave-persona-modal,
  .auth-content {
    padding: 20px;
    max-width: 95vw;
  }
  .modal-header {
    padding: 15px 20px;
  }
  .modal-header h3 {
    font-size: 1.3rem;
  }
  .modal-content {
    padding: 15px 20px;
  }
  .modal-actions {
    flex-direction: column;
    padding: 0 20px 20px;
  }
  .connect-button,
  .confirm-start-btn,
  .pay-button,
  .verify-button,
  .continue-button,
  .dismiss-btn,
  .confirm-cancel-btn,
  .cancel-btn,
  .back-button,
  .delete-btn {
    width: auto;
    padding: 12px;
    position: relative;
  }
  .payment-amount {
    flex-direction: column;
    gap: 5px;
  }
  .currency { font-size: 1.3rem; }
  .amount   { font-size: 1.8rem; }
  .specs-grid {
    grid-template-columns: 1fr;
  }
}

/* Very Small Mobile Screens (up to 400px) */
@media (max-width: 400px) {
  body {
    font-size: 14px;
  }
  .main-title {
    font-size: 1.8rem;
  }
  .title-highlight {
    font-size: 2rem;
  }
  .title-line {
    font-size: 0.8rem;
    padding: 6px 10px;
  } 
  fieldset {
    padding: 15px;
  }
  legend {
    font-size: 1rem;
  }
  .form-card {
    padding: 15px;
  }
  .tier-rewards {
    padding: 10px;
  }
  .tier-info {
    padding: 10px;
  }
  .tier-badge-banner {
    font-size: 0.75rem;
  }
  .tier-details {
    font-size: 0.7rem;
  }
  .connect-btn-small {
    font-size: 0.8rem;
  }
  .connected-panel {
    width: auto;
    left: 10px !important;
    max-width: calc(100vw - 20px);
  }
  .wallet-address {
    font-size: 12px;
  }
  .balance-value {
    font-size: 1.3rem;
  }
}

/* ===========================================================
   MODERN SAVE BUTTON (XAVE)
   =========================================================== */
.xave-persona-button {
  background: linear-gradient(135deg,
    var(--accent-premium) 0%,
    #FFA500 50%,
    #FF8C00 100%);
  color: var(--color-text-dark-primary);
  border: 2px solid rgba(255, 215, 0, 0.3);
  padding: 12px 24px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow:
    0 8px 32px rgba(255, 215, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  animation: premiumPulse 4s ease-in-out infinite;
}
@keyframes premiumPulse {
  0%, 100% {
    box-shadow:
      0 8px 32px rgba(255, 215, 0, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      0 12px 40px rgba(255, 215, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
}
.xave-persona-button::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent);
  transition: left 0.6s;
}
.xave-persona-button:hover::before {
  left: 100%;
}
.xave-persona-button:hover {
  transform: translateY(-3px) scale(1.02);
  border-color: rgba(255, 215, 0, 0.5);
  box-shadow:
    0 16px 48px rgba(255, 215, 0, 0.3),
    inset 0 2px 0 rgba(255, 255, 255, 0.4) inset;
}
.xave-persona-button:active {
  transform: translateY(0) scale(1);
}
.xave-persona-button i {
  font-size: 1rem;
  margin-bottom: 2px;
}
.xave-persona-button span {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
}
.xave-persona-button small {
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
  line-height: 1;
  color: #8B4513;
}







/* ===========================================================
   DASHBOARD-SPECIFIC ADJUSTMENTS FOR MOBILE
   =========================================================== */
@media (max-width: 768px) {
  #chat {
    margin: 20px auto;
    max-width: 100%;
    width: calc(100% - 20px);
    height: calc(100vh - 60px);
    max-height: none;
    border-radius: 20px;
  }
  .chat-header {
    padding: 16px 20px;
  }
  .persona-avatar {
    width: 40px; height: 40px;
  }
  .persona-details h3 {
    font-size: 1rem;
  }
  #reset-btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }
  #messages {
    padding: 20px 16px;
  }
  .msg-content {
    max-width: 85%;
  }
  .msg-bubble {
    padding: 14px 18px;
    font-size: 0.9rem;
  }
  .msg-avatar {
    width: 32px; height: 32px;
    font-size: 0.8rem;
  }
  #chat-form {
    padding: 20px 16px 24px;
  }
  .chat-input-container {
    border-radius: 20px;
  }
  #chat-input {
    padding: 14px 16px;
    font-size: 16px;
  }
  #chat-send {
    width: 44px; height: 44px;
    font-size: 1rem;
  }
  .xave-persona-button {
    padding: 10px 20px;
    margin: 8px auto;
    max-width: 200px;
  }
}

/* Mobile Phones (up to 480px) */
@media (max-width: 480px) {
  
  #chat {
    width: calc(100% - 16px);
    height: calc(100vh - 40px);
    border-radius: 16px;
  }
  .chat-header {
    padding: 12px 16px;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .chat-persona-info {
    gap: 12px;
  }
  #reset-btn {
    align-self: stretch;
    justify-content: center;
  }
  #messages {
    padding: 16px 12px;
  }
  .msg {
    margin-bottom: 16px;
    gap: 8px;
  }
  .msg-content {
    max-width: 90%;
  }
  .msg-bubble {
    padding: 12px 16px;
    border-radius: 16px;
  }
  .msg.user .msg-bubble {
    border-bottom-right-radius: 4px;
  }
  .msg.assistant .msg-bubble {
    border-bottom-left-radius: 4px;
  }
  #chat-form {
    padding: 16px 12px 20px;
  }
  .chat-input-container {
    gap: 8px;
    padding: 3px;
  }
  #chat-input {
    padding: 12px 16px;
  }
  #chat-send {
    width: 40px; height: 40px;
    font-size: 0.9rem;
  }
  .xave-persona-button {
    padding: 10px 20px;
    margin: 8px auto;
    max-width: 200px;
  }
}

/* Loading and Error Message Styles */
.msg.loading .msg-bubble {
  background: linear-gradient(135deg,
    rgba(100, 181, 246, 0.1) 0%,
    rgba(64, 181, 246, 0.05) 100%);
  color: var(--color-text-muted);
  font-style: italic;
  animation: loadingPulse 2s ease-in-out infinite;
}
.msg.error .msg-bubble {
  background: linear-gradient(135deg,
    rgba(239, 68, 68, 0.1) 0%,
    rgba(220, 38, 38, 0.05) 100%);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--accent-danger);
}

/* ===========================================================
   END OF STYLES
   =========================================================== */
/* Gallery Styles */
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-xl);
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
}

.gallery-controls {
  display: flex;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
}

.filter-controls {
  display: flex;
  gap: var(--spacing-md);
}

.gallery-personas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.gallery-persona-card {
  background: var(--bg-glass-light);
  border: 1px solid var(--border-light-alpha);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: var(--transition-smooth);
}

.gallery-persona-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.gallery-persona-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto var(--spacing-md);
  overflow: hidden;
  background: var(--accent-primary-alpha-low);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.default-avatar {
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent-primary);
}

.gallery-persona-description {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
}

.gallery-persona-meta {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  flex-wrap: wrap;
  font-size: 0.8rem;
}

.category-tag {
  background: var(--accent-primary-alpha-low);
  color: var(--accent-primary);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: 500;
}

.trial-count, .creator-info {
  color: var(--color-text-secondary);
}

.try-persona-btn {
  width: 100%;
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--spacing-sm);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.try-persona-btn:hover {
  background: var(--accent-primary-dark);
  transform: translateY(-1px);
}

.gallery-settings {
  background: var(--accent-info-alpha-low);
  border: 1px solid var(--accent-info-alpha-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.toggle-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  font-weight: 500;
}

.toggle-slider {
  width: 40px;
  height: 20px;
  background: #ccc;
  border-radius: 20px;
  position: relative;
  transition: var(--transition-smooth);
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: var(--transition-smooth);
}

input[type="checkbox"]:checked + .toggle-slider {
  background: var(--accent-primary);
}

input[type="checkbox"]:checked + .toggle-slider::before {
  transform: translateX(20px);
}

input[type="checkbox"] {
  display: none;
}

.load-more-btn {
  display: block;
  margin: 0 auto;
  background: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--spacing-md) var(--spacing-xl);
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.load-more-btn:hover {
  background: var(--accent-primary-dark);
}

/* Public Settings Modal */
.public-settings-modal {
  max-width: 500px;
  width: 90%;
}

.persona-info-display {
  padding: var(--spacing-md);
  background: var(--bg-glass-light-primary);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.persona-info-display h4 {
  margin: 0;
  color: var(--color-text-dark-primary);
}

.gallery-toggle-section {
  margin-bottom: var(--spacing-lg);
}

.toggle-text {
  margin-left: var(--spacing-sm);
  font-weight: 600;
}

.toggle-description {
  margin-top: var(--spacing-sm);
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

#gallery-details-section {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.public-toggle-btn {
  background: var(--accent-info-alpha-low);
  border-color: var(--accent-info-alpha-border);
  color: var(--accent-info);
}

.public-toggle-btn:hover {
  background: rgba(33, 150, 243, 0.2);
}

/* Character count */
.char-count {
  display: block;
  text-align: right;
  color: var(--color-text-secondary);
  font-size: 0.8rem;
  margin-top: 4px;
}
/* Gallery Settings Modal - Following Existing Pattern */
.gallery-settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: overlayFadeIn 0.3s ease-out;
  padding: 20px;
}

.gallery-settings-modal {
  background: linear-gradient(135deg, var(--bg-glass-light-fieldset) 0%, rgba(248,249,250,0.9) 100%);
  backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--border-light-alpha);
  border-radius: 20px;
  padding: 32px;
  max-width: 500px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 8px 32px rgba(0,0,0,0.2), var(--inset-shadow-mid);
  position: relative;
  overflow: hidden;
  animation: modalSlideIn 0.4s var(--transition-cubic);
}

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

/* Add these to your CSS file */
.tier-notification,
.account-switch-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: rgba(40, 167, 69, 0.9);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
}

.switch-account-button {
    background: rgba(138, 43, 226, 0.1);
    border: 1px solid rgba(138, 43, 226, 0.3);
    color: #8A2BE2;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.switch-account-button:hover {
    background: rgba(138, 43, 226, 0.2);
}

.switch-account-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.account-switch-notification, .tier-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #4CAF50;
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    z-index: 10000;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
/* Bio Links Full Page View Styles - Enhanced Contrast */
.biolink-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl);
    min-height: 100vh;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
}

.biolink-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid rgba(138, 43, 226, 0.3);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(10px);
}

.biolink-title-section h1 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 50%, #BA55D3 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.biolink-title-section h1 i {
    color: #8A2BE2;
    filter: drop-shadow(0 0 8px rgba(138, 43, 226, 0.5));
    -webkit-text-fill-color: #8A2BE2;
}

.biolink-subtitle {
    margin: 0;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: var(--font-weight-normal);
}

.back-button {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-standard);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.back-button:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2) 0%, rgba(147, 112, 219, 0.2) 100%);
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);
}

.biolink-content {
    display: grid;
    gap: var(--spacing-xl);
    max-width: 800px;
}

/* Status Section - Enhanced */
.biolink-status {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.status-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.status-label {
    font-size: 0.9rem;
    color: rgba(138, 43, 226, 0.8);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.biolink-url-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    word-break: break-all;
    backdrop-filter: blur(5px);
    color: rgba(255, 255, 255, 0.9);
}

.copy-btn {
    background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
    border: none;
    color: white;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-standard);
    cursor: pointer;
    transition: var(--transition-smooth);
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.copy-btn:hover {
    background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.5);
}

/* Links Manager Section - Enhanced */
.links-manager {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.add-link-section,
.existing-links {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.add-link-section h4,
.existing-links h4, .display-name-section h4  {
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.link-input-group {
    display: grid;
    gap: var(--spacing-sm);
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto auto;
    align-items: end;
}

/* Make textarea span all columns */
.link-input-group textarea {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    font-family: inherit;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    resize: vertical;
    min-height: 60px;
}

.link-input-group textarea:focus {
    outline: none;
    border-color: #8A2BE2;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 0 0 3px rgba(138, 43, 226, 0.2),
        0 4px 15px rgba(138, 43, 226, 0.3);
}

.link-input-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.link-input-group input {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.link-input-group input:focus {
    outline: none;
    border-color: #8A2BE2;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 0 0 3px rgba(138, 43, 226, 0.2),
        0 4px 15px rgba(138, 43, 226, 0.3);
}

.link-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Enhanced Button Styles */
.primary-btn,
.secondary-btn {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-standard);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-smooth);
    border: none;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: center;
    white-space: nowrap;
}

.primary-btn {
    background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
    border: 2px solid rgba(138, 43, 226, 0.5);
}

.primary-btn:hover {
    background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
    border-color: rgba(186, 85, 211, 0.7);
}

.secondary-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
}

.secondary-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.1) 100%);
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(138, 43, 226, 0.2);
}

/* Enhanced Links List */
.existing-links {
    min-height: 300px;
}

#links-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.no-links-message {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    padding: var(--spacing-xl);
    background: rgba(0, 0, 0, 0.3);
    border: 2px dashed rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(5px);
}

.link-item {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-standard);
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.link-item:hover {
    background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, rgba(147, 112, 219, 0.1) 100%);
    border-color: rgba(138, 43, 226, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.2);
}



.link-info {
    flex: 1;
    min-width: 0;
}

.link-title {
    font-weight: var(--font-weight-semibold);
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: var(--spacing-xs);
    word-break: break-word;
    font-size: 1rem;
}

.link-url { 
  color: #e272f2;
}

.link-description {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: var(--spacing-xs);
    line-height: 1.4;
    font-style: italic;
}
/* Edit Link Functionality */
.link-edit-form {
    display: flex; 
    gap: var(--spacing-sm); 


}

.link-edit-form .edit-title,
.link-edit-form .edit-url {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-standard);
    padding: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    transition: var(--transition-smooth);;
    margin-top: 0.5vw;
   width: 20vw;
}

.link-edit-form .edit-description {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-standard);
    padding: var(--spacing-sm);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.9rem;
    font-family: inherit;
    transition: var(--transition-smooth);
    resize: vertical;
    min-height: 50px;
  width: 20vw;
  margin-top: 0.5vw;
}

.link-edit-form .edit-title:focus,
.link-edit-form .edit-url:focus,
.link-edit-form .edit-description:focus {
    outline: none;
    border-color: #8A2BE2;
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 2px rgba(138, 43, 226, 0.2);
}

.edit-actions {
    display: flex;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
}

.save-edit-btn,
.cancel-edit-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-standard);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    border: none;
}

.save-edit-btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.save-edit-btn:hover {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

.cancel-edit-btn {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cancel-edit-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.edit-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--spacing-sm);
    border-radius: var(--radius-standard);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.8rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.edit-btn:hover {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}

.link-actions {
    display: flex;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.move-btn,
.remove-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--spacing-sm);
    border-radius: var(--radius-standard);
    cursor: pointer;
    transition: var(--transition-smooth);
    font-size: 0.8rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.move-btn:hover {
    background: rgba(138, 43, 226, 0.2);
    color: white;
    border-color: rgba(138, 43, 226, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.remove-btn:hover {
    background: rgba(220, 38, 38, 0.2);
    color: #ff6b6b;
    border-color: rgba(220, 38, 38, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

/* Enhanced Actions Section */
.biolink-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(15px);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .biolink-container {
        padding: var(--spacing-lg);
    }
    
    .biolink-header {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: flex-start;
    }
    
    .biolink-title-section h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .biolink-container {
        padding: var(--spacing-md);
    }
    
    .biolink-title-section h1 {
        font-size: 1.8rem;
    }
    
    .link-input-group {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .link-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .link-actions {
        align-self: flex-end;
    }
    
    .biolink-actions {
        flex-direction: column;
    }
    
    .biolink-url-display {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
}

@media (max-width: 480px) {
    .biolink-container {
        padding: var(--spacing-sm);
    }
    
    .biolink-title-section h1 {
        font-size: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .back-button {
        padding: var(--spacing-sm);
        font-size: 0.9rem;
    }
    
    .add-link-section,
    .existing-links,
    .biolink-status,
    .biolink-actions {
        padding: var(--spacing-md);
    }
}

/* View Transition Styles */
.view-transition {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.view-hidden {
    opacity: 0;
    transform: translateY(20px);
}

#biolink-view:not(.view-hidden) {
    opacity: 1;
    transform: translateY(0);
}

.display-name-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(15px);
    margin-bottom: var(--spacing-xl);
}

.display-name-section h4 {
color: white;
}

.display-name-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.display-name-input-group input {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: white;
    font-size: 1rem;
}

.display-name-input-group input:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

/* Add these styles to your existing CSS */
.category-group {
    margin-bottom: 24px;
}

.category-group-header {
    font-weight: 600;
    font-size: 1.1rem;
    color: #8A2BE2;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(138, 43, 226, 0.3);
}

.link-category-tag {
    display: inline-block;
    background: rgba(138, 43, 226, 0.2);
    color: #8A2BE2;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    margin-top: 8px;
    font-weight: 500;
}

.link-input-group input[type="text"]#link-category {
    border-left: 3px solid #8A2BE2;
}

.edit-category {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
}

/* Username Section Styling - Matches display-name-section */
.username-section {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(15px);
    margin-bottom: var(--spacing-xl);
}

.username-section h4 {
    color: white;
    margin: 0 0 var(--spacing-md) 0;
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
}

.username-input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.current-username {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.95rem;
}

.username-label {
    color: rgba(138, 43, 226, 0.8);
    font-weight: var(--font-weight-semibold);
}

#username-display {
    color: rgba(255, 255, 255, 0.9);
    font-weight: var(--font-weight-medium);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-standard);
    border: 1px solid rgba(138, 43, 226, 0.4);
}

.username-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.username-input-wrapper {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.username-input-wrapper:focus-within {
    border-color: rgba(138, 43, 226, 0.8);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.username-prefix {
    background: rgba(138, 43, 226, 0.2);
    color: rgba(138, 43, 226, 0.9);
    padding: var(--spacing-md);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border-right: 1px solid rgba(138, 43, 226, 0.3);
}

#username-input {
    background: transparent;
    border: none;
    color: white;
    padding: var(--spacing-md);
    font-size: 1rem;
    flex: 1;
    outline: none;
}

#username-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.username-btn {
    background: linear-gradient(135deg, #8A2BE2 0%, #9370DB 100%);
    color: white;
    border: 2px solid rgba(138, 43, 226, 0.5);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-standard);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    align-self: flex-start;
    box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}

.username-btn:hover {
    background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
    border-color: rgba(186, 85, 211, 0.7);
}

.username-help {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.4;
    margin-top: var(--spacing-xs);
}

/* Username availability states */
.username-input-wrapper.available {
    border-color: rgba(34, 197, 94, 0.6);
}

.username-input-wrapper.available:focus-within {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.username-input-wrapper.unavailable {
    border-color: rgba(220, 38, 38, 0.6);
}

.username-input-wrapper.unavailable:focus-within {
    border-color: rgba(220, 38, 38, 0.8);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .username-form {
        gap: var(--spacing-md);
    }
    
    .username-input-wrapper {
        flex-direction: column;
    }
    
    .username-prefix {
        border-right: none;
        border-bottom: 1px solid rgba(138, 43, 226, 0.3);
        text-align: center;
    }
    
    .username-btn {
        align-self: stretch;
    }
}

/* Bio textarea styling to match your theme */
.display-name-section textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: white;
    font-size: 1rem;
    width: 100%;
    margin-top: var(--spacing-sm);
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.display-name-section textarea:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.display-name-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.display-name-section small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    display: block;
}

/* Character counter styling */
#bio-char-count {
    color: rgba(138, 43, 226, 0.8);
    font-weight: var(--font-weight-semibold);
}

/* Character count warning colors */
.display-name-section small .char-warning {
    color: #ffa726;
}

.display-name-section small .char-danger {
    color: #ff6b6b;
}

/* Bio textarea styling to match your theme */
.display-name-section textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: white;
    font-size: 1rem;
    width: 100%;
    margin-top: var(--spacing-sm);
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.display-name-section textarea:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.display-name-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.display-name-section small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    display: block;
}

/* Character counter styling */
#bio-char-count {
    color: rgba(138, 43, 226, 0.8);
    font-weight: var(--font-weight-semibold);
}

/* Character count warning colors */
.display-name-section small .char-warning {
    color: #ffa726;
}

.display-name-section small .char-danger {
    color: #ff6b6b;
}

/* Bio textarea styling to match your theme */
.display-name-section textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: white;
    font-size: 1rem;
    width: 100%;
    margin-top: var(--spacing-sm);
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    min-height: 80px;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
}

.display-name-section textarea:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.display-name-section textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.display-name-section small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin-top: var(--spacing-xs);
    display: block;
}

/* Character counter styling */
#bio-char-count {
    color: rgba(138, 43, 226, 0.8);
    font-weight: var(--font-weight-semibold);
}

/* Character count warning colors */
.display-name-section small .char-warning {
    color: #ffa726;
}

.display-name-section small .char-danger {
    color: #ff6b6b;
}

/* Display name input styling */
.display-name-section input[type="text"]#display-name,
.profile-inputs input[type="text"] {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(138, 43, 226, 0.4);
    border-radius: var(--radius-standard);
    padding: var(--spacing-md);
    color: white;
    font-size: 1rem;
    width: 100%;
    font-family: inherit;
    transition: var(--transition-smooth);
    backdrop-filter: blur(10px);
    box-sizing: border-box;
}

.display-name-section input[type="text"]#display-name:focus,
.profile-inputs input[type="text"]:focus {
    outline: none;
    border-color: rgba(138, 43, 226, 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 3px rgba(138, 43, 226, 0.2);
}

.display-name-section input[type="text"]#display-name::placeholder,
.profile-inputs input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Container for profile inputs */
.profile-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}
/* Preserve line breaks in bio display */
.subtitle {
    white-space: pre-line;
}

/* If you want more specific targeting for bio pages */
.biolink-profile .subtitle {
    white-space: pre-line;
    word-wrap: break-word;
}

 .bio-page-body * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The :root variables have been moved to the .bio-page-body selector 
  to properly scope them without affecting the global :root.
*//*
=====================================================================
  TEMA: OSAKA NIGHT BLUES (GLASSMORPHISM 2025)
  Inspirado en una noche lluviosa en Osaka, con un toque de melancolía noir.
  Diseñado para ser elegante, moderno y fácilmente personalizable.
=====================================================================
*/

.bio-page-body {
    /* === COLOR PALETTE === */
    --primary-color: #667eea;
    --accent-color: #72d1fc;
    --link-accent-color: #f093fb;
    --link-accent-hover: #ffffff;
    --background-start: #667eea;
    --background-mid: #764ba2;
    --background-end: #f093fb;
    --text-color: #ffffff;
    --text-muted-color: rgba(255, 255, 255, 0.8);
    
    /* === GLASSMORPHISM === */
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-bg-hover: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.2);
    --shadow-color: rgba(102, 126, 234, 0.3);
    --glow-color: rgba(79, 172, 254, 0.6);
    
    /* === BACKDROP FILTERS === */
    --blur-sm: blur(8px);
    --blur-md: blur(12px);
    --blur-lg: blur(16px);
    
    /* === LAYOUT & SPACING === */
    --main-border-radius: 12px;
    --item-gap: 10px;
    --spacing-xs: 4px;
    --spacing-sm: 5px;
    --spacing-md: 6px;
    --spacing-lg: 14px;
    --spacing-xl: 22px;
    --spacing-2xl: 18px;
    
    /* === TYPOGRAPHY === */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* === TRANSITIONS === */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === ANIMATIONS === */
    --scale-hover: 1.02;
    --scale-press: 0.98;
    --translate-hover: -4px;

    /* === BASE STYLES === */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, var(--background-start) 0%, var(--background-mid) 50%, var(--background-end) 100%);
    background-attachment: fixed;
    color: var(--text-color);
    min-height: 100vh;
    padding: var(--spacing-lg);
    display: flex;
    align-items: top;
    justify-content: center;
    overflow-x: hidden;
    position: relative;
    margin: 0;
}

.bio-page-body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(79, 172, 254, 0.3) 0%, transparent 50%);
    animation: backgroundMove 20s ease-in-out infinite;
    z-index: -1;
}

@keyframes backgroundMove {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.bio-page-body .container {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
    position: relative;
    z-index: 1;
}

.bio-page-body .header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    animation: fadeInUp 0.8s ease-out;
}

.bio-page-body .avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-lg);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--link-accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--glass-border);
    box-shadow: 0 16px 48px var(--shadow-color);
    backdrop-filter: var(--blur-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.bio-page-body .avatar::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
    transition: all var(--transition-slow);
    opacity: 0;
}

.bio-page-body .avatar:hover {
    transform: scale(var(--scale-hover)) rotate(5deg);
    box-shadow: 0 20px 60px var(--shadow-color);
}

.bio-page-body .avatar:hover::before {
    animation: shimmer 1.5s ease-out;
    opacity: 1;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.bio-page-body .username {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bio-page-body .subtitle {
    font-size: var(--font-size-md);
    line-height: 1.6;
    max-width: 480px;
    margin: 1vw auto var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--text-color);
    white-space: pre-line;
    word-wrap: break-word;
    background: var(--glass-bg);
    border-radius: var(--main-border-radius);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
}

.bio-page-body .subtitle:hover {
    transform: translateY(var(--translate-hover));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    background: var(--glass-bg-hover);
}

.bio-page-body .verification-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    backdrop-filter: var(--blur-sm);
    font-weight: 600;
    margin-top: var(--spacing-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-normal);
  display: none;
}

.bio-page-body .verification-badge:hover {
    transform: scale(var(--scale-hover));
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.bio-page-body .verification-badge i {
    color: var(--text-color);
    filter: drop-shadow(0 0 8px var(--glow-color));
}

.bio-page-body .category-section {
    margin-bottom: var(--spacing-xl);
    animation: fadeInUp 0.8s ease-out;
}

.bio-page-body .category-section:nth-child(even) {
    animation-delay: 0.1s;
}

.bio-page-body .category-section:nth-child(odd) {
    animation-delay: 0.2s;
}

.bio-page-body .category-section:last-child {
    margin-bottom: 0;
}

.bio-page-body .category-header {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin:  3vw var(--spacing-md) 1vw;
    padding-left: 0;
    color: var(--text-color);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bio-page-body .category-header::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f07b';
    color: var(--accent-color);
    font-size: 0.9em;
    filter: drop-shadow(0 0 8px var(--glow-color));
}

.bio-page-body .category-links {
    display: grid;
    gap: 4px;
}

.bio-page-body .link-item {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: row; 
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--main-border-radius);
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-normal);
    position: relative;
    backdrop-filter: var(--blur-md);
    gap: var(--spacing-xs);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.bio-page-body .link-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transition: all var(--transition-slow);
}

.bio-page-body .link-item:hover {
    transform: translateY(var(--translate-hover)) scale(var(--scale-hover));
    box-shadow: 0 16px 48px var(--shadow-color);
    background: var(--glass-bg-hover);
    border-color: var(--accent-color);
}

.bio-page-body .link-item:hover::before {
    left: 100%;
}

.bio-page-body .link-item:active {
    transform: scale(var(--scale-press));
}

.bio-page-body .link-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: 0px;
    gap: var(--spacing-sm);
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.bio-page-body .link-title::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f35d';
    color: var(--accent-color);
    font-size: var(--font-size-md);
    transition: all var(--transition-normal);
}

.bio-page-body .link-item:hover .link-title::before {
    color: var(--link-accent-hover);
    text-shadow: 0 0 8px var(--glow-color);
    transform: scale(1.1);
}

.bio-page-body .link-url {
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--accent-color);
  display: inline-block;       /* make width constraints apply */
  max-width: 20ch;             /* roughly 20 “0” characters */
  white-space: nowrap;         /* prevent wrapping */
  overflow: hidden;            /* hide the overflow */
  text-overflow: ellipsis;     /* show “…” when truncated */
  transition: all var(--transition-normal);
  margin-bottom: var(--spacing-xs);
}

.bio-page-body .link-item:hover .link-url {
    color: var(--link-accent-hover);
}

.bio-page-body .link-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    color: var(--text-muted-color);
    background: rgba(255, 255, 255, 0.05);
    padding: var(--spacing-sm);
    width: 100%;
    border-radius: var(--spacing-xs);
    backdrop-filter: var(--blur-sm);
}

.bio-page-body .footer {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-lg);
    text-align: center;
    border-top: 1px solid var(--glass-border);
    color: var(--text-muted-color);
}

.bio-page-body .footer a {
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.bio-page-body .footer a:hover {
    color: var(--link-accent-hover);
    text-shadow: 0 0 8px var(--accent-color);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === RESPONSIVE DESIGN === */
@media (max-width: 768px) {
    .bio-page-body {
        padding: var(--spacing-md);
    }
    
    .bio-page-body .avatar {
        width: 100px;
        height: 100px;
        font-size: var(--font-size-2xl);
    }
    
    .bio-page-body .username {
        font-size: var(--font-size-2xl);
    }
    
    .bio-page-body .category-header {
        font-size: var(--font-size-lg);
    }
    
    .bio-page-body .link-item {
        padding: var(--spacing-md);
    }
}

@media (max-width: 360px) {
    .bio-page-body {
        padding: var(--spacing-sm);
    }
    
    .bio-page-body .link-item {
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .bio-page-body .username {
        font-size: 1.8rem;
    }
    
    .bio-page-body .category-header {
        font-size: 1.1rem;
    }
}

/* === THEME TOGGLE === */
.theme-toggle {
    position: fixed;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--glass-bg);
    backdrop-filter: var(--blur-md);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.theme-toggle:hover {
    transform: scale(var(--scale-hover));
    background: var(--glass-bg-hover);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* make link-info a 2-row grid */
.bio-page-body .link-info {
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--spacing-xs);   /* space between the two rows */
}

/* force title + URL into row 1 */
.bio-page-body .link-info > .link-title,
.bio-page-body .link-info > .link-url {
  grid-row: 1;
}

/* force description (and category-tag if present) into row 2 */
.bio-page-body .link-info > .link-description,
.bio-page-body .link-info > .link-category-tag {
  grid-row: 2;
}

/* remove the old margins, let the grid-gap do the spacing */
.bio-page-body .link-url,
.bio-page-body .link-description {
  margin: 0;
}
/* ─── make every link‐item a 2×2 grid ─── */
.bio-page-body .link-item {
  display: grid;
  grid-template-areas:
    "info actions"
    "description actions";
  column-gap: var(--spacing-lg);
  row-gap: var(--spacing-xs);
}

.bio-page-body .link-item > .link-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.bio-page-body .link-info > .link-description,
.bio-page-body .link-info > .link-category-tag {
  margin: 0;
}


/* Avatar Selection in Bio Link Manager */
.avatar-selection {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border: 2px solid rgba(138, 43, 226, 0.3);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    backdrop-filter: blur(15px);
    margin-bottom: var(--spacing-xl);
}

.avatar-selection h4 {
    color: white;
    margin: 0 0 var(--spacing-md) 0;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: var(--spacing-md);
    max-width: 600px;
}

.selectable-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
    border: 3px solid transparent;
    transition: all 0.3s ease;
    object-fit: cover;
}

.selectable-avatar:hover {
    transform: scale(1.1);
    border-color: rgba(138, 43, 226, 0.5);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.4);
}

.selectable-avatar.selected {
    border-color: #8A2BE2;
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.6);
}

/* Update the existing .bio-page-body .avatar rule to handle images */
.bio-page-body .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* Keep existing avatar styles but ensure image compatibility */
.bio-page-body .avatar {
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-lg);
    font-size: var(--font-size-3xl);
    font-weight: 700;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--link-accent-color));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--glass-border);
    box-shadow: 0 16px 48px var(--shadow-color);
    backdrop-filter: var(--blur-md);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

/* When avatar has an image, remove the gradient background */
.bio-page-body .avatar:has(img) {
    background: none;
}
.selectable-avatar.no-avatar {
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 2px dashed rgba(255,255,255,0.3);
  border-radius: 8px;
  cursor: pointer;
  font-size: 24px;
  color: rgba(255,255,255,0.5);
}

.selectable-avatar.no-avatar:hover {
  border-color: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

.selectable-avatar.no-avatar span {
  font-size: 14px;
  margin-top: 4px;
}