/**
 * ============================================================================
 * ARTICLE BUILDER - BRIX TEMPLATES
 * ============================================================================
 *
 * A multi-agent workflow system for creating comprehensive Webflow articles.
 * This stylesheet uses CSS custom properties (variables) for maintainability
 * and follows a mobile-first, component-based architecture.
 *
 * @author    @maurosicard
 * @version   2.0
 * @license   MIT
 * ============================================================================
 */


/* ============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================ */

:root {
    /* Color Palette - Primary */
    --color-primary-dark: #1a1a1a;
    --color-primary-darker: #0a0a0a;
    --color-primary-medium: #2d2d2d;
    --color-primary-light: #4a4a4a;
    --color-primary-lighter: #2a2a2a;

    /* Color Palette - Neutral */
    --color-white: #ffffff;
    --color-gray-lightest: #fafbfc;
    --color-gray-lighter: #f8f9fa;
    --color-gray-light: #e8eaed;
    --color-gray: #e0e0e0;
    --color-gray-medium: #d0d0d0;
    --color-gray-dark: #999999;
    --color-gray-darker: #666666;
    --color-gray-darkest: #333333;

    /* Color Palette - Accent */
    --color-accent-primary: #00ffcc;

    /* Typography - Font Families */
    --font-primary: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-monospace: 'Courier New', 'Courier', monospace;

    /* Typography - Font Sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 15px;
    --font-size-xl: 22px;
    --font-size-2xl: 32px;

    /* Typography - Font Weights */
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Typography - Line Heights */
    --line-height-tight: 1.6;
    --line-height-normal: 1.8;

    /* Typography - Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0.05em;
    --letter-spacing-wide: 0.1em;

    /* Spacing - Padding & Margins */
    --spacing-xs: 6px;
    --spacing-sm: 8px;
    --spacing-md: 10px;
    --spacing-base: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 10px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 6px 20px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 8px 24px rgba(0, 0, 0, 0.2);
    --shadow-top: 0 -2px 12px rgba(0, 0, 0, 0.04);
    --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-focus: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 3px rgba(26, 26, 26, 0.06);

    /* Transitions */
    --transition-fast: all 0.2s ease;
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slide: left 0.5s;

    /* Layout */
    --max-width-content: 1200px;
    --grid-columns-full: repeat(12, 1fr);
}


/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

/**
 * Universal Box Sizing & Reset
 * Ensures consistent spacing and removes browser defaults
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/**
 * Body Element
 * Sets up the foundational layout and typography for the entire application
 */
body {
    font-family: var(--font-primary);
    background: #f7f7fc;
    color: var(--color-primary-dark);
    line-height: var(--line-height-tight);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


/* ============================================================================
   HEADER SECTION
   ============================================================================ */

/**
 * Top Bar
 * The main application header with white background
 */
.top-bar {
    background: var(--color-white);
    color: var(--color-primary-dark);
    padding: var(--spacing-xl) var(--spacing-4xl);
    box-shadow: var(--shadow-md);
    position: relative;
    z-index: 100;
}

/**
 * Top Bar Content Container
 * Centers content and provides consistent padding with main content area
 */
.top-bar-content {
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: 0 var(--spacing-4xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/**
 * Logo Section Container
 * Horizontal layout: icon | title | divider | subtext
 */
.logo-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

/**
 * Logo Icon
 * Favicon SVG positioned on the left
 */
.logo-icon {
    height: 40px;
    width: auto;
}

/**
 * Logo / Brand Title
 * Black text
 */
.logo {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-dark);
}

/**
 * Logo Divider
 * Vertical line separating title from subtext
 */
.logo-divider {
    width: 1px;
    height: 32px;
    background: var(--color-gray-light);
}

/**
 * Logo Subtext
 * Descriptive tagline to the right of divider
 */
.logo-subtext {
    font-size: var(--font-size-sm);
    color: var(--color-gray-darker);
    font-weight: var(--font-weight-medium);
}

/**
 * Clear Builder Data Button
 * Transparent button in top right for clearing all local storage
 */
.btn-clear-data {
    background: transparent;
    border: 1px solid var(--color-gray-light);
    color: var(--color-gray-darker);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: var(--transition-base);
}

.btn-clear-data:hover {
    background: var(--color-gray-lightest);
    border-color: var(--color-gray-medium);
    color: var(--color-primary-dark);
}

.btn-clear-data:active {
    transform: scale(0.98);
}

.btn-clear-data i {
    font-size: var(--font-size-md);
}


/* ============================================================================
   MAIN CONTENT AREA
   ============================================================================ */

/**
 * Primary Content Container
 * Centers content and provides light purple background
 */
.content-area {
    flex: 1;
    max-width: var(--max-width-content);
    margin: 0 auto;
    padding: var(--spacing-4xl);
    width: 100%;
    background: #f7f7fc;
}


/* ============================================================================
   NAVIGATION TABS SYSTEM
   ============================================================================ */

/**
 * Tab Container
 * Wrapper for the workflow step tabs
 */
.tab-container {
    background: transparent;
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-3xl);
}

/**
 * Tab Grid Layout
 * Equal-width tabs across both rows:
 * - Row 1: 5 tabs (Steps 0-4)
 * - Row 2: 5 tabs (Steps 5-9)
 */
.tabs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

/**
 * Individual Tab Button
 * Base styles for workflow step navigation
 */
.tab {
    position: relative;
    padding: var(--spacing-md) var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-gray-lighter) 0%, var(--color-white) 100%);
    border: 1px solid var(--color-gray-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-align: left;
    transition: all 0.1s ease;
}

