/* ================================================================================
   AISIM COLOR SYSTEM - Base Colors and Usage Guide
   ================================================================================ */

/* Primary Color Palette - Calm and Professional */
:root {
    /* Primary Colors - Used for main UI elements */
    --primary-blue: #4A90E2;        /* Main buttons, links, primary actions */
    --primary-blue-hover: #357ABD;  /* Button hover states */
    --primary-blue-light: #E8F2FF;  /* Light backgrounds, highlights */
    
    /* Secondary Colors - Used for supporting elements */
    --secondary-teal: #17A2B8;      /* Secondary buttons, curriculum elements */
    --secondary-teal-hover: #138496; /* Secondary button hover states */
    --secondary-teal-light: #E8F8F9; /* Light teal backgrounds */
    
    /* Neutral Colors - Used for text, backgrounds, borders */
    --neutral-white: #FFFFFF;       /* Main background, cards */
    --neutral-light-gray: #F8F9FA;  /* Light backgrounds, inactive states */
    --neutral-medium-gray: #E9ECEF; /* Borders, dividers */
    --neutral-dark-gray: #6C757D;   /* Secondary text, disabled states */
    --neutral-text: #333333;        /* Primary text color */
    --neutral-text-light: #666666;  /* Secondary text, labels */
    
    /* Success/Positive Colors - Used for positive feedback, active states */
    --success-green: #28A745;       /* Success messages, positive changes */
    --success-green-light: #D4EDDA; /* Success backgrounds */
    
    /* Warning Colors - Used for warnings, attention */
    --warning-yellow: #FFC107;      /* Warning messages, edit buttons */
    --warning-yellow-hover: #E0A800; /* Warning button hover states */
    --warning-yellow-light: #FFF3CD; /* Warning backgrounds */
    
    /* Danger Colors - Used for errors, negative feedback */
    --danger-red: #DC3545;          /* Error messages, negative changes */
    --danger-red-light: #F8D7DA;    /* Error backgrounds */
    
    /* Scenario-Specific Colors - Calm backgrounds for simulation content */
    --scenario-bg: #F5F7FA;         /* Main scenario background - calm blue-gray */
    --scenario-card: #FFFFFF;       /* Scenario content cards */
    --scenario-border: #E1E8ED;     /* Scenario card borders */
    --scenario-text: #2C3E50;       /* Scenario text color - dark blue-gray */
    --scenario-accent: #3498DB;     /* Scenario accents, highlights */
    
    /* Feedback Colors - Enhanced feedback presentation */
    --feedback-bg: #F8F9FA;         /* Feedback modal background */
    --feedback-card: #FFFFFF;       /* Feedback content cards */
    --feedback-border: #DEE2E6;     /* Feedback card borders */
    --feedback-success: #D1ECF1;    /* Positive feedback backgrounds */
    --feedback-warning: #FFF3CD;    /* Warning feedback backgrounds */
    --feedback-info: #E2E3E5;       /* Informational feedback backgrounds */
    
    /* Progress/Status Colors - Used for parameters and progress indicators */
    --progress-bg: #E9ECEF;         /* Progress bar backgrounds */
    --progress-fill: #007BFF;       /* Progress bar fill color */
    --status-active: #28A745;       /* Active status indicators */
    --status-inactive: #6C757D;     /* Inactive status indicators */
    
    /* Shadow and Depth Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);   /* Light shadows for cards */
    --shadow-medium: rgba(0, 0, 0, 0.15); /* Medium shadows for modals */
    --shadow-heavy: rgba(0, 0, 0, 0.2);   /* Heavy shadows for overlays */

    /* Base Colors */
    --primary: #3498DB;         /* Primary brand color */
    --primary-dark: #2980B9;    /* Darker shade of primary */
    --secondary: #2ECC71;       /* Secondary brand color */
    --secondary-dark: #27AE60;  /* Darker shade of secondary */
    --accent: #E74C3C;         /* Accent color for important elements */
    --accent-dark: #C0392B;    /* Darker shade of accent */
    
    /* Text Colors */
    --text-primary: #2C3E50;    /* Main text color */
    --text-secondary: #7F8C8D;  /* Secondary text color */
    --text-light: #ECF0F1;     /* Light text color */
    --text-dark: #2C3E50;      /* Dark text color */
    
    /* Background Colors */
    --bg-primary: #FFFFFF;      /* Main background color */
    --bg-secondary: #F5F6FA;   /* Secondary background color */
    --bg-dark: #34495E;        /* Dark background color */
    --bg-light: #ECF0F1;      /* Light background color */
    
    /* Border Colors */
    --border-light: #BDC3C7;   /* Light border color */
    --border-dark: #7F8C8D;    /* Dark border color */
    
    /* Status Colors */
    --success: #2ECC71;        /* Success color */
    --warning: #F1C40F;        /* Warning color */
    --error: #E74C3C;         /* Error color */
    --info: #3498DB;          /* Info color */
}

/* ================================================================================
   BASE STYLES - Using the color system
   ================================================================================ */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6; /* Better line spacing for readability */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: var(--scenario-text); /* Using scenario text color for headings */
    font-weight: 600; /* Slightly bolder for better hierarchy */
    margin-bottom: 20px; /* Better spacing */
}

h2 {
    color: var(--scenario-text); /* Consistent heading color */
    font-weight: 600;
    margin-bottom: 15px;
}

h3 {
    color: var(--neutral-text-light); /* Slightly lighter for sub-headings */
    font-weight: 500;
    margin-bottom: 12px;
}

/* ================================================================================
   BUTTON STYLES - Using the color system
   ================================================================================ */

.auth-form .button {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(37,99,235,0.25);
    transition: all 0.2s ease;
}

.auth-form .button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(37,99,235,0.35);
}

.button.edit-button {
    background-color: var(--secondary);
}

.button.edit-button:hover {
    background-color: var(--secondary-dark);
}

.button.curriculum-button {
    background-color: var(--accent);
}

.button.curriculum-button:hover {
    background-color: var(--accent-dark);
}

.button.duplicate-button {
    background-color: var(--warning-yellow);
    color: var(--neutral-text);
}

.button.duplicate-button:hover {
    background-color: var(--warning-yellow-hover);
    color: var(--neutral-white);
}

/* Delete simulation section styling */
#delete-section {
    margin-top: 40px;
    padding: 25px;
    border-radius: 8px;
    background-color: #fff5f5;
    border: 1px solid #fed7d7;
}

#delete-section h2 {
    color: #e53e3e;
    margin-bottom: 10px;
    font-size: 1.3em;
}

#delete-section p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.5;
}

#delete-simulation-btn {
    background-color: #e53e3e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#delete-simulation-btn:hover {
    background-color: #c53030;
}

#delete-simulation-btn:active {
    background-color: #a52a2a;
}

.button.secondary {
    background-color: var(--neutral-medium-gray); /* Using neutral medium gray */
    color: var(--neutral-text); /* Using neutral text */
}

.button.secondary:hover {
    background-color: var(--neutral-dark-gray); /* Using neutral dark gray */
    color: var(--neutral-white); /* Using neutral white */
}

/* ================================================================================
   SCENARIO PRESENTATION STYLES - Enhanced with calm colors
   ================================================================================ */

/* Simulation Header */
.simulation-header {
    display: none;
}

/* Progress Indicator */
.progress-indicator {
    display: none;
}

/* ================================================================================
   DASHBOARD: Developer Mode toggle switch
   ================================================================================ */

.dev-toggle .switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

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

.dev-toggle .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--neutral-medium-gray);
    transition: 0.2s ease;
    border-radius: 999px;
}

.dev-toggle .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    top: 3px;
    background-color: var(--neutral-white);
    border-radius: 50%;
    transition: 0.2s ease;
    box-shadow: 0 1px 2px var(--shadow-light);
}

.dev-toggle input:checked + .slider {
    background-color: var(--success-green);
}

.dev-toggle input:focus + .slider {
    box-shadow: 0 0 0 2px rgba(40,167,69,0.25);
}

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

/* ================================================================================
   16:9 ASPECT RATIO OPTIMIZATION - New layout for desktop widescreen
   ================================================================================ */

/* Main game layout optimized for 16:9 desktop screens */
.game-layout-16x9 {
    display: grid;
    grid-template-columns: 420px 1fr; /* Wider sidebar for 16:10, more comfortable text width */
    gap: 28px; /* Slightly larger but efficient spacing */
    min-height: calc(100vh - 32px);
    align-items: start;
    transform: scale(0.9); /* zoom out 10% */
    transform-origin: top center;
    margin-top: 56px; /* reserve space for a future full-width header */
}

/* Left sidebar containing parameters and history */
.left-sidebar {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    padding-right: 8px;
}

/* Main content area taking up the center-right space */
.main-content-area {
    min-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
}

/* Compact parameters display for sidebar */
#parameters-display {
    background-color: var(--scenario-bg);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 2px 8px var(--shadow-light);
}

#parameters-display h3 {
    color: var(--scenario-accent);
    margin-bottom: 12px;
    font-size: 1.1em;
}

/* Quadrant-style parameters grid */
.parameters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.parameter-item {
    background-color: var(--scenario-card);
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 1px 3px var(--shadow-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1; /* make square */
    min-height: 150px;
}

.parameter-item strong {
    color: var(--scenario-text);
    display: block;
    margin-bottom: 6px;
    font-size: 0.95em;
    text-align: center;
}

/* Center and size the circular meter for quadrant */
.parameter-item .circular-meter {
    width: 64px;
    height: 64px;
    margin: 4px 0;
}

.parameter-item .parameter-value-text {
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--neutral-text-light);
}

