.dynamic-blur-overlay {
    background-color: #0b0014; /* Darker, slightly purplish base */
    /* Simplified to a single large radial gradient */
    background-image: radial-gradient(circle at center, 
        rgba(var(--electric-blue-blob-color-rgb), var(--blob-opacity)) 0%, 
        rgba(var(--fluorescent-pink-blob-color-rgb), var(--blob-opacity)) 70%, 
        rgba(var(--fluorescent-pink-blob-color-rgb), 0) 100%
    );
    background-size: 250% 250%; /* Large size for smooth position animation */
    background-repeat: no-repeat;
    /* Animate the position of this single large gradient */
    background-position: var(--bg-pos, 50% 50%); 
    /* filter: contrast(20); */ /* REMOVED high contrast */
    animation: 
        animateBackground 12s ease-in-out infinite alternate, /* Was animateBlob1, slower duration */
        /* animateBlob2, animateBlob3, animateBlob4 REMOVED */
        blurPulse 3s ease-in-out infinite alternate; /* Slightly adjusted blurPulse timing for feel */
    /* If we want to blur the content BEHIND the overlay, uncomment next line */
    /* backdrop-filter: blur(10px); */ 
}

/* Keyframes for individual blob positions using CSS Custom Properties */
/* Renamed animateBlob1 to animateBackground, adjusted for smoother background shift */
@keyframes animateBackground { /* Was animateBlob1 */
    0%   { --bg-pos: 40% 40%; }
    25%  { --bg-pos: 60% 70%; }
    50%  { --bg-pos: 70% 30%; }
    75%  { --bg-pos: 30% 60%; }
    100% { --bg-pos: 40% 40%; }
}

/* @keyframes animateBlob2, @keyframes animateBlob3, @keyframes animateBlob4 REMOVED */

/* Keep the existing blurPulse animation, maybe adjust timings or blur amount */
@keyframes blurPulse {
    0%, 100% {
        filter: blur(45px) brightness(1.1) saturate(1.6); /* Increased blur */
        opacity: 1;
    }
    50% {
        filter: blur(65px) brightness(1.3) saturate(2.0); /* Increased blur */
        opacity: 1;
    }
}

/* Ensure the modal dialog itself is not blurred by the overlay's filter if backdrop-filter is used */
/* This might need adjustment based on actual modal structure */
/* #custom-confirmation-modal > div > div { */
    /* filter: none !important; */
/* } */ 

/* --- Animated Gradient Border Properties (from CodePen example) --- */
@property --angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@keyframes spinAnimatedBorder {
  to {
    --angle: 1turn;
  }
}

/* --- Custom Confirmation Modal Styling --- */

.modal-styling {
  background-color: rgba(var(--modal-bg-rgb), var(--modal-bg-opacity)); 
  backdrop-filter: blur(18px); 
  -webkit-backdrop-filter: blur(18px); 
  color: var(--modal-text-color); 
  /* border: 1px solid rgba(var(--modal-border-color-rgb), var(--modal-border-opacity)); */ /* Original static border - replaced by animated border */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 

  /* Animated Gradient Border - adapted from CodePen */
  position: relative; /* For ::before positioning */
  isolation: isolate; /* For stacking context */
  border-radius: 1rem; /* Matches .modal-styling rounded-2xl in component. Ensure this is consistent. */
  border: var(--animated-border-width) solid transparent; /* Fallback/base for border */
}

.modal-styling::before {
  content: "";
  position: absolute;
  inset: calc(var(--animated-border-width) * -1); /* Creates the border effect */
  z-index: -1;
  border: inherit; /* Inherits width and style (transparent) */
  border-radius: inherit; /* Inherits from .modal-styling */
  background-image: conic-gradient(from var(--angle), 
    rgba(var(--shine-color-rgb), var(--shine-opacity-faint)) 0% 5%, 
    rgba(var(--shine-color-rgb), var(--shine-opacity-bright)) 10% 15%, 
    rgba(var(--shine-color-rgb), var(--shine-opacity-faint)) 20% 100%);
  background-origin: border-box;
  -webkit-mask:
    linear-gradient(black, black) content-box,
    linear-gradient(black, black);  
  mask:
    linear-gradient(black, black) content-box,
    linear-gradient(black, black);
  -webkit-mask-clip: content-box, border-box;  
  mask-clip: content-box, border-box;
  -webkit-mask-composite: xor;  
  mask-composite: exclude;
  animation: spinAnimatedBorder 3s linear infinite;
}