/**
 * Tab Hover State
 * Subtle lift effect on interaction
 */
.tab:hover {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-lighter) 100%);
    border-color: var(--color-gray-medium);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/**
 * Active Tab State
 * Purple horizontal gradient background to indicate current step
 */
.tab.active {
    background: linear-gradient(90deg, #7d5dff, #6342ea);
    color: var(--color-white);
    border: none;
    box-shadow: var(--shadow-xl);
}

/**
 * Tab Step Number Label
 * Small uppercase indicator of step sequence
 */
.tab-number {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-dark);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    margin-bottom: var(--spacing-xs);
}

/**
 * Active Tab Number
 * White text on purple background for visibility
 */
.tab.active .tab-number {
    color: var(--color-white);
}

/**
 * Tab Title Text
 * Main label for each workflow step
 */
.tab-title {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 2px;
}

/**
 * Tab Icon Spacing
 * Provides gap between icon and text
 */
.tab-icon {
    margin-right: var(--spacing-xs);
}

/**
 * Tab Check Icon
 * Completion indicator - shown when step is completed
 * Positioned in top right corner of tab
 */
.tab-check-icon {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #16a34a;
    font-size: 18px;
}

/**
 * Tab Check Icon on Active Tab
 * White icon for visibility on purple background
 */
.tab.active .tab-check-icon {
    color: var(--color-white);
}


/* ============================================================================
   STEP CONTENT SECTIONS
   ============================================================================ */

/**
 * Step Content Container
 * Hidden by default, shown when active
 */
.step-content {
    display: none;
}

/**
 * Active Step Content
 * Displays the current workflow step
 */
.step-content.active {
    display: block;
}

/**
 * Content Header
 * Title and description for each step
 */
.content-header {
    margin-bottom: var(--spacing-3xl);
}

/**
 * Main Content Title
 * Large heading with gradient effect
 */
.content-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    letter-spacing: var(--letter-spacing-tight);
    color: var(--color-primary-dark);
}

/**
 * Content Description
 * Explanatory text below the title
 */
.content-description {
    font-size: var(--font-size-lg);
    color: var(--color-gray-darker);
    line-height: var(--line-height-tight);
}


/* ============================================================================
   FORM SECTIONS
   ============================================================================ */

/**
 * Generic Section Container
 * Provides spacing between content blocks
 */
.section {
    margin-bottom: var(--spacing-3xl);
}

/**
 * Section Title
 * Small uppercase heading for form sections
 */
.section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-gray-dark) 0%, var(--color-gray-darker) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/**
 * Section Header with Action Button
 * Flex container for title and action button on opposite sides
 */
.section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.section-header-with-action .section-title {
    margin-bottom: 0;
}