/* Tighter badges inside quadrant */
.parameter-item .status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    transform: none;
}

/* Compact scenario history for sidebar */
.scenario-history-sidebar {
    background-color: var(--scenario-bg);
    border-radius: 10px;
    padding: 15px;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 2px 8px var(--shadow-light);
    height: fit-content;
}

.scenario-history-sidebar h3 {
    color: var(--scenario-accent);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--scenario-border);
    font-size: 1.1em;
}

/* Compact history items */
.history-item {
    background-color: var(--scenario-card);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 8px;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 1px 3px var(--shadow-light);
    transition: all 0.3s ease;
}

.history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.history-number {
    background-color: var(--scenario-accent);
    color: var(--neutral-white);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
}

.history-status {
    font-size: 0.75em;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 8px;
    background-color: var(--neutral-light-gray);
    color: var(--neutral-text-light);
}

.history-choice {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--scenario-border);
}

.history-choice strong {
    color: var(--scenario-text);
    font-size: 0.85em;
}

.history-choice p {
    margin-top: 4px;
    font-size: 0.8em;
    line-height: 1.3;
}

/* History item states */
.history-item.current {
    border-color: var(--scenario-accent);
    box-shadow: 0 2px 8px var(--shadow-medium);
    background-color: var(--primary-blue-light);
}

.history-item.completed {
    border-left: 3px solid var(--success-green);
}

.history-item.current .history-status {
    background-color: var(--scenario-accent);
    color: var(--neutral-white);
}

.history-item.completed .history-status {
    background-color: var(--success-green);
    color: var(--neutral-white);
}

/* Exit button repositioned to top-right of main area */
.header-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--scenario-border);
}

/* Remove the old scenario layout since we're using the new structure */
.scenario-layout {
    display: none;
}

/* Main scenario content adjusted for new layout */
.scenario-main-content {
    flex: 1;
    min-height: 400px;
}

/* Main scenario container optimized for wider space */
#scenario-container {
    max-width: 860px; /* reduced ~12% from 980px */
    width: 100%;
    background-color: var(--scenario-bg);
    border-radius: 12px;
    padding: 16px 19px; /* reduced ~12% from 18px 22px */
    margin: 10px 0; /* slightly tighter vertical space */
    border: 1px solid var(--scenario-border);
    box-shadow: 0 1px 8px var(--shadow-light);
    transform: scale(0.95); /* zoom out 5% */
    transform-origin: top center;
}

/* Scenario header styling */
.scenario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--scenario-accent);
}

.scenario-header h2 {
    color: var(--scenario-accent);
    font-size: 1.8em;
    margin: 0;
}

.scenario-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.scenario-number {
    background-color: var(--scenario-accent);
    color: var(--neutral-white);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 600;
}

/* Scenario content styling */
.scenario-content {
    margin-bottom: 18px;
}

/* Fixed-height scrollable scenario text area */
.scenario-content .ai-formatted-text {
    background-color: var(--scenario-card);
    padding: 18px;
    border-radius: 8px;
    margin-bottom: 18px;
    box-shadow: 0 1px 6px var(--shadow-light);
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--scenario-text);
    max-height: 260px; /* lock height */
    overflow-y: auto;  /* scroll if text is longer */
}

/* Nice scrollbars inside the scenario text box */
.scenario-content .ai-formatted-text::-webkit-scrollbar {
    width: 8px;
}
.scenario-content .ai-formatted-text::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
}
.scenario-content .ai-formatted-text::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
}
.scenario-content .ai-formatted-text::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.3);
}

/* Scenario actions */
.scenario-actions h3 {
    color: var(--scenario-text);
    margin-bottom: 20px;
    font-size: 1.3em;
    text-align: center;
}

.scenario-actions .choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 1fr)); /* Two-up choices across wider screens */
    gap: 14px;
}

/* Ensure choice buttons fill grid cells nicely */
.choice-button {
    width: 100%;
}

/* ================================================================================
   CHOICE BUTTONS - Enhanced styling for better visual hierarchy
   ================================================================================ */

.choices {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.choice-button {
    background-color: var(--scenario-card);
    border: 2px solid var(--scenario-border);
    padding: 25px;
    cursor: pointer;
    text-align: left;
    border-radius: 12px;
    height: 100%;
    min-height: 120px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--shadow-light);
    white-space: pre-line;
    color: var(--scenario-text);
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.choice-button:hover {
    background-color: var(--primary-blue-light);
    border-color: var(--primary-blue);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px var(--shadow-medium);
}

.choice-button:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px var(--shadow-medium);
}

.choice-content {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
}

/* Hide numeric badges on live answering cards */
.choices .choice-number {
    display: none !important;
}

/* Slightly increase font size for answering cards */
.choices .choice-text {
    font-size: 1.1em;
}

.choice-number {
    background-color: var(--scenario-accent);
    color: var(--neutral-white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9em;
    flex-shrink: 0;
}

.choice-text {
    flex: 1;
    font-size: 1.1em;
    line-height: 1.5;
}

/* ================================================================================
   FEEDBACK MODAL - Enhanced styling for better presentation
   ================================================================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--shadow-heavy);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--feedback-bg);
    padding: 30px;
    border-radius: 16px;
    max-width: 700px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px var(--shadow-heavy);
    border: 1px solid var(--feedback-border);
}

.modal-content h2 {
    color: var(--scenario-accent);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--scenario-accent);
}

.modal-actions {
    margin-top: 25px;
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid var(--feedback-border);
}

/* Feedback content sections */
.feedback-section {
    margin-bottom: 25px;
}

.feedback-section:last-child {
    margin-bottom: 0;
}

#feedback-content h4 {
    color: var(--scenario-text);
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: 600;
}

#feedback-content h4:first-child {
    margin-top: 0;
}

#feedback-content p {
    background-color: var(--feedback-card);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    border-left: 3px solid var(--scenario-accent);
    box-shadow: 0 1px 4px var(--shadow-light);
}

/* Parameter changes styling */
.parameter-changes {
    background-color: var(--feedback-info);
    padding: 15px;
    border-radius: 8px;
    margin: 10px 0;
    border-left: 3px solid var(--secondary-teal);
}

.parameter-change {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: var(--neutral-white);
    box-shadow: 0 1px 3px var(--shadow-light);
}

.parameter-change:last-child {
    margin-bottom: 0;
}

.parameter-change.positive {
    border-left: 3px solid var(--success-green);
}

.parameter-change.negative {
    border-left: 3px solid var(--danger-red);
}

.parameter-change.neutral {
    border-left: 3px solid var(--neutral-medium-gray);
}

.parameter-change strong {
    color: var(--scenario-text);
    font-weight: 600;
}

.change-value {
    color: var(--neutral-text);
    font-weight: 500;
}

.change-indicator {
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.parameter-change.positive .change-indicator {
    background-color: var(--success-green-light);
    color: var(--success-green);
}

.parameter-change.negative .change-indicator {
    background-color: var(--danger-red-light);
    color: var(--danger-red);
}

.parameter-change.neutral .change-indicator {
    background-color: var(--neutral-light-gray);
    color: var(--neutral-text-light);
}

/* Compact parameter changes for history sidebar */
.history-parameter-changes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--scenario-border);
}

.history-parameter-changes strong {
    color: var(--scenario-text);
    font-size: 0.85em;
    display: block;
    margin-bottom: 4px;
}

.parameter-changes-compact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.parameter-change-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75em;
    padding: 2px 4px;
    border-radius: 3px;
    background-color: var(--neutral-light-gray);
}

.parameter-change-compact.positive {
    background-color: #c3e6cb; /* Darker green for better definition */
    border-left: 2px solid var(--success-green);
}

.parameter-change-compact.negative {
    background-color: var(--danger-red-light);
    border-left: 2px solid var(--danger-red);
}

.parameter-change-compact.neutral {
    background-color: var(--neutral-light-gray);
    border-left: 2px solid var(--neutral-medium-gray);
}

.parameter-change-compact .param-name {
    font-weight: 600;
    color: var(--scenario-text);
    flex-shrink: 0;
}

.parameter-change-compact .change-value {
    color: var(--neutral-text);
    font-size: 0.7em;
}

.parameter-change-compact .change-indicator {
    font-weight: 600;
    font-size: 0.7em;
    color: var(--scenario-text);
}

/* ================================================================================
   SUMMARY CONTAINER - Enhanced styling
   ================================================================================ */

#summary-container {
    background-color: var(--scenario-bg);
    padding: 30px;
    border-radius: 12px;
    margin-top: 20px;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 2px 12px var(--shadow-light);
}

.summary-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--scenario-accent);
}

.summary-header h2 {
    color: var(--scenario-accent);
    margin-bottom: 15px;
    font-size: 2em;
}

.completion-stats {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.stat-item {
    background-color: var(--scenario-card);
    padding: 10px 20px;
    border-radius: 20px;
    color: var(--scenario-text);
    font-weight: 600;
    border: 1px solid var(--scenario-border);
    box-shadow: 0 1px 4px var(--shadow-light);
}

.summary-section {
    margin-bottom: 30px;
}

.summary-section h3 {
    color: var(--scenario-text);
    margin-bottom: 20px;
    font-size: 1.4em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--scenario-border);
}

/* Journey Timeline */
.journey-timeline {
    position: relative;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    position: relative;
}

.timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 40px;
    bottom: -25px;
    width: 2px;
    background-color: var(--scenario-border);
}

.timeline-marker {
    background-color: var(--scenario-accent);
    color: var(--neutral-white);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9em;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-content {
    flex: 1;
    background-color: var(--scenario-card);
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid var(--scenario-accent);
    box-shadow: 0 1px 4px var(--shadow-light);
}

.timeline-content h4 {
    color: var(--scenario-accent);
    margin-bottom: 10px;
    font-size: 1.1em;
}

.timeline-choice {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--scenario-border);
}

.timeline-choice strong {
    color: var(--scenario-text);
    font-size: 0.9em;
}

/* Enhanced timeline choices styling */
.timeline-choices {
    margin-top: 15px;
}

.timeline-choices strong {
    color: var(--scenario-accent);
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}

.timeline-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.timeline-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.95em;
    position: relative;
    transition: all 0.2s ease;
}

.timeline-option.selected {
    background: var(--success-green-light);
    border-left: 3px solid var(--success-green);
    font-weight: 500;
}

.timeline-option.not-selected {
    background: var(--neutral-light-gray);
    border-left: 3px solid var(--neutral-medium-gray);
    opacity: 0.8;
}

.timeline-option .option-number {
    background: var(--scenario-accent);
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8em;
    font-weight: 600;
    flex-shrink: 0;
}

.timeline-option.selected .option-number {
    background: var(--success-green);
}

.timeline-option .option-text {
    flex: 1;
    line-height: 1.4;
}

.timeline-option .selected-badge {
    background: var(--success-green);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    white-space: nowrap;
}

.summary-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

/* ================================================================================
   RESPONSIVE DESIGN - Mobile-friendly adjustments
   ================================================================================ */

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .scenario-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .scenario-history-sidebar {
        position: static;
        order: 2;
    }
    
    .scenario-main-content {
        order: 1;
    }
    
    .choices {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .choice-button {
        min-height: 100px;
        padding: 20px;
    }
    
    .choice-content {
        gap: 10px;
    }
    
    .choice-number {
        width: 25px;
        height: 25px;
        font-size: 0.8em;
    }
    
    #scenario-container {
        padding: 20px;
    }
    
    .scenario-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .modal-content {
        width: 95%;
        padding: 20px;
    }
    
    .parameters-grid {
        grid-template-columns: 1fr;
    }
    
    .completion-stats {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .summary-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .timeline-item {
        flex-direction: column;
        gap: 10px;
    }
    
    .timeline-item:not(:last-child)::after {
        left: 15px;
        top: 30px;
        bottom: -15px;
    }
}

/* ================================================================================
   LEGACY STYLES - Maintaining compatibility with existing elements
   ================================================================================ */

.simulation-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 15px;
}

#simulations-list {
    margin-top: 20px;
}

.simulation-item {
    background-color: var(--bg-primary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px var(--shadow-light);
}

.simulation-item h2 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.simulation-item p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

form label {
    margin-top: 10px;
    font-weight: bold;
    color: var(--neutral-text); /* Using neutral text color */
}

form input[type="text"],
form input[type="number"],
form textarea {
    padding: 10px; /* Slightly more padding */
    margin-top: 5px;
    border-radius: 6px; /* Rounded corners */
    border: 1px solid var(--scenario-border); /* Using scenario border color */
    width: 100%;
    box-sizing: border-box;
    background-color: var(--neutral-white); /* Using neutral white */
    color: var(--neutral-text); /* Using neutral text color */
}

form input[type="text"]:focus,
form input[type="number"]:focus,
form textarea:focus {
    outline: none; /* Remove default outline */
    border-color: var(--primary-blue); /* Using primary blue */
    box-shadow: 0 0 0 2px var(--primary-blue-light); /* Focus ring */
}

form button[type="button"] {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--neutral-dark-gray); /* Using neutral dark gray */
    color: var(--neutral-white); /* Using neutral white */
    border: none;
    border-radius: 6px; /* Rounded corners */
    cursor: pointer;
    align-self: flex-start;
    transition: all 0.3s ease; /* Smooth transitions */
}

form button[type="button"]:hover {
    background-color: var(--neutral-text); /* Using neutral text color */
}

.parameter {
    border: 1px solid var(--scenario-border); /* Using scenario border color */
    padding: 15px; /* More padding */
    margin-top: 10px;
    border-radius: 8px; /* Rounded corners */
    background-color: var(--scenario-card); /* Using scenario card background */
    box-shadow: 0 1px 4px var(--shadow-light); /* Subtle shadow */
}

/* ================================================================================
   CURRICULUM AND SPECIALIZED COMPONENTS - Enhanced styling
   ================================================================================ */

.curriculum-controls {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--secondary-teal-light); /* Using secondary teal light */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid var(--secondary-teal); /* Using secondary teal border */
}

.curriculum-block {
    border: 1px solid var(--scenario-border); /* Using scenario border color */
    padding: 15px;
    margin-top: 10px;
    border-radius: 8px; /* Rounded corners */
    background-color: var(--scenario-card); /* Using scenario card background */
    box-shadow: 0 1px 4px var(--shadow-light); /* Subtle shadow */
}

.curriculum-block h4 {
    margin-top: 0;
    color: var(--scenario-text); /* Using scenario text color */
    font-weight: 600; /* Bolder font weight */
}

.curriculum-block .remove-curriculum {
    background-color: var(--danger-red); /* Using danger red */
    color: var(--neutral-white); /* Using neutral white */
    border: none;
    padding: 5px 10px;
    border-radius: 4px; /* Rounded corners */
    cursor: pointer;
    float: right;
    transition: all 0.3s ease; /* Smooth transitions */
}

.curriculum-block .remove-curriculum:hover {
    background-color: #C82333; /* Darker red on hover */
}

.threshold-toggle-container {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--warning-yellow-light); /* Using warning yellow light */
    border-radius: 6px; /* Rounded corners */
    border: 1px solid var(--warning-yellow); /* Using warning yellow border */
}

.threshold-toggle-container label {
    font-weight: bold;
    color: var(--neutral-text); /* Using neutral text color */
}

.threshold-options {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--neutral-light-gray); /* Using neutral light gray */
    border-radius: 6px; /* Rounded corners */
    border: 1px solid var(--neutral-medium-gray); /* Using neutral medium gray border */
}

.progress-container {
    margin-top: 20px;
    padding: 15px;
    background-color: var(--scenario-bg); /* Using scenario background */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid var(--scenario-border); /* Using scenario border color */
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--neutral-text-light); /* Using neutral text light */
    font-size: 0.9em; /* Smaller font size */
}

.progress-bar-container {
    width: 100%;
    height: 20px;
    background-color: var(--progress-bg); /* Using progress background */
    border-radius: 10px; /* Rounded corners */
    overflow: hidden;
    box-shadow: inset 0 1px 3px var(--shadow-light); /* Inset shadow */
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--progress-fill); /* Using progress fill color */
    transition: width 0.3s ease; /* Smooth transitions */
    border-radius: 10px; /* Rounded corners */
}

/* ================================================================================
   HEADER AND NAVIGATION - Enhanced styling
   ================================================================================ */

/* Removed - using new header-actions style for 16:9 layout */

.view-controls {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background-color: var(--neutral-light-gray); /* Using neutral light gray */
    border-radius: 8px; /* Rounded corners */
    border: 1px solid var(--neutral-medium-gray); /* Using neutral medium gray border */
}

.view-controls label {
    font-weight: bold;
    color: var(--neutral-text); /* Using neutral text color */
}

/* ================================================================================
   SPECIALIZED DISPLAY COMPONENTS - Enhanced styling
   ================================================================================ */

.speedometer-container {
    text-align: center;
    margin: 15px 0;
    padding: 15px;
    background-color: var(--scenario-card);
    border-radius: 8px;
    border: 1px solid var(--scenario-border);
}

.speedometer-gauge {
    width: 140px;
    height: 70px;
    position: relative;
    margin: 0 auto;
    border-radius: 70px 70px 0 0;
    overflow: hidden;
    box-shadow: none;
    background: transparent; /* Ensure no default background */
}