/* Fallback for browsers that don't support @property */
@supports not (background: paint(something)) {
  .modal-styling::before {
    background-image: conic-gradient(from 0turn, /* Static angle if --angle not supported */
        rgba(var(--shine-color-rgb), var(--shine-opacity-faint)) 0% 5%, 
        rgba(var(--shine-color-rgb), var(--shine-opacity-bright)) 10% 15%, 
        rgba(var(--shine-color-rgb), var(--shine-opacity-faint)) 20% 100%);    
  }
}

.modal-styling:hover::before {
  /* animation-play-state: paused; */ /* Optional: pause on hover */
}

/* Ensure the modal dialog itself is not blurred by the overlay's filter if backdrop-filter is used */
/* This might need adjustment based on actual modal structure */
/* #custom-confirmation-modal > div > div { */
    /* filter: none !important; */
/* } */ 

/* --- Styling for Animated "Delete" word in Modal Title --- */
.delete-title-animated-bg {
  display: inline-block; 
  background-image: radial-gradient(circle at center, 
      rgba(var(--fluorescent-pink-blob-color-rgb), 1) 25%, /* Pink more central */
      rgba(var(--electric-blue-blob-color-rgb), 1) 75%, 
      rgba(var(--electric-blue-blob-color-rgb), 0) 120%
  ); 
  background-size: 250% 250%; 
  background-position: var(--bg-pos, 50% 50%); 
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: animateBackground 12s ease-in-out infinite alternate; /* Explicit animation */
}

