:root {
    /* ===== EDUCATIONAL COLOR PALETTE ===== */
    /* Based on UI Pro Max recommendations for learning apps */
    --primary-color: #0D9488;        /* Teal - Learning primary */
    --secondary-color: #2DD4BF;      /* Light Teal - Secondary */
    --accent-color: #EA580C;         /* Orange - CTA */
    --background-color: #F0FDFA;     /* Light mint background */
    --text-color: #134E4A;           /* Dark teal text */
    --border-color: #5EEAD4;         /* Teal border */
    --hover-color: #CCFBF1;          /* Lighter teal hover */
    
    /* Additional colors */
    --text-muted: #14B8A6;           /* Medium teal for muted text */
    --success-color: #10B981;        /* Green for success states */
    --white: #ffffff;
    
    /* ===== BUTTON DESIGN SYSTEM ===== */
    /* Primary Action Buttons - Main user actions */
    --btn-primary-bg: linear-gradient(45deg, #ff6b6b, #ffa500);
    --btn-primary-color: #ffffff;
    --btn-primary-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    --btn-primary-hover-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    
    /* Secondary Action Buttons - Alternative actions */
    --btn-secondary-bg: #f8f9fa;
    --btn-secondary-color: #666666;
    --btn-secondary-border: 2px solid #e0e0e0;
    --btn-secondary-hover-bg: #e9ecef;
    --btn-secondary-hover-border: 2px solid #cccccc;
    
    /* Icon Buttons - Compact circular buttons */
    --btn-icon-bg: #ffffff;
    --btn-icon-border: 2px solid #dddddd;
    --btn-icon-size: 44px;
    --btn-icon-size-small: 36px;
    
    /* Feature Buttons - Special feature actions (fireworks, check-in, etc.) */
    --btn-feature-fireworks-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-feature-checkin-bg: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --btn-feature-achievement-bg: linear-gradient(135deg, #ff9800, #f57c00);
    
    /* Button Sizing */
    --btn-padding: 12px 24px;
    --btn-padding-small: 8px 16px;
    --btn-padding-large: 14px 28px;
    --btn-border-radius: 25px;
    --btn-min-width: 120px;
    --btn-min-height-touch: 44px; /* WCAG touch target minimum */
    
    /* Button States */
    --btn-transition: all 0.3s ease;
    --btn-hover-transform: translateY(-2px);
    --btn-active-transform: translateY(0);
    
    /* ===== LABEL DESIGN SYSTEM ===== */
    /* Info Labels - Display information */
    --label-info-bg: #f1f3f5;
    --label-info-color: #6c757d;
    --label-info-border: 1px solid #dee2e6;
    
    /* Status Labels - Show status or badges */
    --label-status-bg: #e8f5e8;
    --label-status-color: #28a745;
    --label-status-border: 1px solid #c8e6c9;
    
    /* Form Labels - Form field labels */
    --label-form-color: #495057;
    --label-form-weight: 500;
    
    /* Label Sizing */
    --label-padding: 6px 12px;
    --label-border-radius: 15px;
    --label-font-size: 0.75em;
    
    /* Minecraft theme colors */
    --minecraft-grass: #7cbd6b;
    --minecraft-dirt: #8b6542;
    --minecraft-stone: #7d7d7d;
    --minecraft-diamond: #5dcde3;
    --minecraft-gold: #fcee4b;
    --minecraft-emerald: #41cd34;
    --minecraft-iron: #d8d8d8;
    --minecraft-wood: #9c6f3c;
    --minecraft-cobblestone: #7a7a7a;
    --minecraft-redstone: #c41919;
    
    /* ===== TYPOGRAPHY SYSTEM ===== */
    /* System fonts optimized for Chinese users - no external font dependencies */
    --font-heading: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-chinese: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* =====================================================
   BUTTON AND LABEL DESIGN SYSTEM
   统一按钮和标签风格设计系统
   
   Purpose: Centralized, consistent styling for all buttons and labels
   Maintains: Visual hierarchy, accessibility, and mobile UX
   ===================================================== */

/* ===== BASE BUTTON STYLES ===== */
/* Common properties for ALL buttons */
button,
.btn,
[class*="button"] {
    font-family: inherit;
    cursor: pointer;
    transition: var(--btn-transition);
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Respect user's motion preferences for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* SVG Icon Styling */
.menu-icon,
.settings-icon,
[class$="-icon"] svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Ensure all interactive elements have pointer cursor */
.museum-card,
.favorite-button,
.assessment-button,
.menu-button,
.settings-button {
    cursor: pointer;
}

button:disabled,
.btn:disabled,
[class*="button"]:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ===== PRIMARY BUTTONS ===== */
/* Main call-to-action buttons */
.btn-primary {
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    border: none;
    font-size: 0.95em;
    font-weight: 500;
    min-width: var(--btn-min-width);
    min-height: var(--btn-min-height-touch);
    background: var(--btn-primary-bg);
    color: var(--btn-primary-color);
    box-shadow: var(--btn-primary-shadow);
}

.btn-primary:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-primary-hover-shadow);
}

.btn-primary:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* ===== SECONDARY BUTTONS ===== */
/* Alternative actions, less prominent */
.btn-secondary {
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-size: 0.95em;
    font-weight: 500;
    min-width: var(--btn-min-width);
    min-height: var(--btn-min-height-touch);
    background: var(--btn-secondary-bg);
    color: var(--btn-secondary-color);
    border: var(--btn-secondary-border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--btn-secondary-hover-bg);
    border: var(--btn-secondary-hover-border);
}

.btn-secondary:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* ===== ICON BUTTONS ===== */
/* Compact circular buttons with icons */
.btn-icon,
[class$="-button-icon"],
[class$="-icon"] {
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    min-width: var(--btn-icon-size);
    min-height: var(--btn-icon-size);
    padding: 8px;
    border-radius: 50%;
    border: var(--btn-icon-border);
    background: var(--btn-icon-bg);
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-icon:hover:not(:disabled),
[class$="-button-icon"]:hover:not(:disabled),
[class$="-icon"]:hover:not(:disabled) {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-icon:active:not(:disabled),
[class$="-button-icon"]:active:not(:disabled),
[class$="-icon"]:active:not(:disabled) {
    transform: scale(1.05);
}

/* Smaller icon buttons for compact layouts */
.btn-icon-small {
    width: var(--btn-icon-size-small);
    height: var(--btn-icon-size-small);
    min-width: var(--btn-icon-size-small);
    min-height: var(--btn-icon-size-small);
    padding: 6px;
    font-size: 16px;
}

/* ===== FEATURE BUTTONS ===== */
/* Special buttons for specific features */
.btn-feature {
    padding: 6px 12px;
    border-radius: 15px;
    border: none;
    font-size: 0.75em;
    font-weight: 500;
    color: white;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-feature:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn-feature:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Feature button variants */
.btn-feature-fireworks {
    background: var(--btn-feature-fireworks-bg);
}

.btn-feature-checkin {
    background: var(--btn-feature-checkin-bg);
}

.btn-feature-achievement {
    background: var(--btn-feature-achievement-bg);
}

/* ===== UTILITY BUTTONS ===== */
/* Small buttons for editing, deleting, etc. */
.btn-utility {
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-utility:hover:not(:disabled) {
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

/* ===== TAB BUTTONS ===== */
/* Buttons used for tab navigation */
.tab-button {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    border-radius: 8px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
}

.tab-button.active {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tab-button:not(.active):hover {
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
}

/* ===== LABEL STYLES ===== */
/* Non-interactive information displays */

/* Base label - NEVER clickable */
.label,
[class$="-label"]:not([for]) {
    display: inline-block;
    padding: var(--label-padding);
    border-radius: var(--label-border-radius);
    font-size: var(--label-font-size);
    cursor: default;
    user-select: none;
    /* NO hover effects - labels are not interactive */
    transition: none;
}

/* Info Labels - Display general information */
.label-info,
.assessment-label {
    background: var(--label-info-bg);
    color: var(--label-info-color);
    border: var(--label-info-border);
    margin-left: 12px;
}

/* Status Labels - Show status or badges */
.label-status {
    background: var(--label-status-bg);
    color: var(--label-status-color);
    border: var(--label-status-border);
}

/* Badge Labels - Small notification badges */
.label-badge {
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
}

/* Form Labels - Labels for form inputs */
label,
.settings-label,
.label-form {
    color: var(--label-form-color);
    font-weight: var(--label-form-weight);
    font-size: 14px;
    /* Form labels ARE clickable to focus inputs */
    cursor: pointer;
}

/* Stat Labels - Display statistics */
.stat-label {
    display: block;
    font-size: 0.9em;
    color: #666;
    opacity: 0.9;
}

/* Score Labels */
.score-label {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

/* ===== MOBILE RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    /* Ensure touch targets remain accessible */
    .btn-primary,
    .btn-secondary {
        min-height: 44px;
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px 24px;
    }
    
    .btn-icon,
    [class$="-button-icon"],
    [class$="-icon"] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .btn-feature {
        min-width: 40px;
        min-height: 40px;
        padding: 6px 10px;
        font-size: 0.75em;
    }
    
    .tab-button {
        min-height: 44px;
        font-size: 14px;
        padding: 10px 12px;
    }
}

@media (max-width: 480px) {
    /* Further optimization for small screens */
    .btn-icon,
    [class$="-button-icon"],
    [class$="-icon"] {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        font-size: 16px;
    }
    
    .btn-feature {
        min-width: 36px;
        min-height: 36px;
        padding: 5px 8px;
        font-size: 0.7em;
    }
}

/* ===== DESIGN SYSTEM DOCUMENTATION ===== */
/*
USAGE GUIDELINES:

BUTTONS (Always clickable):
- .btn-primary: Main actions (Submit, Start, Confirm)
- .btn-secondary: Alternative actions (Cancel, Back)
- .btn-icon: Circular icon-only buttons (Settings, Close)
- .btn-feature: Special feature buttons (Fireworks, Check-in)
- .btn-utility: Small edit/delete buttons
- .tab-button: Tab navigation

LABELS (Never clickable, except form labels):
- .label-info / .assessment-label: Display information
- .label-status: Show status (completed, pending)
- .label-badge: Small notification badges
- label / .settings-label: Form input labels (clickable)
- .stat-label: Statistics display
- .score-label: Score/number labels

ACCESSIBILITY:
- All interactive buttons have min 44px touch targets
- Labels have no hover effects to indicate non-interactivity
- Color contrast meets WCAG AA standards
- Focus states maintained for keyboard navigation
*/

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

body {
    font-family: var(--font-body), 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

/* Global Fireworks Overlay */
.global-fireworks-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
    display: none; /* Hidden by default to avoid unnecessary resource usage */
}

.global-fireworks-overlay canvas {
    width: 100%;
    height: 100%;
    display: block;
}

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

header {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding: 20px;
    background: linear-gradient(180deg, rgba(44, 90, 160, 0.03) 0%, transparent 100%);
}

header h1 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    font-size: 2.8em;
    margin-bottom: 15px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
}

/* Menu and Settings buttons in header */
.menu-button,
.settings-button {
    width: 44px;
    height: 44px;
    min-width: 44px;  /* 防止flex压缩 */
    min-height: 44px;
    max-width: 44px;  /* 防止flex拉伸 */
    max-height: 44px;
    background: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.menu-button,
.settings-button {
    font-size: 20px;
}

.menu-button:hover:not(:disabled),
.settings-button:hover:not(:disabled) {
    background-color: rgba(79, 70, 229, 0.1);
    transform: scale(1.05);
}

.subtitle {
    color: #555;
    font-size: 1.4em;
    margin-bottom: 20px;
    font-weight: 500;
}

.value-proposition {
    color: #666;
    font-size: 1.05em;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
    padding: 0 20px;
}

/* Header responsive design */
@media (max-width: 768px) {
    header {
        padding: 12px;
        margin-bottom: 20px;
    }
    
    header h1 {
        font-size: 1.8em;
        margin-bottom: 0;
        gap: 8px;
    }
    
    .menu-button,
    .settings-button {
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.5em;
    }
    
    .menu-button,
    .settings-button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

.info-icon {
    font-size: 0.7em;
}





.age-selector {
    text-align: center;
    margin-bottom: 30px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #e5e7eb;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: opacity 0.5s ease, max-height 0.5s ease, margin-bottom 0.5s ease, padding 0.5s ease;
    opacity: 1;
    max-height: 500px;
    overflow: hidden;
}

.age-selector.hidden {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding: 0;
    pointer-events: none;
}

.age-group-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.age-group-legend {
    font-weight: bold;
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--primary-color);
    text-align: center;
    width: 100%;
}

.age-options {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.age-option {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 24px;
    border: 2px solid #e5e7eb;
    background: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 16px;
    min-width: 140px;
    justify-content: center;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.age-option:hover {
    border-color: var(--primary-color);
    background: #f8f9ff;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(44, 90, 160, 0.15);
}

.age-option input[type="radio"] {
    margin: 0;
    margin-right: 8px;
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}

.age-option:has(input[type="radio"]:checked) {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.25);
    font-weight: 600;
}

.age-option:has(input[type="radio"]:checked) .age-option-text {
    color: white;
    font-weight: bold;
}

.age-option-text {
    color: var(--text-color);
    transition: color 0.2s ease;
}

/* Fallback for browsers that don't support :has() */
.age-option.selected {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.age-option.selected .age-option-text {
    color: white;
    font-weight: bold;
}

/* Age selector hint notification */
.age-selector-hint {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 14px;
    text-align: center;
    max-width: 90%;
}

.age-selector-hint.show {
    opacity: 1;
}

/* Settings hint notification for new users */
.settings-hint-notification {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #28a745;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 14px;
    text-align: center;
    max-width: 90%;
}

.settings-hint-notification.show {
    opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    .age-selector {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .age-group-legend {
        margin-bottom: 10px;
        font-size: 1em;
    }
    
    .age-options {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    
    .age-option {
        min-width: 200px;
        padding: 6px 12px;
        font-size: 15px;
    }
}

.museum-list h2 {
    color: var(--primary-color);
    margin-bottom: 15px;
    text-align: center;
}

/* Search functionality styles */
.search-section {
    margin-bottom: 25px;
}

.search-container {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 14px 45px 14px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    background-color: white;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(44, 90, 160, 0.08), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.search-input::placeholder {
    color: #999;
    font-size: 15px;
}

/* Clear Search Button - Small utility button */
.clear-search-button {
    /* Utility button positioned inside search input */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 16px;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--btn-transition);
}

.clear-search-button:hover:not(:disabled) {
    background-color: #f0f0f0;
    color: #666;
}

.search-results-info {
    text-align: center;
    margin-top: 10px;
    color: #666;
    font-size: 14px;
    font-style: italic;
}

/* ===== HOW TO PLAY GUIDE STYLES ===== */
/* Introductory guide for new users - appears before search section */
.how-to-play-guide {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 24px;
    margin: 0 auto 25px auto;
    max-width: 600px;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    color: white;
    position: relative;
    animation: guideSlideIn 0.5s ease-out;
}

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

.guide-content {
    position: relative;
}

.guide-close-button {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.guide-close-button:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
    border-color: rgba(255, 255, 255, 0.6);
}

.guide-title {
    margin: 0 0 16px 0;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: white;
}

.guide-description {
    margin-bottom: 16px;
}

.guide-intro {
    text-align: center;
    font-size: 16px;
    margin: 0 0 20px 0;
    opacity: 0.95;
    font-weight: 500;
}

.guide-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guide-step {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    padding: 12px 16px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.guide-step:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateX(4px);
}

.step-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.step-text {
    font-size: 15px;
    line-height: 1.5;
    color: white;
}

/* Mobile responsive styles for guide */
@media (max-width: 768px) {
    .how-to-play-guide {
        padding: 20px;
        margin: 0 10px 20px 10px;
        border-radius: 12px;
    }
    
    .guide-title {
        font-size: 20px;
        margin-bottom: 12px;
    }
    
    .guide-intro {
        font-size: 15px;
        margin-bottom: 16px;
    }
    
    .guide-step {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .step-icon {
        font-size: 20px;
    }
    
    .step-text {
        font-size: 14px;
    }
    
    .guide-close-button {
        width: 28px;
        height: 28px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .how-to-play-guide {
        padding: 16px;
        margin: 0 5px 15px 5px;
    }
    
    .guide-title {
        font-size: 18px;
    }
    
    .guide-intro {
        font-size: 14px;
    }
    
    .guide-step {
        padding: 8px 10px;
    }
    
    .step-text {
        font-size: 13px;
    }
}

.stats {
    text-align: center;
    margin-bottom: 30px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #ffffff, #f8f9fa);
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 20px;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

/* Compact mode when scrolled - hide progress bar and detailed stats */
.stats.scrolled {
    padding: 10px 15px;
}

.stats.scrolled .minecraft-progress-bar {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stats.scrolled .achievement-stats,
.stats.scrolled .assessment-stats {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stats > span:first-child {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-color);
    display: block;
    margin-bottom: 15px;
    line-height: 1.2;
}

.progress-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; /* Changed from space-between to center buttons when progress-text is hidden */
    gap: 15px;
    margin-bottom: 0; /* Reduced from 15px since progress bar is hidden */
}

.progress-text {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--primary-color);
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.icon-buttons-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex: 0 0 auto;
    width: 100%;
}

/* 汉堡菜单按钮 - 左上角 */
.mobile-menu-button {
    display: flex; /* 始终显示 */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 24px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    order: 1;
}

.mobile-menu-button:hover:not(:disabled) {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: #4F46E5;
    transform: scale(1.05);
}

/* 设置按钮 - 右上角 */
.settings-button-icon {
    order: 2;
    margin-left: auto;
}

/* 桌面端专属按钮类 */
.desktop-only {
    display: flex; /* 桌面端显示 */
}

/* 汉堡菜单模态框内容 */
.mobile-menu-content {
    max-width: 90vw;
    width: 360px;
}

/* Grid layout for menu items - compact cards that fit in one screen */
.mobile-menu-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 8px 0;
}

.mobile-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
}

.mobile-menu-item:hover:not(:disabled) {
    background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
}

.mobile-menu-item:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

/* Responsive: 2 columns on very narrow screens */
@media (max-width: 320px) {
    .mobile-menu-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* P0: Menu open/close animations (250ms open, 200ms close) */
@keyframes slideUpFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Apply animations when menu opens/closes */
.mobile-menu-content.open {
    animation: slideUpFadeIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.mobile-menu-content.closing {
    animation: slideDownFadeOut 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.mobile-menu-item .menu-icon {
    font-size: 28px;
    line-height: 1;
}

.mobile-menu-item .menu-text {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    line-height: 1.2;
}

/* Touch device optimization */
@media (hover: none) and (pointer: coarse) {
    .mobile-menu-item:active {
        transform: scale(0.92);
    }
}

/* Icon Buttons with Special Hover Effects - Extends .btn-icon */
.achievement-button-icon,
.assessment-history-button-icon,
.settings-button-icon,
.fireworks-button-icon,
.event-wall-button-icon,
.treasures-button-icon,
.quiz-button-icon {
    /* Extends .btn-icon base styles */
    width: var(--btn-icon-size);
    height: var(--btn-icon-size);
    min-width: var(--btn-icon-size);
    min-height: var(--btn-icon-size);
    padding: 8px;
    font-size: 20px;
    border-radius: 50%;
    border: var(--btn-icon-border);
    background: var(--btn-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: var(--btn-transition);
}

/* Specific hover colors for each icon button */
.achievement-button-icon:hover:not(:disabled) {
    background-color: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    transform: scale(1.1);
}

.assessment-history-button-icon:hover:not(:disabled) {
    background-color: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
    transform: scale(1.1);
}

.quiz-button-icon:hover:not(:disabled) {
    background-color: rgba(79, 70, 229, 0.1);
    border-color: #4F46E5;
    transform: scale(1.1);
}

.settings-button-icon:hover:not(:disabled) {
    background-color: rgba(108, 92, 231, 0.1);
    border-color: #6c5ce7;
    transform: scale(1.1);
}

.fireworks-button-icon:hover:not(:disabled) {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    transform: scale(1.1);
}

.event-wall-button-icon:hover:not(:disabled) {
    background-color: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    transform: scale(1.1);
}

.treasures-button-icon:hover:not(:disabled) {
    background-color: rgba(184, 134, 11, 0.1);
    border-color: #b8860b;
    transform: scale(1.1);
}

.minecraft-themed {
    font-family: 'Courier New', monospace;
    color: var(--minecraft-wood);
    text-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}

.minecraft-icon {
    font-size: 1.2em;
    display: inline-block;
    animation: minecraftBob 2s ease-in-out infinite;
}

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

/* Minecraft Progress Bar */
.minecraft-progress-bar {
    width: 100%;
    height: 24px;
    background: linear-gradient(to bottom, 
        #4a4a4a 0%, 
        #3a3a3a 50%, 
        #2a2a2a 100%);
    border: 3px solid #1a1a1a;
    box-shadow: 
        inset 0 -2px 0 rgba(255,255,255,0.1),
        inset 0 2px 0 rgba(0,0,0,0.5),
        0 3px 0 rgba(0,0,0,0.3);
    position: relative;
    image-rendering: pixelated;
    border-radius: 2px;
    margin-bottom: 15px;
}

.minecraft-progress-fill {
    height: 100%;
    background: linear-gradient(to bottom,
        var(--minecraft-emerald) 0%,
        #2fb82f 50%,
        #27a827 100%);
    transition: width 0.5s ease;
    position: relative;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    overflow: hidden;
}

.minecraft-progress-blocks {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 8px,
        rgba(0,0,0,0.1) 8px,
        rgba(0,0,0,0.1) 9px
    );
}

/* Minecraft Achievements Styling */
.minecraft-achievements {
    background: linear-gradient(135deg, 
        rgba(252,238,75,0.1) 0%,
        rgba(93,205,227,0.1) 100%);
    border: 2px solid var(--minecraft-gold);
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 
        inset 0 -1px 0 rgba(0,0,0,0.2),
        0 3px 0 rgba(252,238,75,0.2);
}

.minecraft-button {
    background: linear-gradient(to bottom,
        var(--minecraft-diamond) 0%,
        #4ab8d4 50%,
        #3fa4bf 100%);
    border: 2px solid #2a8ca5;
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.3),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 3px 0 rgba(0,0,0,0.2);
    transition: all 0.2s ease;
}

.minecraft-button:hover {
    background: linear-gradient(to bottom,
        #6ee0f7 0%,
        var(--minecraft-diamond) 50%,
        #4ab8d4 100%);
    transform: translateY(-2px);
    box-shadow: 
        inset 0 2px 0 rgba(255,255,255,0.4),
        inset 0 -2px 0 rgba(0,0,0,0.2),
        0 5px 0 rgba(0,0,0,0.2);
}

.minecraft-button:active {
    transform: translateY(1px);
    box-shadow: 
        inset 0 2px 0 rgba(0,0,0,0.2),
        0 1px 0 rgba(0,0,0,0.2);
}

.museum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

.museum-card {
    background: white;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: 2px solid #f3f4f6;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.museum-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, 
        transparent 0%, transparent 40%,
        rgba(139,115,85,0.1) 40%, rgba(139,115,85,0.1) 60%,
        transparent 60%, transparent 100%);
    pointer-events: none;
    border-radius: 16px;
    z-index: 0;
}

.museum-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(13, 148, 136, 0.15), 0 8px 16px rgba(0,0,0,0.08);
    border-color: var(--primary-color);
}

.museum-card.visited {
    border-color: var(--minecraft-emerald);
    background: linear-gradient(135deg, #f0fff4 0%, #e6f9ec 100%);
    box-shadow: 
        inset 0 -2px 0 rgba(65,205,52,0.3),
        inset 0 2px 0 rgba(255,255,255,0.3),
        0 4px 8px rgba(65,205,52,0.2),
        0 0 20px rgba(65,205,52,0.1);
}

.museum-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    margin: 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    flex-shrink: 0;
    position: relative;
}

.museum-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.museum-card:hover .museum-image img {
    transform: scale(1.05);
    opacity: 0.95;
}

.museum-card-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.museum-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
    gap: 12px;
}

.visit-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 15px;
    margin-top: 2px;
    cursor: pointer;
}

.visit-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.museum-info h3 {
    color: var(--primary-color);
    margin-bottom: 5px;
    font-size: 1.2em;
}

.museum-location {
    color: #666;
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* Visit Tag Badge - Modern Design */
.visit-tag {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 2;
    pointer-events: none;
    letter-spacing: 0.3px;
}

.visit-tag::before {
    content: '✓';
    font-size: 1em;
    font-weight: bold;
}

/* Visit tag on card without image */
.museum-card:not(:has(.museum-image)) .visit-tag {
    position: relative;
    top: auto;
    right: auto;
    align-self: flex-start;
    margin-left: auto;
}

.museum-description {
    font-size: 0.95em;
    line-height: 1.5;
    margin-bottom: 15px;
}

.museum-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.tag {
    background-color: var(--primary-color);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8em;
}

/* Assessment Button Styles */
/* ===== SPECIFIC FEATURE BUTTON IMPLEMENTATIONS ===== */
/* These extend the base .btn-feature class with specific styling */

/* Assessment Button - Uses primary button style */
.assessment-button {
    /* Extends .btn-feature base styles */
    background: var(--btn-primary-bg);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    margin-left: 12px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
    box-shadow: var(--btn-primary-shadow);
}

.assessment-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--btn-primary-hover-shadow);
    background: linear-gradient(45deg, #ff5252, #ff9800);
}

.assessment-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Museum Fireworks Button - Feature button for fireworks */
.museum-fireworks-button {
    /* Extends .btn-feature-fireworks */
    background: var(--btn-feature-fireworks-bg);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    margin-left: 12px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.museum-fireworks-button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5568d3 0%, #653a8e 100%);
}

.museum-fireworks-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Museum Check-in Button - Feature button for check-in */
.museum-checkin-button {
    /* Extends .btn-feature-checkin */
    background: var(--btn-feature-checkin-bg);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    margin-left: 12px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
    box-shadow: 0 2px 4px rgba(245, 87, 108, 0.3);
}

.museum-checkin-button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(245, 87, 108, 0.4);
    background: linear-gradient(135deg, #e182ea 0%, #e4465b 100%);
}

.museum-checkin-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Museum V3 Guide Mode Button - Styled consistently with checkin button */
.museum-v3-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.75em;
    margin-left: 12px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
    cursor: pointer;
}

.museum-v3-button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
    background: linear-gradient(135deg, #5a67d8 0%, #6b42a0 100%);
}

.museum-v3-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Favorite Button - Icon-only button with special styling */
.favorite-button {
    /* Special case: Icon button without background */
    background: none;
    border: none;
    font-size: 1.4em;
    padding: 0;
    margin-right: 8px;
    color: #ffd700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    min-width: 32px;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--btn-transition);
    cursor: pointer;
}

.favorite-button:hover:not(:disabled) {
    transform: scale(1.15);
    filter: brightness(1.2);
}

.favorite-button:active:not(:disabled) {
    transform: scale(1.05);
}

/* Visual indicator for favorited museums */
.museum-card.favorite {
    border-left: 4px solid #ffd700;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.15);
}

/* Mobile responsive styles for museum fireworks button */
@media (max-width: 768px) {
    .museum-card {
        border-radius: 12px;
    }
    
    .museum-image {
        height: 160px;
        border-radius: 10px 10px 0 0;
    }
    
    .museum-card-content {
        padding: 16px;
    }
    
    .visit-tag {
        font-size: 0.8em;
        padding: 5px 12px;
        top: 10px;
        right: 10px;
    }
    
    .museum-fireworks-button {
        padding: 6px 10px;
        font-size: 0.75em;
        margin-left: 6px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .museum-checkin-button {
        padding: 6px 10px;
        font-size: 0.75em;
        margin-left: 6px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .museum-v3-button {
        padding: 6px 10px;
        font-size: 0.75em;
        margin-left: 6px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .assessment-button {
        padding: 6px 10px;
        font-size: 0.75em;
        margin-left: 6px;
    }
    
    .favorite-button {
        font-size: 1.2em;
        min-width: 28px;
        min-height: 28px;
        margin-right: 6px;
    }
}

/* Extra small screens - further optimize button sizes */
@media (max-width: 480px) {
    .museum-card {
        border-radius: 10px;
    }
    
    .museum-image {
        height: 140px;
        border-radius: 8px 8px 0 0;
    }
    
    .museum-card-content {
        padding: 14px;
    }
    
    .visit-tag {
        font-size: 0.75em;
        padding: 4px 10px;
        top: 8px;
        right: 8px;
    }
    
    .museum-info h3 {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }
    
    .museum-fireworks-button {
        padding: 5px 8px;
        font-size: 0.7em;
        margin-left: 4px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .museum-checkin-button {
        padding: 5px 8px;
        font-size: 0.7em;
        margin-left: 4px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .museum-v3-button {
        padding: 5px 8px;
        font-size: 0.7em;
        margin-left: 4px;
        min-width: 36px;
        min-height: 36px;
    }
    
    .assessment-button {
        padding: 5px 8px;
        font-size: 0.7em;
        margin-left: 4px;
    }
    
    .favorite-button {
        font-size: 1.1em;
        min-width: 26px;
        min-height: 26px;
        margin-right: 4px;
    }
}

/* Modal Styles */
/* Modal styles - Enhanced UX for parent-child experience */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: white;
    border-radius: 16px;
    max-width: 900px; /* Optimized for readability */
    max-height: 92vh; /* Better mobile viewing */
    overflow-y: auto;
    position: relative;
    width: 100%;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
}

.close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 24px;
    font-weight: normal;
    cursor: pointer;
    color: #666;
    width: 44px;  /* Touch-friendly minimum size */
    height: 44px; /* Touch-friendly minimum size */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.close:hover {
    color: #333;
    background-color: rgba(0, 0, 0, 0.05);
    transform: scale(1.05);
}

/* Improved tab design for better parent-child UX */
.checklist-tabs {
    display: flex;
    margin-bottom: 24px;
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tab-button {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #666;
    border-radius: 8px;
    transition: all 0.3s ease;
    min-height: 48px; /* Minimum touch target height */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tab-button.active {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.tab-button:not(.active):hover {
    color: #333;
    background-color: rgba(255, 255, 255, 0.7);
}

/* Modal Header - Streamlined for parent-child experience */
#modalTitle, .modal-content h2 {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    padding-right: 60px; /* Space for close button */
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 16px;
}

/* Modal header with action buttons */
.modal-header-with-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.modal-header-with-actions h2 {
    flex: 1;
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    padding-right: 0;
}

/* Museum fireworks button in modal header */
.museum-fireworks-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.museum-fireworks-button:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.museum-fireworks-button:active {
    transform: scale(1.05) rotate(10deg);
}

/* Museum Image Styles */
.museum-image-section {
    margin: 16px 0 20px 0;
    text-align: center;
}

.museum-image {
    max-width: 100%;
    max-height: 280px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    object-fit: cover;
}

/* Enhanced checklist content for better parent-child UX */
.checklist-content {
    margin-top: 20px;
    padding: 0;
}

.checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background-color: #ffffff;
    border: 1px solid #e8eef5;
    position: relative;
    min-height: 64px; /* Larger touch target for families */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.checklist-item:hover {
    background-color: #f8fbff;
    border-color: #b3d9ff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.checklist-item:hover .checklist-controls {
    opacity: 1;
}

.checklist-item input[type="checkbox"] {
    margin: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
    border-radius: 4px;
    margin-top: 2px; /* Align with first line of text */
}

.checklist-item label {
    flex: 1;
    cursor: pointer;
    line-height: 1.5;
    margin: 0;
    word-wrap: break-word;
    font-size: 15px;
    color: #2c3e50;
    padding-right: 40px;
    font-weight: 400;
    display: block;
}

.checklist-item.completed {
    background-color: #f0f8f0;
    border: 1px solid #c8e6c9;
    border-left: 4px solid var(--accent-color);
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.1);
}

.checklist-item.completed:hover {
    background-color: #ebf5eb;
    border-color: #a5d6a7;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.checklist-item.completed label {
    text-decoration: line-through;
    color: #666;
    opacity: 0.8;
}

/* Mobile responsive adjustments for checklist items */
@media (max-width: 768px) {
    .checklist-item {
        padding: 10px 12px;
        margin-bottom: 6px;
        gap: 8px;
        min-height: 40px;
    }
    
    .checklist-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }
    
    .checklist-item label {
        font-size: 13px;
        line-height: 1.3;
        padding-right: 28px;
    }
}

/* Photo Upload Styles */
.photo-upload-section {
    margin-top: 10px;
    padding: 10px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    text-align: center;
    background-color: #fafafa;
    width: 100%;
}

.photo-upload-label {
    display: inline-block;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.photo-upload-label:hover {
    background-color: #1e4085;
}

/* Override strikethrough for photo upload buttons in completed items */
.checklist-item.completed .photo-upload-label {
    text-decoration: none;
    color: white !important;
}

.task-photo {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== TREASURE CONTRIBUTOR STYLES ===== */
/* Styles for the "add treasure" task type for museums without collections */

.add-treasure-item {
    flex-direction: column !important;
    align-items: stretch !important;
}

.add-treasure-item .checklist-label {
    padding-right: 0;
    margin-bottom: 12px;
}

.add-treasure-section {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 12px;
    margin-top: 8px;
}

.treasure-input-group {
    margin-bottom: 12px;
}

.treasure-name-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

.treasure-name-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(44, 90, 160, 0.1);
}

.treasure-name-input:read-only {
    background-color: #f8f9fa;
    cursor: default;
}

.treasure-image-section {
    margin-bottom: 12px;
}

.treasure-image-preview {
    width: 100%;
    min-height: 120px;
    max-height: 200px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
}

.treasure-image-preview:hover {
    border-color: var(--primary-color);
    background-color: #f8fbff;
}

.treasure-preview-img {
    max-width: 100%;
    max-height: 196px;
    object-fit: contain;
    border-radius: 10px;
}

.preview-placeholder {
    color: #999;
    font-size: 16px;
    text-align: center;
    padding: 20px;
}

.treasure-image-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.treasure-search-btn,
.treasure-upload-btn {
    flex: 1;
    min-width: 120px;
    padding: 10px 16px;
    font-size: 14px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    background-color: white;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.treasure-search-btn:hover:not(:disabled),
.treasure-upload-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.treasure-search-btn:disabled,
.treasure-upload-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.treasure-submit-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 8px;
    min-height: 48px;
}

.treasure-submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.treasure-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.treasure-contributed-badge {
    margin-top: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: 8px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #856404;
    border: 1px solid #ffc107;
}

/* AI Treasure Suggestions */
.treasure-ai-suggestions {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-suggest-btn {
    padding: 8px 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
}

.ai-suggest-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: translateY(-1px);
}

.ai-suggest-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.ai-suggestions-container {
    background: #f8f9ff;
    border: 1px solid #e0e4ff;
    border-radius: 8px;
    padding: 10px;
}

.ai-suggestions-loading {
    text-align: center;
    color: #6366f1;
    font-size: 13px;
    padding: 8px;
}

.ai-suggestions-loading .loading-dot {
    animation: pulse 1.5s infinite;
}

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

.ai-suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-suggestion-item {
    padding: 8px 14px;
    background: white;
    border: 1px solid #d1d5eb;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
}

.ai-suggestion-item:hover {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
}

.ai-suggestion-item.selected {
    background: #6366f1;
    border-color: #6366f1;
    color: white;
}

.ai-suggestions-error {
    color: #dc2626;
    font-size: 13px;
    text-align: center;
    padding: 8px;
}

/* Mobile responsiveness for AI suggestions */
@media (max-width: 480px) {
    .ai-suggest-btn {
        font-size: 12px;
        padding: 6px 10px;
    }
    
    .ai-suggestion-item {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Treasure Image Search Modal */
.treasure-search-modal-content {
    max-width: 600px;
    width: 95%;
}

.treasure-search-query {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.treasure-search-input {
    flex: 1;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
}

.treasure-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.treasure-search-action-btn {
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.treasure-search-action-btn:hover {
    background-color: #1e4085;
}

.treasure-search-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.treasure-tab {
    flex: 1;
    padding: 10px 16px;
    background-color: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.treasure-tab.active {
    background-color: var(--primary-color);
    color: white;
}

.treasure-tab:not(.active):hover {
    border-color: var(--primary-color);
}

.treasure-search-results {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
}

.treasure-search-loading,
.treasure-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #666;
}

.treasure-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    padding: 8px;
}

.treasure-image-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    aspect-ratio: 1;
    background-color: #f8f9fa;
}

.treasure-image-item:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.treasure-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.treasure-image-select {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
}

.treasure-image-item:hover .treasure-image-select {
    opacity: 1;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .add-treasure-section {
        padding: 12px;
    }
    
    .treasure-name-input {
        padding: 10px 14px;
        font-size: 16px; /* Prevent iOS zoom */
    }
    
    .treasure-image-actions {
        flex-direction: column;
    }
    
    .treasure-search-btn,
    .treasure-upload-btn {
        min-width: 100%;
    }
    
    .treasure-search-query {
        flex-direction: column;
    }
    
    .treasure-image-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .treasure-submit-btn {
        font-size: 15px;
        padding: 12px 16px;
    }
    
    .treasure-contributed-badge {
        font-size: 13px;
        padding: 10px 12px;
    }
}
/* ===== END TREASURE CONTRIBUTOR STYLES ===== */

/* ===== MUSEUM ENTRANCE PHOTO CONTRIBUTOR STYLES ===== */
/* Styles for adding museum entrance photos when none exists in dynamic storage */

.museum-photo-contributor-section {
    margin: 16px 0 20px 0;
    text-align: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
    padding: 20px;
    border: 2px dashed #dee2e6;
}

.museum-photo-placeholder {
    margin-bottom: 16px;
}

.placeholder-icon {
    font-size: 48px;
    margin-bottom: 8px;
    opacity: 0.7;
}

.placeholder-text {
    font-size: 16px;
    font-weight: 600;
    color: #495057;
    margin-bottom: 4px;
}

.placeholder-hint {
    font-size: 14px;
    color: #6c757d;
}

.museum-photo-upload-section {
    margin-top: 16px;
}

.museum-photo-preview {
    width: 100%;
    min-height: 120px;
    max-height: 200px;
    border: 2px dashed #dee2e6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    overflow: hidden;
    margin-bottom: 10px;
    cursor: pointer;
}

.museum-photo-preview:hover {
    border-color: var(--primary-color);
    background-color: #f8fbff;
}

.museum-photo-preview img {
    max-width: 100%;
    max-height: 196px;
    object-fit: contain;
    border-radius: 10px;
}

.museum-photo-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.museum-photo-search-btn,
.museum-photo-upload-btn {
    flex: 1;
    min-width: 120px;
    max-width: 180px;
    padding: 10px 16px;
    font-size: 14px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    background-color: white;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.museum-photo-search-btn:hover,
.museum-photo-upload-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.museum-photo-submit-btn {
    width: 100%;
    max-width: 300px;
    margin: 12px auto 0;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.museum-photo-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.museum-photo-contributed-badge {
    margin-top: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #155724;
    border: 1px solid #28a745;
}

/* Mobile responsive for museum photo contributor */
@media (max-width: 768px) {
    .museum-photo-contributor-section {
        padding: 16px;
    }
    
    .placeholder-icon {
        font-size: 40px;
    }
    
    .museum-photo-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .museum-photo-search-btn,
    .museum-photo-upload-btn {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .museum-photo-contributor-section {
        padding: 12px;
    }
    
    .placeholder-text {
        font-size: 15px;
    }
    
    .placeholder-hint {
        font-size: 13px;
    }
    
    .museum-photo-submit-btn {
        font-size: 15px;
        padding: 12px 16px;
    }
}
/* ===== END MUSEUM ENTRANCE PHOTO CONTRIBUTOR STYLES ===== */

/* Share Poster Styles */
.share-poster-section {
    text-align: center;
    padding: 20px;
}

.share-description {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Poster Button - Primary button for poster generation */
.poster-button {
    /* Similar to .btn-primary but with squared corners */
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: var(--btn-padding);
    border-radius: 8px;
    font-size: 16px;
    margin: 10px;
    min-height: var(--btn-min-height-touch);
    cursor: pointer;
    transition: var(--btn-transition);
}

.poster-button:hover:not(:disabled) {
    background-color: #1e4085;
    transform: var(--btn-hover-transform);
}

.poster-preview {
    margin: 20px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    text-align: center; /* Center the canvas */
}

.poster-preview canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* Center the canvas */
    border-radius: 8px; /* Slightly rounded corners for better aesthetics */
}

/* Poster Actions Container - Holds download and share buttons */
.poster-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0;
}

/* WeChat Save Hint - Instructions for WeChat users */
.wechat-save-hint {
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f9eb 0%, #e8f5e9 100%);
    color: #2e7d32;
    border-radius: 8px;
    margin: 15px 0;
    font-size: 14px;
    border: 1px solid #c8e6c9;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.1);
}

.wechat-save-hint strong {
    color: #1b5e20;
    font-weight: 600;
}

/* Enhanced Checklist Customization for Mobile UX */
.checklist-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    gap: 8px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

/* Edit and Delete Utility Buttons - Extends .btn-utility */
.edit-item-btn,
.delete-item-btn {
    /* Extends .btn-utility base styles */
    background: none;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--btn-transition);
}

.edit-item-btn:hover:not(:disabled) {
    background-color: #e3f2fd;
    transform: scale(1.05);
}

.delete-item-btn:hover:not(:disabled) {
    background-color: #ffebee;
    transform: scale(1.05);
}

.delete-item-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.editing-input {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--primary-color);
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    margin: 0;
    width: calc(100% - 80px);
    line-height: 1.5;
}

.add-item-section {
    margin-top: 20px;
    text-align: center;
}

/* Add Item Button - Special dashed border button */
.add-item-btn {
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    color: #6c757d;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    min-height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--btn-transition);
}

.add-item-btn:hover:not(:disabled) {
    background-color: #e8f5e8;
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-1px);
}

.custom-item {
    border-left: 4px solid #ff9800;
}

.modified-item {
    border-left: 4px solid #2196f3;
}

/* Achievement Styles */
.achievement-stats {
    margin-top: 20px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.achievement-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.achievement-text {
    font-size: 1.1em;
    color: #555;
    font-weight: 500;
    flex: 0 0 auto;
}

.achievement-button-inline {
    flex: 0 0 auto;
}

.assessment-stats {
    margin-top: 15px;
    padding: 15px;
    background: rgba(0, 123, 255, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(0, 123, 255, 0.2);
}

.assessment-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
}

.assessment-scores {
    display: flex;
    gap: 20px;
    flex: 1;
}

.assessment-score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.score-value {
    font-size: 1.4em;
    font-weight: bold;
    color: #007bff;
}

.score-label {
    font-size: 0.8em;
    color: #666;
    margin-top: 2px;
}

/* Mobile optimization for scores - make them inline and match achievement text size */
@media (max-width: 768px) {
    .assessment-score-item {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        text-align: left;
    }
    
    .score-value {
        font-size: 0.9em; /* Match achievement text size */
        font-weight: 500; /* Match achievement text weight */
    }
    
    .score-label {
        font-size: 0.9em; /* Match achievement text size */
        margin-top: 0;
    }
}

.assessment-history-button-inline {
    flex: 0 0 auto;
}

/* Achievement Buttons Container */
.achievement-buttons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Achievement Button - Feature button with orange gradient */
.achievement-button {
    background: var(--btn-feature-achievement-bg);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--btn-border-radius);
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    min-width: 130px;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 3px 10px rgba(255, 152, 0, 0.3);
}

.achievement-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
    background: linear-gradient(135deg, #f57c00, #ef6c00);
}

/* Assessment History Button - Feature button in progress display */
.assessment-history-button {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    border: none;
    padding: var(--btn-padding-small);
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    min-width: auto;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 2px 8px rgba(108, 92, 231, 0.3);
}

.assessment-history-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
    background: linear-gradient(135deg, #5f3dc4, #6c5ce7);
}

.assessment-history-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

.assessment-history-button-inline {
    flex: 0 0 auto;
}

.achievement-modal .modal-content {
    max-width: 800px;
}

.achievement-summary {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 12px;
    color: white;
    margin-bottom: 20px;
}

.achievement-overview {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.achievement-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-number {
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9em;
    opacity: 0.9;
}

/* Achievement Poster Button - Special feature button */
.achievement-poster-button {
    background: linear-gradient(135deg, #4CAF50, #45a049);
    color: white;
    border: none;
    padding: var(--btn-padding);
    border-radius: var(--btn-border-radius);
    font-size: 16px;
    font-family: inherit;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.achievement-poster-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.achievement-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin: 20px 0;
}

.achievement-category {
    background: #f8f9fa;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.category-header {
    padding: 15px 20px;
    background: linear-gradient(135deg, #fff, #f8f9fa);
    border-left: 4px solid #007bff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-header h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
}

.category-progress {
    background: rgba(0, 123, 255, 0.1);
    color: #007bff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.9em;
    font-weight: 500;
}

.category-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    padding: 20px;
}

.achievement-item {
    padding: 20px;
    border-radius: 12px;
    border: 2px solid;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.achievement-item.achieved {
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border-color: #4CAF50;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2);
}

.achievement-item.pending {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-color: #dee2e6;
    border-style: dashed;
}

.achievement-emoji {
    font-size: 2.2em;
    flex-shrink: 0;
    width: 50px;
    text-align: center;
}

.achievement-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.achievement-name {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.achievement-description {
    color: #666;
    margin: 0;
    font-size: 0.95em;
    line-height: 1.4;
}

.achievement-level {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
}

.level-basic {
    background: #e3f2fd;
    color: #1976d2;
}

.level-intermediate {
    background: #f3e5f5;
    color: #7b1fa2;
}

.level-advanced {
    background: #fff3e0;
    color: #f57c00;
}

.level-master {
    background: #fce4ec;
    color: #c2185b;
}

.achievement-date {
    font-size: 0.85em;
    color: #888;
    font-style: italic;
    margin: 0;
}

.achievement-progress {
    margin-top: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    font-size: 0.9em;
    text-align: center;
}

.achievement-poster-section {
    margin-top: 20px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    
    header h1 {
        font-size: 2em;
    }
    
    .museum-grid {
        grid-template-columns: 1fr;
    }
    
    /* Enhanced mobile modal header */
    #modalTitle, .modal-content h2 {
        font-size: 18px;
        margin: 0 0 16px 0;
        padding-bottom: 12px;
        padding-right: 50px;
    }
    
    .museum-image-section {
        margin: 12px 0 16px 0;
    }
    
    .museum-image {
        max-height: 200px;
        border-radius: 8px;
    }
    
    /* Enhanced mobile modal experience for parent-child use */
    .modal-content {
        margin: 0px;
        padding: 18px;
        max-width: 100vw;
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
    }
    
    .close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    /* Improved mobile tab design */
    .checklist-tabs {
        margin-bottom: 18px;
        padding: 3px;
    }
    
    .tab-button {
        padding: 10px 12px;
        font-size: 14px;
        min-height: 44px;
    }
    
    /* Enhanced mobile checklist items */
    .checklist-item {
        padding: 14px;
        margin-bottom: 10px;
        min-height: 56px;
        gap: 14px;
    }
    
    .checklist-item input[type="checkbox"] {
        width: 18px;
        height: 18px;
    }
    
    .checklist-item label {
        font-size: 14px;
        line-height: 1.4;
        padding-right: 50px;
    }
    
    /* Better mobile controls */
    .checklist-controls {
        top: 10px;
        right: 10px;
        gap: 6px;
        padding: 4px;
    }
    
    .edit-item-btn, .delete-item-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .add-item-btn {
        padding: 14px 20px;
        min-height: 50px;
        font-size: 14px;
    }
    
    .stats {
        margin-bottom: 15px;
        padding: 8px;
        border-radius: 8px;
        position: sticky;
        top: 5px;
    }
    
    /* Mobile compact mode when scrolled */
    .stats.scrolled {
        padding: 6px 10px;
    }
    
    .stats.scrolled .progress-text {
        font-size: 1.1em;
    }
    
    .progress-display {
        margin-bottom: 0; /* Reduced from 5px since progress bar is hidden */
        flex-direction: row;
        align-items: center;
        justify-content: center; /* Changed to center for consistency */
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .progress-text {
        font-size: 1.3em;
        line-height: 1.1;
        flex: 0 0 auto;
        text-align: left;
        white-space: nowrap;
    }
    
    .icon-buttons-row {
        gap: 12px; /* 增加间距防止误触 */
        flex: 0 0 auto;
    }
    
    /* 移动端：隐藏低频按钮，显示汉堡菜单 */
    .desktop-only {
        display: none !important;
    }
    
    .mobile-menu-button {
        display: flex !important; /* 移动端显示汉堡菜单 */
    }
    
    /* 移动端：增大保留按钮的触摸目标 */
    .achievement-button-icon,
    .settings-button-icon,
    .mobile-menu-button {
        width: 44px; /* Apple HIG 标准 */
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 22px;
    }
    
    .assessment-history-button-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 6px;
        font-size: 18px;
    }
    
    .achievement-stats {
        margin-top: 6px;
        padding: 8px;
        border-radius: 6px;
    }
    
    .achievement-text {
        font-size: 0.9em;
    }
    
    .achievement-inline {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .achievement-inline .achievement-text {
        flex: 1;
        min-width: 0;
        text-align: left;
    }
    
    .achievement-inline .achievement-button-inline {
        flex: 0 0 auto;
        padding: 8px 12px;
        font-size: 11px;
    }
    
    .assessment-stats {
        margin-top: 6px;
        padding: 8px;
        border-radius: 6px;
    }
    
    .assessment-inline {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .assessment-scores {
        gap: 8px;
        flex: 1;
    }
    
    .assessment-history-button-inline {
        padding: 8px 12px;
        font-size: 11px;
    }
    
    /* Mobile achievement categories */
    .category-achievements {
        grid-template-columns: 1fr;
        padding: 15px;
        gap: 12px;
    }
    
    .achievement-item {
        padding: 15px;
        gap: 12px;
    }
    
    .achievement-emoji {
        font-size: 1.8em;
        width: 40px;
    }
    
    .achievement-info {
        gap: 6px;
    }
    
    .achievement-name {
        font-size: 1em;
    }
    
    .achievement-description {
        font-size: 0.9em;
        line-height: 1.3;
    }
    
    .category-header {
        padding: 12px 15px;
    }
    
    .category-header h3 {
        font-size: 1em;
    }
    
    .achievement-level {
        padding: 2px 6px;
        font-size: 0.7em;
    }
    
    .progress-display .clear-data-button-icon {
        width: 32px;  /* Increased for better mobile touch target */
        height: 32px; /* Increased for better mobile touch target */
        min-width: 32px;
        padding: 6px;
        font-size: 16px; /* Larger emoji for better visibility */
        flex: 0 0 auto;
        border-radius: 50%;
        transition: all 0.2s ease;
    }
    
    .progress-display .clear-data-button-icon:hover {
        background-color: rgba(255, 0, 0, 0.1);
        transform: scale(1.1);
    }
    
    .progress-display .fireworks-button-icon {
        width: 32px;  /* Match clear button size for consistency */
        height: 32px;
        min-width: 32px;
        padding: 6px;
        font-size: 16px;
        flex: 0 0 auto;
        margin-left: 8px;  /* Spacing from trash button */
    }
    
    .progress-display .fireworks-button-icon:hover {
        transform: scale(1.1);
    }
    }

    .progress-display .assessment-history-button-inline {
        width: 28px;
        height: 28px;
        min-width: 28px;
        padding: 4px;
        font-size: 12px;
        flex: 0 0 auto;
        border-radius: 50%;
        gap: 0;
    }

    .progress-display .assessment-history-button .button-text {
        display: none;
    }

    .achievement-buttons {
        flex-direction: row;
        gap: 10px;
        width: 100%;
        justify-content: center;
        flex-wrap: nowrap;
    }
    
    .achievement-button,
    .clear-data-button {
        flex: 1;
        max-width: 140px;
        min-width: 120px;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.2;
    }
}

@media (max-width: 480px) {
    header {
        position: sticky;
        top: 0;
        background: white;
        z-index: 999;
        padding: 8px 0;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    }
    
    header h1 {
        font-size: 1em;
        text-align: right;
        padding: 0 12px;
        margin: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1.4;
    }
    
    .settings-icon {
        order: -1;
        font-size: 1.3em;
        flex-shrink: 0;
    }
    
    #headerTitle {
        flex: 1;
        text-align: right;
        font-size: 1em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Inline nickname editing styles */
    .nickname-display {
        display: inline;
        cursor: pointer;
        padding: 2px 4px;
        border-radius: 4px;
        transition: all 0.2s ease;
        text-decoration: underline;
        text-decoration-style: dashed;
        text-underline-offset: 3px;
        color: #2c5aa0;
    }
    
    .nickname-display:hover {
        background-color: rgba(59, 130, 246, 0.1);
        text-decoration-style: solid;
    }
    
    .nickname-editing {
        display: inline-block;
        min-width: 60px;
        max-width: 150px;
        padding: 2px 4px;
        border: 2px solid #2c5aa0;
        border-radius: 4px;
        background-color: #fff;
        font-size: inherit;
        font-family: inherit;
        text-align: center;
        outline: none;
    }
    
    .subtitle {
        font-size: 1em;
    }
    
    .search-container {
        max-width: 100%;
        margin: 0 15px;
    }
    
    .search-input {
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 10px 40px 10px 12px;
    }
    
    .search-input::placeholder {
        font-size: 14px;
    }
    
    .museum-card {
        padding: 15px;
    }
    
    /* Modal header for very small screens */
    #modalTitle, .modal-content h2 {
        font-size: 16px;
        margin: 0 0 14px 0;
        padding-bottom: 10px;
        padding-right: 44px;
    }
    
    .museum-image-section {
        margin: 10px 0 14px 0;
    }
    
    .museum-image {
        max-height: 180px;
    }
    
    /* Ultra-small screen optimizations for parent-child use */
    .modal-content {
        margin: 0;
        padding: 14px;
        border-radius: 16px 16px 0 0;
        max-width: 100vw;
        max-height: 96vh;
    }
    
    .close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    
    /* Compact tab design for very small screens */
    .checklist-tabs {
        padding: 2px;
        margin-bottom: 16px;
    }
    
    .tab-button {
        padding: 10px 6px;
        font-size: 13px;
        min-height: 42px;
    }
    
    /* Optimized checklist for very small screens */
    .checklist-item {
        padding: 12px;
        margin-bottom: 8px;
        min-height: 52px;
        gap: 12px;
    }
    
    .checklist-item input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    
    .checklist-item label {
        font-size: 13px;
        line-height: 1.4;
        padding-right: 44px;
    }
    
    /* Compact controls for small screens */
    .checklist-controls {
        gap: 4px;
        padding: 3px;
    }
    
    .edit-item-btn, .delete-item-btn {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    
    .add-item-btn {
        padding: 12px 16px;
        min-height: 48px;
        font-size: 13px;
    }
}

/* SEO and Accessibility Enhancements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.section-description {
    text-align: center;
    color: #666;
    font-size: 1.1em;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Improved focus states for accessibility */
button:focus,
select:focus,
input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Enhanced semantic structure */
main[role="main"] {
    display: block;
}

.museum-grid[role="grid"] {
    display: grid;
}

/* Status indicators */
[role="status"] {
    font-weight: 500;
}

/* Loading Indicator Styles */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 200px;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

.loading-indicator p {
    color: #666;
    font-size: 1.1em;
    margin: 0;
}

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

/* Error Message Styles */
.error-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 200px;
    background-color: #fff5f5;
    border: 1px solid #fed7d7;
    border-radius: 8px;
    margin: 20px 0;
}

.error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.error-message p {
    color: #c53030;
    font-size: 1.1em;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.retry-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.retry-button:hover {
    background-color: #1e4085;
}

/* No Search Results Message Styles */
.no-results-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    min-height: 200px;
    background-color: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin: 20px 0;
}

.no-results-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.no-results-message p {
    color: #4a5568;
    font-size: 1.1em;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.no-results-hint {
    color: #718096;
    font-size: 0.9em !important;
    margin-bottom: 20px !important;
}

.clear-search-btn {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.clear-search-btn:hover {
    background-color: #1e4085;
}

/* Checklist Header Styles */
.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap !important;
    margin-bottom: 24px;
    padding-bottom: 12px;
    gap: 15px;
    border-bottom: 2px solid #f0f4f8;
    width: 100%;
}

.checklist-header h3 {
    margin: 0;
    flex: 1;
    color: #2c5aa0;
    font-size: 18px;
    font-weight: 600;
    min-width: 0;
}

/* Share Button Styles - Success/positive action button */
.share-button {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: var(--btn-padding-small);
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.share-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #218838, #1bb394);
}

.share-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

/* Clear Data Button Styles - Dangerous action button */
.clear-data-button {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--btn-border-radius);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    min-width: 130px;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
}

.clear-data-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 5px 15px rgba(220, 53, 69, 0.4);
    background: linear-gradient(135deg, #c82333, #bd2130);
}

.clear-data-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

.clear-all-button {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.clear-all-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #c0392b, #a93226);
}

/* Settings modal buttons - more specific selector */
.settings-content .settings-button,
.settings-input-group .settings-button {
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: var(--btn-border-radius);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    min-width: 130px;
    min-height: var(--btn-min-height-touch);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 3px 10px rgba(52, 152, 219, 0.3);
}

.settings-content .settings-button:hover:not(:disabled),
.settings-input-group .settings-button:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
    background: linear-gradient(135deg, #2980b9, #21618c);
}

.settings-content .settings-button:active:not(:disabled),
.settings-input-group .settings-button:active:not(:disabled) {
    transform: var(--btn-active-transform);
}

.clear-data-button-icon {
    /* Icon variant of clear data button */
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-left: auto;
}

.progress-display .clear-data-button-icon {
    width: 36px;
    height: 36px;
    padding: 6px;
    font-size: 16px;
}

.clear-data-button-icon:hover:not(:disabled) {
    transform: var(--btn-hover-transform);
}

/* Settings button icon - Extends .btn-icon base styles */
.settings-button-icon {
    min-width: auto;
    width: 40px;
    height: 40px;
    padding: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(25, 118, 210, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.progress-display .settings-button-icon {
    width: 36px;
    height: 36px;
    padding: 6px;
    font-size: 16px;
}

.settings-button-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(25, 118, 210, 0.4);
    background: linear-gradient(135deg, #1565c0, #0d47a1);
}

.settings-button-icon:active {
    transform: translateY(0);
}

.clear-checklist-button {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    font-size: 12px;
    padding: 6px 12px;
}

.clear-checklist-button:hover {
    background: linear-gradient(135deg, #e67e22, #d35400);
    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
}

/* Checklist Actions Container */
.checklist-actions {
    display: flex;
    align-items: center;
    flex-wrap: nowrap !important;
    gap: 10px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Notification Styles */
.notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: #28a745;
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateX(400px);
    transition: transform 0.3s ease;
    max-width: 300px;
    font-size: 14px;
    line-height: 1.4;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background: #28a745;
}

.notification.info {
    background: #17a2b8;
}

.notification.warning {
    background: #ffc107;
    color: #212529;
}

.notification.error {
    background: #dc3545;
}

/* Enhanced Expert Guidance Styles */
.expert-guidance {
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
    font-size: 14px;
}

.expert-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
    text-align: center;
}

.expert-header h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: 600;
}

.age-stage-info {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: inline-block;
    padding: 8px 16px;
}

.stage-label {
    font-size: 12px;
    font-weight: 500;
}

.expert-section {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.expert-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.expert-section h4 {
    color: #2c5aa0;
    font-size: 16px;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #e8f2ff;
    font-weight: 600;
}

.developmental-traits {
    background: #f8f9ff;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
    font-size: 13px;
    color: #4a5568;
    margin: 0;
}

/* Relationship Focus Section Styles */
.relationship-focus {
    border: 2px solid #ff6b8a;
    background: linear-gradient(135deg, #fff0f3, #fff8f9);
    position: relative;
    overflow: hidden;
}

.relationship-focus::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 107, 138, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.relationship-focus h4 {
    color: #e91e63;
    border-bottom: 2px solid #ffc1cc;
    background: rgba(255, 107, 138, 0.1);
    margin: -20px -20px 20px -20px;
    padding: 15px 20px;
    border-radius: 10px 10px 0 0;
}

.core-goal {
    background: #fff;
    border: 2px solid #ffb3c6;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: 0 4px 12px rgba(255, 107, 138, 0.1);
}

.goal-statement {
    font-size: 14px;
    color: #2d3748;
    font-weight: 600;
    line-height: 1.6;
    margin: 0;
    text-align: center;
    position: relative;
}

.goal-statement::before {
    content: '💖';
    display: block;
    font-size: 24px;
    margin-bottom: 10px;
}

.relationship-metrics h5 {
    color: #d63384;
    font-size: 14px;
    margin: 20px 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.metrics-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
}

.metrics-list li {
    background: linear-gradient(135deg, #fff 0%, #fef7f7 100%);
    border: 1px solid #f8d7da;
    border-radius: 8px;
    padding: 12px 15px;
    font-size: 13px;
    transition: all 0.2s ease;
    position: relative;
    border-left: 4px solid #ff6b8a;
}

.metrics-list li:hover {
    background: #fff5f7;
    border-color: #ff6b8a;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 107, 138, 0.15);
}

.relationship-benefits h5 {
    color: #d63384;
    font-size: 14px;
    margin: 20px 0 10px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.benefits-text {
    background: #f8f0ff;
    border: 1px solid #e6ccff;
    border-radius: 8px;
    padding: 15px;
    margin: 0;
    font-size: 13px;
    color: #4a5568;
    line-height: 1.6;
    border-left: 4px solid #a855f7;
}

.expert-tips, .emotional-support {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expert-tips li, .emotional-support li {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 15px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
    font-size: 13px;
    line-height: 1.5;
}

.expert-tips li:hover, .emotional-support li:hover {
    background: #f7fafc;
    border-color: #cbd5e0;
    transform: translateX(4px);
}

.intelligence-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.intelligence-item {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    transition: all 0.2s ease;
}

.intelligence-item:hover {
    border-color: #a0aec0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.intelligence-header {
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.intelligence-desc {
    color: #4a5568;
    font-size: 12px;
    margin-bottom: 12px;
    line-height: 1.4;
}

.intelligence-activities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.activity-tag {
    background: #e6fffa;
    color: #065f46;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    border: 1px solid #a7f3d0;
    font-weight: 500;
}

.dialogue-section {
    background: #f7faff;
    border-radius: 8px;
    padding: 15px;
}

.dialogue-starters ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0 0;
}

.dialogue-starters li {
    background: #e6f3ff;
    color: #1e40af;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    font-style: italic;
    font-size: 13px;
}

.challenges-section {
    background: #fefefe;
    border-radius: 8px;
    padding: 10px 0;
}

.challenge-item {
    background: #fffbf0;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.challenge-item:hover {
    background: #fef3c7;
    border-color: #fbbf24;
}

.challenge-situation {
    color: #92400e;
    margin-bottom: 8px;
    font-size: 13px;
}

.challenge-solution {
    color: #059669;
    font-size: 13px;
    background: #ecfdf5;
    padding: 8px;
    border-radius: 4px;
    border-left: 3px solid #10b981;
}

.extension-activities {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.activity-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 18px;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s ease;
}

.activity-card:hover {
    transform: translateY(-3px);
}

.activity-card strong {
    display: block;
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
}

.activity-card p {
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.95;
}

/* Mobile responsive adjustments for expert guidance */
@media (max-width: 768px) {
    .expert-guidance {
        font-size: 13px;
    }
    
    .expert-header {
        padding: 15px;
    }
    
    .expert-header h3 {
        font-size: 16px;
    }
    
    .expert-section {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .intelligence-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .extension-activities {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .intelligence-item, .challenge-item {
        padding: 12px;
    }
    
    .activity-card {
        padding: 15px;
    }
    
    .activity-tag {
        font-size: 9px;
        padding: 3px 6px;
    }
    
    .dialogue-starters li, .expert-tips li, .emotional-support li {
        font-size: 12px;
    }
}

/* Mobile Responsive Adjustments for Share Features */
@media (max-width: 768px) {
    .checklist-header {
        /* Ensure horizontal layout is maintained on mobile */
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    
    .checklist-header h3 {
        font-size: 16px; /* Slightly smaller on mobile */
        flex: 1;
        min-width: 0;
    }
    
    .checklist-actions {
        flex-shrink: 0;
        gap: 6px;
    }
    
    .share-button {
        font-size: 14px;
        padding: 6px 8px;
        min-width: auto;
    }
    
    .clear-checklist-button {
        font-size: 14px;
        padding: 6px 8px;
        min-width: auto;
    }
    
    .notification {
        right: 10px;
        left: 10px;
        max-width: none;
        transform: translateY(-100px);
    }
    
    .notification.show {
        transform: translateY(0);
    }
}

/* Enhanced Rocket Animation Styles */
.rocket-animation {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fireworks wall launch text */
.firework-launch-text {
    position: absolute;
    color: white;
    font-size: 1.2em;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    animation: launchTextFade 3s ease-out forwards;
}

@keyframes launchTextFade {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
}

.rocket-body {
    font-size: 2em;
    position: relative;
    z-index: 2;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.6));
}

.rocket-animation.small .rocket-body {
    font-size: 1.8em;
}

.rocket-animation.large .rocket-body {
    font-size: 4em;
}

.rocket-trail {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 40px;
    background: linear-gradient(to top, 
        rgba(255, 69, 0, 0.9) 0%,
        rgba(255, 140, 0, 0.8) 30%,
        rgba(255, 215, 0, 0.6) 60%,
        rgba(255, 255, 255, 0.4) 80%,
        transparent 100%);
    border-radius: 50%;
    opacity: 0.9;
    animation: trailFlicker 0.1s infinite alternate;
}

.rocket-animation.large .rocket-trail {
    width: 12px;
    height: 60px;
    bottom: -25px;
}

.rocket-sparks {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
}

.rocket-sparks::before,
.rocket-sparks::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: sparkle 0.3s infinite;
}

.rocket-sparks::before {
    left: -10px;
    animation-delay: 0s;
}

.rocket-sparks::after {
    right: -10px;
    animation-delay: 0.15s;
}

@keyframes trailFlicker {
    0% { opacity: 0.8; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 1; transform: translateX(-50%) scaleY(1.1); }
}

@keyframes sparkle {
    0%, 100% { opacity: 0; transform: scale(0); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Enhanced Small rocket animation */
@keyframes rocketLaunchSmall {
    0% {
        opacity: 1;
        transform: translateX(-50%) rotate(0deg) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) rotate(5deg) scale(1);
    }
    40% {
        opacity: 1;
        transform: translateX(-50%) rotate(-3deg) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) rotate(8deg) scale(1.05);
    }
    100% {
        bottom: 120vh;
        opacity: 0;
        transform: translateX(-50%) rotate(-5deg) scale(0.9);
    }
}

/* Enhanced Large rocket animation */
@keyframes rocketLaunchLarge {
    0% {
        opacity: 1;
        transform: translateX(-50%) rotate(0deg) scale(0.7);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) rotate(3deg) scale(0.9);
    }
    30% {
        opacity: 1;
        transform: translateX(-50%) rotate(-2deg) scale(1.1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) rotate(5deg) scale(1.3);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) rotate(-3deg) scale(1.4);
    }
    85% {
        opacity: 0.8;
        transform: translateX(-50%) rotate(2deg) scale(1.2);
    }
    100% {
        bottom: 130vh;
        opacity: 0;
        transform: translateX(-50%) rotate(-1deg) scale(0.8);
    }
}

.rocket-animation.launch-small {
    animation: rocketLaunchSmall 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.rocket-animation.launch-large {
    animation: rocketLaunchLarge 3.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Screen shake effect */
@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-2px); }
    20% { transform: translateX(2px); }
    30% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    50% { transform: translateX(-1px); }
    60% { transform: translateX(1px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    90% { transform: translateX(-1px); }
}

.screen-shake {
    animation: screenShake 0.6s ease-in-out;
}

/* Particle effects */
.rocket-particle {
    position: fixed;
    width: var(--size, 4px);
    height: var(--size, 4px);
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    opacity: 1;
}

.rocket-particle.particle-explode {
    animation: particleExplode 1.2s ease-out forwards;
}

@keyframes particleExplode {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) rotate(var(--angle, 0deg)) 
                   translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(0) rotate(var(--angle, 0deg)) 
                   translateY(calc(-1 * var(--velocity, 50px))) scale(0);
    }
}

/* Celebration text effects */
.celebration-text {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    font-size: 1.5em;
    font-weight: bold;
    color: #FFD700;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 25px;
    border: 3px solid #FFD700;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.celebration-text.large {
    font-size: 2em;
    border: 4px solid #FF6B35;
    color: #FF6B35;
}

.celebration-emoji {
    font-size: 1.2em;
    animation: celebrationBounce 0.6s ease-out infinite alternate;
}

.celebration-text.celebration-appear {
    animation: celebrationAppear 2.5s ease-out forwards;
}

@keyframes celebrationBounce {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.2) rotate(5deg); }
}

@keyframes celebrationAppear {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.5) translateY(50px);
    }
    20% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1) translateY(-10px);
    }
    30% {
        transform: translateX(-50%) scale(1) translateY(0);
    }
    70% {
        opacity: 1;
        transform: translateX(-50%) scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) scale(0.9) translateY(-30px);
    }
}

.rocket-animation.large::after {
    width: 5px;
    height: 30px;
    bottom: -15px;
}

/* Enhanced Achievement Display with Assessment Integration */
.achievement-progression-guide {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
    color: white;
}

.progression-intro h4 {
    margin: 0 0 10px 0;
    font-size: 18px;
    font-weight: bold;
}

.progression-intro p {
    margin: 0 0 15px 0;
    opacity: 0.9;
}

.assessment-tip {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    border-left: 4px solid #ffd700;
}

.assessment-status {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 12px 15px;
    margin-top: 10px;
    border-left: 4px solid #28a745;
}

.assessment-status.quality-excellent { border-left-color: #28a745; }
.assessment-status.quality-good { border-left-color: #17a2b8; }
.assessment-status.quality-fair { border-left-color: #ffc107; }
.assessment-status.quality-needs-improvement { border-left-color: #dc3545; }

.achievement-level-section {
    margin-bottom: 30px;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.level-header {
    padding: 20px;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #dee2e6;
}

.level-title h4 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
}

.level-description {
    margin: 0;
    color: #6c757d;
    font-size: 14px;
}

.level-progress {
    text-align: right;
    min-width: 120px;
}

.level-count {
    font-weight: bold;
    font-size: 16px;
    color: #495057;
}

.level-progress-bar {
    width: 100px;
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    margin-top: 8px;
    overflow: hidden;
}

.level-progress-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.level-achievements {
    padding: 0;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    padding: 20px;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s ease;
}

.achievement-item:last-child {
    border-bottom: none;
}

.achievement-item.achieved {
    background: rgba(40, 167, 69, 0.05);
}

.achievement-item.pending {
    background: rgba(0, 0, 0, 0.02);
}

.achievement-item:hover {
    background: rgba(0, 123, 255, 0.05);
}

.achievement-icon {
    font-size: 28px;
    margin-right: 15px;
    flex-shrink: 0;
}

.achievement-details {
    flex: 1;
}

.achievement-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    color: #212529;
}

.achievement-description {
    color: #6c757d;
    margin-bottom: 8px;
    line-height: 1.4;
}

.achievement-date {
    font-size: 12px;
    color: #28a745;
    font-weight: 500;
}

.achievement-requirements {
    font-size: 14px;
    color: #6c757d;
    line-height: 1.4;
}

.assessment-requirement {
    font-size: 13px;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    padding: 6px 10px;
    border-radius: 6px;
    margin-top: 8px;
    display: inline-block;
}

.next-goal-section {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-radius: 12px;
    color: white;
}

.next-goal h4 {
    margin: 0 0 15px 0;
    font-size: 18px;
}

.goal-card {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.goal-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.goal-info h5 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: bold;
}

.goal-info p {
    margin: 0 0 15px 0;
    opacity: 0.9;
    line-height: 1.4;
}

.goal-progress {
    margin-top: 15px;
}

.progress-item {
    margin-bottom: 12px;
}

.progress-item:last-child {
    margin-bottom: 0;
}

.progress-item span {
    display: block;
    font-size: 14px;
    margin-bottom: 6px;
    opacity: 0.9;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.completion-celebration {
    text-align: center;
    padding: 40px 20px;
}

.completion-celebration h4 {
    margin: 0 0 15px 0;
    font-size: 24px;
}

.completion-celebration p {
    margin: 0 0 10px 0;
    opacity: 0.9;
    line-height: 1.5;
}

.assessment-quality-stat {
    border-left: 3px solid #17a2b8;
}

.stat-sublabel {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .level-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .level-progress {
        text-align: left;
        width: 100%;
    }
    
    .level-progress-bar {
        width: 100%;
    }
    
    .achievement-item {
        padding: 15px;
    }
    
    .achievement-icon {
        font-size: 24px;
        margin-right: 12px;
    }
    
    .goal-card {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .progression-intro {
        text-align: center;
    }
}

.expert-section h4 {
    margin-bottom: 12px;
    color: var(--primary-color);
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.expert-tips, .emotional-support, .attachment-strategies, 
.scaffolding-techniques, .autonomy-support, .inclusive-support,
.engagement-indicators, .parent-reflection, .family-reflection,
.overstimulation-signs, .meltdown-prevention, .meltdown-response {
    list-style: none;
    padding: 0;
}

.expert-tips li, .emotional-support li, .attachment-strategies li,
.scaffolding-techniques li, .autonomy-support li, .inclusive-support li,
.engagement-indicators li, .parent-reflection li, .family-reflection li,
.overstimulation-signs li, .meltdown-prevention li, .meltdown-response li {
    margin: 8px 0;
    padding: 8px 12px;
    background: white;
    border-radius: 6px;
    border-left: 3px solid #28a745;
    line-height: 1.4;
    font-size: 14px;
}

.challenge-prevention {
    margin-top: 8px;
    padding: 8px 12px;
    background: #e8f5e8;
    border-radius: 6px;
    font-size: 13px;
    color: #2d5016;
}

.assessment-section, .crisis-management, .reflection-section {
    background: white;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
}

.crisis-subsection, .reflection-subsection {
    margin-bottom: 16px;
}

.crisis-subsection strong, .reflection-subsection strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
}

.age-stage-info {
    margin-top: 8px;
    padding: 8px 12px;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 13px;
    color: #1565c0;
}

.developmental-traits {
    background: white;
    padding: 16px;
    border-radius: 8px;
    margin-top: 12px;
    line-height: 1.5;
    color: #444;
}

@media (max-width: 768px) {
    .expert-section {
        padding: 12px;
        margin-bottom: 16px;
    }
    
    .expert-tips li, .emotional-support li, .attachment-strategies li,
    .scaffolding-techniques li, .autonomy-support li, .inclusive-support li,
    .engagement-indicators li, .parent-reflection li, .family-reflection li,
    .overstimulation-signs li, .meltdown-prevention li, .meltdown-response li {
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Assessment Modal Styles */
.assessment-content {
    max-width: 800px;
    width: 100%;
}

.assessment-intro {
    background: linear-gradient(135deg, #fff5f5, #ffe6e6);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
    border-left: 4px solid #ff6b6b;
}

.assessment-intro p {
    margin-bottom: 10px;
    color: #555;
    line-height: 1.6;
}

.assessment-intro p:last-child {
    margin-bottom: 0;
}

/* Optimized Assessment Introduction */
.assessment-intro-optimized {
    text-align: center;
}

.assessment-welcome {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.assessment-welcome h3 {
    color: white;
    font-size: 1.3em;
    margin: 0 0 10px 0;
}

.assessment-subtitle {
    margin: 0;
    font-size: 0.95em;
    opacity: 0.95;
    line-height: 1.4;
}

.assessment-quick-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.quick-info-item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.quick-info-item:hover {
    background: #e9ecef;
    transform: translateY(-2px);
}

.info-icon {
    font-size: 1.5em;
}

.info-text {
    font-size: 0.85em;
    font-weight: 500;
    text-align: center;
    color: #495057;
    line-height: 1.3;
}

.assessment-disclaimer-compact {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 12px 15px;
    margin: 15px 0;
    font-size: 0.9em;
}

.assessment-disclaimer-compact p {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #856404;
}

.disclaimer-text {
    margin: 0 !important;
    font-weight: normal !important;
    color: #856404 !important;
    font-size: 0.85em;
    line-height: 1.4;
}

.assessment-details {
    font-size: 0.9em;
    color: #666;
}

.assessment-details summary {
    padding: 8px 0;
    outline: none;
    transition: color 0.2s ease;
}

.assessment-details summary:hover {
    color: #5a54cf;
}

.assessment-details[open] summary {
    color: #6c5ce7;
}

/* Mobile optimizations for assessment */
@media (max-width: 768px) {
    .assessment-quick-info {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 5px;
    }
    
    .quick-info-item {
        flex-direction: row;
        padding: 12px 15px;
        text-align: left;
    }
    
    .info-icon {
        font-size: 1.2em;
        flex-shrink: 0;
    }
    
    .info-text {
        text-align: left;
        font-size: 0.9em;
    }
    
    .assessment-welcome {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .assessment-welcome h3 {
        font-size: 1.1em;
    }
    
    .assessment-subtitle {
        font-size: 0.9em;
    }
}

.assessment-disclaimer.assessment-disclaimer {
    background: #fff3cd;
    border: 2px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    color: #856404;
}

.assessment-disclaimer.assessment-disclaimer p {
    margin-bottom: 8px;
    font-weight: 600;
    color: #856404;
}

.assessment-disclaimer.assessment-disclaimer ul {
    margin: 8px 0;
    padding-left: 20px;
}

.assessment-disclaimer.assessment-disclaimer li {
    margin-bottom: 4px;
    color: #856404;
}



.assessment-form {
    margin-bottom: 5px;
    min-height: 0px;
    transition: margin-bottom 0.3s ease;
}

/* When assessment form has content (questions), restore normal spacing */
.assessment-form:not(:empty) {
    min-height: 300px;
    margin-bottom: 30px;
}

.question-container {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    margin-bottom: 20px;
}

.question-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.4;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.option-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #f8f9fa;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.option-item:hover {
    background: #e9ecef;
    border-color: #ff6b6b;
}

.option-item.selected {
    background: #fff5f5;
    border-color: #ff6b6b;
}

.option-item input[type="radio"] {
    margin-right: 12px;
    transform: scale(1.2);
    accent-color: #ff6b6b;
}

.option-text {
    flex: 1;
    font-size: 0.95em;
    line-height: 1.4;
    color: #444;
}

.assessment-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

/* Hide redundant previous button to improve UX */
#assessmentPrev {
    display: none !important;
}

.btn-primary, .btn-secondary {
    padding: 12px 24px;
    border-radius: 25px;
    border: none;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.btn-primary {
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.btn-secondary {
    background: #f8f9fa;
    color: #666;
    border: 2px solid #e0e0e0;
}

.btn-secondary:hover {
    background: #e9ecef;
    border-color: #ccc;
}

.assessment-results {
    text-align: center;
    padding: 30px;
}

.score-display {
    background: linear-gradient(135deg, #fff5f5, #ffe6e6);
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 25px;
    border: 2px solid #ff6b6b;
}

.score-number {
    font-size: 3em;
    font-weight: bold;
    color: #ff6b6b;
    margin-bottom: 10px;
}

.score-label {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 15px;
}

.score-description {
    font-size: 1em;
    color: #666;
    line-height: 1.6;
}

.suggestions {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    text-align: left;
}

.suggestions h4 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.1em;
}

.suggestions ul {
    list-style: none;
    padding: 0;
}

.suggestions li {
    padding: 8px 0;
    color: #555;
    line-height: 1.5;
    position: relative;
    padding-left: 20px;
}

.suggestions li::before {
    content: "💡";
    position: absolute;
    left: 0;
}

/* Assessment History User-Friendly Format Styles */
.answer-summary {
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
}

.overall-score {
    background: linear-gradient(45deg, #e3f2fd, #f3e5f5);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid #2196f3;
}

.score-label {
    font-weight: 600;
    color: #1976d2;
}

.score-value {
    font-weight: bold;
    color: #1976d2;
}

.detailed-insights {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #fafafa;
    border-radius: 6px;
    border-left: 3px solid #e0e0e0;
}

.insight-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.insight-text {
    color: #333;
    font-size: 13px;
    line-height: 1.3;
}

/* Mobile responsive adjustments for assessment history */
@media (max-width: 768px) {
    .answer-summary {
        font-size: 13px;
    }
    
    .overall-score {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    
    .insight-item {
        padding: 6px 8px;
        gap: 6px;
    }
    
    .insight-icon {
        font-size: 14px;
    }
    
    .insight-text {
        font-size: 12px;
    }
}

/* History section styling improvements */
.history-section-title {
    font-weight: 600;
    color: #2c5aa0;
    margin-bottom: 8px;
    font-size: 15px;
}

.history-answers {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e9ecef;
}

/* ====== IMPROVED ASSESSMENT HISTORY STYLES ====== */
.answer-summary-improved {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

.overall-score-improved {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.overall-score-improved.no-data {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #6c757d;
    padding: 24px 20px;
}

.no-data-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 8px;
}

.no-data-text {
    font-size: 16px;
    font-weight: 500;
}

.overall-score-improved .score-label {
    font-size: 14px;
    opacity: 0.9;
    display: block;
    margin-bottom: 4px;
}

.overall-score-improved .score-value {
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.key-insights {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
}

.insight-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 16px;
    transition: box-shadow 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.insight-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.insight-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.insight-icon-large {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-main {
    flex: 1;
}

.insight-title {
    font-weight: 600;
    color: #2c5aa0;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 4px;
}

.insight-description {
    color: #6c757d;
    font-size: 13px;
    line-height: 1.5;
}

.top-recommendations {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #e9ecef;
}

.recommendations-header {
    font-weight: 600;
    color: #2c5aa0;
    font-size: 15px;
    margin-bottom: 12px;
    text-align: center;
}

.recommendations-grid {
    display: grid;
    gap: 10px;
}

.recommendation-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: background-color 0.2s ease;
}

.recommendation-card:hover {
    background: #f0f8ff;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.rec-icon-large {
    font-size: 18px;
    flex-shrink: 0;
}

.rec-text-simplified {
    font-size: 13px;
    line-height: 1.4;
    color: #495057;
}

/* Mobile optimization for improved assessment history */
@media (max-width: 768px) {
    .overall-score-improved {
        padding: 12px 16px;
        margin-bottom: 16px;
    }
    
    .overall-score-improved .score-value {
        font-size: 16px;
    }
    
    .key-insights {
        gap: 10px;
        margin-bottom: 16px;
    }
    
    .insight-card {
        padding: 12px;
    }
    
    .insight-header {
        gap: 10px;
    }
    
    .insight-icon-large {
        font-size: 20px;
    }
    
    .insight-title {
        font-size: 14px;
    }
    
    .insight-description {
        font-size: 12px;
    }
    
    .top-recommendations {
        padding: 12px;
    }
    
    .recommendations-header {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .recommendation-card {
        padding: 10px;
        gap: 8px;
    }
    
    .rec-icon-large {
        font-size: 16px;
    }
    
    .rec-text-simplified {
        font-size: 12px;
    }
}

/* Resume Progress Dialog Styles */
.resume-progress-dialog {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resume-progress-content h3 {
    color: #6c5ce7;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.progress-info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    font-size: 0.9em;
}

.progress-info ul {
    margin: 10px 0;
    padding-left: 20px;
}

.progress-info li {
    margin-bottom: 5px;
    color: #495057;
}

.resume-progress-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .assessment-buttons {
        flex-direction: column;
        gap: 12px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        padding: 14px 20px;
        font-size: 1em;
        min-height: 48px; /* Better touch target */
    }
    
    .score-number {
        font-size: 2.5em;
    }
    
    /* Assessment history modal specific font size fix */
    .assessment-history-modal .stat-number {
        font-size: 1.1em !important;
        font-weight: 600;
    }
    
    .assessment-content {
        max-width: 100%;
        margin: 10px;
        padding: 15px;
    }
    
    /* Ensure modal doesn't get cut off on small screens */
    .modal {
        padding: 10px;
        overflow-y: auto;
    }
    
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        margin: 0;
    }
    
    /* Improved assessment introduction for mobile */
    .assessment-quick-info {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 0 5px;
    }
    
    .quick-info-item {
        flex-direction: row;
        padding: 12px 15px;
        text-align: left;
    }
    
    .info-icon {
        font-size: 1.2em;
        flex-shrink: 0;
    }
    
    .info-text {
        text-align: left;
        font-size: 0.9em;
    }
    
    .assessment-welcome {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .assessment-welcome h3 {
        font-size: 1.1em;
    }
    
    .assessment-subtitle {
        font-size: 0.9em;
    }
    
    /* Better touch targets for mobile */
    .assessment-details summary {
        padding: 12px 8px;
        font-size: 0.95em;
        line-height: 1.4;
    }
    
    .resume-progress-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .resume-progress-buttons button {
        width: 100%;
        padding: 12px;
        font-size: 0.95em;
    }
}

/* Assessment History Modal Styles */
.assessment-history-modal .modal-content {
    max-width: 900px;
}

.assessment-history-content {
    max-width: 900px;
    width: 100%;
}

.assessment-history-summary {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.history-overview {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 20px;
}

.history-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fix: Assessment History Modal font size consistency */
.assessment-history-modal .history-stat .stat-number {
    font-size: 1.1em !important; /* Much smaller to harmonize with surrounding elements */
    font-weight: 600;
    color: white;
    margin-bottom: 3px;
}

.assessment-history-modal .stat-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.9);
}

.history-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-select {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(10px);
}

.filter-select option {
    background: #333;
    color: white;
}

/* Export Button - Secondary button with transparent background */
.export-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: var(--btn-padding-small);
    font-size: 14px;
    min-height: var(--btn-min-height-touch);
    cursor: pointer;
    transition: var(--btn-transition);
    backdrop-filter: blur(10px);
}

.export-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.history-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.history-empty .empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.3;
}

.history-empty p {
    margin: 10px 0;
    font-size: 1.1em;
}

.history-list {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.history-item {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
}

.history-item:hover {
    border-color: #6c5ce7;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.1);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.history-item-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    flex: 1;
}

.history-item-date {
    color: #666;
    font-size: 0.9em;
    background: #e9ecef;
    padding: 4px 12px;
    border-radius: 15px;
}

.history-score {
    font-size: 2em;
    font-weight: bold;
    color: #6c5ce7;
    text-align: center;
    margin: 15px 0;
    padding: 15px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 10px;
    border: 1px solid #dee2e6;
}

.history-score-label {
    font-size: 0.5em;
    color: #666;
    display: block;
    margin-top: 5px;
}

.history-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 15px;
}

.history-section {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.history-section-title {
    font-weight: bold;
    color: #6c5ce7;
    margin-bottom: 10px;
    font-size: 0.9em;
}

.history-answers {
    font-size: 0.85em;
    color: #666;
    line-height: 1.5;
}

.history-comparison {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    border: 1px solid #fed136;
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
    font-size: 0.9em;
}

.score-trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 10px;
    font-size: 0.8em;
    padding: 2px 8px;
    border-radius: 12px;
}

.score-trend.up {
    background: #d4edda;
    color: #155724;
}

.score-trend.down {
    background: #f8d7da;
    color: #721c24;
}

.score-trend.same {
    background: #e2e3e5;
    color: #383d41;
}

@media (max-width: 768px) {
    .assessment-history-modal .modal-content {
        max-width: 95vw;
    }
    
    .history-overview {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .history-stat {
        flex-direction: row;
        justify-content: space-between;
        background: rgba(255, 255, 255, 0.1);
        padding: 10px 15px;
        border-radius: 8px;
    }
    
    .history-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .history-details {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .history-item-header {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .history-score {
        font-size: 1.5em;
        padding: 10px;
    }
}

/* Settings Modal Styles */
.settings-modal .modal-content {
    max-width: 600px;
}

.settings-section {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 20px;
}

.settings-section-header {
    color: var(--primary-color);
    font-size: 18px;
    margin: 0 0 20px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.settings-section-header:hover {
    color: #1e4d8b;
}

.settings-section-toggle {
    font-size: 14px;
    transition: transform 0.3s ease;
    color: #6c757d;
}

.settings-section[data-collapsed="false"] .settings-section-header {
    margin-bottom: 20px;
}

.settings-section[data-collapsed="true"] .settings-section-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-section[data-collapsed="true"] {
    padding: 15px 25px;
}

.settings-section-content {
    transition: all 0.3s ease;
}

.settings-section h3 {
    color: var(--primary-color);
    font-size: 18px;
    margin: 0 0 20px 0;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e9ecef;
}


.settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9ecef;
}

.settings-item:last-child {
    border-bottom: none;
}

.settings-label {
    color: #495057;
    font-weight: 500;
    font-size: 14px;
}

.settings-value {
    color: #28a745;
    font-weight: 600;
    font-size: 14px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background: #e8f5e8;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #c3e6c3;
}

/* Settings Input Group */
.settings-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
    max-width: 400px;
}

.settings-input {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.2s ease;
    min-height: 44px; /* Touch-friendly */
}

.settings-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #f8f9ff;
}

.settings-input::placeholder {
    color: #999;
}

.settings-save-button {
    padding: 8px 16px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 44px; /* Touch-friendly */
    min-width: 60px;
}

.settings-save-button:hover {
    background: #1e3a6e;
    transform: translateY(-1px);
}

.settings-save-button:active {
    transform: translateY(0);
}

.settings-hint {
    color: #6c757d;
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}

/* Settings Checkbox */
.settings-checkbox {
    width: 24px;
    height: 24px;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* Settings Slider */
.settings-slider {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, #007bff, #28a745);
    outline: none;
    opacity: 0.8;
    transition: opacity 0.2s;
    cursor: pointer;
    min-height: 44px; /* Touch-friendly height for mobile */
    -webkit-appearance: none;
    appearance: none;
}

.settings-slider:hover {
    opacity: 1;
}

.settings-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.settings-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.settings-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--primary-color);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}

.settings-slider::-moz-range-thumb:hover {
    transform: scale(1.1);
}

/* Settings item with vertical layout for inputs */
.settings-item.vertical {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 768px) {
    .settings-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 0;
    }
    
    .settings-value {
        align-self: flex-end;
        font-size: 12px;
    }
    
    .settings-input-group {
        width: 100%;
        max-width: none;
    }
    
    .settings-input {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* Assessment UX Improvements */

/* Resume Progress Dialog */
.resume-progress-dialog {
    text-align: center;
    padding: 30px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 15px;
    margin: 20px 0;
}

.resume-progress-content h3 {
    color: #495057;
    margin-bottom: 15px;
    font-size: 1.3em;
}

.resume-progress-content p {
    color: #6c757d;
    margin-bottom: 20px;
    line-height: 1.6;
}

.progress-info {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px 0;
    text-align: left;
    border: 1px solid #dee2e6;
}

.progress-info p {
    margin-bottom: 10px;
    font-weight: 600;
    color: #495057;
}

.progress-info ul {
    margin: 0;
    padding-left: 20px;
}

.progress-info li {
    margin-bottom: 8px;
    color: #6c757d;
    line-height: 1.5;
}

.resume-progress-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 25px;
}

.resume-progress-buttons .btn-primary,
.resume-progress-buttons .btn-secondary {
    min-width: 120px;
    padding: 12px 24px;
    font-weight: 500;
}

/* Enhanced Form Styles for Better Touch Targets */
.question-container {
    margin-bottom: 25px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.option-item {
    display: flex;
    align-items: flex-start;
    padding: 12px 15px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px; /* Mobile touch target */
}

.option-item:hover {
    border-color: #ff6b6b;
    background: #fff5f5;
}

.option-item.selected {
    border-color: #ff6b6b;
    background: linear-gradient(135deg, #fff5f5, #ffe6e6);
}

.option-text {
    line-height: 1.4;
    color: #495057;
}

/* Mobile-specific Assessment Improvements */
@media (max-width: 768px) {
    .assessment-content {
        margin: 5vh auto;
        max-height: 90vh;
        overflow-y: auto;
    }
    
    .assessment-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .btn-primary, .btn-secondary {
        width: 100%;
        min-height: 44px; /* Mobile touch target */
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 12px 24px;
    }
    
    .option-item {
        min-height: 48px; /* Larger touch targets on mobile */
        padding: 15px;
    }
    
    .resume-progress-buttons {
        flex-direction: column;
        gap: 15px;
    }
    
    .resume-progress-buttons .btn-primary,
    .resume-progress-buttons .btn-secondary {
        width: 100%;
        min-height: 44px;
    }
    
    .score-number {
        font-size: 2.5em;
    }
}

/* Assessment History Enhanced Styles */
.answer-summary {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 20px;
    margin: 15px 0;
    border-left: 4px solid var(--primary-color);
}

.overall-score {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 1.1em;
    font-weight: 600;
}

.score-label {
    color: #666;
}

.score-value {
    color: var(--primary-color);
    font-weight: bold;
}

.detailed-insights {
    margin-bottom: 20px;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.insight-icon {
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 2px;
}

.insight-content {
    flex: 1;
}

.insight-text {
    color: #333;
    font-weight: 500;
    display: block;
    margin-bottom: 6px;
}

.insight-context {
    color: #666;
    font-size: 0.9em;
    line-height: 1.4;
    font-style: italic;
}

.recommendations-section {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 10px;
    padding: 18px;
    margin-top: 16px;
    border: 1px solid #e1bee7;
}

.recommendations-title {
    font-size: 1.05em;
    font-weight: 600;
    color: #6c5ce7;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    border: 1px solid rgba(108, 92, 231, 0.2);
}

.rec-icon {
    font-size: 1.1em;
    flex-shrink: 0;
    margin-top: 1px;
}

.rec-text {
    color: #444;
    font-size: 0.95em;
    line-height: 1.4;
    font-weight: 500;
}

/* Mobile optimizations for assessment history */
@media (max-width: 768px) {
    .answer-summary {
        padding: 16px;
        margin: 12px 0;
        border-radius: 10px;
    }
    
    .overall-score {
        font-size: 1.05em;
        margin-bottom: 16px;
    }
    
    .insight-item {
        padding: 10px;
        gap: 10px;
        margin-bottom: 12px;
    }
    
    .insight-icon {
        font-size: 1.1em;
    }
    
    .insight-text {
        font-size: 0.95em;
    }
    
    .insight-context {
        font-size: 0.85em;
    }
    
    .recommendations-section {
        padding: 14px;
        margin-top: 12px;
    }
    
    .recommendation-item {
        padding: 10px;
        gap: 8px;
    }
    
    .rec-text {
        font-size: 0.9em;
    }
}

/* ===== ENHANCED ACHIEVEMENT SYSTEM STYLES ===== */

/* 融合显示的成就概览 */
.achievement-summary .achievement-overview {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
    gap: 15px;
}

.achievement-stat {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    flex: 1;
    transition: transform 0.2s ease;
}

.achievement-stat:hover {
    transform: translateY(-2px);
}

.stat-number {
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.integrated-score {
    position: relative;
}

.trend-indicator {
    font-size: 0.6em;
    margin-left: 5px;
}

.stat-label {
    display: block;
    font-size: 0.9em;
    color: #666;
    margin-bottom: 3px;
}

.stat-sublabel {
    display: block;
    font-size: 0.75em;
    color: #999;
}

.quality-label {
    font-weight: 500;
}

/* 质量等级的视觉反馈 */
.assessment-quality-stat[data-quality="exceptional"] .stat-number {
    color: #9d4edd;
}

.assessment-quality-stat[data-quality="excellent"] .stat-number {
    color: #ffd700;
}

.assessment-quality-stat[data-quality="good"] .stat-number {
    color: #28a745;
}

.assessment-quality-stat[data-quality="fair"] .stat-number {
    color: #ffc107;
}

.assessment-quality-stat[data-quality="needs-improvement"] .stat-number {
    color: #dc3545;
}

.assessment-quality-stat.no-data .stat-number {
    color: #6c757d;
}

.guidance {
    color: #007bff !important;
    font-style: italic;
}

/* 融合进度指示器 */
.integrated-progress-indicator {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 15px;
    border-radius: 12px;
    margin-top: 15px;
}

.integration-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.integration-label {
    font-weight: 500;
}

.integration-value {
    font-size: 1.2em;
    font-weight: bold;
}

.integration-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.3);
    border-radius: 3px;
    overflow: hidden;
    margin: 8px 0;
}

.integration-fill {
    height: 100%;
    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
    transition: width 0.8s ease;
}

.integration-breakdown {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    opacity: 0.9;
}

/* 成就路径说明 */
.achievement-path-explanation {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.achievement-path-explanation h4 {
    margin-bottom: 10px;
    font-size: 1.2em;
}

.achievement-path-explanation p {
    margin-bottom: 15px;
    opacity: 0.9;
}

.path-tip {
    background: rgba(255,255,255,0.15);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid #ffd700;
}

.path-tip strong {
    color: #ffd700;
}

/* 层级化成就容器 */
.achievement-level-container {
    margin-bottom: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
    background: white;
    transition: all 0.3s ease;
}

.achievement-level-container.unlocked {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.achievement-level-container.locked {
    opacity: 0.6;
    background: #f8f9fa;
    border-style: dashed;
}

.achievement-level-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #dee2e6;
}

.level-info h4 {
    margin-bottom: 5px;
    color: var(--primary-color);
}

.level-info p {
    color: #666;
    margin-bottom: 8px;
}

.unlock-requirement {
    color: #dc3545;
    font-size: 0.9em;
    font-weight: 500;
    padding: 8px 12px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 6px;
    border-left: 3px solid #dc3545;
}

.level-progress {
    text-align: right;
    font-size: 1.1em;
    font-weight: bold;
    color: var(--primary-color);
}

/* 层级内的成就列表 */
.level-achievements {
    padding: 20px;
}

.no-achievements {
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 40px 20px;
}

.achievement-item {
    display: flex;
    align-items: flex-start;
    padding: 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    transition: all 0.2s ease;
    background: white;
}

.achievement-item.achieved {
    border-color: #28a745;
    background: linear-gradient(135deg, #f8fff9 0%, #eafaf1 100%);
}

.achievement-item.not-achieved {
    border-color: #ffc107;
    background: linear-gradient(135deg, #fffdf5 0%, #fff9e6 100%);
}

.achievement-item.locked {
    border-color: #6c757d;
    background: #f8f9fa;
    opacity: 0.7;
}

.achievement-item:hover:not(.locked) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.achievement-icon {
    font-size: 2em;
    margin-right: 15px;
    flex-shrink: 0;
}

.achievement-details {
    flex: 1;
}

.achievement-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 5px;
}

.achievement-description {
    color: #666;
    margin-bottom: 8px;
    line-height: 1.5;
}

.achievement-status {
    font-size: 0.9em;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

.achievement-status.completed {
    background: #d4edda;
    color: #155724;
}

.achievement-status.available {
    background: #fff3cd;
    color: #856404;
}

.achievement-status.locked {
    background: #f8d7da;
    color: #721c24;
}

.achievement-date {
    font-size: 0.8em;
    color: #6c757d;
    margin-top: 5px;
}

/* 下一个目标部分 */
.next-goal-section {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    padding: 25px;
    border-radius: 12px;
    margin-top: 30px;
}

.next-goal-section h4 {
    margin-bottom: 15px;
    font-size: 1.3em;
}

.next-goal-item {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    padding: 20px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

.goal-icon {
    font-size: 2.5em;
    margin-right: 20px;
    flex-shrink: 0;
}

.goal-details h5 {
    margin-bottom: 8px;
    font-size: 1.2em;
}

.goal-details p {
    margin-bottom: 10px;
    opacity: 0.9;
    line-height: 1.5;
}

.goal-progress {
    font-size: 0.9em;
    font-weight: 500;
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 15px;
    display: inline-block;
}

/* 移动端响应式设计 */
@media (max-width: 768px) {
    .achievement-summary .achievement-overview {
        flex-direction: column;
        gap: 12px;
    }
    
    .achievement-stat {
        padding: 12px;
    }
    
    .stat-number {
        font-size: 1.8em;
    }
    
    .achievement-path-explanation {
        padding: 15px;
    }
    
    .achievement-level-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .level-progress {
        text-align: left;
    }
    
    .achievement-item {
        padding: 12px;
    }
    
    .achievement-icon {
        font-size: 1.8em;
        margin-right: 12px;
    }
    
    .next-goal-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .goal-icon {
        margin-right: 0;
    }
    
    .integration-breakdown {
        flex-direction: column;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .achievement-path-explanation h4 {
        font-size: 1.1em;
    }
    
    .path-tip {
        padding: 10px;
    }
    
    .achievement-level-header {
        padding: 15px;
    }
    
    .level-achievements {
        padding: 15px;
    }
    
    .next-goal-section {
        padding: 20px;
    }
}

/* Assessment hiding for Douyin mini-program compliance */
.hide-assessments .assessment-button,
.hide-assessments .assessment-history-button,
.hide-assessments .assessment-stats,
.hide-assessments .assessment-inline,
.hide-assessments #assessmentModal,
.hide-assessments #assessmentHistoryModal {
    display: none !important;
}

/* Guide button hiding */
.hide-guide-buttons .museum-v3-button {
    display: none !important;
}

/* ===== Child Mode Styles ===== */
/* When child mode is enabled, hide parent-only features for a simplified child experience */

/* Hide main page elements that are not relevant for children */
.child-mode .settings-button-icon,
.child-mode .achievement-button-icon,
.child-mode .assessment-history-button-icon,
.child-mode .leaderboard-button-icon,
.child-mode .fireworks-button-icon,
.child-mode .age-selector,
.child-mode .how-to-play-guide,
.child-mode .museum-card .museum-v3-button,
.child-mode .museum-card .visit-checkbox,
.child-mode .site-footer {
    display: none !important;
}

/* Child mode: hide parent-oriented tabs in museum modal */
.child-mode .tab-button[data-target="expert"],
.child-mode .tab-button[data-target="parent"],
.child-mode .tab-button[data-target="share"] {
    display: none !important;
}

/* Child mode: hide parent-oriented content sections */
.child-mode #expertGuidance,
.child-mode #parentChecklist,
.child-mode #shareChecklist {
    display: none !important;
}

/* Child mode: make child tasks tab full width when it's the only visible tab */
.child-mode .checklist-tabs {
    justify-content: center;
}

.child-mode .tab-button[data-target="child"] {
    flex: 0 0 auto;
    min-width: 200px;
    background: var(--primary-color);
    color: white;
    font-weight: 600;
    border-radius: 8px;
    cursor: default; /* Visual indicator that it's the only option */
}

/* Child mode: always show child checklist content */
.child-mode #childChecklist {
    display: block !important;
}

/* Child mode: simplify the stats bar */
.child-mode .stats {
    padding: 12px 15px;
}

.child-mode .stats .minecraft-progress-bar,
.child-mode .stats .achievement-stats,
.child-mode .stats .assessment-stats {
    display: none !important;
}

/* Child mode indicator badge */
.child-mode-indicator {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #ff6b9d, #c44fd4);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(196, 79, 212, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.child-mode .child-mode-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.child-mode-indicator:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(196, 79, 212, 0.5);
}

.child-mode-indicator .exit-text {
    font-size: 12px;
    opacity: 0.9;
}

/* Mobile optimization for child mode */
@media (max-width: 768px) {
    .child-mode .stats {
        padding: 10px 12px;
    }
    
    .child-mode .progress-text {
        font-size: 1.4em;
    }
    
    .child-mode-indicator {
        top: 8px;
        right: 8px;
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .child-mode .tab-button[data-target="child"] {
        min-width: 160px;
    }
}

@media (max-width: 480px) {
    .child-mode-indicator {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .child-mode .tab-button[data-target="child"] {
        min-width: 140px;
    }
}

/* ===== Fireworks Feature Styles ===== */

/* Fireworks Stats Section */
.fireworks-stats {
    margin-top: 15px;
}

.fireworks-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 15px 20px;
    border-radius: 12px;
    gap: 15px;
}

.fireworks-text {
    color: white;
    font-size: 1em;
    font-weight: 500;
}

/* Fireworks Button - Secondary button with transparent background */
.fireworks-button {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: var(--btn-padding-small);
    border-radius: 8px;
    font-size: 0.95em;
    min-height: var(--btn-min-height-touch);
    white-space: nowrap;
    cursor: pointer;
    transition: var(--btn-transition);
}

.fireworks-button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.3);
    transform: var(--btn-hover-transform);
}

.fireworks-button-inline {
    min-width: auto;
}

/* Fireworks Button Icon - Already defined above with other icon buttons */
/* See .fireworks-button-icon in Icon Buttons section */

/* Fireworks Modal - Full Screen Layout */
.fireworks-modal .modal-content {
    max-width: none;
    max-height: none;
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
}

.fireworks-wall-content {
    position: relative;
    width: 100%;
    height: 100%;
    background: #0a0e27;
}

.fireworks-wall-close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    color: white;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fireworks-wall-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.fireworks-wall-container {
    display: flex;
    width: 100%;
    height: 100%;
}

/* Left Panel: Fireworks Animation Area */
.fireworks-wall-left {
    flex: 1;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #2a2f4a 100%);
    position: relative;
    overflow: hidden;
}

.fireworks-canvas {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Right Panel: Achievement Cards */
.fireworks-wall-right {
    width: 400px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fireworks-wall-header {
    padding: 30px 20px 20px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

.fireworks-wall-header h2 {
    color: white;
    margin: 0 0 20px 0;
    font-size: 1.8em;
    text-align: center;
}

.fireworks-wall-stats {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 20px;
}

.fireworks-wall-stat {
    text-align: center;
}

.fireworks-wall-stat .stat-number {
    display: block;
    font-size: 2em;
    font-weight: bold;
    color: white;
    margin-bottom: 5px;
}

.fireworks-wall-stat .stat-label {
    font-size: 0.85em;
    color: rgba(255, 255, 255, 0.8);
}

.fireworks-filters {
    display: flex;
    justify-content: center;
}

.fireworks-cards-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    position: relative;
}

.fireworks-cards-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Fireworks Content (backward compatibility) */
.fireworks-content {
    padding: 20px;
}

.fireworks-summary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px;
    border-radius: 12px;
    color: white;
    margin-bottom: 25px;
}

.fireworks-overview {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 20px;
}

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

.fireworks-stat .stat-number {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 5px;
}

.fireworks-stat .stat-label {
    font-size: 0.9em;
    opacity: 0.9;
}

.fireworks-filters {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.filter-select {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.95em;
    cursor: pointer;
    min-width: 200px;
}

.filter-select option {
    background: #764ba2;
    color: white;
}

/* Fireworks List */
.fireworks-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.fireworks-empty .empty-icon {
    font-size: 4em;
    margin-bottom: 20px;
}

.fireworks-empty p {
    margin: 10px 0;
    font-size: 1.1em;
}

/* Demo Firework Button - Large feature button */
.demo-firework-button {
    margin: 20px auto;
    padding: var(--btn-padding);
    font-size: 1.1em;
    background: var(--btn-feature-fireworks-bg);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--btn-border-radius);
    min-width: 200px;
    min-height: var(--btn-min-height-touch);
    width: fit-content;
    display: block;
    cursor: pointer;
    transition: var(--btn-transition);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.demo-firework-button:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.demo-firework-button:active {
    transform: translateY(0) scale(1);
}

.fireworks-list {
    display: grid;
    gap: 20px;
}

.firework-item {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
    animation: fireworkCardSlideIn 0.5s ease-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

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

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

.firework-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Firework item being pushed out */
.firework-item.exiting {
    animation: fireworkCardExit 0.8s ease-in forwards;
}

@keyframes fireworkCardExit {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(60px) scale(0.7);
    }
}

.firework-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.firework-icon {
    font-size: 2em;
    animation: fireworkPulse 2s ease-in-out infinite;
}

@keyframes fireworkPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.firework-info {
    flex: 1;
}

.firework-museum {
    font-size: 1.2em;
    font-weight: 600;
    color: #333;
    margin: 0 0 5px 0;
}

.firework-date {
    color: #666;
    font-size: 0.9em;
    margin: 0;
}

.firework-age-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 500;
}

.firework-content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    border-left: 4px solid #667eea;
}

.firework-task {
    margin: 0;
    line-height: 1.6;
    color: #444;
    font-size: 1em;
}

/* Remote firework indicator */
.remote-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.85em;
    opacity: 0.8;
    cursor: help;
}

.remote-firework {
    border-left: 3px solid #667eea;
    background: linear-gradient(to right, rgba(102, 126, 234, 0.05), transparent);
}

/* Museum-specific fireworks button in modal */
.fireworks-museum-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fireworks-museum-button:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Mobile responsive styles for fireworks */
@media (max-width: 768px) {
    .fireworks-inline {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .fireworks-button {
        width: 100%;
        padding: 12px 16px;
    }
    
    .fireworks-overview {
        flex-direction: column;
        gap: 20px;
    }
    
    /* Fireworks wall mobile layout */
    .fireworks-wall-container {
        flex-direction: column;
    }
    
    .fireworks-wall-left {
        height: 40vh;
        order: 2;
    }
    
    .fireworks-wall-right {
        width: 100%;
        height: 60vh;
        order: 1;
    }
    
    .fireworks-wall-header {
        padding: 20px 15px 15px;
    }
    
    .fireworks-wall-header h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    
    .fireworks-wall-stats {
        gap: 20px;
    }
    
    .fireworks-wall-stat .stat-number {
        font-size: 1.6em;
    }
    
    .fireworks-cards-container {
        padding: 15px;
    }
    
    .firework-item {
        padding: 15px;
    }
    
    .firework-launch-text {
        font-size: 1em;
    }
    
    .fireworks-filters {
        flex-direction: column;
    }
    
    .filter-select {
        width: 100%;
    }
    
    .firework-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .firework-age-badge {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    .fireworks-stat .stat-number {
        font-size: 2em;
    }
    
    .firework-museum {
        font-size: 1.1em;
    }
    
    .firework-task {
        font-size: 0.95em;
    }
}

/* Under Construction Message */
.under-construction-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.construction-content {
    text-align: center;
    color: white;
    padding: 40px;
    animation: fadeInUp 0.6s ease-out;
}

.construction-icon {
    font-size: 120px;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

.construction-title {
    font-size: 48px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

.construction-text {
    font-size: 24px;
    opacity: 0.9;
}

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-20px);
    }
    60% {
        transform: translateY(-10px);
    }
}

@media (max-width: 768px) {
    .construction-icon {
        font-size: 80px;
    }
    
    .construction-title {
        font-size: 32px;
    }
    
    .construction-text {
        font-size: 18px;
    }
}

/* About Us Section in Settings */
.about-content {
    width: 100%;
}

.about-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 10px 0;
}

.about-description {
    font-size: 14px;
    color: #6c757d;
    margin: 0 0 15px 0;
    font-style: italic;
}

.about-features {
    font-size: 14px;
    color: #495057;
    margin: 0 0 15px 0;
    line-height: 1.6;
}

.about-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.about-features-list li {
    font-size: 14px;
    color: #495057;
    padding: 6px 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .about-title {
        font-size: 15px;
    }
    
    .about-description,
    .about-features,
    .about-features-list li {
        font-size: 13px;
    }
}

/* ===== Leaderboard Styles ===== */
.leaderboard-button-icon {
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaderboard-button-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

/* ===== National Treasures Survey Button ===== */
.national-treasures-button-icon {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.national-treasures-button-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.leaderboard-modal .modal-content {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.leaderboard-content h2 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 24px;
    text-align: center;
}

.leaderboard-intro {
    background: linear-gradient(135deg, #fff5e6, #ffe6cc);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    text-align: center;
}

.leaderboard-intro p {
    margin: 0;
    color: #856404;
    font-size: 14px;
}

.leaderboard-my-rank {
    margin-bottom: 20px;
}

/* Leaderboard Submission Status */
.leaderboard-submission-status {
    margin-bottom: 20px;
}

.status-card {
    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.status-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.status-icon {
    font-size: 24px;
}

.status-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.status-body {
    background: white;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.status-label {
    font-size: 14px;
    color: #666;
}

.status-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

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

.submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    min-width: 180px;
}

.submit-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.submit-btn:disabled {
    background: linear-gradient(45deg, #ccc, #999);
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: none;
}

.submit-btn .btn-icon {
    font-size: 18px;
}

.status-hint {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.status-hint.has-changes {
    color: #ff6b6b;
    font-weight: 600;
}

.my-rank-card {
    background: linear-gradient(135deg, #4a90e2, #5ba3f5);
    border-radius: 12px;
    padding: 20px;
    color: white;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

.rank-badge {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    opacity: 0.9;
}

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

.rank-position {
    font-size: 36px;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}

.rank-details {
    flex: 1;
}

.rank-nickname {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.rank-count {
    font-size: 14px;
    opacity: 0.9;
}

.leaderboard-list {
    min-height: 300px;
}

.leaderboard-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.leaderboard-loading p {
    margin-top: 15px;
    color: #666;
}

.leaderboard-entries {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leaderboard-entry {
    display: flex;
    align-items: center;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    transition: all 0.3s ease;
}

.leaderboard-entry:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.leaderboard-entry.top-3 {
    background: linear-gradient(135deg, #fff9e6, #fffbf0);
    border-color: #ffd700;
}

.leaderboard-entry.my-entry {
    background: linear-gradient(135deg, #e3f2fd, #f0f7ff);
    border: 2px solid #4a90e2;
}

.entry-rank {
    font-size: 20px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
    color: #666;
}

.leaderboard-entry.top-3 .entry-rank {
    font-size: 24px;
}

.entry-rank.rank-1 {
    color: #FFD700;
}

.entry-rank.rank-2 {
    color: #C0C0C0;
}

.entry-rank.rank-3 {
    color: #CD7F32;
}

.entry-medal {
    font-size: 28px;
    margin-right: 10px;
}

.entry-info {
    flex: 1;
}

.entry-nickname {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.entry-count {
    font-size: 13px;
    color: #666;
}

.leaderboard-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.leaderboard-update-time {
    text-align: center;
    font-size: 12px;
    color: #999;
}

.leaderboard-empty {
    text-align: center;
    padding: 40px 20px;
}

.leaderboard-empty .empty-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.leaderboard-empty p {
    color: #666;
    margin: 5px 0;
}

@media (max-width: 768px) {
    .leaderboard-modal .modal-content {
        width: 95vw;
        max-height: 85vh;
    }

    .leaderboard-content h2 {
        font-size: 20px;
    }
    
    .status-card {
        padding: 15px;
    }
    
    .status-header {
        margin-bottom: 12px;
    }
    
    .status-icon {
        font-size: 20px;
    }
    
    .status-title {
        font-size: 14px;
    }
    
    .status-body {
        padding: 12px;
    }
    
    .status-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
        padding: 10px 0;
    }
    
    .submit-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 15px;
        min-width: unset;
    }
    
    .status-hint {
        font-size: 12px;
    }

    .my-rank-card {
        padding: 15px;
    }

    .rank-position {
        font-size: 28px;
        min-width: 50px;
    }

    .rank-nickname {
        font-size: 16px;
    }

    .rank-count {
        font-size: 13px;
    }

    .entry-rank {
        font-size: 18px;
        min-width: 40px;
    }

    .leaderboard-entry.top-3 .entry-rank {
        font-size: 20px;
    }

    .entry-medal {
        font-size: 24px;
    }

    .entry-nickname {
        font-size: 15px;
    }

    .entry-count {
        font-size: 12px;
    }
}

/* ===== Leaderboard Tabs ===== */
.leaderboard-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
    padding: 0 5px;
}

.leaderboard-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
}

.leaderboard-tab:hover {
    border-color: #c0c0c0;
    background: #f0f0f0;
}

.leaderboard-tab.active {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, #e3f2fd, #f0f7ff);
    box-shadow: 0 2px 8px rgba(44, 90, 160, 0.15);
}

.leaderboard-tab .tab-icon {
    font-size: 20px;
}

.leaderboard-tab .tab-text {
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.leaderboard-tab.active .tab-text {
    color: var(--primary-color);
}

/* Pet stats display in leaderboard entry */
.entry-pet-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
}

.entry-pet-stat {
    display: flex;
    align-items: center;
    gap: 3px;
}

.entry-pet-stat .stat-icon {
    font-size: 14px;
}

.entry-pet-stat .stat-value {
    font-weight: 700;
}


/* Pet emoji display in leaderboard */
.entry-pet-emoji {
    font-size: 20px;
    margin-right: 8px;
}

/* Mobile adjustments for leaderboard tabs */
@media (max-width: 480px) {
    .leaderboard-tabs {
        gap: 6px;
    }
    
    .leaderboard-tab {
        padding: 10px 6px;
        min-height: 54px;
    }
    
    .leaderboard-tab .tab-icon {
        font-size: 18px;
    }
    
    .leaderboard-tab .tab-text {
        font-size: 11px;
    }
    
    .entry-pet-stats {
        gap: 8px;
        font-size: 11px;
    }
}

/* =====================================================
   SITE FOOTER WITH ICP REGISTRATION
   网站底部备案信息
   
   Professional footer design with modern aesthetics
   ===================================================== */

.site-footer {
    width: 100%;
    margin-top: 80px;
    padding: 40px 20px 30px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 50%, #f1f3f5 100%);
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        rgba(44, 90, 160, 0.2) 20%, 
        rgba(44, 90, 160, 0.4) 50%, 
        rgba(44, 90, 160, 0.2) 80%, 
        transparent 100%) 1;
    text-align: center;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
}

/* =====================================================
   END OF STYLE.CSS
   
   Leaderboard styles moved to css/leaderboard.css
   to avoid duplication across pages
   ===================================================== */

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-text {
    margin: 0;
    font-size: 14px;
    color: #666;
    line-height: 1.8;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.footer-link {
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(44, 90, 160, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.footer-link:hover {
    color: var(--primary-color);
    background: rgba(255, 255, 255, 1);
    border-color: rgba(44, 90, 160, 0.3);
    box-shadow: 0 4px 12px rgba(44, 90, 160, 0.15);
    transform: translateY(-2px);
}

.footer-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    flex-shrink: 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.footer-link:hover .footer-icon {
    opacity: 1;
}

/* Decorative element */
.footer-content::before {
    content: '🏛️';
    font-size: 28px;
    opacity: 0.6;
    margin-bottom: 8px;
    filter: grayscale(0.3);
}

/* Divider between footer items */
.footer-text + .footer-text {
    position: relative;
}

.footer-text + .footer-text::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(44, 90, 160, 0.2) 50%, 
        transparent 100%);
}

/* Mobile optimization for footer */
@media (max-width: 768px) {
    .site-footer {
        margin-top: 50px;
        padding: 30px 15px 25px;
    }
    
    .footer-content {
        gap: 14px;
    }
    
    .footer-text {
        font-size: 13px;
    }
    
    .footer-link {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .footer-icon {
        width: 14px;
        height: 14px;
    }
    
    .footer-content::before {
        font-size: 24px;
        margin-bottom: 6px;
    }
}

@media (max-width: 480px) {
    .site-footer {
        margin-top: 40px;
        padding: 25px 12px 20px;
    }
    
    .footer-content {
        gap: 12px;
    }
    
    .footer-text {
        font-size: 12px;
    }
    
    .footer-link {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .footer-icon {
        width: 12px;
        height: 12px;
    }
    
    .footer-content::before {
        font-size: 20px;
    }
}

/* Hide assessment-related elements when assessments are disabled */
/* Note: museum-checkin-button is intentionally NOT hidden here because */
/* check-in functionality is independent of parent-child assessment features */
}

/* =====================================================
   TREASURE CHECK-IN CONFIGURATION STYLES
   镇馆之宝打卡配置样式
   ===================================================== */

.treasure-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.treasure-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: white;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    transition: all 0.2s ease;
    cursor: pointer;
}

.treasure-checkbox-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(44, 90, 160, 0.1);
}

.treasure-checkbox-item.selected {
    border-color: var(--accent-color);
    background: linear-gradient(135deg, #f0fff4 0%, #e8f5e9 100%);
}

.treasure-checkbox-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

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

.treasure-item-name {
    font-weight: 600;
    color: #333;
    font-size: 14px;
    margin-bottom: 4px;
}

.treasure-item-description {
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.treasure-item-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.current-treasure-config-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.current-config-museum {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid #e0e0e0;
}

.current-config-museum-name {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-config-treasures {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.current-config-treasure-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.current-config-treasure-tag .remove-treasure {
    cursor: pointer;
    margin-left: 4px;
    opacity: 0.8;
    font-size: 14px;
}

.current-config-treasure-tag .remove-treasure:hover {
    opacity: 1;
}

.empty-config-hint {
    text-align: center;
    color: #999;
    padding: 20px;
    font-size: 14px;
}

/* Mobile optimization for treasure configuration */
@media (max-width: 768px) {
    .treasure-checkbox-list {
        max-height: 250px;
    }
    
    .treasure-checkbox-item {
        padding: 8px;
    }
    
    .treasure-item-name {
        font-size: 13px;
    }
    
    .treasure-item-description {
        font-size: 11px;
        -webkit-line-clamp: 1;
    }
    
    .treasure-item-image {
        width: 40px;
        height: 40px;
    }
}
/* Museum Posters Gallery Styles */
.museum-posters-gallery {
    margin: 20px 0;
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8eef5 100%);
    border-radius: 12px;
}

.gallery-title {
    font-size: 20px;
    font-weight: bold;
    color: #2c5aa0;
    margin-bottom: 16px;
    text-align: center;
}

.poster-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    max-height: 500px;
    overflow-y: auto;
    padding: 8px;
}

.poster-gallery-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.poster-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.poster-thumbnail {
    width: 100%;
    height: auto;
    display: block;
}

.poster-info {
    padding: 12px;
    text-align: center;
}

.poster-museum-name {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.poster-date {
    font-size: 12px;
    color: #666;
}

/* Poster Viewer Modal */
.poster-viewer-modal .modal-content {
    max-width: 900px;
    padding: 20px;
}

.poster-viewer-container {
    text-align: center;
    margin-bottom: 20px;
}

.poster-viewer-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.poster-viewer-info {
    text-align: center;
    margin-bottom: 20px;
}

.poster-viewer-info h3 {
    font-size: 22px;
    color: #2c5aa0;
    margin-bottom: 8px;
}

.poster-viewer-info p {
    font-size: 14px;
    color: #666;
}

.poster-viewer-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .poster-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .gallery-title {
        font-size: 18px;
    }
    
    .poster-viewer-modal .modal-content {
        width: 95%;
        padding: 15px;
    }
    
    .poster-viewer-actions {
        flex-direction: column;
    }
    
    .poster-viewer-actions .poster-button {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .poster-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .poster-info {
        padding: 8px;
    }
    
    .poster-museum-name {
        font-size: 12px;
    }
    
    .poster-date {
        font-size: 10px;
    }
}