/* High-good orientation (default): Using custom gradient graphic */
.speedometer-gauge.high-good {
    background: none; /* Remove any default background */
    background-image: url('../graphics/spedometer.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Ensure transparent background */
}

/* Low-good orientation: Using custom gradient graphic (flipped) */
.speedometer-gauge.low-good {
    background: none; /* Remove any default background */
    background-image: url('../graphics/spedometer.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent; /* Ensure transparent background */
    transform: scaleX(-1); /* Flip horizontally for reversed orientation */
}

.speedometer-needle {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 3px;
    height: 55px;
    background: linear-gradient(to top, #2c3e50 0%, #34495e 100%);
    transform-origin: bottom center;
    transform: translateX(-50%) rotate(-90deg);
    transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
    border-radius: 2px 2px 0 0;
    box-shadow: none;
    z-index: 10;
}

.speedometer-center {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 50%;
    border: none; /* Remove white border */
    box-shadow: none; /* Remove cast shadow */
    z-index: 20;
}

.speedometer-overlay {
    /* Overlay disabled to show custom graphic cleanly */
    display: none;
}

.speedometer-min, .speedometer-max {
    position: absolute;
    bottom: 5px;
    font-size: 0.8em; /* Smaller font size */
    color: var(--neutral-text-light); /* Using neutral text light */
    display: none; /* Hide the distracting 0 and 100 labels */
}

.speedometer-min {
    left: 10px;
}

.speedometer-max {
    right: 10px;
}

.display-type-container {
    margin-top: 10px;
    padding: 10px;
    background-color: var(--neutral-light-gray); /* Using neutral light gray */
    border-radius: 6px; /* Rounded corners */
    border: 1px solid var(--neutral-medium-gray); /* Using neutral medium gray border */
}

.display-type-container label {
    font-weight: bold;
    color: var(--neutral-text); /* Using neutral text color */
}

.display-type-select {
    margin-top: 5px;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid var(--scenario-border);
    background-color: var(--neutral-white);
    color: var(--neutral-text);
}

.speedometer-orientation-container {
    margin-top: 10px;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #e9ecef;
}

.speedometer-orientation-container label {
    font-weight: bold;
    color: var(--neutral-text);
    margin-bottom: 5px;
    display: block;
}

.speedometer-orientation-select {
    width: 100%;
    margin-top: 5px;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid var(--scenario-border);
    background-color: var(--neutral-white);
    color: var(--neutral-text);
    font-size: 0.9em;
}

.orientation-help {
    display: block;
    margin-top: 5px;
    color: #6c757d;
    font-size: 0.85em;
    font-style: italic;
}

/* ================================================================================
   CURRICULUM DISPLAY - Enhanced styling. boost
   ================================================================================ */

.curriculum-empty {
    text-align: center;
    padding: 40px;
    background-color: var(--neutral-light-gray); /* Using neutral light gray */
    border-radius: 8px; /* Rounded corners */
    border: 2px dashed var(--neutral-medium-gray); /* Dashed border */
    color: var(--neutral-text-light); /* Using neutral text light */
}

.curriculum-empty h3 {
    color: var(--neutral-text); /* Using neutral text color */
    margin-bottom: 10px;
}

.curriculum-empty p {
    margin: 0;
    font-style: italic;
}

.curriculum-display-block {
    background-color: var(--scenario-card); /* Using scenario card background */
    border: 1px solid var(--scenario-border); /* Using scenario border color */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding */
    margin-bottom: 15px; /* Bottom spacing */
    box-shadow: 0 1px 4px var(--shadow-light); /* Subtle shadow */
}

.curriculum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px; /* Bottom spacing */
    padding-bottom: 10px; /* Bottom padding */
    border-bottom: 1px solid var(--scenario-border); /* Using scenario border color */
}

.curriculum-header h3 {
    margin: 0;
    color: var(--scenario-text); /* Using scenario text color */
    font-weight: 600; /* Bolder font weight */
}

.curriculum-tags {
    display: flex;
    gap: 8px; /* Gap between tags */
    flex-wrap: wrap;
}

.curriculum-tag {
    background-color: var(--secondary-teal-light); /* Using secondary teal light */
    color: var(--secondary-teal); /* Using secondary teal */
    padding: 4px 8px; /* Padding */
    border-radius: 12px; /* Rounded corners */
    font-size: 0.8em; /* Smaller font size */
    font-weight: 500; /* Medium font weight */
}

.curriculum-content {
    margin-bottom: 15px; /* Bottom spacing */
}

.curriculum-content p {
    margin-bottom: 10px; /* Bottom spacing */
    line-height: 1.6; /* Good line spacing */
    color: var(--neutral-text); /* Using neutral text color */
}

.curriculum-source {
    font-style: italic;
    color: var(--neutral-text-light); /* Using neutral text light */
    font-size: 0.9em; /* Smaller font size */
    margin-top: 10px; /* Top spacing */
}

.curriculum-files {
    margin-top: 15px; /* Top spacing */
    padding-top: 15px; /* Top padding */
    border-top: 1px solid var(--scenario-border); /* Using scenario border color */
}

.curriculum-files ul {
    list-style: none; /* Remove list style */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

.curriculum-files li {
    margin-bottom: 5px; /* Bottom spacing */
}

.curriculum-files a {
    color: var(--primary-blue); /* Using primary blue */
    text-decoration: none; /* Remove underline */
    transition: color 0.3s ease; /* Smooth transitions */
}

.curriculum-files a:hover {
    color: var(--primary-blue-hover); /* Using primary blue hover */
    text-decoration: underline; /* Add underline on hover */
}

/* ================================================================================
   MODE INDICATORS - Enhanced styling
   ================================================================================ */

.strict-mode {
    color: var(--danger-red); /* Using danger red */
    font-weight: 500; /* Medium font weight */
}

.flexible-mode {
    color: var(--secondary-teal); /* Using secondary teal */
    font-style: italic;
}

/* ================================================================================
   AI FORMATTED TEXT - Enhanced styling for better readability
   ================================================================================ */

.ai-formatted-text {
    white-space: pre-line; /* Preserves line breaks from \n characters */
    line-height: 1.7; /* Better line spacing for readability */
    margin-bottom: 15px; /* Space between paragraphs */
    color: var(--scenario-text); /* Using scenario text color */
}

.ai-formatted-text p {
    margin-bottom: 12px; /* Space between paragraphs */
}

/* ================================================================================
   FINAL FEEDBACK ENHANCED STYLING - Professional and engaging presentation
   ================================================================================ */

.final-feedback-container {
    background: linear-gradient(135deg, var(--feedback-bg), var(--feedback-card));
    border-radius: 16px;
    padding: 30px;
    margin: 20px 0;
    box-shadow: 0 8px 32px var(--shadow-medium);
    border: 1px solid var(--feedback-border);
    position: relative;
    overflow: hidden;
}

/* ================================================================================
   PAGE HEADER STYLING - For pages with back buttons
   ================================================================================ */

.page-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--scenario-border);
}

.page-header h1 {
    margin: 0;
    color: var(--primary-blue);
    font-size: 2.2em;
    font-weight: 600;
}

.back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 1em;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: var(--scenario-card);
    border: 2px solid var(--scenario-border);
    color: var(--scenario-text);
    cursor: pointer;
}

.back-button:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--shadow-medium);
}

.back-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px var(--shadow-medium);
}

/* Final button styling for last scenario */
.final-button {
    background: linear-gradient(135deg, var(--success-green), #28a745);
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    border: none;
}

.final-button:hover {
    background: linear-gradient(135deg, #28a745, var(--success-green));
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
}

/* Replay mode parameter highlighting */
.replay-mode .parameters-container {
    border: 2px solid var(--primary-blue);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.05), rgba(74, 144, 226, 0.02));
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
}

.replay-mode .parameters-container h3 {
    color: var(--primary-blue);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.replay-mode .parameters-container h3::before {
    content: "📽️";
    font-size: 1.1em;
}

.replay-mode .parameter {
    transition: all 0.3s ease;
}

.replay-mode .parameter:hover {
    background: rgba(74, 144, 226, 0.08);
    border-radius: 6px;
    padding: 8px;
    margin: -8px;
}

/* ================================================================================
   SIMPLIFIED FEEDBACK STYLING - Clean, straightforward presentation
   ================================================================================ */

.simple-feedback-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--scenario-border);
}

.simple-feedback-header h2 {
    color: var(--primary-blue);
    font-size: 1.8em;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.simple-feedback-header p {
    color: var(--neutral-text-light);
    font-size: 1.1em;
    margin: 0;
}

.simple-feedback-content {
    display: grid;
    gap: 25px;
}

.simple-feedback-section {
    background: var(--scenario-card);
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid var(--primary-blue);
    box-shadow: 0 2px 8px var(--shadow-light);
}

.simple-feedback-section h3 {
    color: var(--primary-blue);
    font-size: 1.2em;
    margin: 0 0 15px 0;
    font-weight: 600;
}

.simple-feedback-section p {
    color: var(--scenario-text);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.simple-feedback-section ul {
    margin: 12px 0;
    padding-left: 20px;
}

.simple-feedback-section li {
    color: var(--scenario-text);
    line-height: 1.6;
    margin-bottom: 8px;
}

.simple-feedback-section strong {
    color: var(--primary-blue);
    font-weight: 600;
}

/* Color coding for different sections */
.summary-section {
    border-left-color: var(--primary-blue);
}

.strong-section {
    border-left-color: var(--success-green);
}

.strong-section h3 {
    color: var(--success-green);
}

.weak-section {
    border-left-color: var(--danger-red);
}

.weak-section h3 {
    color: var(--danger-red);
}

.tips-section {
    border-left-color: var(--secondary-teal);
}

.tips-section h3 {
    color: var(--secondary-teal);
}

.no-feedback {
    text-align: center;
    color: var(--neutral-text-light);
    font-style: italic;
    padding: 20px;
}

/* ================================================================================
   USER INFORMATION SECTION - Profile page user details
   ================================================================================ */

.user-info-section {
    margin-bottom: 30px;
}

.user-info-card {
    background: var(--scenario-card);
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px var(--shadow-light);
    border: 1px solid var(--scenario-border);
}

.user-info-header h3 {
    color: var(--primary-blue);
    font-size: 1.3em;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.user-info-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.info-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 10px 0;
    border-bottom: 1px solid var(--scenario-border);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: var(--scenario-text);
    min-width: 120px;
    flex-shrink: 0;
}

.info-value {
    color: var(--neutral-text);
    flex: 1;
}

/* Role styling */
.role-player {
    color: var(--primary-blue);
    font-weight: 500;
}

.role-moderator {
    color: var(--success-green);
    font-weight: 600;
}

.role-global_admin {
    color: var(--danger-red);
    font-weight: 600;
}

/* Teams styling */
.teams-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    flex: 1;
}

.team-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.team-name {
    font-weight: 600;
    margin-bottom: 2px;
}

.team-description {
    font-size: 0.8em;
    opacity: 0.9;
    text-align: center;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-teams {
    color: var(--neutral-text-light);
    font-style: italic;
}

/* Responsive design for user info */
@media (max-width: 768px) {
    .info-row {
        flex-direction: column;
        gap: 8px;
    }
    
    .info-label {
        min-width: auto;
    }
    
    .teams-container {
        justify-content: flex-start;
    }
    
    .team-badge {
        font-size: 0.85em;
        padding: 6px 10px;
    }
}

.final-feedback-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-blue), var(--secondary-teal), var(--scenario-accent));
}