/* --- Delete Button Animated Gradient --- */
@keyframes buttonGradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.btn-delete-animated-gradient {
  background-image: linear-gradient(to right, #B78628, #FCC201, #B78628) !important; /* Gold tones */
  background-size: 200% 200% !important; 
  animation: buttonGradientAnimation 4s ease infinite !important; 
  color: white; /* Keeping text white, could be dark brown/black for some gold effects */
}

/* Custom components specific styles */

/* intl-tel-input styles */
/* Refactored to use global CSS variables where possible */

/* Dropdown List */
.intl-tel-input .country-list {
  /* Existing styles */
}

.intl-tel-input .country-list .country {
  /* Existing styles */
}

.intl-tel-input .country-list .country .country-name {
    /* Existing styles */
}

.intl-tel-input .country-list .country .dial-code {
    /* Existing styles */
}

/* Highlighted/Hover State */
.intl-tel-input .country-list .country.highlight, .intl-tel-input .country-list .country:hover {
   /* Existing styles */
}

/* Selected Country in Input */
.intl-tel-input .selected-flag .iti-dial-code {
    /* Existing styles */
}

/* --- Action Button Styles (from document previewer) --- */
@keyframes gradient-anim {
  0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
}
.action-btn {
  background: linear-gradient(270deg, #FF006D, #FF8A00, #FF006D);
  background-size: 600% 600%;
  animation: gradient-anim 6s ease infinite;
}
.action-btn:hover { animation-duration: 3s; }

/* --- FORM COMPONENTS --- */

/* Set the caret color globally for all inputs */
input, textarea {
  caret-color: #ec4899; /* Tailwind's pink-500 */
}

/* Base class for a custom control (checkbox/radio) background when active/checked */
.form-control-gradient-bg {
    background-image: linear-gradient(135deg, #ec4899, #f472b6); /* pink-500 to pink-400 */
    border-color: transparent !important;
}

/* --- SLIDER THUMB STYLES --- */
/* This targets the thumb of a range input with this class */
.thumb-gradient-animated {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem; /* 20px */
  height: 1.25rem; /* 20px */
  border-radius: 9999px; /* rounded-full */
  cursor: pointer;
  background-image: linear-gradient(135deg, #ec4899, #f472b6); /* pink-500 to pink-400 */
  border: 2px solid white;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
  transition: transform 0.2s ease-in-out;
}
.thumb-gradient-animated:hover {
  transform: scale(1.1);
}
.thumb-gradient-animated:active {
  transform: scale(1.05);
}

/* Disabled state for the thumb */
.thumb-disabled, input[type="range"]:disabled.thumb-gradient-animated {
  background-image: linear-gradient(135deg, #94a3b8, #cbd5e1) !important; /* slate-400 to slate-300 */
  cursor: not-allowed;
}

.dark .thumb-disabled, .dark input[type="range"]:disabled.thumb-gradient-animated {
  background-image: linear-gradient(135deg, #475569, #64748b) !important; /* slate-600 to slate-500 */
}

/* --- Animated Border Effect for Buttons (adapted from CodePen) --- */
/* Uses the same @property --angle and @keyframes spinAnimatedBorder as modal */

.button-animated-border-container {
  position: relative;
  display: inline-block; /* Keep inline-block */
  border-radius: 0.375rem; /* Match Tailwind rounded-md */
  isolation: isolate;
}

.button-animated-border-container::before {
  content: '';
  position: absolute;
  /* Use inset again, but ensure it accounts for potential scaling */
  /* Adjust inset value to control how far the glow extends */
  inset: -3px; /* Slightly larger inset */
  z-index: -1;
  border-radius: inherit; /* Inherit from container */
  background-image: conic-gradient(from var(--angle), 
    transparent 0%, 
    rgba(var(--electric-blue-blob-color-rgb), 0.9) 5% 15%, /* Glowing line segment - slightly more opaque */
    transparent 20% 100%
  );
  background-origin: border-box;
  filter: blur(6px); /* Slightly increased blur */
  animation: spinAnimatedBorder 4s linear infinite; /* Keep animation */
  opacity: 0; /* Hidden by default */
  transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
  pointer-events: none; /* Allow hover to pass through */
  /* Add a transform to potentially align with button scaling */
  transform: translateZ(0); /* Force hardware acceleration */
}

.button-animated-border-container:hover::before {
  opacity: 1; /* Visible on hover */
}

/* Ensure the button inside has its own styling */
.button-animated-border-container .action-btn {
    /* The button's original classes should handle most styling */
    /* Add any specific adjustments needed for it to sit correctly within the container */
    position: relative; /* Ensure button is positioned relative for z-index */
    z-index: 1; /* Ensure button is above the pseudo-element */
}

/* Add any custom, component-specific styles here */

/* For the floating navbar scroll behavior */
#floating-navbar.navbar-hidden {
    transform: translateY(calc(100% + 2rem)); /* Move it down by its height + bottom margin */
}

.iti {
    width: 100%;
}

@media (min-width: 768px) { /* Or your preferred breakpoint for non-mobile */
    #floating-navbar.navbar-hidden {
        /* On larger screens, you might want a different hiding behavior or none at all */
        transform: translateY(calc(100% + 1rem)); /* Example: Adjust for different bottom margin */
    }
}

/* --- LOADER STYLES (CORRECTED & FINAL) --- */

/* --- Keyframe Animations --- */

/* Keyframe for the gradient spinner/fill */
@keyframes loader-gradient-spin {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* CORRECTED: Keyframe for Coin Flip (used by both variants) */
@keyframes coin-flip-anim {
    0%, 100% { 
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); 
        transform: rotateY(0deg); 
        background: var(--loader-primary-color, #ec4899);
    }
    50%  { 
        transform: rotateY(1800deg); 
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 
        background: var(--loader-secondary-color, #a855f7);
    }
}

/* DEFINITIVE FIX: New keyframe for inverted flip that ONLY handles transform */
@keyframes coin-flip-inverted-anim {
    0%, 100% { 
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); 
        transform: rotateY(0deg); 
    }
    50%  { 
        transform: rotateY(1800deg); 
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 
    }
}

/* CORRECTED: Keyframe for Bar Bounce with Trail Effect (BASE) */
@keyframes ballbns-base {
    0% {
        left: 0; transform: translateX(5%);
        box-shadow: 
            -5px 0 0 -1px rgba(236, 72, 153, 0), /* Start with no trail */
            -10px 0 0 -2px rgba(236, 72, 153, 0),
            -25px 0 0 -8px rgba(236, 72, 153, 0);
    }
    49% {
        left: 100%; transform: translateX(-105%);
        /* Trail on the left side, using design system colors */
        box-shadow: 
            -5px 0 0 -1px rgba(236, 72, 153, 0.9), /* --loader-primary-color */
            -10px 0 0 -2px rgba(200, 72, 153, 0.7),
            -15px 0 0 -4px rgba(168, 85, 247, 0.6), /* --loader-secondary-color */
            -20px 0 0 -6px rgba(168, 85, 247, 0.4),
            -25px 0 0 -8px rgba(168, 85, 247, 0.2);
    }
    51% {
        left: 100%; transform: translateX(-105%);
        /* Trail appears on the right side */
        box-shadow: 
            5px 0 0 -1px rgba(236, 72, 153, 0.9),
            10px 0 0 -2px rgba(200, 72, 153, 0.7),
            15px 0 0 -4px rgba(168, 85, 247, 0.6),
            20px 0 0 -6px rgba(168, 85, 247, 0.4),
            25px 0 0 -8px rgba(168, 85, 247, 0.2);
    }
    100% {
        left: 0; transform: translateX(5%);
        box-shadow: 
            5px 0 0 -1px rgba(236, 72, 153, 0), /* End with no trail */
            10px 0 0 -2px rgba(236, 72, 153, 0),
            25px 0 0 -8px rgba(236, 72, 153, 0);
    }
}

/* CORRECTED: Keyframe for Bar Bounce with Trail Effect (INVERTED - White Trail) */
@keyframes ballbns-inverted {
    0% {
        left: 0; transform: translateX(5%);
        box-shadow: 
            -5px 0 0 -1px rgba(255, 255, 255, 0),
            -25px 0 0 -8px rgba(255, 255, 255, 0);
    }
    49% {
        left: 100%; transform: translateX(-105%);
        box-shadow: 
            -5px 0 0 -1px rgba(255, 255, 255, 0.9),
            -10px 0 0 -2px rgba(255, 255, 255, 0.7),
            -15px 0 0 -4px rgba(255, 255, 255, 0.6),
            -20px 0 0 -6px rgba(255, 255, 255, 0.4),
            -25px 0 0 -8px rgba(255, 255, 255, 0.2);
    }
    51% {
        left: 100%; transform: translateX(-105%);
        box-shadow: 
            5px 0 0 -1px rgba(255, 255, 255, 0.9),
            10px 0 0 -2px rgba(255, 255, 255, 0.7),
            15px 0 0 -4px rgba(255, 255, 255, 0.6),
            20px 0 0 -6px rgba(255, 255, 255, 0.4),
            25px 0 0 -8px rgba(255, 255, 255, 0.2);
    }
    100% {
        left: 0; transform: translateX(5%);
        box-shadow: 
            5px 0 0 -1px rgba(255, 255, 255, 0),
            25px 0 0 -8px rgba(255, 255, 255, 0);
    }
}

/* --- Base Variant Styles --- */

/* Base Coin Flip */
.loader-coin-flip-base:after {
    content: ''; display: inline-block; width: 48px; height: 48px;
    margin: 8px; border-radius: 50%;
    /* CORRECTED: Animate background color within the keyframe */
    animation: coin-flip-anim 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    background: var(--loader-primary-color, #ec4899); /* Start color */
}
/* We can use the animation to change the color */
@keyframes coin-flip-anim {
    0%, 100% { 
        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); 
        transform: rotateY(0deg); 
        background: var(--loader-primary-color, #ec4899);
    }
    50%  { 
        transform: rotateY(1800deg); 
        animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 
        background: var(--loader-secondary-color, #a855f7);
    }
}

/* Base Bar Bounce */
.loader-bar-base {
    display: block; position: relative; height: 32px; width: 150px;
    box-sizing: border-box; overflow: hidden;
    border: 2px solid var(--light-text-color, #FFFFFF);
    border-radius: 20px;
}
.loader-bar-base:before {
    content: ''; position: absolute; left: 0; bottom: 2px;
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(45deg, var(--loader-primary-color, #ec4899), var(--loader-secondary-color, #a855f7));
    /* CORRECTED: Use the new keyframe with trail */
    animation: ballbns-base 3s ease-in-out infinite;
}

/* Base Standard Spinner */
.loader-standard-spinner-base {
    width: 3rem; height: 3rem; border-radius: 50%; display: inline-block;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid var(--loader-primary-color, #ec4899);
    background: conic-gradient(from 180deg at 50% 50%, 
        rgba(255, 255, 255, 0) 0deg, 
        var(--loader-secondary-color, #a855f7) 170.62deg, 
        var(--loader-primary-color, #ec4899) 360deg) 
        border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: spin 1s linear infinite;
}

/* --- Inverted Variant Styles (DEFINITIVE FIX) --- */
/* The inverted styles should be structurally identical to the base styles, only with colors changed. */

/* Inverted Coin Flip */
.loader-coin-flip-inverted:after {
    content: ''; 
    display: inline-block; 
    width: 48px; /* Same size as base */
    height: 48px; /* Same size as base */
    margin: 8px; 
    border-radius: 50%;
    /* Use the new animation that doesn't touch color */
    animation: coin-flip-inverted-anim 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    /* This background color will now be respected throughout the animation */
    background: white; 
}

/* Inverted Bar Bounce */
.loader-bar-inverted {
    display: block; position: relative; height: 32px; width: 150px;
    box-sizing: border-box; overflow: hidden;
    border-radius: 20px; 
    /* CORRECTED: Transparent background, gradient border */
    border: 2px solid transparent;
    background: linear-gradient(270deg, var(--loader-secondary-color, #a855f7), var(--loader-primary-color, #ec4899)) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}
.loader-bar-inverted:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    /* DEFINITIVE FIX: The ball should be white, using the light text color variable. */
    background: var(--light-text-color, #FFFFFF);
    animation: ballbns-inverted 3s cubic-bezier(.6,0,.4,1) infinite;
}

/* Inverted Standard Spinner (just white) */
.loader-standard-spinner-inverted {
    width: 3rem; height: 3rem; border-radius: 50%; display: inline-block;
    border: 4px solid;
    border-color: #fff transparent #fff transparent;
    animation: spin 1.2s linear infinite;
}

/* Remove old keyframes to avoid confusion */
/* @keyframes coin-flip-base-anim, @keyframes coin-flip-inverted-anim, @keyframes ballbns can be removed if they are fully replaced. */
/* Keeping spin as it's used by both standard spinners */

/* ... (ensure the @keyframes spin is present if it's not elsewhere) ... */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --- NEW: FORM COMPONENT ENHANCEMENTS --- */

/* Animated Gradient for Form Focus */
.form-input-gradient-focus:focus-within {
  outline: none;
  position: relative;
  /* Use a pseudo-element for the animated border */
}

.form-input-gradient-focus:focus-within::before {
  content: "";
  position: absolute;
  inset: -2px; /* Controls border thickness */
  z-index: -1;
  border-radius: 0.5rem; /* Match "rounded-lg" */
  background-image: conic-gradient(from var(--angle), 
    var(--loader-primary-color), 
    var(--loader-secondary-color), 
    var(--loader-primary-color)
  );
  animation: spinAnimatedBorder 3s linear infinite;
}

/* Toggle Switch Component Styles */
.toggle-switch-container {
    display: flex;
    align-items: center;
}

.toggle-switch-label {
    margin-right: 0.75rem;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* medium */
    color: var(--subtle-text-color);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 3.5rem;  /* w-14 */
    height: 2rem; /* h-8 */
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 2rem; /* rounded-full */
}

.toggle-switch-slider:before {
    position: absolute;
    content: "";
    height: 1.5rem; /* h-6 */
    width: 1.5rem; /* w-6 */
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-switch-slider {
    /* Use the animated gradient */
    background: linear-gradient(270deg, var(--loader-secondary-color, #a855f7), var(--loader-primary-color, #ec4899), var(--loader-secondary-color, #a855f7));
    background-size: 250% 250%;
    animation: loader-gradient-spin 4s ease infinite;
}

.toggle-switch input:focus + .toggle-switch-slider {
    box-shadow: 0 0 1px #2196F3;
}

.toggle-switch input:checked + .toggle-switch-slider:before {
    transform: translateX(26px);
}

/* Disabled State */
.toggle-switch input:disabled + .toggle-switch-slider {
    cursor: not-allowed;
    background-color: #e2e8f0; /* slate-200 */
}

.dark .toggle-switch input:disabled + .toggle-switch-slider {
    background-color: #334155; /* slate-700 */
}

/* DEFINITIVE FIX: Disabled AND Checked state */
.toggle-switch input:checked:disabled + .toggle-switch-slider {
    background-color: #94a3b8; /* slate-400 */
}

.dark .toggle-switch input:checked:disabled + .toggle-switch-slider {
    background-color: #475569; /* slate-600 */
}

/* ==========================================================================
   Component: Tabs
   ========================================================================== */
/* This container is now ONLY for alignment (flexbox layout). It is transparent. */
.tabs-list {
    display: flex;
    width: 100%;
    height: 2.5rem; /* DEFINITIVE FIX: Set to h-10 (40px) for consistency */
    align-items: center;
    justify-content: center; /* Centrar los tabs por defecto */
    overflow-x: auto; /* Allow horizontal scrolling */
    padding: 0;
    /* justify-content puede ser sobrescrito por utility classes como justify-start, justify-end */
}

/* The visible, shrink-wrapped container with the background and border-radius */
.tabs-list-internal-container {
    display: inline-flex;
    height: 100%; /* RESTORED: Must fill the parent's height */
    align-items: center;
    border-radius: 0.5rem; /* rounded-lg */
    background-color: var(--color-gray-200, #E5E7EB);
    padding: 0.25rem; /* RESTORED: The crucial padding for the "pill" effect */
    color: var(--color-gray-500, #6B7280);
}

.dark .tabs-list-internal-container {
    background-color: var(--color-gray-800, #1F2937);
    color: var(--color-gray-400, #9CA3AF);
}

/* Ensure the alignment container is ALWAYS transparent in dark mode. */
.dark .tabs-list {
    background-color: transparent !important;
}

.tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border-radius: 0.375rem; /* rounded-md */
    padding: 0 1rem; /* REVERTED: Horizontal padding only (px-4) */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium FOR INACTIVE to allow active to be bold */
    transition: all 0.2s;
    cursor: pointer;
    height: 100%; /* RESTORED: Button must fill its container */
}

/* State: Inactive */
.tabs-trigger:not([data-state="active"]) {
    color: var(--color-gray-500, #6B7280); /* Muted color for inactive state */
}
.dark .tabs-trigger:not([data-state="active"]) {
    color: var(--color-gray-400, #9CA3AF);
}

/* State: Active */
.tabs-trigger[data-state="active"] {
    /* This is the animated gradient background */
    background-size: 200% 200%;
    background-image: linear-gradient(
        45deg,
        var(--h1-grad-start),
        var(--h1-grad-mid),
        var(--h1-grad-end)
    );
    animation: gradient-shift 4s ease infinite;
    color: white; /* Default text color for light mode */
    font-weight: 700; /* font-bold for active state */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Specific override for active tab text in dark mode */
.dark .tabs-trigger[data-state="active"] {
    color: var(--color-gray-900, #111827); /* Dark text on gradient for dark mode */
}

/* State: Inactive - Hover */
.tabs-trigger:not([data-state="active"]):hover {
    color: var(--color-gray-700, #374152);
}
.dark .tabs-trigger:not([data-state="active"]):hover {
    color: var(--color-gray-200, #E5E7EB);
}

/* State: Disabled */
.tabs-trigger[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.tabs-content {
    margin-top: 1rem;
}

/* --- Shadcn-style Slider (ts-slider) ---------------------------------- */
.ts-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: #1f2937; /* gray-800 for dark background fallback */
  accent-color: #ec4899; /* pink-500 */
  cursor: pointer;
}

/* Track gradient (webkit) will follow accent-color automatically; override thumb for clarity */
.ts-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: #ec4899; /* pink-500 */
  border: 2px solid white;
  transition: transform 0.2s ease-in-out;
}

.ts-slider:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

/* Firefox */
.ts-slider::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  background-color: #ec4899;
  border: 2px solid white;
  transition: transform 0.2s ease-in-out;
}
.ts-slider:active::-moz-range-thumb {
  transform: scale(1.15);
}

.ts-slider::-moz-range-track {
  height: 0.5rem;
  border-radius: 0.25rem;
  background-color: #374151; /* gray-700 */
}
}

/* Gradient X animation */
@keyframes gradient-x {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 6s ease infinite;
}

/* === CodeViewer v2.1 === */
.code-viewer-container {
  position: relative;
  font-family: "Fira Code", monospace;
  background-color: #0f172a; /* slate-950 like ide dark */
  margin-top:0.5rem;
  margin-bottom:0.5rem;
}
.code-viewer-container pre {
  overflow: auto;
  padding: 1rem 1rem 1rem 4rem; /* adjusted left */
  background: transparent !important;
  counter-reset: line;
}
.code-line {
  display: block;
  position: relative;
  padding-left: 0.5rem;
  margin-bottom: 2px;
  background-image: none;
}
.has-indent { border-left:1px solid rgba(51,65,85,0.15); }
.has-indent:hover { border-left-width:3px; border-left-color:#c026d3; }

/* Square number box equal to line height (1.2rem) */
.code-line { line-height:1.2rem; }
.code-line::before { width:1.2rem; height:1.2rem; line-height:1.2rem; }

/* Boxed line numbers */
.code-line::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: -2.7rem;
  width: 1.3rem;
  text-align: center;
  border-radius: 0.375rem;
  background-color: rgba(30, 41, 59, 0.4); /* slate-800 40% */
  color: #cbd5e1; /* slate-300 */
  line-height: 1.1rem;
  height: 1.1rem;
  font-size: 0.55rem;
}
/* Indent guides (light vertical) */
.code-line {
  border-left: 1px solid #33415540; /* slate opacity 25% */
}
/* Highlight indent on hover */
.code-line:hover {
  border-left-width: 3px;
  border-left-color: #c026d3;
  background-color: rgba(236,72,153,0.06); /* very light pink */
}
/* Diagnostics column */
.code-line[data-error]:not([data-error=""])::after {
  content: attr(data-error);
  position: absolute;
  right: -1.7rem;
  width: 1.3rem;
  text-align: center;
  border-radius: 0.375rem;
  background-color: #7f1d1d; /* red-900 */
  color: #f87171; /* red-400 */
  font-size: 0.5rem;
  line-height: 1.1rem;
}

/* Header badges */
.filename-badge,
.lang-badge {
  font-family: "Inter", sans-serif;
}
.lang-badge:hover {
  background-color: #475569; /* slate-600 */
}

.code-viewer-container pre:focus { outline:none; box-shadow:0 0 0 2px #ec4899; /* pink-500 */ border-radius:0.375rem; }

.code-line:hover::before {
  background-color:#ec4899;
  color:#ffffff;
  font-weight:700;
}
/* Visual indent guides: lighter vertical stripes for each indent of 4ch */
.code-line {
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent 4ch,
    rgba(51,65,85,0.15) 4ch,
    rgba(51,65,85,0.15) 4.25ch
  );
}

/* Indent guides width per level */
.has-indent {
  background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(4ch - 1px), rgba(51,65,85,0.15) calc(4ch - 1px), rgba(51,65,85,0.15) 4ch);
  background-size: calc(var(--indent-level,1) * 4ch) 100%;
  background-repeat: no-repeat;
}

/* Indent guides via pseudo element */
.has-indent::after {
  content:"";
  position:absolute;
  top:0; bottom:0; left:0;
  width:calc(var(--indent-level,1)*4ch);
  background-image: repeating-linear-gradient(to right, rgba(51,65,85,0.15) 0 1px, transparent 1px 4ch);
  pointer-events:none;
}
.has-indent:hover::after { background-image: repeating-linear-gradient(to right, #c026d3 0 2px, transparent 2px 4ch); }

.code-viewer-container .dev-highlight, .code-viewer-container .dev_highlight, .code-viewer-container [data-dev-highlight] {
  background:none !important;
  border:none !important;
  outline:none !important;
  box-shadow:none !important;
}

/* --- Override indent guide visuals (only in indent area) --- */
.code-viewer-container .code-line {
  background-image: none !important;
}

/* Map indent-l-N classes to CSS variable */
.code-line.indent-l-1 { --indent-level: 1; }
.code-line.indent-l-2 { --indent-level: 2; }
.code-line.indent-l-3 { --indent-level: 3; }
.code-line.indent-l-4 { --indent-level: 4; }
.code-line.indent-l-5 { --indent-level: 5; }

/* Pseudo-element draws vertical stripes only over indent area */
.code-viewer-container .has-indent::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: calc(var(--indent-level,1) * 4ch);
  background-image: repeating-linear-gradient(to right, rgba(51,65,85,0.4) 0 1px, transparent 1px 4ch);
  pointer-events: none;
}

.code-viewer-container .has-indent:hover::after {
  background-image: repeating-linear-gradient(to right, #c026d3 0 2px, transparent 2px 4ch);
}

/* === Tiffany DevScript UX Enhancements v1 === */
@media (prefers-reduced-motion: no-preference) {
  /* Pulse ring on focus */
  @keyframes ts-pulse {
    0% { box-shadow: 0 0 0 0 rgba(236,72,153,0.6); }
    70% { box-shadow: 0 0 0 6px rgba(236,72,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(236,72,153,0); }
  }
  .code-viewer-container pre:focus {
    animation: ts-pulse 1.2s ease-out 1;
  }
}

/* Subtle horizontal gradient per line */
.code-viewer-container .code-line {
  background-image: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 80%);
}

/* Neon indent on hover */
.code-viewer-container .has-indent:hover::after {
  box-shadow: 0 0 4px #ec4899;
}

/* Active line highlight */
.code-viewer-container .code-line.active-line {
  background-color: rgba(236,72,153,0.05);
  border-left: 3px solid #22d3ee; /* cyan-400 */
}

/* Rainbow run Easter egg */
@keyframes ts-rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
.code-viewer-container.rainbow-run {
  animation: ts-rainbow 3s linear infinite;
}

/* Override token colors with !important */
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--ts-comment)!important;font-style:italic;}
.token.string,.token.attr-value{color:var(--ts-red)!important;}
.token.keyword,.token.boolean,.token.selector,.token.constant{color:var(--ts-purple)!important;}
.token.number,.token.unit{color:var(--ts-green)!important;}
.token.function,.token.class-name{color:var(--ts-yellow)!important;}
.token.property,.token.tag,.token.operator{color:var(--ts-blue)!important;}
.token.punctuation{color:var(--ts-comment)!important;}

/* Techno strobe run */
@keyframes ts-techno{0%,100%{filter:brightness(1) hue-rotate(0deg);}20%{filter:brightness(2) hue-rotate(45deg);}40%{filter:brightness(1.5) hue-rotate(180deg);}60%{filter:brightness(2) hue-rotate(270deg);}80%{filter:brightness(1.5) hue-rotate(360deg);}}
.code-viewer-container.techno-run{animation:ts-techno 0.2s steps(2) infinite;}

/* Hologram alias */
.code-viewer-container.hologram-run{animation:ts-techno 0.2s steps(2) infinite;}

/* Rainbow and holo global */
html.rainbow-run, .rainbow-run { animation: ts-rainbow 3s linear infinite; }
html.hologram-run, .hologram-run { animation: ts-techno 0.2s steps(2) infinite; }

/* Updated Industrial strobe sequence */
@keyframes ts-industrial{
  0%{background-color:#dc2626;filter:none;}
  20%{background-color:#000000;filter:none;}
  40%{background-color:#ffffff;filter:invert(1);}/* flash white */
  60%{background-color:#7f1d1d;filter:none;}
  80%{background-color:#16ff72;filter:none;}/* neon green */
  100%{background-color:#dc2626;filter:none;}
}
html.industrial-run, .industrial-run { animation: ts-industrial 0.18s steps(2) infinite; }

/* === Quotation Table Row Animation === */
@keyframes fade-in-slide-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-slide-down {
    animation: fade-in-slide-down 0.5s ease-out;
}

/* === Agent Generator Card Styles === */
.agent-generator-card {
    animation: fadeIn 0.3s ease-in;
}

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

/* HTMX Indicator Styles */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}