/**
 * Section Title Dark Variant
 * Black color for Prompt Result title
 */
.section-title-dark {
    background: none;
    -webkit-text-fill-color: initial;
    color: #1a1a1a;
    margin-bottom: var(--spacing-lg);
}

/**
 * Prompt Result Grid
 * Two-column layout for prompt and result side-by-side
 */
.prompt-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

/**
 * Prompt Column
 * Left column for generated prompt
 */
.prompt-column {
    display: flex;
    flex-direction: column;
}

/**
 * Result Column
 * Right column for prompt result input
 */
.result-column {
    display: flex;
    flex-direction: column;
}

/**
 * Prompt Result Input Textarea
 * Matches prompt display height and styling
 */
.prompt-result-input {
    flex: 1;
    min-height: 400px;
    max-height: 400px;
    resize: vertical;
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    padding: var(--spacing-lg);
    border: 1px solid var(--color-gray);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.prompt-result-input:focus {
    outline: none;
    border-color: #7d5dff;
    box-shadow: 0 4px 16px rgba(125, 93, 255, 0.15), 0 0 0 3px rgba(125, 93, 255, 0.1);
}

/**
 * Input Field Wrapper
 * Groups label and input together
 */
.input-field {
    margin-bottom: var(--spacing-xl);
}

/**
 * Form Label
 * Descriptive text for inputs
 */
.label {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    display: block;
    color: var(--color-gray-darkest);
}

/**
 * Text Inputs & Textareas
 * Base styles for form fields
 */
input[type="text"],
textarea {
    width: 100%;
    padding: var(--spacing-base) var(--spacing-lg);
    border: 1px solid var(--color-gray);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--font-size-lg);
    background: var(--color-white);
    transition: var(--transition-base);
    box-shadow: var(--shadow-sm);
}

/**
 * Input Focus State
 * Enhanced visual feedback with purple accent
 */
input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: #7d5dff;
    box-shadow: 0 4px 16px rgba(125, 93, 255, 0.15), 0 0 0 3px rgba(125, 93, 255, 0.1);
    background: var(--color-white);
}

/**
 * Textarea Specific Styles
 * Resizable vertically with minimum height
 */
textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--line-height-tight);
}

/**
 * Textarea Scrollbar
 * Thin custom scrollbar for webkit browsers
 */
textarea::-webkit-scrollbar {
    width: 6px;
}

textarea::-webkit-scrollbar-track {
    background: #f5f5f4;
    border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 3px;
}

textarea::-webkit-scrollbar-thumb:hover {
    background: #a8a29e;
}

/* Firefox scrollbar for textarea */
textarea {
    scrollbar-width: thin;
    scrollbar-color: #d6d3d1 #f5f5f4;
}

/**
 * Input Help Text
 * Descriptive helper text below inputs
 */
.input-help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-dark);
    margin-top: var(--spacing-xs);
    font-style: italic;
}


/* ============================================================================
   ALERT & NOTIFICATION BOXES
   ============================================================================ */

/**
 * Alert Box
 * Information callouts with icon - Option 3 style
 */
.alert-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
    font-size: var(--font-size-md);
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/**
 * Alert Box Icon
 * Info icon with blue accent
 */
.alert-icon {
    color: #3b82f6;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    line-height: 1;
}

/**
 * Alert Box Content
 * Text content container
 */
.alert-content {
    flex: 1;
}

/**
 * Alert Box Strong Text
 * Emphasized heading within alerts - FORCE INLINE
 */
.alert-box strong {
    display: inline !important;
    font-weight: var(--font-weight-semibold);
}

/**
 * Alert Box Strong Text - First Child Only
 * Only the first strong tag (title) should be block-level
 */
.alert-box > strong:first-child {
    display: block !important;
    margin-bottom: var(--spacing-sm);
}


/* ============================================================================
   PROMPT DISPLAY
   ============================================================================ */

/**
 * Prompt Display Container
 * Very slightly muted purple disabled-style display for AI prompts
 */