.final-feedback-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--feedback-border);
}

.final-feedback-icon {
    font-size: 2.5em;
    color: var(--primary-blue);
    opacity: 0.8;
}

.final-feedback-title {
    font-size: 1.8em;
    font-weight: 700;
    color: var(--scenario-text);
    margin: 0;
    letter-spacing: -0.5px;
}

.final-feedback-subtitle {
    font-size: 1.1em;
    color: var(--neutral-text-light);
    margin: 5px 0 0 0;
    font-weight: 400;
}

.final-feedback-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--scenario-text);
}

.final-feedback-content .feedback-section {
    margin-bottom: 28px;
    padding: 20px;
    background: var(--feedback-card);
    border-radius: 12px;
    border-left: 4px solid var(--scenario-accent);
    box-shadow: 0 2px 8px var(--shadow-light);
    position: relative;
}

.final-feedback-content .feedback-section:last-child {
    margin-bottom: 0;
}

.final-feedback-content .feedback-section h3 {
    color: var(--scenario-accent);
    font-size: 1.3em;
    font-weight: 600;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.final-feedback-content .feedback-section h3::before {
    content: '▶';
    color: var(--primary-blue);
    font-size: 0.8em;
}

.final-feedback-content .feedback-section p {
    margin-bottom: 15px;
    line-height: 1.7;
}

.final-feedback-content .feedback-section p:last-child {
    margin-bottom: 0;
}

.final-feedback-content .key-insight {
    background: var(--primary-blue-light);
    border-left: 4px solid var(--primary-blue);
    padding: 18px;
    margin: 20px 0;
    border-radius: 8px;
    font-weight: 500;
    position: relative;
}

.final-feedback-content .key-insight::before {
    content: '💡';
    position: absolute;
    top: 15px;
    left: -15px;
    background: var(--primary-blue);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
}

.final-feedback-content .strengths-section {
    background: var(--success-green-light);
    border-left-color: var(--success-green);
}

.final-feedback-content .improvements-section {
    background: var(--warning-yellow-light);
    border-left-color: var(--warning-yellow);
}

.final-feedback-content .consequences-section {
    background: var(--error-red-light);
    border-left-color: var(--error-red);
}

.final-feedback-content .recommendations-section {
    background: var(--secondary-teal-light);
    border-left-color: var(--secondary-teal);
}

.final-feedback-content .feedback-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.final-feedback-content .feedback-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--feedback-border);
    position: relative;
    padding-left: 25px;
}

.final-feedback-content .feedback-list li:last-child {
    border-bottom: none;
}

.final-feedback-content .feedback-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 12px;
    color: var(--success-green);
    font-weight: bold;
}

.final-feedback-content .feedback-list.improvements li::before {
    content: '⚠';
    color: var(--warning-yellow);
}

.final-feedback-content .feedback-list.consequences li::before {
    content: '⚡';
    color: var(--error-red);
}

.final-feedback-content .feedback-list.recommendations li::before {
    content: '📝';
    color: var(--secondary-teal);
}

.final-feedback-content .highlighted-quote {
    font-style: italic;
    font-size: 1.15em;
    color: var(--primary-blue);
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: var(--feedback-card);
    border-radius: 12px;
    border: 2px solid var(--primary-blue-light);
    position: relative;
}

.final-feedback-content .highlighted-quote::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 15px;
    font-size: 3em;
    color: var(--primary-blue);
    line-height: 1;
}

.final-feedback-content .highlighted-quote::after {
    content: '"';
    position: absolute;
    bottom: -25px;
    right: 15px;
    font-size: 3em;
    color: var(--primary-blue);
    line-height: 1;
}

.final-feedback-content .summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.final-feedback-content .stat-item {
    text-align: center;
    padding: 15px;
    background: var(--feedback-card);
    border-radius: 8px;
    border: 1px solid var(--feedback-border);
}

.final-feedback-content .stat-value {
    font-size: 1.4em;
    font-weight: 700;
    color: var(--primary-blue);
    display: block;
}

.final-feedback-content .stat-label {
    font-size: 0.9em;
    color: var(--neutral-text-light);
    margin-top: 5px;
}

/* Mobile responsiveness for final feedback */
@media (max-width: 768px) {
    .final-feedback-container {
        padding: 20px;
        margin: 15px 0;
    }
    
    .final-feedback-header {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .final-feedback-title {
        font-size: 1.5em;
    }
    
    .final-feedback-content .feedback-section {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .final-feedback-content .summary-stats {
        grid-template-columns: 1fr;
    }
    
    .final-feedback-content .highlighted-quote {
        font-size: 1.05em;
        padding: 15px;
    }
}

/* ================================================================================
   LEGACY AI FORMATTED TEXT - Keep existing for backward compatibility
   ================================================================================ */

/* Ensure scenario text and feedback are properly formatted */
#scenario-container p,
#feedback-content p,
#summary-container p {
    white-space: pre-line;
    line-height: 1.7;
    margin-bottom: 15px;
    color: var(--scenario-text); /* Using scenario text color */
}

/* ================================================================================
   UTILITY CLASSES - Additional helper classes
   ================================================================================ */

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.rounded {
    border-radius: 8px;
}

.shadow {
    box-shadow: 0 2px 8px var(--shadow-light);
}

.shadow-medium {
    box-shadow: 0 4px 12px var(--shadow-medium);
}

.shadow-heavy {
    box-shadow: 0 8px 24px var(--shadow-heavy);
}

/* ================================================================================
   PARAMETERS DISPLAY - Enhanced styling
   ================================================================================ */

/* Removed - using new compact parameter styles for 16:9 layout */

.parameter-value-text {
    color: var(--neutral-text-light);
    font-size: 0.9em;
    margin-top: 5px;
}

.inactive-parameter {
    opacity: 0.6;
    background-color: var(--neutral-light-gray);
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8em;
    font-weight: 600;
    margin-left: 8px;
}

.status-badge.active {
    background-color: var(--success-green-light);
    color: var(--success-green);
}

.status-badge.inactive {
    background-color: var(--neutral-medium-gray);
    color: var(--neutral-dark-gray);
}

/* Simulation run status badges */
.status-badge.status-completed {
    background-color: var(--success-green-light);
    color: var(--success-green);
}

.status-badge.status-in-progress {
    background-color: #fff3cd;
    color: #856404;
}

.status-badge.status-abandoned {
    background-color: #f8d7da;
    color: #721c24;
}

/* Disabled simulation cards */
.profile-simulation-card.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-simulation-card.disabled:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ================================================================================
   PROGRESS AND LOADING - Enhanced styling
   ================================================================================ */

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.55); /* dark, semi-transparent */
    font-size: 1.5em;
    z-index: 9999;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    animation: overlayFade 180ms ease;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: var(--neutral-white);
    font-weight: 500;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-left: 4px solid var(--neutral-white);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 1.2em;
    letter-spacing: 0.5px;
    animation: pulse 2s ease-in-out infinite;
}

/* Ensure overlay message is bright and bold on the dimmed background */
#loading-overlay .loading-text {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 1.25rem;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* ================================================================================
   ANIMATIONS - Enhanced animations
   ================================================================================ */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

@keyframes overlayFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header Styles */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

#username-display {
    font-weight: 500;
    color: var(--text-primary);
}

/* Team Admin Actions Styling - inline in hotbar, no backdrop */
#team-admin-actions {
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border-left: none;
}

#team-management-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

#team-management-buttons .button {
    background: var(--secondary-teal);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: inline-block;
}

#team-management-buttons .button:hover {
    background: var(--secondary-teal-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

#team-management-buttons strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-right: 10px;
}

@media (max-width: 768px) {
    #team-admin-actions {
        margin: 0;
        padding: 0;
    }
    
    #team-management-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    #team-management-buttons .button {
        width: 100%;
        text-align: center;
        margin: 5px 0;
    }
}

/* Authentication Form Styles */
.auth-form {
    max-width: 420px;
    margin: 0;
    padding: 32px 28px; /* slight inset to avoid visual collision */
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    backdrop-filter: blur(16px);
}

.register-page .auth-form {
    max-width: 504px; /* 20% wider than 420px */
    padding: 32px 28px; /* keep symmetric padding on wider card */
}

.auth-form h1 {
    text-align: left;
    color: #1a1a1a;
    margin: 0 0 16px 0;
    font-size: 2rem;
    font-weight: 700;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-weight: 500;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    font-size: 15px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all 0.2s ease;
    box-sizing: border-box; /* prevent overflow/collision with card edge */
}

/* Ensure text inputs in auth forms match other inputs' rounding */
.auth-form input[type="text"] {
    border-radius: 12px;
}

.form-group input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59,130,246,0.15);
    transform: translateY(-1px);
}

/* Color picker styling */
.color-picker-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

.color-picker-container input[type="color"] {
    width: 50px;
    height: 40px;
    border: 2px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.color-picker-container input[type="color"]:hover {
    border-color: var(--primary);
}

.color-preview-info {
    flex: 1;
    color: var(--text-secondary);
    font-size: 0.9em;
    line-height: 1.4;
}

.color-preview-info span {
    display: block;
    font-style: italic;
}

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.10) 100%),
                url('/images/backdrop.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.auth-body {
    overflow: hidden;
}

.error-message {
    color: #b91c1c;
    background-color: #fee2e2;
    padding: 12px 14px;
    border-radius: 10px;
    margin-top: 16px;
    text-align: left;
}

/* Button Styles */
.button {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: var(--primary-dark);
}

.edit-button {
    background-color: var(--secondary);
}

.edit-button:hover {
    background-color: var(--secondary-dark);
}

.curriculum-button {
    background-color: var(--accent);
}

.curriculum-button:hover {
    background-color: var(--accent-dark);
}

/* Simulation List Styles */
.simulation-item {
    background-color: var(--bg-primary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 5px var(--shadow-light);
}

.simulation-item h2 {
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: 10px;
}

.simulation-item p {
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.simulation-actions {
    display: flex;
    gap: 10px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .header {
        flex-direction: column;
        text-align: center;
    }
    
    .user-info {
        margin-top: 15px;
    }
    
    .simulation-actions {
        flex-direction: column;
    }
    
    .button {
        width: 100%;
        text-align: center;
    }
} 

/* ================================================================================
   RESPONSIVE DESIGN - Mobile-friendly adjustments
   ================================================================================ */

@media (max-width: 1200px) {
    .game-layout-16x9 {
        grid-template-columns: 320px 1fr;
        gap: 20px;
    }
    
    .left-sidebar {
        gap: 15px;
    }
    
    #parameters-display,
    .scenario-history-sidebar {
        padding: 12px;
    }
}

@media (max-width: 968px) {
    .game-layout-16x9 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .left-sidebar {
        flex-direction: row;
        position: static;
        max-height: none;
        overflow-y: visible;
        padding-right: 0;
    }
    
    .left-sidebar > * {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .left-sidebar {
        flex-direction: column;
    }
    
    .header-actions {
        justify-content: center;
    }
    
    #scenario-container {
        padding: 20px;
    }
} 

@media (max-width: 768px) {
    .container {
        padding: 10px;
    }

    .scenario-layout {
        flex-direction: column;
        gap: 20px;
    }

    .scenario-history-sidebar {
        order: 2;
    }

    .scenario-main-content {
        order: 1;
    }

    .choices {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .choice-button {
        min-height: 100px;
        padding: 20px;
    }

    .choice-content {
        flex-direction: column;
        text-align: center;
    }

    .choice-number {
        margin-bottom: 10px;
    }

    #scenario-container {
        padding: 15px;
    }

    .scenario-header {
        flex-direction: column;
        gap: 10px;
    }

    .modal-content {
        width: 95%;
        margin: 10px;
        padding: 20px;
    }

    .parameters-grid {
        grid-template-columns: 1fr;
    }

    .completion-stats {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .summary-actions {
        flex-direction: column;
        align-items: center;
    }

    .timeline-item {
        flex-direction: column;
        gap: 10px;
    }

    .timeline-item:not(:last-child)::after {
        left: 15px;
        top: 30px;
        bottom: -15px;
    }

    /* Mobile adjustments for enhanced timeline choices */
    .timeline-options {
        gap: 6px;
    }

    .timeline-option {
        padding: 8px 12px;
        font-size: 0.9em;
    }

    .timeline-option .option-number {
        width: 18px;
        height: 18px;
        font-size: 0.75em;
    }

    .timeline-option .selected-badge {
        padding: 2px 6px;
        font-size: 0.7em;
    }

    /* Mobile adjustments for replay choices */
    .replay-choice-option .choice-content {
        padding: 15px;
        gap: 12px;
    }

    .replay-choice-option .choice-text {
        font-size: 1em;
    }

    .selected-indicator {
        position: static;
        margin-top: 10px;
        align-self: flex-start;
    }
} 

/* File upload styles */
.file-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.3s ease;
    margin-bottom: 10px;
}

.file-upload-area:hover {
    border-color: var(--primary-blue);
}

.file-list {
    margin-top: 10px;
}

.file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    margin-bottom: 5px;
}

.file-item.uploading {
    background-color: #fff3cd;
    border-color: #ffeaa7;
}

.upload-progress {
    font-size: 14px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.file-item button {
    background-color: var(--danger-red);
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.file-item button:hover {
    background-color: #c53030;
}

/* Curriculum blocks styling */

/* ========================================
   MODERN DASHBOARD STYLES - iOS Inspired
   ======================================== */

/* Dashboard Container */
.dashboard-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
}

/* Main Content */
.dashboard-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Scrollable Simulations Container */
.simulations-container {
    height: 820px; /* Increased height to accommodate proper spacing */
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    margin-right: -8px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    margin-bottom: 0; /* Remove bottom margin since no footer buttons */
}

/* Custom Scrollbar */
.simulations-container::-webkit-scrollbar {
    width: 8px;
}

.simulations-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.simulations-container::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    transition: background 0.2s ease;
}

.simulations-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}



/* Search Section - Now a Hotbar */
.search-section {
    margin-bottom: 24px;
    flex-shrink: 0;
}

.search-hotbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.search-container {
    flex: 1;
    max-width: 400px;
}

.hotbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Action Sections in Hotbar */
.hotbar-actions .action-section {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0; /* Remove margin since it's now inline */
}

/* Compact Action Buttons */
.hotbar-actions .action-btn {
    padding: 12px 18px; /* Slightly smaller for hotbar */
    font-size: 0.9rem;
    white-space: nowrap;
}

.hotbar-actions .action-icon {
    font-size: 1rem;
}

/* Team Actions in Hotbar */
.hotbar-actions .team-actions-header {
    margin-right: 12px;
}

.hotbar-actions .team-buttons-row {
    gap: 8px;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease;
}

.search-input-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.search-icon {
    font-size: 1.1rem;
    color: #6b7280;
    margin-right: 10px;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 0.95rem;
    color: #374151;
    outline: none;
}

.search-input::placeholder {
    color: #9ca3af;
}

.clear-search-btn {
    background: rgba(107, 114, 128, 0.1);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    font-size: 0.8rem;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.clear-search-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* Simulations Grid */
.simulations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Force exactly 3 columns */
    gap: 32px; /* Increased gap for better spacing */
    padding: 8px; /* Additional padding around the grid */
}

/* No Results State */
.no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    height: 100%;
}

.no-results-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.4;
}

.no-results h3 {
    font-size: 1.5rem;
    color: #374151;
    margin: 0 0 12px 0;
}

.no-results p {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
}

/* Simulation Cards */
.simulation-card {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 20px; /* Reduced padding to compensate for increased spacing */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    height: 240px; /* Fixed height for consistent card size */
    margin: 8px; /* Additional margin around each card */
}

.simulation-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Card Header */
.card-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex: 1; /* Allow header to expand and fill available space */
    min-height: 0; /* Allow shrinking */
}

.sim-icon {
    font-size: 2.2rem;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.card-title-section {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%; /* Take full height of parent */
}

.card-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    line-height: 1.3;
    word-wrap: break-word;
    flex-shrink: 0; /* Don't shrink the title */
}

.card-description {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
    flex: 1;
    position: relative;
    overflow: hidden;
    max-height: 6em; /* Approximately 4 lines */
}

.card-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em; /* Height of the gradient fade */
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.9) 70%, rgba(255, 255, 255, 0.9) 100%);
    pointer-events: none;
}

/* Card Actions */
.card-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0; /* Never shrink the actions */
    margin-top: auto; /* Always push to bottom */
}

.play-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.play-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.admin-actions-row {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.secondary-btn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.1rem;
}

.secondary-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: translateY(-1px);
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.6;
}

.empty-state h3 {
    font-size: 1.5rem;
    color: #374151;
    margin: 0 0 12px 0;
}

.empty-state p {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
}

/* Dashboard Actions */
.dashboard-actions {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 40px;
}

.action-section {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.action-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.action-btn.secondary {
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.action-btn.secondary:hover {
    background: rgba(249, 250, 251, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn.team-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.action-btn.team-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.action-icon, .btn-icon {
    font-size: 1.1rem;
}

/* Team Actions */
.team-actions-header {
    display: flex;
    align-items: center;
    margin-right: 16px;
}

.team-label {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}

.team-buttons-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}



/* Modern Header */
.dashboard-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 24px 0;
    flex-shrink: 0;
    z-index: 100;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    flex: 1;
}

.dashboard-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}

.dashboard-subtitle {
    font-size: 1.1rem;
    color: #6b7280;
    margin: 0;
    font-weight: 400;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Header Buttons */
.profile-btn, .logout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.8);
    color: #374151;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.logout-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.profile-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

.logout-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .simulations-container {
        height: 680px; /* Adjust for smaller screens */
        padding: 16px;
    }
    
    .simulations-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 28px;
        padding: 6px;
    }
    
    .simulation-card {
        margin: 6px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .dashboard-title {
        font-size: 1.8rem;
    }
    
    .dashboard-subtitle {
        font-size: 1rem;
    }
    
    .header-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .dashboard-main {
        padding: 20px 16px;
    }
    
    .search-hotbar {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }
    
    .search-container {
        max-width: 100%;
    }
    
    .hotbar-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .simulations-container {
        height: 520px; /* Smaller height for mobile */
        padding: 12px;
    }
    
    .simulations-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 20px;
        padding: 4px;
    }
    
    .simulation-card {
        margin: 4px;
        height: 200px;
        padding: 16px;
    }
    
    .team-buttons-row {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .dashboard-main {
        padding: 16px;
    }
    
    .search-hotbar {
        padding: 12px;
        gap: 12px;
    }
    
    .hotbar-actions .action-btn {
        padding: 10px 14px;
        font-size: 0.85rem;
    }
    
    .search-input-wrapper {
        padding: 0 12px;
    }
    
    .search-input {
        padding: 10px 0;
        font-size: 0.9rem;
    }
    
    .header-content {
        padding: 0 16px;
    }
    
    .simulation-card {
        padding: 16px;
        margin: 2px;
        height: 180px;
    }
    
    .card-header {
        gap: 12px;
    }
    
    .sim-icon {
        width: 48px;
        height: 48px;
        font-size: 1.8rem;
    }
    
    .simulations-container {
        height: 420px; /* Even smaller for very small screens */
        padding: 8px;
    }
    
    .simulations-grid {
        gap: 16px;
        padding: 2px;
    }
}