.prompt-display {
    background: #faf9fc;
    color: #57534e;
    padding: var(--spacing-2xl);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    border-radius: var(--radius-sm);
    border: 1px solid #e7e5e4;
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/**
 * Prompt Display Error State
 * Shows when requirements are not met
 */
.prompt-display.error {
    background: #fff1f2;
    border: 1px solid #fda4af;
    color: #881337;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
    min-height: 400px;
    max-height: 400px;
    padding: var(--spacing-2xl);
    margin-bottom: 18px;
}

.prompt-display.error .error-content {
    max-width: 500px;
}

.prompt-display.error .error-icon {
    color: #e11d48;
    font-size: 40px;
    display: block;
    margin-bottom: 16px;
}

.prompt-display.error strong {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 16px;
    color: #881337;
}

.prompt-display.error ul {
    margin-top: 12px;
    list-style: none;
    padding: 0;
}

.prompt-display.error li {
    margin-bottom: 6px;
}

/**
 * Prompt Display Scrollbar
 * Thin custom scrollbar for webkit browsers
 */
.prompt-display::-webkit-scrollbar {
    width: 6px;
}

.prompt-display::-webkit-scrollbar-track {
    background: #f5f5f4;
    border-radius: 3px;
}

.prompt-display::-webkit-scrollbar-thumb {
    background: #d6d3d1;
    border-radius: 3px;
}

.prompt-display::-webkit-scrollbar-thumb:hover {
    background: #a8a29e;
}

/* Firefox scrollbar */
.prompt-display {
    scrollbar-width: thin;
    scrollbar-color: #d6d3d1 #f5f5f4;
}

/**
 * Prompt Display Loading State
 * Shows when prompt is being fetched
 */
.prompt-display.loading {
    opacity: 0.6;
    font-style: italic;
}


/* ============================================================================
   BUTTONS & ACTIONS
   ============================================================================ */

/**
 * Button Group Container
 * Horizontal layout for action buttons
 */
.button-group {
    display: flex;
    gap: var(--spacing-lg);
}

/**
 * Base Button Styles
 * Shared styles for all button variants
 */
.btn {
    padding: var(--spacing-base) 28px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-normal);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

/**
 * Button Shine Effect
 * Animated highlight on hover
 */
.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: var(--transition-slide);
}

/**
 * Button Hover Shine Animation
 * Triggers the sliding highlight effect
 */
.btn:hover::before {
    left: 100%;
}

/**
 * Dark Button Variant
 * Primary action button with horizontal purple gradient
 */
.btn-dark {
    background: linear-gradient(90deg, #7d5dff, #6342ea);
    color: var(--color-white);
    border: none;
    box-shadow: var(--shadow-lg);
}

/**
 * Dark Button Hover State
 * Intensifies and lifts the button
 */
.btn-dark:hover {
    background: linear-gradient(90deg, #6a4aef, #5232da);
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}

/**
 * Light Button Variant
 * Secondary action button with light background
 */
.btn-light {
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-gray-lighter) 100%);
    color: var(--color-primary-dark);
    border: 1px solid var(--color-gray);
    box-shadow: var(--shadow-md);
}

/**
 * Light Button Hover State
 * Emphasizes border and lifts
 */
.btn-light:hover {
    background: linear-gradient(135deg, var(--color-gray-lighter) 0%, var(--color-white) 100%);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/**
 * Button Success State
 * Visual feedback when action succeeds (e.g., copy)
 */
.btn.success {
    background: linear-gradient(135deg, #00c853 0%, #00a843 100%) !important;
    color: var(--color-white) !important;
}


/* ============================================================================
   NAVIGATION CONTROLS
   ============================================================================ */

/**
 * Navigation Button Container
 * Positions prev/next buttons at opposite ends
 */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-4xl);
    padding-top: var(--spacing-3xl);
    border-top: 1px solid var(--color-gray-light);
}


/* ============================================================================
   MODAL SYSTEM
   ============================================================================ */

/**
 * Modal Overlay
 * Full-screen overlay with semi-transparent background
 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
    transition: opacity 0.2s ease;
}

/**
 * Modal Content Box
 * White centered box with shadow
 */
.modal-content {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-4xl);
    max-width: 480px;
    width: 90%;
    box-shadow: var(--shadow-2xl);
    text-align: center;
    animation: modalSlideIn 0.3s ease;
}

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

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