/* Clickable Cards */
.clickable-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Simulation Preview Modal */
.simulation-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Modals that should appear centered below the fixed game header */
.modal-below-header {
    top: 48px; /* header height */
    height: calc(100% - 48px);
}

.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.simulation-modal-content {
    position: relative;
    max-width: 700px;
    width: 90%;
    max-height: 85vh;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: #1a1a1a;
}

.modal-close-btn {
    background: rgba(107, 114, 128, 0.1);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    font-size: 1.1rem;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 22px 10px; /* tighter vertical padding */
}

.modal-section {
    margin: 8px 0; /* tighter vertical spacing between sections */
}

/* First section: remove large top gap */
.modal-body .modal-section:first-child { margin-top: 2px; }

/* Last section: reduce bottom gap */
.modal-body .modal-section:last-child { margin-bottom: 4px; }

.modal-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px 0; /* reduce gap below headings */
    color: #374151;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-section p {
    color: #6b7280;
    line-height: 1.6;
    margin: 0;
}

/* Parameters Preview */
.parameters-preview {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Rectangular list cards for parameters */
.parameters-preview .parameter-item {
    background: rgba(249, 250, 251, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.9);
    border-radius: 8px;
    padding: 8px 12px; /* tighter card padding */
}

.param-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px; /* smaller gap between title and description */
}

.parameters-preview .param-icon { font-size: 0.95rem; }
.parameters-preview .param-name { font-weight: 600; color: #374151; flex: 1; font-size: 0.95rem; }
.parameters-preview .param-range { background: rgba(59, 130, 246, 0.1); color: #3b82f6; padding: 2px 6px; border-radius: 6px; font-size: 0.8rem; font-weight: 500; }
.parameters-preview .param-description { color: #6b7280; font-size: 0.83rem; line-height: 1.35; margin: 0; }

/* Simulation preview modal: prefer content-sized body, with a safe cap */
#simulation-modal .modal-body {
    flex: 0 1 auto;          /* stop stretching to full height */
    max-height: 65vh;        /* cap height; scroll if content exceeds */
    overflow-y: auto;
}

/* Make parameter list utilize width without huge side gutters */
#simulation-modal .parameters-preview {
    max-width: 560px;        /* comfortable reading width */
    margin: 0 auto;          /* center inside the section */
    max-height: 280px;       /* hard cap to prevent tall empty areas */
    overflow-y: auto;        /* scroll if long */
}

#simulation-modal .parameters-preview .parameter-item {
    width: 100%;
}

#simulation-modal .parameters-preview .param-description {
    overflow-wrap: anywhere; /* prevent overflow from long words */
}

/* Tighten section spacing specifically for the preview modal */
#simulation-modal .modal-section {
    margin: 6px 0;           /* slightly smaller section margin */
    padding: 0;              /* avoid extra vertical padding */
}

/* Curriculum Preview */
.curriculum-preview {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.curriculum-item {
    background: rgba(249, 250, 251, 0.8);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 12px;
    padding: 16px;
}

.curriculum-title {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}

.curriculum-content {
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

.curriculum-files {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.file-tag {
    display: inline-block;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.file-tag:hover {
    background: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
    transform: translateY(-1px);
}

/* No Content State */
.no-content {
    color: #9ca3af;
    font-style: italic;
    text-align: center;
    padding: 20px;
    margin: 0;
}

.no-content.error {
    color: #ef4444;
}

.loading-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #ffffff;
    font-weight: 700;
    font-size: 1.1rem;
}

.loading-content::before {
    content: '';
    margin-right: 0;
    animation: none;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Modal Footer */
.modal-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.modal-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-btn.primary {
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.modal-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.modal-btn.secondary {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.2);
}

.modal-btn.secondary:hover {
    background: rgba(107, 114, 128, 0.15);
    color: #374151;
}

/* ========================================
   MODERN PROFILE PAGE STYLES
   ======================================== */

/* Profile Stats Hotbar */
.profile-stats-hotbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 20px 28px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Account Information Card */
.account-info-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.account-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.account-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.account-details {
    flex: 1;
}

.account-role {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 2px;
}

.account-since {
    font-size: 0.9rem;
    color: #6b7280;
}

.teams-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.team-badge {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.no-teams {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.9rem;
}

/* Quick Stats */
.quick-stats {
    display: flex;
    gap: 24px;
    flex-shrink: 0;
}

.stat-item {
    text-align: center;
    min-width: 80px;
}

.stat-item .stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
    margin-bottom: 4px;
    line-height: 1;
}

.stat-item .stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Profile Simulation Cards */
.profile-simulation-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    height: 200px;
    cursor: pointer;
    position: relative;
}

.profile-simulation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 16px;
    pointer-events: none;
}

.profile-simulation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.98);
}

.profile-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.profile-sim-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(34, 197, 94, 0.3);
}

.profile-card-title-section {
    flex: 1;
    min-width: 0;
}

.profile-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.profile-completion-date {
    font-size: 0.8rem;
    color: #6b7280;
    margin: 0;
}

.profile-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
    flex-shrink: 0;
}

.profile-stat-badge {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
}

.completion-badge {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.scenarios-badge {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.duration-badge {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.profile-card-actions {
    margin-top: auto;
    display: flex;
    justify-content: center;
}

.view-details-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 8px rgba(59, 130, 246, 0.3);
}

.view-details-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Loading State for Profile */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 100%;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 16px;
}

.loading-text {
    color: #6b7280;
    font-size: 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Profile Responsive Design */
@media (max-width: 768px) {
    .profile-stats-hotbar {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
    }
    
    .account-info-card {
        width: 100%;
    }
    
    .quick-stats {
        justify-content: center;
        width: 100%;
    }
    
    .profile-simulation-card {
        height: auto;
        min-height: 240px;
    }
}

@media (max-width: 480px) {
    .account-header {
        gap: 12px;
    }
    
    .account-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .quick-stats {
        gap: 16px;
    }
    
    .stat-item .stat-number {
        font-size: 1.6rem;
    }
}

/* ========================================
   MODERN PROFILE PAGE STYLES
   ======================================== */

/* Profile Content Container */
.profile-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 32px;
    background: rgba(255, 255, 255, 0.8);
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
    justify-content: center;
}

.tab-btn:hover {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.tab-btn.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.tab-icon {
    font-size: 1.1rem;
}

/* Tab Content */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

/* Stats Tab - Modern Grid */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
    margin-bottom: 40px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.stat-card-modern {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(15px);
    min-height: 120px;
    position: relative;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.stat-card-modern:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.98);
}

.stat-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.stat-details {
    flex: 1;
}

.stat-card-modern .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1;
}

.stat-card-modern .stat-label {
    font-size: 1.1rem;
    color: #6b7280;
    font-weight: 500;
    text-transform: capitalize;
}

/* Activity Tab */
.activity-container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    width: 100%;
    max-width: none;
    position: relative;
}

.activity-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.section-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 32px;
    gap: 20px;
}

.filters-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.section-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.search-container-profile {
    position: relative;
    max-width: 400px;
    flex: 1;
    min-width: 250px;
}

.search-input-profile {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border: 2px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.search-input-profile:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon-profile {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 1.1rem;
}

/* Date Filter Styles */
.date-filter-container {
    position: relative;
    flex-shrink: 0;
}

.date-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border: 2px solid rgba(59, 130, 246, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.8);
    color: #374151;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.date-filter-btn:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: rgba(255, 255, 255, 0.95);
}

.date-filter-btn.active {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.date-icon {
    font-size: 1.1rem;
}

.filter-indicator {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    font-size: 0;
    margin-left: 4px;
}

.date-filter-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    min-width: 320px;
    z-index: 1000;
    animation: fadeInScale 0.2s ease-out;
}

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

.date-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.date-filter-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.close-date-filter {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.close-date-filter:hover {
    color: #374151;
}

.date-filter-options {
    padding: 16px 24px;
    display: flex;
    gap: 20px;
}

.date-option label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    color: #374151;
    cursor: pointer;
    font-weight: 500;
}

.date-option input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

.date-inputs {
    padding: 0 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.date-input-group label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.date-input-group input[type="date"] {
    padding: 12px 16px;
    border: 2px solid rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    color: #374151;
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.date-filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.filter-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.filter-btn.secondary {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.filter-btn.secondary:hover {
    background: rgba(107, 114, 128, 0.2);
    color: #374151;
}

.filter-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.filter-btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.activity-scroll-container {
    max-height: 600px;
    overflow-y: auto;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.6);
    padding: 32px;
    margin: -16px;
}

/* Custom Scrollbar for Activity Container */
.activity-scroll-container::-webkit-scrollbar {
    width: 8px;
}

.activity-scroll-container::-webkit-scrollbar-track {
    background: rgba(248, 250, 252, 0.3);
    border-radius: 8px;
}

.activity-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.4);
    border-radius: 8px;
}

.activity-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.6);
}

.completed-simulations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 24px;
    padding: 8px;
}

/* Info Tab */
.info-container {
    max-width: 800px;
    margin: 0 auto;
}

.user-name-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    margin-bottom: 40px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
}

.user-name-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 20px;
    pointer-events: none;
}

.user-avatar {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 20px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.user-name {
    font-size: 2.2rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.info-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.info-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 32px 28px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    min-height: 120px;
    position: relative;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 16px;
    pointer-events: none;
}

.info-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.98);
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.info-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.info-card h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.info-content-text {
    font-size: 1.1rem;
    color: #6b7280;
    line-height: 1.5;
}

/* Empty State Modern */
.empty-state-modern {
    text-align: center;
    padding: 80px 40px;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    margin: 16px;
}

.empty-state-modern .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-state-modern h3 {
    color: #374151;
    margin-bottom: 12px;
    font-size: 1.3rem;
    font-weight: 600;
}

.empty-state-modern p {
    margin-bottom: 24px;
    font-size: 1rem;
    line-height: 1.6;
}

/* Loading State for Profile */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px;
    width: 100%;
}

.loading-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(59, 130, 246, 0.1);
    border-left: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    color: #6b7280;
    font-size: 1rem;
    font-weight: 500;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design for Modern Profile */
@media (max-width: 768px) {
    .tab-navigation {
        margin: 0 16px 24px;
    }
    
    .tab-btn {
        min-width: 100px;
        padding: 10px 16px;
        font-size: 0.9rem;
    }
    
    .stats-grid-modern {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .stat-card-modern {
        padding: 24px 20px;
        gap: 16px;
    }
    
    .stat-icon {
        width: 56px;
        height: 56px;
        font-size: 1.6rem;
    }
    
    .stat-card-modern .stat-number {
        font-size: 2rem;
    }
    
    .filters-container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .search-container-profile {
        max-width: none;
    }
    
    .date-filter-dropdown {
        right: auto;
        left: 0;
        min-width: 280px;
    }
    
    .date-filter-options {
        flex-direction: column;
        gap: 12px;
    }
    
    .completed-simulations-grid {
        grid-template-columns: 1fr;
    }
    
    .activity-container {
        padding: 20px;
        margin: 0 16px;
    }
    
    .info-container {
        padding: 0 16px;
    }
}

@media (max-width: 480px) {
    .tab-navigation {
        flex-direction: column;
        gap: 4px;
    }
    
    .tab-btn {
        min-width: auto;
        justify-content: center;
    }
    
    .user-avatar {
        width: 64px;
        height: 64px;
        font-size: 2rem;
    }
    
    .user-name {
        font-size: 1.5rem;
    }
    
    .user-name-card {
        padding: 24px;
    }
}

/* Welcome message under the title */
.welcome-message {
    color: var(--neutral-text-light);
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Compact History Pill */
.history-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
    margin-bottom: 12px;
}

.history-pill:hover {
    background: rgba(59, 130, 246, 0.12);
}

.history-pill .pill-label {
    color: #1f2937;
    font-weight: 600;
    font-size: 0.9rem;
}

.pill-items {
    position: relative;
    flex: 1;
    height: 32px;
    overflow: hidden;
}

.pill-item {
    position: absolute;
    background: white;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.8rem;
    color: #374151;
    white-space: nowrap;
    min-width: 40px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

/* Stacked card positioning with fade effect */
.pill-item:nth-child(1) {
    top: 0;
    left: 0;
    z-index: 3;
    opacity: 1;
    transform: translateY(0px) scale(1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.pill-item:nth-child(2) {
    top: 2px;
    left: 4px;
    z-index: 2;
    opacity: 0.85;
    transform: translateY(1px) scale(0.98);
    box-shadow: 0 3px 6px rgba(0,0,0,0.12);
}

.pill-item:nth-child(3) {
    top: 4px;
    left: 8px;
    z-index: 1;
    opacity: 0.7;
    transform: translateY(2px) scale(0.96);
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.pill-item:nth-child(n+4) {
    top: 6px;
    left: 12px;
    z-index: 0;
    opacity: 0.5;
    transform: translateY(3px) scale(0.94);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* History Modal Content */
.history-modal-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.history-entry {
    background: rgba(255,255,255,0.9);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    padding: 12px 14px;
}

.history-entry .entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.history-entry .entry-title {
    font-weight: 700;
    color: #111827;
}

.history-entry .entry-choice {
    background: rgba(16,185,129,0.1);
    color: #065f46;
    border: 1px solid rgba(16,185,129,0.2);
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 0.8rem;
}

.history-entry .entry-text {
    color: #374151;
    margin: 6px 0 8px 0;
}

.history-entry .entry-effects {
    font-size: 0.85rem;
    color: #4b5563;
}

/* Expand text control */
.scenario-tools {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
.expand-text-btn {
    background: transparent;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    color: #374151;
}
.expand-text-btn:hover {
    background: rgba(0,0,0,0.05);
}

/* Expanded modal text */
.expanded-scenario-text {
    max-height: 70vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 18px;
    line-height: 1.8;
    color: #111827;
}

/* Circular parameter meter */
.circular-meter {
    width: 80px;
    height: 80px;
    margin: 8px 0;
}
.circular-chart {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.circular-chart .circle-bg {
    fill: none;
    stroke: #e5e7eb; /* neutral light */
    stroke-width: 3.8;
}
.circular-chart .circle {
    fill: none;
    stroke-width: 3.8;
    stroke-linecap: round;
    stroke: #3b82f6; /* primary blue */
    transition: stroke-dasharray 0.6s ease;
}
.circular-chart .percentage {
    fill: #1f2937;
    font-size: 0.4rem;
    text-anchor: middle;
    font-weight: 700;
}

/* Unified metric box to ensure consistent sizing */
.parameter-item .metric-box {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fit circular meter into metric box */
.parameter-item .metric-box .circular-meter {
    width: 100px;
    height: 100px;
}

/* Fit speedometer into metric box (centered baseline) */
.parameter-item .metric-box .speedometer-container {
    padding: 0;
    background: transparent;
    border: none;
    margin: 0;
}
.parameter-item .metric-box .speedometer-gauge {
    width: 100px;
    height: 50px;
}

/* Full-width top header */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 1000;
}
.top-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
}
.top-header-left { display: flex; align-items: center; gap: 10px; }
.app-brand { font-weight: 800; letter-spacing: 0.5px; color: #1f2937; }
.divider { width: 1px; height: 22px; background: rgba(0,0,0,0.12); }
.sim-title { font-weight: 600; color: #374151; }

/* Header progress */
.top-header-center { flex: 1; display: flex; justify-content: center; }
.header-progress { display: flex; align-items: center; gap: 10px; min-width: 620px; }
.header-progress-bar { width: 520px; height: 6px; background: rgba(0,0,0,0.08); border-radius: 999px; overflow: hidden; }
.header-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #34d399, #3b82f6); transition: width 200ms ease; }
.budget-mode .header-progress-fill { background: linear-gradient(90deg, #ef4444 0%, #f59e0b 33.33%, #10b981 66.66%, #10b981 100%); }
.header-progress-text { font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }

/* Header button */
.top-header-btn {
    display: inline-block;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    padding: 8px 14px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59,130,246,0.35);
}
.top-header-btn:hover {
    filter: brightness(1.05);
}

/* Header X icon */
.top-header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0,0,0,0.06);
    color: #111827;
    text-decoration: none;
    font-weight: 800;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.top-header-icon:hover { background: rgba(0,0,0,0.1); }

/* Fullscreen final feedback screen */
.final-feedback-screen {
    position: fixed;
    top: 48px; /* below header */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--app-bg, #f3f4f6);
    z-index: 900; /* below header */
    overflow-y: auto;
}
.final-feedback-wrapper {
    max-width: 1100px;
    margin: 24px auto 48px;
    padding: 0 20px 32px;
}
.final-feedback-wrapper .final-feedback-container {
    margin-top: 0;
}
/* Parameter numeric score label under metric boxes */
.parameter-score {
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    text-align: center;
}

/* Inbox button */
.inbox-btn {
    position: relative;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border: 1px solid rgba(59,130,246,0.2);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: pointer;
}
.inbox-btn:hover { background: rgba(59,130,246,0.15); }
.inbox-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 2px 5px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* Inbox list */
.inbox-list { display: flex; flex-direction: column; gap: 12px; }
.inbox-item { background: rgba(249,250,251,0.9); border: 1px solid rgba(229,231,235,0.9); border-radius: 10px; padding: 12px; }
.inbox-item.unread { border-color: #60a5fa; box-shadow: 0 0 0 2px rgba(96,165,250,0.15) inset; }
.inbox-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.inbox-item-date { color: #6b7280; font-size: 0.85rem; }
.inbox-item-text { margin: 0; color: #374151; line-height: 1.5; }

#history-modal.simulation-modal.modal-below-header { display: flex; align-items: center; justify-content: center; }