/**
 * Modal Icon
 * Red alert icon at top of modal
 */
.modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-2xl);
    background: #fee2e2;
    border-radius: 50%;
}

.modal-icon i {
    font-size: 32px;
    color: #dc2626;
}

/**
 * Modal Title
 * Primary heading in modal
 */
.modal-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-lg);
}

/**
 * Modal Message
 * Descriptive text in modal
 */
.modal-message {
    font-size: var(--font-size-md);
    color: var(--color-gray-darker);
    line-height: var(--line-height-normal);
    margin-bottom: var(--spacing-3xl);
}

/**
 * Modal Buttons Container
 * Button group at bottom of modal
 */
.modal-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
}

.modal-buttons .btn {
    min-width: 140px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    text-transform: none;
    letter-spacing: 0;
}

/**
 * Danger Button Style
 * Red button for destructive actions
 */
.btn-danger {
    background: #dc2626;
    color: var(--color-white);
    border: 1px solid #dc2626;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    padding: var(--spacing-base) var(--spacing-2xl);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: var(--transition-base);
    text-transform: none;
    letter-spacing: normal;
}

.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.btn-danger:active {
    transform: scale(0.98);
}


/* ============================================================================
   FOOTER SECTION
   ============================================================================ */

/**
 * Page Footer
 * Credit and branding information
 */
footer {
    background: linear-gradient(135deg, var(--color-gray-lighter) 0%, var(--color-white) 100%);
    border-top: 1px solid var(--color-gray-light);
    padding: var(--spacing-2xl) var(--spacing-4xl);
    text-align: center;
    color: var(--color-gray-darker);
    font-size: var(--font-size-base);
    box-shadow: var(--shadow-top);
}

/**
 * Footer Link
 * Author/creator attribution with horizontal purple gradient effect
 */
footer a {
    color: #6342ea;
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    transition: var(--transition-fast);
    background: linear-gradient(90deg, #7d5dff, #6342ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/**
 * Footer Link Hover State
 * Reverses gradient direction for subtle effect
 */
footer a:hover {
    background: linear-gradient(90deg, #6342ea, #7d5dff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================ */

/**
 * Mobile Breakpoint: 768px and below
 * Transforms the tab grid into a horizontal swipeable carousel
 */
@media (max-width: 768px) {

    /* ----------------------------------------
       HEADER - Reduce padding on mobile
       ---------------------------------------- */
    .top-bar {
        padding: var(--spacing-lg) var(--spacing-lg);
    }

    .top-bar-content {
        padding: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .logo-section {
        flex: 1;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .logo-divider {
        display: none;
    }

    .logo-subtext {
        display: none;
    }

    .logo {
        font-size: 18px;
    }

    .logo-icon {
        height: 32px;
    }

    .btn-clear-data {
        /* Pill-shaped icon button on mobile */
        padding: 0;
        font-size: 0; /* Hide text */
        width: 44px;
        height: 32px;
        border-radius: 16px;
        justify-content: center;
    }

    .btn-clear-data i {
        font-size: 15px; /* Keep icon visible */
        margin: 0;
        position: relative;
        left: 3.5px; /* Center icon in pill */
    }

    /* ----------------------------------------
       CONTENT AREA - Reduce side padding
       ---------------------------------------- */
    .content-area {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    /* ----------------------------------------
       TAB CONTAINER - Swipeable Carousel
       Option 6: Swipeable Full Cards with Snap
       ---------------------------------------- */
    .tab-container {
        padding: var(--spacing-base) 0;
        margin-bottom: var(--spacing-xl);
        /* Allow overflow for swipe effect */
        margin-left: calc(-1 * var(--spacing-lg));
        margin-right: calc(-1 * var(--spacing-lg));
        padding-left: var(--spacing-lg);
        padding-right: var(--spacing-lg);
    }

    .tabs {
        /* Override grid layout to flex for horizontal scroll */
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Free-form scrolling - no snap */
        scrollbar-width: none; /* Firefox */
        padding-bottom: var(--spacing-sm);
    }

    .tabs::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* Reset grid-column spans for mobile */
    .tab:nth-child(1),
    .tab:nth-child(2),
    .tab:nth-child(3),
    .tab:nth-child(4),
    .tab:nth-child(5),
    .tab:nth-child(6),
    .tab:nth-child(7),
    .tab:nth-child(8) {
        grid-column: unset;
    }

    .tab {
        /* Fixed width cards showing ~80% with peek of next */
        min-width: calc(100% - 48px);
        flex-shrink: 0;
        padding: var(--spacing-lg);
        /* Remove shadow on mobile */
        box-shadow: none;
    }

    .tab:hover {
        /* Disable hover effects on mobile */
        transform: none;
        box-shadow: none;
    }

    .tab.active {
        /* Remove shadow from active tab on mobile */
        box-shadow: none;
    }

    .tab:not(.active) {
        opacity: 0.7;
    }

    .tab-number {
        font-size: 10px;
        margin-bottom: var(--spacing-xs);
    }

    .tab-title {
        font-size: var(--font-size-md);
    }

    .tab-icon {
        font-size: 14px;
    }

    /* ----------------------------------------
       CONTENT HEADER - Smaller typography
       ---------------------------------------- */
    .content-header {
        margin-bottom: var(--spacing-xl);
    }

    .content-title {
        font-size: var(--font-size-xl);
    }

    .content-description {
        font-size: var(--font-size-md);
    }

    /* ----------------------------------------
       PROMPT RESULT GRID - Stack vertically
       ---------------------------------------- */
    .prompt-result-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .prompt-display {
        min-height: 300px;
        max-height: 300px;
    }

    .prompt-result-input {
        min-height: 300px;
        max-height: 300px;
    }

    /* ----------------------------------------
       SECTION HEADER - Stack on mobile
       ---------------------------------------- */
    .section-header-with-action {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-base);
    }

    /* ----------------------------------------
       BUTTONS - Full width on mobile
       ---------------------------------------- */
    .btn {
        padding: var(--spacing-base) var(--spacing-xl);
        font-size: var(--font-size-sm);
    }

    .button-group {
        flex-direction: column;
        width: 100%;
    }

    .button-group .btn {
        width: 100%;
        justify-content: center;
    }

    /* ----------------------------------------
       NAVIGATION BUTTONS - Adjust spacing
       ---------------------------------------- */
    .navigation-buttons {
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-xl);
        gap: var(--spacing-base);
    }

    .navigation-buttons .btn {
        padding: var(--spacing-base) var(--spacing-lg);
    }

    /* ----------------------------------------
       ALERT BOX - Smaller padding
       ---------------------------------------- */
    .alert-box {
        padding: var(--spacing-base) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    /* ----------------------------------------
       MODAL - Adjust for mobile
       ---------------------------------------- */
    .modal-content {
        padding: var(--spacing-2xl);
        width: 95%;
    }

    .modal-buttons {
        flex-direction: column;
    }

    .modal-buttons .btn {
        width: 100%;
    }

    /* ----------------------------------------
       FOOTER - Reduce padding
       ---------------------------------------- */
    footer {
        padding: var(--spacing-xl) var(--spacing-lg);
        font-size: var(--font-size-sm);
    }

    /* ----------------------------------------
       FORM INPUTS - Adjust sizing
       ---------------------------------------- */
    input[type="text"],
    textarea {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: var(--spacing-base);
    }

    .label {
        font-size: var(--font-size-sm);
    }

    .input-field {
        margin-bottom: var(--spacing-lg);
    }
}

/**
 * Extra Small Mobile Breakpoint: 375px and below
 * Further adjustments for very small screens
 */
@media (max-width: 375px) {
    .content-area {
        padding: var(--spacing-lg) var(--spacing-base);
    }

    .tab-container {
        margin-left: calc(-1 * var(--spacing-base));
        margin-right: calc(-1 * var(--spacing-base));
        padding-left: var(--spacing-base);
        padding-right: var(--spacing-base);
    }

    .tab {
        min-width: calc(100% - 32px);
    }

    .content-title {
        font-size: 20px;
    }
}


/* ============================================================================
   END OF STYLESHEET
   ============================================================================ */
