/* SECTIONS IN THIS FILE
quiz
quiz context discovery modal
category
recent progress
search
skills
songlist
metacat
my content
HTML page
HTML page main content layout
embed page
home
goals
chart
account
create content
showcase
lesson page
activity page
*/

/* ================================
   SECTION - QUIZ PAGE STYLES
   ================================ */

/* REMOVED: Empty .quiz-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.quiz-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only quiz-specific additions remain */
}


.quiz-scope-options {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.quiz-scope-option .radio-pair label {
    font-weight: bold;
}

.quiz-selector-list,
.quiz-topics-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    max-height: none;
    overflow-y: visible;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* CSS class replacing inline styles for improved separation of concerns */
.quiz-list-expanded {
    max-height: none;
    overflow-y: visible;
}

/* Enhanced with mystyle.css form element patterns */
.quiz-selector-item {
    /* Enhanced layout patterns */
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    /* Form element styling similar to mystyle.css input standards */
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    transition: background-color 0.3s ease,
                border-color 0.3s ease,
                box-shadow var(--transition-speed) ease;
    color: var(--text-color);
    cursor: pointer;
}

/* Enhanced hover state with mystyle.css standards */
.quiz-selector-item:hover {
    background-color: var(--light-bg);
    border-color: var(--color-neutral);
}

/* .quiz-button now uses .btn from mystyle.css */
/* Remove this block - functionality provided by .btn */

/* Enhanced with mystyle.css patterns */
.quiz-scope-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.quiz-scope-summary > strong {
    white-space: nowrap;
    flex-shrink: 0;
}

#quiz-scope-summary-content {
    overflow-wrap: break-word;
    min-width: 0;
}

/* Quiz scope summary now uses natural flex display via data attributes */

/* View all questions toggle alignment in summary */
.quiz-view-all-questions-toggle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: var(--spacing-xs);
}

.quiz-view-all-questions-toggle .quiz-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.quiz-view-all-questions-toggle input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

.quiz-view-all-questions-toggle .quiz-toggle-label {
    margin: 0;
    line-height: 1;
}

/* Enhanced with mystyle.css .btn-link pattern */
.quiz-change-link {
    /* Base styling now leverages .btn-link patterns */
    flex-shrink: 0;
    margin-left: var(--spacing-sm);
}

/* Quiz configuration title container */
.quiz-scope-title-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.quiz-scope-title {
    font-size: 1.1rem;
    margin: 0;
}


/* Quiz scope description */
.quiz-scope-description {
    font-size: 0.875rem;
    opacity: 0.8;
}

.quiz-scope-description.disabled {
    opacity: 0.8;
}

/* Selected topics container */
.quiz-selected-topics-flex-container {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Selected topic tags */
.quiz-selected-topic-tag {
    /* CSS variables for theming */
    --quiz-selected-topic-bg: #e3f2fd;
    --quiz-selected-topic-text: #1976d2;
    --quiz-selected-topic-border: #bbdefb;
    --quiz-remove-button-color: #d32f2f;
    --quiz-remove-button-hover-bg: rgba(211, 47, 47, 0.1);
    background-color: var(--quiz-selected-topic-bg, #e3f2fd);
    color: var(--quiz-selected-topic-text, #1976d2);
    padding: 0.25rem 0.5rem;
    border-radius: var(--border-radius-xl);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--quiz-selected-topic-border, #bbdefb);
}

/* Remove button for selected topics */
.quiz-selected-topic-remove {
    background: none;
    border: none;
    color: var(--quiz-remove-button-color, #d32f2f);
    font-size: 1.125rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-full);
    transition: background-color 0.2s;
}

.quiz-selected-topic-remove:hover {
    background-color: var(--quiz-remove-button-hover-bg, rgba(211, 47, 47, 0.1));
}

.quiz-scope-guidance {
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    font-weight: 500;
    color: var(--text-color);
}

/* Question display area */
.quiz-question-container {
    /* Removed display: none - visibility should be controlled via data attributes in JavaScript */
    width: 100%;
    flex-direction: column;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-question-container.active {
    display: flex;
}

/* Flashcard-specific quiz container styling - removes container padding/border to let flashcard styles handle it */
.quiz-question-container.quiz-flashcard-container {
    padding: 0;
    border: none;
    background-color: transparent;
    border-radius: 0;
    max-width: 100%; /* Allow full width for flashcard centering */
}

.quiz-question-text {
    font-size: clamp(var(--font-size-md), 3vw, 1.2rem);
    font-weight: 500;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
}

.quiz-image-container {
    display: flex;
    justify-content: center;
    margin-bottom: var(--spacing-lg);
}

.quiz-image-container img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

.quiz-answers {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-bottom: var(--spacing-lg);
}

.quiz-answer {
    display: flex;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    border-radius: var(--border-radius-sm);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.3s ease;
    color: var(--text-color);
}

.quiz-answer:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .quiz-answer:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.quiz-answer.selected {
    background-color: rgba(77, 144, 254, 0.1);
    border-color: var(--focus-color);
}

[data-theme="dark"] .quiz-answer.selected {
    background-color: rgba(93, 159, 255, 0.2);
}

.quiz-answer.correct {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
}

.quiz-answer.incorrect {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
}

.quiz-answer-radio {
    margin: 0;
    accent-color: var(--focus-color);
}

.quiz-answer-text {
    flex: 1;
    color: var(--text-color);
}

.quiz-feedback {
    margin-top: var(--spacing-lg);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    border-radius: var(--border-radius-sm);
    /* Removed display: none - visibility should be controlled via data attributes in JavaScript */
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-feedback.correct {
    display: block;
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
}

.quiz-feedback.incorrect {
    display: block;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
}

/* .quiz-skip-button now uses .btn .btn-secondary from mystyle.css */
/* Remove this block - functionality provided by .btn .btn-secondary */

/* Breadcrumb styles */
.quiz-breadcrumb {
    margin-bottom: var(--spacing-lg);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.7;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Empty and error states */
.quiz-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    color: var(--text-color);
    opacity: 0.7;
    text-align: center;
}

.quiz-error-message {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.quiz-error-container {
    padding: var(--spacing-xl);
    color: var(--color-danger);
    text-align: center;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-md);
    margin: var(--spacing-lg);
}

.quiz-error-title {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-danger);
}

.quiz-selector-info {
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    color: var(--text-color);
    font-style: italic;
    opacity: 0.8;
}

/* Quiz selector container - visibility controlled via data attributes only */
.quiz-selector-container {
    margin: var(--spacing-sm) 0 var(--spacing-lg) var(--spacing-xl);
}

/* Topics layout */
.quiz-topics-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    width: 100%;
    margin-top: var(--spacing-sm);
}

.quiz-topics-column {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
}



.quiz-topics-heading {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0 0 clamp(var(--spacing-sm), 2vw, var(--spacing-md)) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    color: var(--text-color);
}

.quiz-topics-helper {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    margin-top: var(--spacing-sm);
    font-style: italic;
    width: 100%;
}

.quiz-topics-helper.warning {
    color: var(--color-danger);
    font-weight: 500;
}

.quiz-selector-item.selected {
    background-color: rgba(77, 144, 254, 0.1);
}

[data-theme="dark"] .quiz-selector-item.selected {
    background-color: rgba(93, 159, 255, 0.2);
}

/* Invalid selection animation */
.invalid-selection {
    border: 2px solid var(--color-danger);
    background-color: var(--color-danger-light);
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.25);
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-5px); }
    40%, 80% { transform: translateX(5px); }
}

/* Disabled topic styles */
.quiz-selector-item.disabled-topic {
    opacity: 0.7;
    cursor: not-allowed;
    position: relative;
    border-color: var(--light-border);
    background-color: var(--light-bg);
}

.quiz-selector-item.disabled-topic:hover {
    background-color: var(--light-bg);
    box-shadow: none;
}

.quiz-selector-item.disabled-topic label {
    cursor: not-allowed;
}

/* Tooltip styles for disabled topics */
.quiz-selector-item.disabled-topic::before {
    content: attr(title);
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
    pointer-events: none;
}

.quiz-selector-item.disabled-topic::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 10;
    pointer-events: none;
}

.quiz-selector-item.disabled-topic:hover::before,
.quiz-selector-item.disabled-topic:hover::after {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .quiz-selector-item.disabled-topic {
    background-color: var(--bg-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic:hover {
    background-color: var(--bg-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic::before {
    background-color: rgba(50, 50, 50, 0.9);
    color: var(--text-color);
}

[data-theme="dark"] .quiz-selector-item.disabled-topic::after {
    border-color: rgba(50, 50, 50, 0.9) transparent transparent transparent;
}

/* Quiz completion styles */
.quiz-completion-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xxl);
    color: var(--text-color);
    text-align: center;
    background-color: var(--color-success-light);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-lg) 0;
}

.quiz-completion-state h3 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-success);
    font-size: clamp(var(--font-size-lg), 4vw, 1.5rem);
}

.quiz-completion-stats {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

.quiz-completion-stats p {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
}

/* .quiz-restart-button now uses .btn .btn-secondary from mystyle.css */
/* Remove this block - functionality provided by .btn .btn-secondary */

/* Assessment specific styles */
.assessment-question-container {
    position: relative;
}

.assessment-progress {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.assessment-end-link {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-lg);
    transition: color 0.2s ease;
}

/* View All Questions progress indicator styles (similar to assessment progress) */
.view-all-questions-progress {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    text-align: center;
}

.assessment-prev-button:disabled,
.assessment-prev-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--button-disabled);
    color: var(--color-neutral);
    border-color: var(--light-border);
}

.assessment-prev-button:disabled:hover,
.assessment-prev-button.disabled:hover {
    background-color: var(--button-disabled);
    color: var(--color-neutral);
    border-color: var(--light-border);
    transform: none;
}

/* Knowledge limit and challenging question buttons - keep custom colors but use .btn base */
.knowledge-limit-button {
    /* Base styling now inherited from .btn */
    font-size: var(--font-size-xs);
    flex: 1 1 auto;
    min-width: 140px;
    background-color: var(--color-warning);
    color: white;
}

.knowledge-limit-button:hover {
    background-color: color-mix(in srgb, var(--color-warning) 85%, #d35400);
}

.challenging-question-button {
    /* Base styling now inherited from .btn */
    font-size: var(--font-size-xs);
    flex: 1 1 auto;
    min-width: 140px;
    background-color: var(--color-danger);
    color: white;
}

.challenging-question-button:hover {
    background-color: color-mix(in srgb, var(--color-danger) 90%, black);
}

/* Assessment recommendation overlay */
/* Enhanced with .modal-system-overlay pattern */
.assessment-recommendation-overlay {
    /* Base overlay functionality now leverages .modal-system-overlay patterns */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--modal-backdrop-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--modal-z-index);
    padding: var(--modal-padding);
    transition: opacity var(--modal-animation-duration) ease;
    box-sizing: border-box;
}

/* Assessment recommendation overlay visibility via data attributes */

/* Enhanced with .modal-system-container pattern */
.assessment-recommendation-card {
    /* Base container functionality now leverages .modal-system-container patterns */
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    max-width: 500px;
    text-align: center;
    transform: scale(1);
    transition: transform var(--modal-animation-duration) ease,
                background-color 0.3s ease,
                border-color 0.3s ease;
    pointer-events: auto;
    /* Assessment-specific styling */
    border: 2px solid var(--focus-color);
    padding: var(--spacing-xxl);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.assessment-recommendation-card h3 {
    color: var(--focus-color);
    margin: 0 0 var(--spacing-lg) 0;
}

.recommendation-details {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    text-align: left;
}

.recommendation-details h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
}

.recommendation-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-xl);
}

.assessment-results {
    border: 2px solid var(--focus-color);
}

.assessment-results h3 {
    color: var(--focus-color);
}

.assessment-recommendation {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    text-align: left;
}

.assessment-recommendation h4 {
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--focus-color);
}

/* .assessment-actions now uses .prompt-button-container from mystyle.css */
.assessment-actions {
    flex-wrap: wrap;
    /* Base flex layout handled by .prompt-button-container */
}

.knowledge-limit-results {
    border-color: var(--color-warning);
}

.knowledge-limit-results h3 {
    color: var(--color-warning);
}

/* Quiz section header - inherits full-width from .section-header, adds flex layout */
.section-header.quiz-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Quiz header inner container for layout */
.quiz-header-inner {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    width: 100%;
}

/* Quiz header title styling */
.quiz-header-inner h3 {
    margin: 0;
    flex-shrink: 0;
}

.quiz-mode-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

.quiz-mode-container span {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.quiz-mode-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-xs);
    min-width: 140px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.quiz-mode-select:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
}

.topic-list {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin: var(--spacing-lg) 0;
}

.topic-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color);
}

.topic-item.show-more {
    margin-top: var(--spacing-sm);
    padding-left: 1.6rem;
}

.topic-item input[type="checkbox"],
.topic-item input[type="radio"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

.topic-item label {
    color: var(--text-color);
    cursor: pointer;
}

/* Disabled scope option styles */
.quiz-scope-option-disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.quiz-scope-option-disabled input[type="radio"] {
    cursor: not-allowed;
    opacity: 0.5;
}

.quiz-scope-option-disabled label {
    cursor: not-allowed;
    color: var(--text-color);
    opacity: 0.6;
}

.quiz-scope-option-disabled input[type="radio"]:disabled {
    accent-color: var(--light-border);
    background-color: var(--light-bg);
}

.quiz-scope-option-disabled a {
    color: var(--focus-color);
    opacity: 1;
    cursor: pointer;
    text-decoration: none;
    font-weight: 500;
}

.quiz-scope-option-disabled a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 700px) {
    .quiz-button {
        width: 100%;
    }
    
    .quiz-topics-container {
        flex-direction: column;
    }
    
    .quiz-topics-column {
        width: 100%;
    }
    
    /* Assessment buttons always remain in single row with equal sizing */
    
    .recommendation-actions {
        flex-direction: column;
    }

    .assessment-actions {
        flex-direction: column;
    }

    .assessment-recommendation-card {
        padding: var(--spacing-xl);
        margin: var(--spacing-sm);
    }
}

@media (max-width: 576px) {
    .quiz-question-text {
        font-size: var(--font-size-md);
    }
    
    .quiz-answer {
        padding: calc(var(--spacing-sm) * 0.75) var(--spacing-sm);
    }
    
    .quiz-selector-item {
        padding: 0.4rem;
    }
    
    .quiz-selector-item label {
        font-size: var(--font-size-xs);
    }
    
    .assessment-progress {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    }
    
    .view-all-questions-progress {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    }

    .assessment-buttons {
        margin-top: var(--spacing-lg);
    }
}

/* Assessment buttons font size and padding adjustment for narrow screens to prevent overflow */
@media (max-width: 420px) {
    .assessment-buttons .btn {
        font-size: var(--font-size-xs); /* Shrink from default to prevent text overflow */
        padding-left: var(--spacing-xs);
        padding-right: var(--spacing-xs);
        overflow-wrap: break-word;
        hyphens: auto;
    }
}

@media (max-width: 350px), (max-height: 450px) {
    .quiz-page-container {
        padding: calc(var(--spacing-xs) * 0.5);
    }
    
    .quiz-answer {
        padding: var(--spacing-xs);
    }
    
    .quiz-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: calc(var(--font-size-sm) * 0.9);
    }
}

/* ===== Quiz Topics Tabs (Mobile-Friendly Quiz Configuration) ===== */
.quiz-topics-tabs-container {
    margin-top: 0.75rem;
}

.quiz-topics-tab-headers {
    display: flex;
    border-bottom: 2px solid var(--light-border, #ddd);
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.quiz-topics-tab-headers::-webkit-scrollbar {
    display: none;
}

.quiz-topics-tab-header {
    background: none;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color, #666);
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.quiz-topics-tab-header:hover {
    color: var(--focus-color, #4D90FE);
    background-color: var(--light-bg, #f5f5f5);
}

.quiz-topics-tab-header.active {
    color: var(--focus-color, #4D90FE);
    border-bottom-color: var(--focus-color, #4D90FE);
    font-weight: 600;
}

.quiz-topics-tab-content {
    position: relative;
}

/* All quiz topics tabs - visibility controlled via data attributes only in JavaScript */

.quiz-topics-tab .quiz-topics-list {
    max-height: none;
    overflow-y: visible;
}

/* Metacat group container */
.quiz-metacat-group {
    margin-bottom: var(--spacing-xs);
}

/* Metacat header row with expand toggle */
.quiz-metacat-header {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Metacat item fills remaining header space */
.quiz-metacat-header .quiz-metacat-item {
    /* Grid handles layout, no need for flex: 1 */
}

/* Expand/collapse caret */
.quiz-metacat-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-height: 44px;
    cursor: pointer;
    transition: transform var(--transition-speed) ease;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    user-select: none;
}

.quiz-metacat-toggle[aria-expanded="true"] {
    transform: rotate(90deg);
}

/* Direct categories aligned with metacat items using padding */
.quiz-direct-category-item {
    /* Account for toggle width + gap between toggle and selector-item + selector-item's own left padding */
    padding-left: calc(24px + var(--spacing-xs) + var(--spacing-sm));
}

/* Nested categories container */
.quiz-metacat-children {
    /* Indent children to show hierarchy: toggle width + gap + extra spacing for visual nesting */
    padding-left: calc(24px + var(--spacing-xs) + var(--spacing-lg));
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Metacat with no categories — grayed out, non-interactive */
.quiz-metacat-group--empty .quiz-metacat-toggle {
    visibility: hidden;
    cursor: default;
}

.quiz-metacat-group--empty .quiz-metacat-item {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* Mobile optimizations for tabs */
@media (max-width: 768px) {
    .quiz-topics-tab-headers {
        justify-content: flex-start;
        gap: 0;
        /* Add scroll indicators */
        background: linear-gradient(to right, var(--bg-color) 10px, transparent 10px, transparent calc(100% - 10px), var(--bg-color) calc(100% - 10px));
        padding: 0 10px;
    }
    
    .quiz-topics-tab-header {
        flex: 1;
        text-align: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
        min-height: 44px; /* Touch target size */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Add mobile-specific tab indicators */
    .quiz-topics-tab-headers::before,
    .quiz-topics-tab-headers::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 10px;
        pointer-events: none;
        z-index: 1;
    }
    
    .quiz-topics-tab-headers::before {
        left: 0;
        background: linear-gradient(to right, var(--bg-color), transparent);
    }
    
    .quiz-topics-tab-headers::after {
        right: 0;
        background: linear-gradient(to left, var(--bg-color), transparent);
    }
}

/* Very small screen optimizations */
@media (max-width: 480px) {
    .quiz-topics-tab-header {
        font-size: 0.8rem;
        padding: 0.75rem 0.25rem;
        min-width: 80px;
    }
    
    /* Consider dropdown for very small screens if many tabs */
    .quiz-topics-tab-headers.many-tabs {
        flex-direction: column;
        overflow-x: visible;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .quiz-topics-tab-headers.many-tabs .quiz-topics-tab-header {
        width: 100%;
        text-align: left;
        border-bottom: 1px solid var(--light-border);
        border-right: none;
    }
}

/* Selected topics display */
.quiz-selected-topics-display {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quiz-selected-topics-container {
    margin-top: var(--spacing-xs);
}

/* Dark mode support for selected topics */
[data-theme="dark"] .quiz-selected-topic-tag {
    --quiz-selected-topic-bg: rgba(66, 165, 245, 0.15);
    --quiz-selected-topic-text: #90caf9;
    --quiz-selected-topic-border: rgba(66, 165, 245, 0.3);
    --quiz-remove-button-color: #ef5350;
    --quiz-remove-button-hover-bg: rgba(239, 83, 80, 0.1);
}

/* ================================
   SECTION - QUIZ CONTEXT DISCOVERY MODAL
   ================================ */

.context-discovery-modal {
    max-width: 500px;
    margin: 0 auto;
}

.context-discovery-subtitle {
    color: var(--text-color-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

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

.context-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--surface-color, white);
}

.context-option:hover {
    border-color: var(--accent-color);
    background: var(--surface-hover-color, #f8f9fa);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.context-option:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.context-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.context-details {
    flex: 1;
    min-width: 0;
}

.context-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 var(--spacing-xs) 0;
}

.context-description {
    font-size: var(--font-size-sm);
    color: var(--text-color-muted);
    margin: 0;
    line-height: 1.4;
}

/* Dark mode support for context discovery modal */
[data-theme="dark"] .context-option {
    --surface-color: var(--bg-color-secondary);
    --surface-hover-color: rgba(255, 255, 255, 0.05);
    --border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .context-option:hover {
    --border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ================================
   SECTION - CATEGORY PAGE STYLES
   ================================ */

/* MIGRATED: Now uses .page-container from mystyle.css */
.category-page-container {
    /* All base layout styles now provided by .page-container from mystyle.css */
    /* Only category-specific additions remain */
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    box-sizing: border-box;
    
    /* For layout structure */
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.category-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only category-specific additions remain */
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.category-page-overall-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    /* Use consistent background pattern */
    background-color: var(--light-bg);
    transition: background-color var(--transition-speed) ease;
}

.category-page-score-group {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
    margin-right: var(--spacing-sm);
    min-width: 200px;
}

/* Category page wall container - ensure proper spacing and prevent overlaps */
.category-page-wall-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: var(--spacing-lg) 0;

    /* Increased margin for better separation */
    padding: var(--spacing-xs);

    /* Add padding to prevent edge clipping */
    overflow: visible;

    /* Allow recent indicators to show */
    position: relative;

    /* Proper positioning context */
}

@media (width <= 768px) {
    .category-page-wall-container {
        margin: var(--spacing-md) var(--spacing-xs);

        /* Reduce horizontal margin on mobile */
        padding: var(--spacing-xs);

        /* Ensure adequate padding */
    }
}

.category-page-continue-button-container {
    display: flex;
    margin: var(--spacing-md) var(--spacing-xs);
}

/* Disabled link styling */
.disabled-link {
    pointer-events: none;
    color: var(--color-neutral);
    text-decoration: none;
    opacity: 0.5;
}

/* Progress bar minimum width for category pages */
.category-progress-bar-min-width {
    min-width: 150px;
}

/* Responsive adjustments - basically disabled because so narrow */
@media (max-width: 300px) {
    .category-page-overall-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .category-page-score-group {
        width: 100%;
        margin-bottom: var(--spacing-xs);
    }

    .category-page-continue-button-container {
        margin: var(--spacing-md) var(--spacing-xs) var(--spacing-xs);
    }
}

/* ================================
   SECTION - RECENT PROGRESS PAGE STYLES
   ================================ */

/* Recent Progress page container */
/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .recent-progress-page-container - functionality provided by .page-container from mystyle.css */


/* Date controls */
.recent-progress-date-controls {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .recent-progress-date-controls {
    background-color: rgba(255, 255, 255, 0.05);
}

.recent-progress-date-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-date-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

/* Test-Out Mode controls */
.recent-progress-testout-controls {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    display: flex;
    justify-content: center;
}

[data-theme="dark"] .recent-progress-testout-controls {
    background-color: rgba(255, 255, 255, 0.05);
}

.recent-progress-testout-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-testout-checkbox {
    margin: 0;
    cursor: pointer;
}

.recent-progress-testout-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.recent-progress-testout-link {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
}

/* Test-Out Mode component integration */
.recent-progress-testout-controls .testout-toggle-component {
    background: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
}

.recent-progress-testout-controls .testout-toggle-checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.recent-progress-testout-controls .testout-toggle-checkbox {
    margin: 0;
    cursor: pointer;
}

.recent-progress-testout-controls .testout-toggle-label {
    font-weight: bold;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

.recent-progress-testout-controls .help-link-component {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
}

/* Comparison layout */
.recent-progress-comparison-container {
    margin: calc(var(--spacing-lg) * 1.25) 0;
}

.recent-progress-comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--spacing-lg) * 1.25);
    margin: var(--spacing-md) 0;
    align-items: start;
}

/* Phase 4: Added to replace inline gridTemplateColumns style assignment */
.recent-progress-comparison-grid.single-column {
    grid-template-columns: 1fr;
}

.recent-progress-comparison-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-height: 100%;
}

.recent-progress-comparison-header {
    text-align: center;
    font-weight: bold;
    font-size: clamp(var(--font-size-md), 2.5vw, 1.1rem);
    color: var(--text-color);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .recent-progress-comparison-header {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
}

/* Wall items */
.recent-progress-wall-item {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    height: var(--card-height, auto);
}

.recent-progress-wall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    min-height: 2rem;
}

.recent-progress-wall-title {
    font-weight: bold;
    font-size: var(--font-size-md);
    color: var(--text-color);
    word-wrap: break-word;
    line-height: 1.3;
}

.recent-progress-wall-item-with-label .recent-progress-wall-title {
    padding-right: 80px; /* Make room for the timeframe label */
}

.recent-progress-wall-link {
    font-size: var(--font-size-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.recent-progress-wall-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-sm) 0;
    flex: 1;
    min-height: 120px;
}

/* No change message */
.recent-progress-wall-container .no-change-message {
    text-align: center;
    font-style: italic;
    color: var(--color-neutral);
    padding: calc(var(--spacing-lg) * 1.25) var(--spacing-md);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
}

[data-theme="dark"] .recent-progress-wall-container .no-change-message {
    color: var(--color-neutral-light);
}

.recent-progress-no-changes {
    text-align: center;
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
}

.recent-progress-no-changes h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
}

.recent-progress-no-changes p {
    margin: var(--spacing-xs) 0;
}

.recent-progress-no-changes p:last-child {
    margin-bottom: 0;
}

[data-theme="dark"] .recent-progress-no-changes {
    background-color: var(--color-bg-secondary);
}

.recent-progress-separator {
    margin: var(--spacing-lg) 0;
    height: 1px;
    background-color: var(--light-border);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Progress indicators */
.recent-progress-category-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding: var(--spacing-sm);
    flex-shrink: 0;
}

/* Mobile layout styles */
.recent-progress-mobile-stack {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.recent-progress-pair-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    background-color: var(--bg-color);
}

[data-theme="dark"] .recent-progress-pair-container {
    border-color: var(--color-neutral-dark);
}

.recent-progress-pair-separator {
    height: 1px;
    background-color: var(--light-border);
    margin: var(--spacing-sm) 0;
    opacity: 0.3;
}

.recent-progress-wall-item-with-label {
    position: relative;
}

.recent-progress-timeframe-label {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: var(--focus-color);
    color: white;
    padding: calc(var(--spacing-xs) * 0.75) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-xs);
    font-weight: bold;
    z-index: var(--z-dropdown);
    max-width: 60px;
    text-align: center;
}

/* Responsive adjustments */
/* Phase 4: Simplified to CSS-only responsive design, removed .mobile-stack and column hiding */
@media (max-width: 600px) {
    .recent-progress-comparison-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .recent-progress-wall-item {
        min-height: auto;
    }
    
    .recent-progress-wall-container {
        min-height: 100px;
    }
    
    .recent-progress-date-controls {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .recent-progress-wall-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        min-height: auto;
    }
}

/* Filter interface styles */
.recent-progress-button-container {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.recent-progress-filter-icon {
    background: none;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    min-width: 40px;
    height: 40px;
}

.recent-progress-filter-icon:hover {
    color: var(--text-color);
    border-color: var(--color-primary);
    background-color: var(--light-bg);
}

[data-theme="dark"] .recent-progress-filter-icon {
    border-color: var(--color-neutral);
    background-color: var(--header-bg);
}

[data-theme="dark"] .recent-progress-filter-icon:hover {
    border-color: var(--color-primary);
    background-color: rgba(255, 255, 255, 0.1);
}

.recent-progress-filter-container {
    margin: var(--spacing-md) 0 0 0;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    transition: all 0.3s ease;
    overflow: hidden;
}

[data-theme="dark"] .recent-progress-filter-container {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-neutral);
}

.recent-progress-filter-hidden {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-10px);
    border-width: 0;
}

.recent-progress-filter-visible {
    max-height: 200px;
    opacity: 1;
    transform: translateY(0);
}

.recent-progress-filter-search .search-component-wrapper {
    width: 100%;
}

.recent-progress-filter-search .search-component-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .recent-progress-filter-search .search-component-input {
    border-color: var(--color-neutral);
    background-color: var(--header-bg);
    color: var(--text-color);
}

.recent-progress-no-results {
    text-align: center;
    padding: calc(var(--spacing-lg) * 1.5);
    margin: var(--spacing-lg) 0;
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .recent-progress-no-results {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--color-neutral);
}

.recent-progress-no-results h3 {
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
}

.recent-progress-no-results p {
    color: var(--text-secondary);
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}

/* Mobile responsive filter styles */
@media (max-width: 768px) {
    .recent-progress-button-container {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
    }
    
    .recent-progress-filter-icon {
        align-self: center;
        min-width: 36px;
        height: 36px;
    }
    
    .recent-progress-filter-container {
        margin: var(--spacing-sm) 0 0 0;
        padding: var(--spacing-sm);
    }
    
    .recent-progress-filter-search .search-component-input {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }
    
    .recent-progress-no-results {
        padding: var(--spacing-md);
        margin: var(--spacing-md) 0;
    }
    
    .recent-progress-no-results h3 {
        font-size: var(--font-size-sm);
    }
    
    .recent-progress-no-results p {
        font-size: var(--font-size-xs);
    }
}

/* ================================
   SECTION - SEARCH PAGE STYLES
   ================================ */

/* 
 * Search Page Standardization Integration
 * 
 * This section demonstrates best-in-class integration with mystyle.css patterns:
 * 
 * STANDARDIZED PATTERNS USED:
 * - .btn .btn-secondary → All pagination buttons (conformant button system)
 * - #core-page-container (no longer enhanced by removed .search-page-container)
 * - #content-container → Enhanced by .search-page-content-wrapper
 * - CSS custom properties → Full semantic color and typography variables
 * - Layout patterns → Documented for reuse
 *
 * PATTERN ENHANCEMENTS:
 * - Container patterns provide base functionality + search-specific layouts
 * - Button patterns (.btn .btn-secondary) provide navigation behavior + search pagination styles
 * - Typography patterns provide responsive scaling + search content hierarchy
 * - Color patterns provide theme support + search result type differentiation
 * 
 * CROSS-FILE COMPATIBILITY:
 * - Works harmoniously with mystyle.css base patterns
 * - No conflicts with other page-styles.css sections
 * - Leverages shared design tokens for consistency
 * - Provides model for pattern integration in other sections
 */

/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .search-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.search-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
}

.search-page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

/* Search container */
.search-page-search-container {
    margin: var(--spacing-lg) 0;
    width: 100%;
    max-width: 600px;
}

.search-page-hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

[data-theme="dark"] .search-page-hint {
    color: var(--color-neutral-light);
}

/* Phase 4: Added to replace inline styles from SearchPageRendererMod.mjs */
.search-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

/* MIGRATED: Now uses .btn from mystyle.css */
.search-page-button {
    /* All base button styles now provided by .btn from mystyle.css */
    /* Only specific responsive adjustments remain */
    margin-top: var(--spacing-md);
    padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
    font-size: clamp(14px, 3vw, 16px);
}

/* Results */
.search-results-count {
    margin: var(--spacing-md) 0;
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.search-results-container {
    width: 100%;
    max-width: 800px;
    margin-top: var(--spacing-md);
}

/* Search result items */
.search-page-content-wrapper .search-result-item {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-speed);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--light-border);
}

[data-theme="light"] .search-page-content-wrapper .search-result-item {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .search-page-content-wrapper .search-result-item {
    background-color: var(--color-neutral-dark);
    border-color: var(--color-neutral-dark);
}

.search-page-content-wrapper .search-result-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .search-page-content-wrapper .search-result-item:hover {
    background-color: var(--hover-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.search-page-content-wrapper .search-result-title {
    font-size: var(--font-size-md);
    margin-bottom: calc(var(--spacing-xs) * 0.75);
    font-weight: bold;
    transition: color var(--transition-speed);
    color: var(--focus-color);
}

.search-page-content-wrapper .search-result-item:hover .search-result-title {
    text-decoration: underline;
}

/* Result type badges */
.search-page-content-wrapper .search-result-type {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: calc(var(--spacing-xs) * 0.5) var(--spacing-sm);
    border-radius: calc(var(--border-radius) * 0.75);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.search-page-content-wrapper .search-result-type.type-metacat {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.search-page-content-wrapper .search-result-type.type-category {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.search-page-content-wrapper .search-result-type.type-lesson {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.search-page-content-wrapper .search-result-type.type-activity {
    background-color: var(--color-secondary-light);
    color: var(--color-secondary);
}

.search-page-content-wrapper .search-result-type.type-page {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.search-page-content-wrapper .search-result-content {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    line-height: 1.5;
    color: var(--text-color);
    opacity: 0.85;
}

/* Path indicator */
.search-page-content-wrapper .search-result-path {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: calc(var(--spacing-xs) * 0.75);
    opacity: 0.8;
}

[data-theme="dark"] .search-page-content-wrapper .search-result-path {
    color: var(--color-neutral-light);
}

/* Highlight matches */
.search-page-content-wrapper .search-highlight {
    background-color: var(--color-warning);

    color: var(--color-black);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
    display: inline;
}

[data-theme="dark"] .search-page-content-wrapper .search-highlight {
    background-color: color-mix(in srgb, var(--color-warning) 85%, #8B7500);
}

/* Loading spinner */
.search-spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: calc(var(--spacing-lg) * 1.25);
}

.search-page-content-wrapper .search-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 123, 255, 0.2);
    border-radius: 50%;
    border-top-color: var(--focus-color);
    animation: search-spin 1s linear infinite;
}

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

/* No results message */
.search-page-content-wrapper .search-no-results {
    padding: calc(var(--spacing-lg) * 1.25);
    text-align: center;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-md);
    color: var(--text-color);
}

[data-theme="dark"] .search-page-content-wrapper .search-no-results {
    background-color: var(--color-neutral-dark);
    border-color: var(--color-neutral-dark);
}

/* Pagination */
.search-pagination {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--spacing-lg) * 1.25);
    margin-bottom: calc(var(--spacing-lg) * 1.25);
    gap: var(--spacing-sm);
}

/* Search pagination now uses standardized .btn .btn-secondary pattern from mystyle.css */
.search-pagination-button {
    /* Enhanced with .btn .btn-secondary base patterns from mystyle.css */
    /* All base navigation button styling inherited via .btn and .btn-secondary classes */
}

.search-pagination-active {
    background-color: var(--focus-color);
    color: white;
    border-color: var(--focus-color);
}

.search-pagination-active:hover {
    background-color: var(--focus-color);
    transform: none; /* Override nav-button hover transform when active */
}

/* Pagination ellipsis */
.pagination-ellipsis {
    margin: 0 var(--spacing-xs);
    color: var(--text-color);
    opacity: 0.6;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
    /* REMOVED: .search-page-container responsive styles - use .page-container from mystyle.css */
    
    .search-page-content-wrapper .search-result-item {
        padding: calc(var(--spacing-sm) * 1.25);
    }
    
    .search-pagination-button {
        /* Mobile responsive styles now handled by .btn .btn-secondary patterns in mystyle.css */
        padding: calc(var(--spacing-xs) * 1.5) clamp(8px, 3vw, 12px);
    }
}

/* ================================
   SECTION - SKILLS PAGE STYLES
   ================================ */

/* Skills page container */
/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .skills-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.skills-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
}

.skills-page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

/* Overall progress section */
.skills-page-overall-row {
    margin: clamp(8px, 2vw, 10px) clamp(4px, 1vw, 5px) clamp(12px, 3vw, 15px) clamp(4px, 1vw, 5px);
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 15px) clamp(10px, 2.5vw, 12px) clamp(12px, 3vw, 15px);
    border-radius: var(--border-radius-lg);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

[data-theme="dark"] .skills-page-overall-row {
    background-color: var(--header-bg);
    border-color: var(--light-border);
}

.skills-page-overall-title-row {
    font-weight: bold;
    font-size: clamp(var(--font-size-md), 2.5vw, 1.1rem);
}

.skills-page-overall-progress-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.skills-page-overall-progress-row .progress-bar {
    height: 20px;
    margin: 0;
    flex: 1;
    max-width: 200px;
    background-color: var(--bg-color);
}

.skills-page-score-text {
    margin: 0;
    min-width: 35px;
    font-size: var(--font-size-sm);
}

.skills-page-link {
    margin-right: calc(var(--spacing-sm) * 1.5);
}

/* Data table */
.skills-table {
    /* Base table styling now provided by .table-base */
    /* Ensure width inheritance from base class is not overridden */
    width: 100%;
}

/* Table headers */
.skills-table th {
    /* Base header styling now provided by .table-header-base */
}

[data-theme="dark"] .skills-table th {
    background-color: var(--header-bg);
    border-bottom-color: var(--light-border);
}

.skills-table th:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .skills-table th:hover {
    background-color: var(--hover-bg);
}

/* Table cells */
.skills-table td {
    /* Base cell styling now provided by .table-cell-base */
    vertical-align: middle;
}

[data-theme="dark"] .skills-table td {
    border-bottom-color: var(--light-border);
}

/* Skill title styling */
.skill-title {
    cursor: pointer;
    color: var(--focus-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.skill-title:hover {
    color: var(--text-color);
}

/* Goal star */
.goal-star {
    /* Uses .goal-star-base from mystyle.css */
}

.goal-star-empty {
    /* Uses .goal-star-base-empty from mystyle.css */
}

/* Search container */
.search-page-content-wrapper .search-container {
    margin: var(--spacing-md) 0;
    max-width: 600px;
}

/* Mobile responsive styles */
@media (max-width: 600px) {      
    .skills-page-overall-title-row {
        font-size: var(--font-size-md);
    }
    
    .skills-page-overall-progress-row .progress-bar {
        width: 50%;
    }

    /* Hide the table header in mobile view */
    .skills-table thead {
        display: none;
    }
    
    /* Change table display from table to block */
    .skills-table,
    .skills-table tbody {
        display: block;
        width: 100%;
    }
    
    /* Transform rows into cards with two rows - uses .mobile-card-base */
    .skills-table tr {
        /* Card styling now provided by .mobile-card-base */
    }
    
    [data-theme="dark"] .skills-table tr {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    
    /* Reset table cell styling */
    .skills-table td {
        border: none;
        padding: 0;
    }
    
    /* First row - Skill title and goal star */
    .skills-table td:nth-child(2) {
        width: calc(100% - 50px); /* Make room for star */
        order: 1;
        font-size: clamp(16px, 4vw, 18px);
        font-weight: bold;
        margin-bottom: clamp(8px, 2vw, 10px);
        padding-right: clamp(8px, 2vw, 10px);
    }

    .skills-table td:nth-child(4) {
        order: 2;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .skills-table td:nth-child(4) .goal-star {
        font-size: clamp(1.5rem, 4vw, 1.75rem);
    }
    
    /* Second row - Progress bar and chart link */
    .skills-table td:nth-child(1) {
        order: 3;
        width: 65%;
        display: flex;
        align-items: center;
    }
    
    .skills-table td:nth-child(1) .progress-bar {
        width: calc(100% - 40px); /* Make room for percentage */
        min-width: 100px;
    }
    
    .skills-table td:nth-child(1) .progress-text {
        margin-left: var(--spacing-xs);
        min-width: 30px;
        text-align: right;
    }
    
    .skills-table td:nth-child(3) {
        order: 4;
        width: 35%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .skills-table td:nth-child(3) .skills-page-link {
        margin: 0;
        font-size: var(--font-size-sm);
    }
}

/* ================================
   SECTION - SONGLIST PAGE STYLES
   ================================ */

/* Base songlist styling */
/* MIGRATED: Now uses .page-container from mystyle.css */
.songlist-container {
    /* All base layout styles now provided by .page-container from mystyle.css */
    /* Only specific additions remain */
}

/* Table container */
.songlist-table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--border-radius);
}

.songlist-table {
    /* Base table styling now provided by .table-base */
    width: 100%; /* Explicit width for proper display */
    min-width: 600px; /* Ensure minimum width to show all columns */
}

/* Sort buttons */
.sort-buttons {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

/* Sort buttons label - prefer using .control-label class from mystyle.css */
/* This provides fallback styling for labels without .control-label */
.sort-buttons label:not(.control-label) {
    font-weight: 600;
    margin-right: var(--spacing-md);
    color: var(--text-color);
}

.sort-buttons button {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    padding: var(--spacing-sm) clamp(10px, 2.5vw, 12px);
    margin-right: clamp(8px, 2vw, 10px);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
}

[data-theme="dark"] .sort-buttons button {
    background-color: var(--header-bg);
    border-color: var(--light-border);
}

.sort-buttons button:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .sort-buttons button:hover {
    background-color: var(--hover-bg);
}

.sort-buttons button.active {
    background-color: var(--focus-color);
    color: white;
    border-color: var(--focus-color);
}

/* Table headers */
.songlist-table th {
    /* Base header styling now provided by .table-header-base */
}

.songlist-table th[data-sort="artist"] {
    width: 4vw; /* make Artist column narrower than natural */
}

[data-theme="dark"] .songlist-table th {
    background-color: var(--header-bg);
    border-bottom-color: var(--light-border);
}

.songlist-table th:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .songlist-table th:hover {
    background-color: var(--color-neutral-dark);
}

/* Table cells */
.songlist-table td {
    /* Base cell styling now provided by .table-cell-base */
    vertical-align: middle;
}

[data-theme="dark"] .songlist-table td {
    border-bottom-color: var(--light-border);
}

/* Difficulty badges */
.difficulty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px clamp(8px, 2vw, 10px);
    border-radius: var(--border-radius-lg);
    font-size: clamp(10px, 2vw, 12px);
    font-weight: bold;
    text-transform: uppercase;
}

.difficulty-easy {
    background-color: var(--color-success);
    color: white;
}

.difficulty-medium {
    background-color: var(--color-warning);
    color: black;
}

.difficulty-hard {
    background-color: var(--color-danger);
    color: white;
}

/* Song title styling */
.song-title {
    cursor: pointer;
    color: var(--focus-color);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.song-title:hover {
    color: var(--text-color);
}

/* Video links */
.video-links {
    display: flex;
    gap: clamp(8px, 2vw, 10px);
    align-items: center;
    min-height: 22px;
}

/* Tablet/narrow desktop responsive table */
@media (max-width: 768px) {
    .songlist-table {
        font-size: var(--font-size-sm);
    }
    
    /* Make columns more flexible and ensure table fits */
    .songlist-table th,
    .songlist-table td {
        padding: var(--spacing-sm) var(--spacing-xs);
        vertical-align: top;
        min-width: 0;
    }
    
    /* Adjust specific column widths for better fit */
    .songlist-table th[data-sort="artist"] {
        width: 12vw; /* Increase from 4vw to prevent overcrowding */
    }
    
    /* Make progress column narrower */
    .songlist-table th:nth-child(1),
    .songlist-table td:nth-child(1) {
        width: 15vw;
        min-width: 80px;
    }
    
    /* Videos column should be narrower but visible */
    .songlist-table th:nth-child(6),
    .songlist-table td:nth-child(6) {
        width: 15vw;
        min-width: 70px;
    }
    
    /* Ensure video links wrap if needed */
    .video-links {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    /* Make video link text smaller */
    .video-links a {
        font-size: var(--font-size-xs);
        line-height: 1.2;
    }
    
    /* Ensure table doesn't overflow container */
    .songlist-table {
        table-layout: fixed;
        width: 100%;
    }
    
    /* Table wrapper provides horizontal scroll if needed */
    .songlist-table-wrapper {
        overflow-x: auto;
        border: 1px solid var(--light-border);
        border-radius: var(--border-radius);
    }
    
    /* Make song titles and artists wrap if needed */
    .songlist-table td:nth-child(2),
    .songlist-table td:nth-child(3) {
        word-wrap: break-word;
        white-space: normal;
        overflow: hidden;
        line-height: 1.2;
    }
}


/* Mobile card layout */
@media (max-width: 600px) {
    /* Remove horizontal scroll for mobile card layout */
    .songlist-table-wrapper {
        overflow-x: visible;
        border: none;
        border-radius: 0;
    }
    
    /* Hide the table header in mobile view */
    .songlist-table thead {
        display: none;
    }
    
    /* Change table display from table to block */
    .songlist-table,
    .songlist-table tbody {
        display: block;
        width: 100%;
        min-width: 0; /* Remove minimum width for mobile */
    }
    
    /* Transform rows into cards - uses .mobile-card-base */
    .songlist-table tr {
        /* Card styling now provided by .mobile-card-base */
        margin-bottom: clamp(16px, 4vw, 20px); /* Unique spacing for songlist */
    }
    
    [data-theme="dark"] .songlist-table tr {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    
    /* Reset table cell styling */
    .songlist-table td {
        border: none;
        padding: var(--spacing-xs) 0;
    }
    
    /* Song title - First row, takes full width */
    .songlist-table td:nth-child(2) {
        width: 100%;
        order: 1;
        font-size: clamp(16px, 4vw, 18px);
        font-weight: bold;
        margin-bottom: var(--spacing-xs);
        padding-right: 40px; /* Make space for the goal star */
    }
    
    /* Artist name - Second row, takes full width */
    .songlist-table td:nth-child(3) {
        width: 100%;
        order: 2;
        font-size: clamp(14px, 3.5vw, 16px);
        color: var(--text-color);
        margin-bottom: var(--spacing-sm);
    }
    
    /* Difficulty badge */
    .songlist-table td:nth-child(4) {
        order: 3;
        padding-right: clamp(8px, 2vw, 10px);
        display: flex;
        align-items: center;
    }
    
    /* Progress bar */
    .songlist-table td:nth-child(1) {
        order: 4;
        display: flex;
        align-items: center;
        flex: 1;
    }
    
    /* Make progress bar fit available space - same approach as skills page */
    .songlist-table .progress-bar {
        width: calc(100% - 40px); /* Make room for percentage text */
        min-width: 60px;
        height: 10px;
        margin: 0;
        display: inline-block;
        vertical-align: middle;
    }
    
    .songlist-table .progress-bar-fill {
        height: 10px;
    }
    
    .songlist-table .progress-text {
        margin-left: var(--spacing-xs);
        min-width: 30px;
        text-align: right;
    }
    
    /* Video links - Bottom row */
    .songlist-table td:nth-child(6) {
        width: 100%;
        order: 5;
        margin-top: var(--spacing-sm);
    }
    
    /* Goal star - Position in the top right */
    .songlist-table td:nth-child(5) {
        position: absolute;
        top: clamp(10px, 2.5vw, 12px);
        right: clamp(10px, 2.5vw, 12px);
        order: 0;
        padding: 0;
    }

    .songlist-table td:nth-child(5) .goal-star {
        font-size: clamp(1.5rem, 4vw, 1.75rem);
    }
}

/* Custom scrollbar for hotspot content — rules consolidated into mystyle.css */

/* Hotspot footer styling */
.hotspot-footer {
    padding: var(--spacing-md) 0 0 0;
    margin-top: var(--spacing-md);
    border-top: 1px solid var(--light-border);
    text-align: center;
    flex-shrink: 0;
}

/* ===== SECTION - METACAT PAGE STYLES ===== */
/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .metacat-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.metacat-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
}


.metacat-page-separator {
    margin: clamp(0.375rem, 1vw, 0.5rem) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

.metacat-page-overall-row {
    margin: var(--spacing-sm) var(--spacing-xs) 0 var(--spacing-lg);
    max-width: 90%;
    max-height: 100px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.metacat-page-score-text {
    margin-right: var(--spacing-md);
}

.metacat-page-link {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

/* New CSS classes replacing inline styles for improved separation of concerns */
.no-content-message {
    margin: var(--spacing-lg);
}

.metacat-page-category-row {
    margin: var(--spacing-sm) var(--spacing-xs) 2px 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}

.metacat-page-category-left {
    float: left;
    width: clamp(80px, 15vw, 120px);
    height: clamp(80px, 15vw, 120px);
    flex-shrink: 0;
}

.metacat-page-category-right {
    flex: 1;
    min-width: 0;
    vertical-align: top;
    margin-left: var(--spacing-xs);
    overflow: hidden;
    word-wrap: break-word;
}

.metacat-page-category-title {
    margin: 0 var(--spacing-md) 0 0;
    display: block;
}

.metacat-page-progress-bar {
    /* Uses .progress-bar-responsive base class from mystyle.css */
}

.metacat-page-progress {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.5s ease-in-out;
    width: var(--progress-value, 0%);
}

.metacat-page-footer {
    margin-top: auto;
    padding: var(--spacing-md) 0;
    width: 100%;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

.metacat-page-description {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.metacat-page-description-toggle {
    cursor: pointer;
    color: var(--focus-color);
    text-decoration: underline;
}

.metacat-page-description-content {
    /* Removed display: none - visibility should be controlled via data attributes in JavaScript */
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs);
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--border-radius-sm);
}

[data-theme="dark"] .metacat-page-description-content {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Metacat page component styles */
.metacat-video-row {
    margin-bottom: var(--spacing-xs);
}

.metacat-actions-row {
    margin-top: calc(-1 * var(--spacing-xs));
}

.metacat-description-row {
    margin-bottom: var(--spacing-xs);
}

.metacat-video-link {
    margin: 0 var(--spacing-sm) 0 0;
}

.metacat-music-ideas-link {
    white-space: nowrap;
}

.metacat-clear-link {
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-sm);
}

.metacat-goals-link {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    display: block;
}

/* ============================================
   Ubercat Page Styles
   ============================================ */

/* Ubercat page link styling - used for breadcrumb and chart links */
.ubercat-page-link {
    margin-left: var(--spacing-xs);
    margin-right: var(--spacing-xs);
}

/* Ubercat page description - displayed below header */
.ubercat-page-description {
    margin: var(--spacing-xs) 0;
    padding: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Ubercat page content wrapper */
.ubercat-page-content-wrapper {
    /* Uses default container styles - no additional styling needed */
}

/* Ubercat table - inherits from .table-base */
.ubercat-table {
    /* All table styling provided by .table-base */
    /* Responsive behavior provided by .mobile-card-base on rows */
}

/* Ubercat child title links in table */
.ubercat-child-title {
    /* Uses default link styles with base link color and hover behavior */
    font-weight: 500;
}

/* Ubercat page error message */
.ubercat-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-error-text);
}

[data-theme="dark"] .ubercat-page-error {
    background-color: rgba(255, 100, 100, 0.1);
    border-color: rgba(255, 100, 100, 0.3);
}

/* Responsive layout adjustments */
@media (max-width: 576px) {
    .metacat-page-category-row {
        flex-direction: column;
    }
    
    .metacat-page-category-left {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }
    
    .metacat-page-category-right {
        margin-left: 0;
    }
    
    .metacat-page-overall-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== SECTION - MY CONTENT PAGE STYLES ===== */
/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .my-content-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.my-content-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
}

.my-content-page-separator {
    margin: clamp(0.375rem, 1vw, 0.5rem) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

.my-content-page-link {
    margin-right: var(--spacing-sm);
}

/* Ubercat collapsible sections */
.ubercat-section {
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    overflow: hidden; /* Ensure border-radius clips content */
}

.ubercat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    cursor: pointer;
    user-select: none;
    margin: 0; /* Reset default h3 margin */
    /* No border - section has the border */
}

.ubercat-header:hover {
    background-color: var(--hover-bg, rgba(0, 0, 0, 0.05));
}

[data-theme="dark"] .ubercat-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.ubercat-header:focus {
    outline: 2px solid var(--focus-ring-color, #0066cc);
    outline-offset: 2px;
}

[data-theme="dark"] .ubercat-section {
    border-color: var(--light-border, #444);
}

.ubercat-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    /* Use default anchor styles - no custom styling needed */
}

.section-toggle-caret {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    transition: transform 0.2s ease;
    min-width: 44px; /* Touch target */
    min-height: 44px; /* Touch target */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ubercat-content {
    /* No margin-top - connect directly to header */
    padding: var(--spacing-md);
    background-color: var(--bg-color, #fff);
    border-top: 1px solid var(--light-border, #ddd);
}

[data-theme="dark"] .ubercat-content {
    background-color: var(--dark-bg, #1a1a1a);
    border-top-color: var(--light-border, #444);
}

/* Mobile responsiveness for ubercat sections */
@media (max-width: 768px) {
    .ubercat-header {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        min-height: 44px; /* Touch target */
    }

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

    .section-toggle-caret {
        font-size: var(--font-size-md);
    }

    .ubercat-content {
        padding: var(--spacing-sm);
    }
}

/* Table headers */
.my-content-table th {
    /* Base header styling now provided by .table-header-base */
    padding: var(--spacing-sm); /* Unique padding different from base */
}

[data-theme="dark"] .my-content-table th {
    background-color: var(--header-bg);
    border-bottom-color: var(--light-border);
}

.my-content-table th:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .my-content-table th:hover {
    background-color: var(--color-neutral-dark);
}


/* Table cells */
.my-content-table td {
    /* Base cell styling now provided by .table-cell-base */
    padding: var(--spacing-sm); /* Unique padding different from base */
    vertical-align: middle;
}

[data-theme="dark"] .my-content-table td {
    border-bottom-color: var(--light-border);
}

/* Progress bar */
.my-content-progress-bar {
    /* Uses .progress-bar base class from mystyle.css */
    height: 20px;
    margin: 0;
}

.my-content-progress-bar-fill {
    height: 20px;
    background-color: var(--color-success);
    transition: width 0.5s ease-in-out;
    width: var(--progress-value, 0%);
}

/* Progress text */
.my-content-progress-text {
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

/* Goal star */
.my-content-goal-star {
    /* Uses .goal-star-base from mystyle.css */
    justify-content: left;
    margin-left: var(--spacing-md);
}

.my-content-goal-star-empty {
    /* Uses .goal-star-base-empty from mystyle.css */
}

/* Mobile styles - Changed from 600px to 480px to keep table layout at 500px */
@media (max-width: 480px) {
    /* Hide the table header in mobile view */
    .my-content-table thead {
        display: none;
    }

    /* Change table display from table to block */
    .my-content-table,
    .my-content-table tbody {
        display: block;
        width: 100%;
    }

    /* Transform rows into cards with two rows - uses .mobile-card-base */
    .my-content-table tr {
        /* Card styling now provided by .mobile-card-base */
        margin-bottom: var(--spacing-md); /* Unique spacing for my-content */
        padding: var(--spacing-sm); /* Unique padding for my-content */
    }
    
    [data-theme="dark"] .my-content-table tr {
        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
    }
    
    /* Reset table cell styling */
    .my-content-table td {
        border: none;
        padding: 0;
    }
    
    /* First row - Content title and goal star */
    .my-content-table td:nth-child(2) {
        width: calc(100% - 50px);
        order: 1;
        font-size: var(--font-size-lg);
        font-weight: bold;
        margin-bottom: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    .my-content-table td:nth-child(5) {
        order: 2;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .my-content-table td:nth-child(5) .my-content-goal-star {
        font-size: clamp(1.5rem, 4vw, 1.75rem);
    }

    /* Second row - Progress bar and chart link */
    .my-content-table td:nth-child(1) {
        order: 3;
        width: 65%;
        display: flex;
        align-items: center;
    }

    .my-content-table td:nth-child(1) .my-content-progress-bar {
        width: calc(100% - 40px);
        min-width: 100px;
    }

    .my-content-table td:nth-child(1) .my-content-progress-text {
        margin-left: var(--spacing-xs);
        min-width: 30px;
        text-align: right;
    }

    .my-content-table td:nth-child(4) {
        order: 4;
        width: 35%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .my-content-table td:nth-child(4) .my-content-page-link {
        margin: 0;
        font-size: var(--font-size-sm);
    }

    /* Third row - Path breadcrumb (full width) */
    .my-content-table td:nth-child(3) {
        order: 5;
        width: 100%;
        font-size: var(--font-size-sm);
        margin-top: var(--spacing-xs);
    }
}

/* Empty State */
.my-content-empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-color);
}

.my-content-empty-state h3 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

.my-content-empty-state p {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-md);
}

/* ===== Local Walls Section Styles ===== */

.local-walls-section {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--light-border);
}

.section-header-base {
    margin-bottom: var(--spacing-md);
}

.section-title-base {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-color);
}

.section-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    margin: 0;
}

/* Local walls table */
.local-walls-table {
    /* Base table styling now provided by .table-base */
    width: 100%;
    margin-top: var(--spacing-md);
}

.local-walls-table th {
    /* Base header styling now provided by .table-header-base */
    padding: var(--spacing-sm);
}

.local-walls-table td {
    /* Base cell styling now provided by .table-cell-base */
    padding: var(--spacing-sm);
    vertical-align: middle;
}

/* Local wall badge */
.local-wall-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

[data-theme="dark"] .local-wall-badge {
    background-color: var(--dark-warning-bg, #3a3a2a);
    color: var(--dark-warning-text, #ffc107);
}

/* Actions cell with multiple buttons */
.actions-cell {
    white-space: normal;
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: wrap;
}

.actions-cell .btn {
    margin-right: var(--spacing-xs);
}

.actions-cell .btn:last-child {
    margin-right: 0;
}

/* Empty state for local walls */
.empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--text-color);
    opacity: 0.7;
}

.empty-state p {
    margin: var(--spacing-xs) 0;
    font-size: var(--font-size-md);
}

/* Mobile styles for local walls table */
@media (max-width: 600px) {
    /* Hide the table header in mobile view */
    .local-walls-table thead {
        display: none;
    }

    /* Change table display from table to block */
    .local-walls-table,
    .local-walls-table tbody {
        display: block;
        width: 100%;
    }

    /* Transform rows into cards - uses .mobile-card-base */
    .local-walls-table tr {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-sm);
    }

    /* Reset table cell styling */
    .local-walls-table td {
        border: none;
        padding: var(--spacing-xs) 0;
        display: block;
        width: 100%;
    }

    /* Badge cell */
    .local-walls-table td:nth-child(1) {
        margin-bottom: var(--spacing-xs);
    }

    /* Title cell */
    .local-walls-table td:nth-child(2) {
        font-size: var(--font-size-lg);
        font-weight: bold;
        margin-bottom: var(--spacing-xs);
    }

    /* Stats cell */
    .local-walls-table td:nth-child(3) {
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
        opacity: 0.8;
    }

    /* Actions cell - stack buttons vertically on mobile */
    .local-walls-table td:nth-child(4) {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .local-walls-table .actions-cell .btn {
        width: 100%;
        margin-right: 0;
        justify-content: center;
    }
}

/* ===== SECTION - HTML PAGE STYLES ===== */
/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .html-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.html-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only specific additions remain */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

/* REMOVED: .html-page-container[data-page-type="html-page"] - use .page-container from mystyle.css */

.html-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--header-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.html-page-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(var(--spacing-sm), 3vw, var(--spacing-md));
    width: 100%;
}

.html-page-image-container {
    width: 100%;
    display: flex;
    min-width: var(--content-min-width);
    min-height: var(--image-min-height);
}

.html-page-image {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    aspect-ratio: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto var(--image-min-height);
}

.html-page-content-text {
    width: 100%;
    min-width: var(--content-min-width);
}

.html-page-content-text ul, 
.html-page-content-text ol {
    list-style-position: outside;
    padding-inline-start: 1.5em;
    font-size: clamp(0.5rem, 3vw, 1rem);
}

.html-page-content-text li {
    margin-bottom: clamp(0.25rem, 2vw, 0.5rem);
    width: 100%;
}

.html-page-content-text li::marker {
    color: var(--list-marker-color);
}

.html-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
}

.html-page-audio-container {
    margin: var(--spacing-md) 0;
    width: 100%;
}

.html-page-video-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    width: 100%;
}

/* Loading state should be handled via data attributes in JavaScript instead of CSS classes */

.html-page-continue-button.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}

.html-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}

.html-page-text-section {
    margin-bottom: var(--spacing-xs);
}

/* Responsive layout - wide and short screens */
/* Phase 4: Removed --img-width CSS variable dependency, Grid handles sizing automatically */
@media (min-width: 48rem) and (max-height: 37.5rem) {
    .html-page-content {
        grid-template-columns: auto minmax(var(--content-min-width), 1fr);
        justify-items: start;
    }

    .html-page-image-container {
        margin-inline-end: var(--spacing-md);
        justify-content: flex-start;
    }

    .html-page-content-text {
        /* CSS Grid handles sizing - text takes remaining space after image */
        max-width: 100%;
    }
}

/* Very small height screens */
@media (max-height: 25rem) {
    /* REMOVED: .html-page-container responsive styles - use .page-container from mystyle.css */
}


/* ===== SECTION - EMBED PAGE STYLES ===== */
/* MIGRATED: Now uses .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.embed-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only specific additions remain */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

.embed-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.embed-page-attribution {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    background-color: var(--light-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
}

.embed-page-source-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: bold;
}

.embed-page-source-link:hover {
    color: var(--primary-color-dark);
}

.embed-page-iframe-container {
    position: relative;
    width: 100%;
    min-height: 70vh;
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.embed-page-iframe {
    width: 100%;
    height: 70vh;
    min-height: 500px;
    border: none;
    display: block;
}

.embed-page-blocked {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-color);
}

.embed-page-blocked h3 {
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.embed-page-blocked p {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.9rem, 3vw, 1rem);
}

.embed-page-direct-link {
    margin-top: var(--spacing-sm);
}

.embed-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
}

.embed-page-continue-button.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}

.embed-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
    color: var(--color-danger);
}


/* ===== SECTION - API CONTENT PAGE STYLES ===== */
/* MIGRATED: Now uses .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.api-content-page-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only specific additions remain */
    min-height: 0;
    overflow: visible;
    align-items: left;
    min-width: var(--content-min-width);
}

.api-content-page-header {
    text-align: center;
    margin-bottom: clamp(var(--spacing-sm), 4vw, var(--spacing-md));
    color: var(--primary-color);
    font-size: clamp(1rem, 5vw, 2rem);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    width: 100%;
    transition: background-color 0.3s ease;
}

.api-content-page-attribution {
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    background-color: var(--light-bg);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
}

.api-content-page-source-link {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: bold;
}

.api-content-page-source-link:hover {
    color: var(--primary-color-dark);
}

/* Container for the fetched external content */
.api-content-page-body {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    line-height: 1.6;
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
}

/* Normalize headings from external content */
.api-content-page-body h1 {
    font-size: clamp(1.5rem, 5vw, 2rem);
    margin: var(--spacing-lg) 0 var(--spacing-sm);
    color: var(--text-color);
}

.api-content-page-body h2 {
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    margin: var(--spacing-md) 0 var(--spacing-sm);
    color: var(--text-color);
}

.api-content-page-body h3 {
    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
    margin: var(--spacing-md) 0 var(--spacing-xs);
    color: var(--text-color);
}

.api-content-page-body h4 {
    font-size: var(--font-size-lg);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
    color: var(--text-color);
}

/* Ensure links are styled consistently */
.api-content-page-body a {
    color: var(--color-link);
    text-decoration: underline;
}

.api-content-page-body a:hover {
    color: var(--primary-color-dark);
}

/* Code blocks from external content */
.api-content-page-body pre,
.api-content-page-body code {
    font-family: var(--font-family-mono, 'Courier New', monospace);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
}

.api-content-page-body pre {
    padding: var(--spacing-sm);
    overflow-x: auto;
    border: 1px solid var(--light-border);
}

.api-content-page-body code {
    padding: 2px 4px;
}

.api-content-page-body pre code {
    padding: 0;
    background-color: transparent;
}

/* Lists from external content */
.api-content-page-body ul,
.api-content-page-body ol {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

.api-content-page-body li {
    margin: var(--spacing-xs) 0;
}

/* Tables from external content */
.api-content-page-body table {
    width: 100%;
    margin: var(--spacing-md) 0;
    border-collapse: collapse;
}

.api-content-page-body th,
.api-content-page-body td {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    text-align: left;
}

.api-content-page-body th {
    background-color: var(--light-bg);
    font-weight: bold;
}

/* Error state */
.api-content-page-error {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-color);
}

.api-content-page-error h3 {
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1rem, 4vw, 1.5rem);
}

.api-content-page-error p {
    margin-bottom: var(--spacing-sm);
    font-size: clamp(0.9rem, 3vw, 1rem);
}

.api-content-page-fallback-link {
    margin-top: var(--spacing-sm);
}

/* Button container */
.api-content-page-buttons {
    display: flex;
    justify-content: left;
    width: 100%;
    margin-top: var(--spacing-md);
}

.api-content-page-continue-button.btn-loading {
    opacity: 0.7;
    pointer-events: none;
}


/* ===== GOALS PAGE STYLES ===== */

/* MIGRATED: Now uses .page-container from mystyle.css */
/* REMOVED: .goals-page-container - functionality provided by .page-container from mystyle.css */

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.goals-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
}


.goals-separator {
    margin: var(--spacing-sm) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--text-color);
    opacity: 0.3;
}

/* Search input area */
.goals-search-controls {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-md) 0;
    gap: var(--spacing-sm);
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.goals-search-wrapper {
    position: relative;
    max-width: 500px;
}

/* Skills search controls - matching goals page layout */
.skills-search-controls {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-md) 0;
    gap: var(--spacing-sm);
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.skills-search-wrapper {
    position: relative;
    max-width: 500px;
}

/* Songs search controls - matching goals page layout */
.songs-search-controls {
    display: flex;
    flex-direction: column;
    margin: var(--spacing-md) 0;
    gap: var(--spacing-sm);
    width: 100%;
    border: none;
    background: none;
    outline: none;
}

.songs-search-wrapper {
    position: relative;
    max-width: 500px;
}

.goals-clear-button {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.5;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: opacity var(--transition-speed) ease;
}

.goals-clear-button:hover {
    opacity: 1;
    background-color: var(--light-bg);
}


/* Action buttons area */
.goals-action-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.goals-add-button,
.goals-refresh-button {
    background: var(--focus-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed) ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.goals-add-button:hover,
.goals-refresh-button:hover {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

.goals-add-button:disabled,
.goals-refresh-button:disabled {
    background: var(--button-disabled);
    cursor: not-allowed;
    transform: none;
}

/* Summary section */
.goals-summary {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .goals-summary {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--light-border);
}

.goals-summary-title {
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
}

.goals-summary-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.goals-stat-item {
    text-align: center;
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .goals-stat-item {
    background-color: rgba(0, 0, 0, 0.2);
}

.goals-stat-number {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--focus-color);
    display: block;
}

.goals-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.8;
    margin-top: var(--spacing-xs);
}

/* Goals list */
.goals-list-container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    margin-top: var(--spacing-md);
}

.goals-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

/* Goal item styling removed - now matches activity-item */

.goal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-sm);
    gap: var(--spacing-sm);
}

.goal-priority {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.goal-priority.high {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.goal-priority.medium {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.goal-priority.low {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.goal-description {
    color: var(--text-color);
    opacity: 0.8;
    margin: var(--spacing-sm) 0;
    line-height: 1.5;
}

.goal-progress {
    margin: var(--spacing-md) 0;
}

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

.goal-progress-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.goal-progress-percentage {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--focus-color);
}

.goal-progress-bar {
    /* Uses .progress-bar-compact base class from mystyle.css */
}

.goal-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--light-border);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

.goal-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.goal-actions .goal-action-button {
    background: none;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    transition: all var(--transition-speed) ease;
}

.goal-actions .goal-action-button:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
    color: var(--focus-color);
}

.goal-actions .goal-action-button.delete {
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.goal-actions .goal-action-button.delete:hover {
    background-color: var(--color-danger-light);
}

/* Empty state */
.goals-empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-color);
    opacity: 0.7;
}

.goals-empty-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.goals-empty-description {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
}

.goals-empty-action {
    background: var(--focus-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed) ease;
}

.goals-empty-action:hover {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

/* Loading state */
.goals-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    text-align: center;
    color: var(--text-color);
    opacity: 0.6;
}

.goals-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--light-border);
    border-top: 2px solid var(--focus-color);
    border-radius: var(--border-radius-full);
    animation: goals-spin 1s linear infinite;
    margin-right: var(--spacing-sm);
}

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

/* Responsive design */
@media (max-width: 768px) {
    .goals-search-controls,
    .skills-search-controls,
    .songs-search-controls {
        gap: var(--spacing-xs);
    }
    
    .goals-action-buttons {
        width: 100%;
        justify-content: stretch;
    }
    
    .goals-add-button,
    .goals-refresh-button {
        flex: 1;
        justify-content: center;
    }
    
    .goals-summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .goal-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .goal-priority {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    /* REMOVED: .goals-page-container responsive styles - use .page-container from mystyle.css */
    
    .goals-summary-stats {
        grid-template-columns: 1fr;
    }
    
    .goal-metadata {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }
    
    .goal-actions {
        align-self: flex-end;
    }
}

/* Additional Goals page UI styles */
.goals-description {
    margin: var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.goals-more-wrapper {
    text-align: center;
    margin: var(--spacing-lg) 0;
}

.goals-more-link {
    min-height: 44px;
    min-width: 160px;
    font-size: var(--font-size-sm);
    padding: var(--spacing-md) var(--spacing-lg);
}

.goals-more-link:active {
    transform: scale(0.98);
}

.goals-page-error {
    padding: var(--spacing-lg);
    margin: var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius-md);
    color: var(--color-danger);
    text-align: center;
}

/* Goals main content - two column layout */
.goals-main-content {
    display: flex;
    gap: var(--spacing-xl);
    flex: 1;
    min-height: 0;
}

/* Goals columns */
.goals-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Goals column headers */
.goals-column-header {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--light-border);
    padding-bottom: var(--spacing-sm);
}

/* Goals section header */
.goals-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

/* Goals view list links */
.goals-view-list-link {
    font-size: var(--font-size-sm);
}

/* Goals list view container */
.goals-list-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Goals list items */
.goals-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    transition: all var(--transition-speed) ease;
    cursor: pointer;
}

.goals-list-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Goals list item icon */
.goals-list-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

/* Goals list item content */
.goals-list-item-content,
.goals-list-content {
    flex: 1;
    min-width: 0;
}

.goals-list-item-title,
.goals-list-title {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
}

.goals-list-item-description,
.goals-list-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.7;
    line-height: 1.5;
    margin-top: var(--spacing-xs);
    word-wrap: break-word;
    hyphens: auto;
}

/* Ensure links in descriptions have full opacity */
.goals-list-description a,
.goals-list-item-description a {
    opacity: 1;
}

/* Text truncation for goal descriptions in the "My Goals" column */
#goals-column .goals-list-description {
    /* Multi-line text truncation for actual goal descriptions */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.5em * 2); /* 2 lines with line-height 1.5 */
}

/* Goals list item actions */
.goals-list-item-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Goals delete icon (hidden by default, shown via data attributes) */
.goals-delete-icon {
    position: absolute;
    top: var(--spacing-xs);
    right: var(--spacing-xs);
    width: 24px;
    height: 24px;
    background-color: var(--color-danger);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    z-index: 2;
}

.goals-delete-icon svg {
    width: 12px;
    height: 12px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.goals-delete-icon:hover {
    background-color: var(--color-danger);
    transform: scale(1.1);
}


/* Ensure goal items have relative positioning for absolute delete icon */
#goals-column .goals-list-item {
    position: relative;
}

/* Goals toggle buttons */
.goals-toggle-button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    white-space: nowrap;
}

.goals-toggle-button:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.goals-toggle-button.remove {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

.goals-toggle-button.remove:hover {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.goals-toggle-button.add {
    background-color: var(--color-success);
    color: white;
    border-color: var(--color-success);
}

.goals-toggle-button.add:hover {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

/* Dark theme support for goals components */
[data-theme="dark"] .goals-list-item {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .goals-list-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

[data-theme="dark"] .goals-toggle-button {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .goals-toggle-button:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .goals-column {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

/* Responsive design for goals layout */
@media (max-width: 768px) {
    .goals-main-content {
        flex-direction: column;
        gap: var(--spacing-lg);
    }
    
    .goals-column {
        flex: none;
    }
    
    .goals-list-item {
        padding: var(--spacing-sm);
    }
    
    .goals-list-item-icon {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-sm);
    }
    
    .goals-section-header {
        font-size: var(--font-size-md);
    }
    
    .goals-column-header {
        font-size: var(--font-size-md);
    }
}

@media (max-width: 576px) {
    .goals-list-item-actions {
        align-self: stretch;
        justify-content: flex-end;
    }
    
    .goals-toggle-button {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
    }
}

/* Goals search highlight */
.goals-highlight {
    background-color: var(--color-warning);
    color: var(--text-color);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
    font-weight: 500;
}

[data-theme="dark"] .goals-highlight {
    background-color: var(--color-warning);
    color: black;
}

/* Goals list action links */
.goals-view-link,
.goals-add-link {
    font-size: var(--font-size-sm);
}

.goals-link-separator {
    color: var(--text-color);
    opacity: 0.5;
    margin: 0 var(--spacing-xs);
}

/* ===== HOME PAGE STYLES ===== */

/* MIGRATED: Now uses .page-container from mystyle.css */
.home-page-container {
    /* All base layout styles now provided by .page-container from mystyle.css */
    /* Only specific additions remain */
    line-height: 1.4;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-lg));
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* MIGRATED: Now uses .page-content-wrapper from mystyle.css */
.home-page-content-wrapper {
    /* All base layout styles now provided by .page-content-wrapper from mystyle.css */
    /* Only specific additions remain */
    align-items: flex-start;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.home-page-container .activity-title {
    line-height: 1.3;
    margin-bottom: var(--spacing-xs);
}

.home-page-section {
    width: 100%;
    margin-bottom: calc(var(--spacing-lg) * 2); /* Double spacing for better section separation */
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: background-color 0.3s ease;
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
}

.section-header {
    font-size: clamp(var(--font-size-md), 3vw, 1.25rem);
    font-weight: 600;
    margin: 0;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--light-border);
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--text-color);
}

[data-theme="dark"] .section-header {
    background-color: rgba(255, 255, 255, 0.05);
}

.section-content {
    padding: var(--spacing-lg);
}

/* Card styles */
.welcome-card {
    padding: var(--spacing-xl);
}

/* Enhanced with mystyle.css container patterns */
.welcome-card,
.whats-new-card,
.quiz-card,
.learn-card {
    /* Base styling now leverages .modal-system-content patterns for consistency */
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    overflow: hidden;
    transition: all var(--transition-speed) ease;
    color: var(--text-color);
}

/* Enhanced with mystyle.css .modal-system-content spacing patterns */
.card-content {
    /* Uses same responsive padding approach as .modal-system-content */
    padding: var(--spacing-lg);
    overflow: auto;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.welcome-card .card-content {
    padding: 0;
}

.card-content h4 {
    margin-top: 0;
    margin-bottom: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    font-size: clamp(var(--font-size-md), 3vw, 1.2rem);
    font-weight: 600;
    color: var(--text-color);
}

.card-content p {
    color: var(--text-color);
}

/* Enhanced with mystyle.css .button-link-row patterns */
.card-actions {
    /* Base layout now uses .button-link-row patterns from mystyle.css */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

/* Learn more link styles */
.learn-more-link {
    font-size: var(--font-size-sm);
}

/* Expandable section styles */
.expandable-section {
    margin-top: var(--spacing-lg);
}

.expandable-section .learn-more-link {
    display: block;
    margin-bottom: var(--spacing-sm);
}

.expandable-content {
    /* Removed display: none - visibility should be controlled via data attributes in JavaScript */
    margin-top: var(--spacing-sm);
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .expandable-content {
    background-color: rgba(255, 255, 255, 0.05);
}

.welcome-card #learn-more-site-link {
    display: block;
    width: 100%;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-sm);
    text-align: left;
}

/* Quiz actions container */
.quiz-actions-container {
    /* Base layout now leverages .button-link-row patterns from mystyle.css */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Learn section styles */
.continue-card {
    margin-bottom: var(--spacing-lg);
}

.activity-item,
.goal-item {
    display: flex;
    align-items: center;
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md)) 0;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
}

/* Hierarchy indentation for child categories */
.activity-item-child,
.goal-item-child {
    margin-left: var(--spacing-lg);
}

/* Goal item enhancements */
.goal-recency {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    margin-top: var(--spacing-xs);
}

.goal-last-activity {
    font-style: italic;
}

/* Removed data-recent background styling to match activity items */

.activity-icon,
.goal-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    flex-shrink: 0;
    font-size: clamp(var(--font-size-md), 3vw, 1.25rem);
}

.activity-details,
.goal-details {
    flex: 1;
    min-width: 0;
}

.goal-title {
    font-weight: 500;
    font-size: var(--font-size-md);
    flex: 1;
    margin: 0;
    margin-bottom: var(--spacing-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
}

.activity-path {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    line-height: 1.2;
}

.more-goals {
    padding-top: var(--spacing-sm);
    text-align: center;
}

/* Category grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg) var(--spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--light-border);
    background-color: var(--bg-color);
}

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

[data-theme="dark"] .category-card:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.category-icon {
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
    margin-bottom: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
}

.category-icon span {
    font-size: 1.5rem;
}

.category-title {
    font-weight: 500;
    text-align: center;
    color: var(--text-color);
}

/* Video link container */
.video-link-container {
    margin: var(--spacing-lg) 0;
}

/* Quiz section header responsive behavior - merged into main rule above */

.learn-quizzes-container {
    display: flex;
    align-items: center;
    flex-shrink: 1;
    margin-left: var(--spacing-sm);
    min-width: fit-content;
}

.quiz-mode-select option:disabled {
    color: var(--color-neutral);
    font-style: italic;
}

/* Quiz info section */
.quiz-info-section {
    margin-bottom: var(--spacing-lg);
}

.quiz-info-section #learn-about-quizzes-content {
    padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .quiz-info-section #learn-about-quizzes-content {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Dark theme specific overrides */
[data-theme="dark"] .card-content p,
[data-theme="dark"] .topic-item label,
[data-theme="dark"] .activity-path {
    color: var(--text-color);
    opacity: 0.8;
}

/* Dark theme progress text styling handled by base classes in mystyle.css */

/* Button overrides for specific sections */
.songs-card #view-all-songs-btn,
.skills-card #view-all-skills-btn {
    width: auto;
    min-width: 140px;
    max-width: fit-content;
}

/* Responsive Design */
@media (min-width: 768px) {
    .home-page-button {
        min-width: 7rem;
    }
    
    .activity-icon,
    .goal-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .card-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .home-page-button {
        width: 100%;
    }
    
    .activity-item,
    .goal-item {
        flex-wrap: wrap;
    }
    
    .activity-item .btn,
    .goal-item .btn {
        margin-left: 3.25rem;
        margin-top: var(--spacing-sm);
    }

    /* Mobile: reduce indentation for child items */
    .activity-item-child,
    .goal-item-child {
        margin-left: var(--spacing-md);
    }

    #view-all-goals-btn {
        width: auto;
        min-width: 140px;
        max-width: fit-content;
    }

    .songs-card .card-actions,
    .skills-card .card-actions,
    .goals-card .card-actions {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .songs-card #view-all-songs-btn,
    .skills-card #view-all-skills-btn,
    .goals-card #view-all-goals-btn {
        width: auto;
        min-width: 140px;
        max-width: fit-content;
    }

    /* Enhanced quiz actions container - leverages .button-link-row responsive patterns */
    .quiz-actions-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    
}

@media (max-width: 480px) {
    .page-title-base {
        font-size: clamp(var(--font-size-md), 4vw, 1.5rem);
    }
    
    .section-header {
        font-size: clamp(var(--font-size-sm), 3vw, 1.1rem);
    }
    
    .card-content h4 {
        font-size: clamp(var(--font-size-sm), 3vw, 1.1rem);
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
        
    .welcome-card .expandable-section {
        margin-top: 0;
        padding-top: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    }

    .welcome-card .expandable-section.free-account-section {
        margin-top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-top: none;
    }

    .welcome-card .expandable-section:not(.free-account-section) {
        margin-top: var(--spacing-xl);
        padding-top: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        border-top: 1px solid var(--light-border);
    }

    .welcome-card .expandable-section .learn-more-link {
        display: block;
        font-size: var(--font-size-sm);
        margin-bottom: var(--spacing-sm);
        text-align: left;
    }

    .welcome-card .expandable-section + .expandable-section {
        margin-top: var(--spacing-lg);
    }

    .welcome-card #free-account-content,
    .welcome-card #learn-more-content {
        padding: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
        background-color: rgba(0, 0, 0, 0.02);
        border-radius: var(--border-radius-sm);
        margin-top: var(--spacing-sm);
    }

    [data-theme="dark"] .welcome-card #free-account-content,
    [data-theme="dark"] .welcome-card #learn-more-content {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .welcome-card {
        padding: 0;
        overflow: visible;
    }

    .welcome-card .card-content {
        padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-lg) var(--spacing-xl);
    }

    .welcome-card .expandable-section {
        padding: 0 var(--spacing-xl) var(--spacing-xl) var(--spacing-xl);
    }

    .welcome-card .expandable-section:last-child {
        padding-bottom: var(--spacing-xl);
    }
}

@media (max-width: 350px), (max-height: 450px) {
    .welcome-card .expandable-section {
        padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
    }
    
    .welcome-card .card-content {
        padding: var(--spacing-xl) var(--spacing-lg) clamp(var(--spacing-sm), 2vw, var(--spacing-md)) var(--spacing-lg);
    }

    .quiz-actions-container {
        flex-wrap: wrap;
    }

    .songs-card #view-all-songs-btn,
    .skills-card #view-all-skills-btn,
    .goals-card #view-all-goals-btn {
        min-width: 120px;
        font-size: var(--font-size-sm);
    }
}

/* Home Page Expandable Content Management - Replaces inline styles */
.home-page-expandable-content {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .home-page-expandable-content {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--light-border);
}

/* Home page expandable content now uses natural display via data attributes */

/* Home Page Expandable Trigger Styling - Replaces inline styles */
.home-page-expandable-trigger {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* Home Page Error Display - Replaces inline cssText */
.home-page-error {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger-light);
    border-radius: var(--border-radius);
    color: var(--color-danger);
    text-align: center;
}

[data-theme="dark"] .home-page-error {
    background-color: rgba(204, 51, 51, 0.1);
    border-color: rgba(204, 51, 51, 0.3);
    color: var(--color-error-on-dark);
}

/* Home Page Dropdown Option States - Replaces inline styles */
.dropdown-option-disabled {
    color: var(--color-neutral);
    font-style: italic;
}

/* Home Page Interactive Elements - .clickable class now in mystyle.css */

/* ================================
   My Content Section (Home Page)
   ================================ */

/* Section uses existing .home-page-section base */

.my-content-header {
    margin-bottom: var(--spacing-md);
}

/* Table Base Styling */
.my-content-table {
    width: 100%;
    margin-top: var(--spacing-md);
    border-collapse: collapse;
    background-color: var(--card-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition: border-color var(--transition-speed) ease;
}

.my-content-table thead {
    background-color: var(--light-bg);
    border-bottom: 2px solid var(--light-border);
}

.my-content-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.my-content-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--light-border);
    color: var(--text-color);
    vertical-align: middle;
}

.my-content-table tbody tr {
    transition: background-color var(--transition-speed) ease;
}

.my-content-table tbody tr:hover {
    background-color: var(--light-bg);
}

/* Wall Title Links */
.wall-title-link {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    transition: color var(--transition-speed) ease;
}

.wall-title-link:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

/* Location Badges */
.location-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.location-private {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.location-local {
    background-color: var(--color-warning-light);
    color: var(--color-warning-dark);
}

[data-theme="dark"] .location-private {
    background-color: rgba(59, 130, 246, 0.2);
    color: var(--color-info);
}

[data-theme="dark"] .location-local {
    background-color: rgba(245, 158, 11, 0.2);
    color: var(--color-warning);
}

/* Footer with View All link */
.my-content-footer {
    margin-top: var(--spacing-md);
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--light-border);
}

/* Empty State */
.my-content-section .empty-state {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-md);
    color: var(--text-muted);
}

.my-content-section .empty-state p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
}

/* Responsive Design */
@media (max-width: 768px) {
    .my-content-table th,
    .my-content-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .my-content-table th {
        font-size: var(--font-size-xs);
    }

    .actions-cell {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-cell .btn-small {
        width: 100%;
    }
}

/* Accessibility: Focus states */
.wall-title-link:focus,
.view-wall-btn:focus,
.edit-wall-btn:focus {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* ================================
   SECTION - PLAY OPTIONS DIALOG STYLES
   ================================ */

/* Play options dialog - Uses existing modal system and base classes */
.play-options-body {
    padding: var(--spacing-xs);
}

/* Uses .form-group base class pattern */
.play-options-section {
    margin-bottom: var(--spacing-md);
}

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

/* Uses .form-label base class styling */
.play-options-section label,
.play-options-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: 500;
    color: var(--text-color);
}

/* Radio group using .input-section pattern */
.play-options-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

/* Enhanced radio using .radio-pair.inline base class */
.play-options-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    margin-bottom: 0;
}

.play-options-radio input[type="radio"] {
    margin: 0;
    margin-right: var(--spacing-xs);
    vertical-align: middle;
    flex-shrink: 0;
}

.play-options-radio span {
    font-weight: normal;
    vertical-align: middle;
    line-height: 1.2;
}

/* Tempo control using .input-section pattern */
.tempo-control {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.tempo-target-info {
    font-size: var(--font-size-xs);
    color: var(--list-marker-color);
    margin-top: var(--spacing-xs);
}

/* Checkbox styling similar to .radio-pair.inline */
.play-options-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-weight: normal;
    margin: 2px 0;
}

.play-options-checkbox input[type="checkbox"] {
    margin: 0;
    vertical-align: middle;
    flex-shrink: 0;
}

.play-options-checkbox span {
    font-weight: normal;
    vertical-align: middle;
    line-height: 1.2;
}

/* Loop control using flexbox patterns */
.play-options-loop-control {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.play-options-loop-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.play-options-loop-count.disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Loop count input following form input patterns */
.play-options-loop-count input {
    width: 50px;
    padding: 6px var(--spacing-xs);
    text-align: center;
    margin: 2px;
    /* All other styling inherited from base input {} rule */
}

/* Responsive adjustments following page-styles patterns */
@media (max-width: 480px) {
    .play-options-section label,
    .play-options-label {
        font-size: var(--font-size-sm);
    }
    
    .play-options-checkbox span,
    .play-options-radio span {
        font-size: var(--font-size-sm);
    }
}

/* Modal container */
.goals-modal-container {
    position: relative;
    max-height: 80vh;
    max-width: 800px;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.goals-header {
    margin: 0.5rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.goals-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

.goals-link {
    color: var(--focus-color);
    text-decoration: none;
    margin-right: 0.75rem;
}

.goals-link:hover {
    text-decoration: underline;
}

/* Settings section */
.goals-settings {
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--border-radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goals-settings {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-settings-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.goals-settings-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0.5rem;
    gap: 0.5rem;
}

.goals-settings-label {
    margin-right: 0.5rem;
}

.goals-dropdown {
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: var(--bg-color);
    color: var(--text-color);
    cursor: pointer;
}

[data-theme="dark"] .goals-dropdown {
    border-color: rgba(255, 255, 255, 0.2);
}

.goals-checkbox {
    margin-right: 0.5rem;
    accent-color: var(--focus-color);
}

/* Dashboard */
.goals-dashboard {
    max-width: 800px;
    margin: 0 auto;
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

[data-theme="dark"] .goals-dashboard {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Progress overview */
.goal-progress-overview {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goal-progress-overview {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.goal-progress-bar-container {
    height: 24px;
    background-color: var(--bg-color);
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    margin: 0.5rem 0;
    display: flex;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goal-progress-bar-container {
    border-color: rgba(255, 255, 255, 0.1);
}

.goal-progress-bar-container .goal-progress-segment {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    transition: width 0.3s ease;
}

.goals-segment-green {
    background-color: var(--color-success);
}

.goals-segment-yellow {
    background-color: var(--color-warning);
    color: rgba(0, 0, 0, 0.8);
}

.goals-segment-red {
    background-color: var(--color-danger);
}

/* Goals table */
.goals-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .goals-table {
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-table thead th {
    text-align: left;
    padding: var(--spacing-md);
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goals-table thead th {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-table tbody tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goals-table tbody tr {
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-table tbody tr:last-child {
    border-bottom: none;
}

.goals-table td {
    padding: 12px 15px;
}

.goals-table tr:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .goals-table tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Goal item */
.goals-activity-title {
    font-weight: 500;
}

.goals-title-link {
    color: var(--focus-color);
    text-decoration: none;
    cursor: pointer;
}

.goals-title-link:hover {
    text-decoration: underline;
}

.goals-status-indicator {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.goals-action-link {
    color: var(--focus-color);
    text-decoration: none;
    cursor: pointer;
}

.goals-action-link:hover {
    text-decoration: underline;
}

/* Goal details panel */
.goal-details-panel {
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    margin-top: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: relative;
}

[data-theme="dark"] .goal-details-panel {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.goal-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    gap: var(--spacing-xs);
}

.goal-details-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin: 0;
    padding-right: 2rem;
}

.goal-details-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
}

.goal-details-close:hover {
    opacity: 1;
}

.goal-settings-form {
    margin-bottom: 1.5rem;
}

.goal-settings-row {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.goal-numeric-input {
    width: 80px;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.2);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .goal-numeric-input {
    border-color: rgba(255, 255, 255, 0.2);
}

.chart-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    max-width: 800px;
    background-color: var(--chart-container-bg, var(--bg-color));
    color: var(--chart-container-text, var(--text-color));
    transition: background-color 0.3s ease;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    padding: var(--spacing-sm);
}

.chart-wrapper {
    flex: 1 1 300px;
    min-height: 250px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 0.5rem;
    background-color: var(--bg-color);
}

[data-theme="dark"] .chart-wrapper {
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-button {
    padding: 0.5rem 1rem;
    background-color: var(--focus-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.goals-button:hover {
    opacity: 0.9;
}

.goals-button-secondary {
    background-color: transparent;
    border: 1px solid var(--focus-color);
    color: var(--focus-color);
}

.goals-button-secondary:hover {
    background-color: rgba(77, 144, 254, 0.1);
}

[data-theme="dark"] .goals-button-secondary:hover {
    background-color: rgba(93, 159, 255, 0.1);
}

.goals-button-danger {
    background-color: var(--color-danger);
}

.goals-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

.goals-empty-message {
    padding: 2rem;
    text-align: center;
    color: var(--text-color);
    font-style: italic;
}

/* Notification settings */
.goals-notifications {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goals-notifications {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.goals-notifications-title {
    font-weight: bold;
    margin-bottom: 0.5rem;
}

/* Footer */
.goals-footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 0;
    margin-top: auto;
}

/* Close button for modal view */
.goals-close-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.goals-close-button:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .goals-close-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Chart empty message */
.chart-empty-message {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-style: italic;
    font-size: var(--font-size-md);
    color: var(--text-color);
    opacity: 0.7;
    text-align: center;
    padding: var(--spacing-lg);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .goals-table th:nth-child(2),
    .goals-table td:nth-child(2) {
        display: none;
    }

    .goals-settings-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .goal-settings-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .goals-modal-container {
        max-width: 95%;
        max-height: 85vh;
    }
}

@media (max-width: 576px) {
    .goals-table th:nth-child(2),
    .goals-table td:nth-child(2),
    .goals-table th:nth-child(3),
    .goals-table td:nth-child(3) {
        display: none;
    }

    .goals-table td {
        padding: 10px;
    }

    .goals-activity-title {
        font-size: 0.9rem;
    }

    .goal-details-title {
        font-size: 1rem;
    }
}

/* ================================
   SECTION - CHART PAGE STYLES
   ================================ */

/* Chart Background - Dynamic background color support */
.chart-background {
    background-color: var(--chart-bg-color, var(--bg-color));
}

/* Chart Table Styles */
.chart-table-container {
    margin-top: var(--spacing-md);
    width: 100%;
    clear: both;
    display: block;
}

.chart-table-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.chart-data-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--light-border);
}

.chart-bpm-title {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}


/* Goal Progress Specific Styles */
.goal-login-button {
    margin: 0 auto;
    display: block;
}

.goal-add-current-link {
    margin: 0 0 1rem 0;
}

.goal-progress-wrapper {
    min-height: 250px;
}

.goal-progress-title {
    margin: 0.5rem 0;
    color: var(--text-color);
}

.goal-progress-display {
    height: 200px;
    overflow-y: auto;
}


/* Goals Content Renderer Styles */
.goal-placeholder-thumb {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    background-color: var(--goal-thumb-bg, var(--color-secondary));
}

/* ================================
   SECTION - ACCOUNT PAGE STYLES
   ================================ */

/* MIGRATED: Now uses .page-container from mystyle.css */
.account-page-container {
    /* All base layout styles now provided by .page-container from mystyle.css */
    /* Only account-specific additions remain */
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

[data-theme="dark"] .account-page-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Account page content wrapper */
.account-page-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Account sections */
.account-section {
    padding: var(--spacing-lg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-color);
}

.account-section-title {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

/* User info details */
.account-details {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
}

.account-detail-row {
    display: flex;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--light-border);
}

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

.account-detail-label {
    font-weight: 600;
    min-width: 120px;
    color: var(--text-color);
}

.account-detail-value {
    flex: 1;
    color: var(--text-color);
}

/* Teams list */
.account-teams-list-row {
    align-items: flex-start;
}

.account-teams-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.account-team-entry {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .account-team-entry {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.account-team-name {
    font-weight: 500;
    color: var(--text-color);
}

.account-team-role {
    color: var(--text-color);
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

/* Action buttons */
.account-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.account-action-button {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
}

.account-action-button:hover {
    background-color: var(--button-secondary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

[data-theme="dark"] .account-action-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.account-action-title {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.account-action-description {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Error message */
.account-page-error {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-danger);
    margin: var(--spacing-lg) auto;
    max-width: 800px;
}

/* Email Notifications Settings */
.email-notifications {
    margin-top: var(--spacing-lg);
}

.email-notifications .settings-section-title {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: 500;
}

.email-notifications .setting-item {
    margin: var(--spacing-md) 0;
}

.email-notifications .checkbox-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-md);
    cursor: pointer;
    color: var(--text-color);
}

.email-notifications .checkbox-label input {
    margin-right: var(--spacing-sm);
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

.email-notifications .settings-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
}

.email-notifications .radio-group {
    margin-left: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.email-notifications .radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--text-color);
}

.email-notifications .radio-label input {
    margin-right: var(--spacing-xs);
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--focus-color);
}

.email-notifications .setting-description {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .email-notifications .setting-description {
    background: rgba(255, 255, 255, 0.05);
}

.email-notifications .setting-description p {
    margin: var(--spacing-xs) 0;
    color: var(--text-color);
}

.email-notifications .setting-description ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    color: var(--text-color);
}

.email-notifications .setting-description li {
    margin: var(--spacing-xs) 0;
}

.email-notifications .next-email-time {
    margin-top: var(--spacing-sm);
    font-style: italic;
    color: var(--text-color);
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

.email-notifications .send-now-container {
    margin-top: var(--spacing-xs);
}

.email-notifications .save-feedback,
.email-notifications .send-now-feedback {
    margin-top: var(--spacing-sm);
}

.email-notifications .save-feedback .success,
.email-notifications .send-now-feedback .success {
    color: var(--color-success);
    font-weight: 500;
}

.email-notifications .save-feedback .error,
.email-notifications .send-now-feedback .error {
    color: var(--color-danger);
    font-weight: 500;
}

.email-notifications .send-now-feedback .info {
    color: var(--text-color);
    opacity: 0.7;
    font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .account-page-container {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
    }

    .account-action-buttons {
        grid-template-columns: 1fr;
    }

    .account-detail-row {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .account-detail-label {
        min-width: auto;
    }

    .email-notifications .radio-group {
        margin-left: var(--spacing-md);
    }
}

/* ================================
   SECTION - ABOUT PAGE STYLES
   ================================ */

/* About page main container */
.about-page-container {
    margin: var(--spacing-lg) auto;
    max-width: 800px;
    padding: var(--spacing-lg);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background-color var(--transition-speed) ease,
                color var(--transition-speed) ease,
                border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

[data-theme="dark"] .about-page-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* About page content area */
.about-page-content {
    margin-top: var(--spacing-md);
}

/* About page title */
.about-page-title {
    color: var(--text-color);
    font-size: var(--font-size-xxl);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    transition: color var(--transition-speed) ease;
}

/* About version section */
.about-version-section {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary);
    border-bottom: 1px solid var(--light-border);
    transition: color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

.about-version-label {
    font-weight: 600;
    color: var(--text-color);
    transition: color var(--transition-speed) ease;
}

.about-version-value {
    color: var(--text-color-secondary);
    font-family: monospace;
    transition: color var(--transition-speed) ease;
}

/* About content section */
.about-content-section {
    padding: var(--spacing-md) 0;
}

/* About content body */
.about-content-body {
    color: var(--text-color);
    font-size: var(--font-size-md);
    line-height: 1.6;
    transition: color var(--transition-speed) ease;
}

.about-content-body p {
    margin-bottom: var(--spacing-md);
}

.about-content-body h2 {
    color: var(--text-color);
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-speed) ease;
}

.about-content-body h3 {
    color: var(--text-color);
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    transition: color var(--transition-speed) ease;
}

.about-content-body ul,
.about-content-body ol {
    margin-left: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.about-content-body li {
    margin-bottom: var(--spacing-xs);
}

/* About page error state */
.about-page-error {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--error-color);
}

.about-page-error h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .about-page-container {
        padding: var(--spacing-md);
        margin: var(--spacing-sm);
        border-radius: var(--border-radius-md);
    }

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

    .about-content-body {
        font-size: var(--font-size-base);
    }

    .about-content-body h2 {
        font-size: var(--font-size-lg);
    }

    .about-content-body h3 {
        font-size: var(--font-size-md);
    }
}


/* ================================
   DATABASE CLEANUP - ISSUE SELECTION
   ================================ */

.cleanup-issue-section summary {
    list-style: none; /* Remove default disclosure triangle */
}

.cleanup-issue-section summary::-webkit-details-marker {
    display: none; /* Remove default disclosure triangle in webkit browsers */
}

.cleanup-section-summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    gap: var(--spacing-md);
}

.cleanup-section-summary:hover {
    background-color: var(--hover-bg);
}

.cleanup-section-arrow {
    font-size: var(--font-size-sm);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    width: 20px; /* Fixed width for alignment */
}

.cleanup-issue-section[open] .cleanup-section-arrow {
    transform: rotate(90deg); /* Point down when open */
}

.cleanup-section-title {
    flex: 1;
    /* Allow title to take available space */
}

.issue-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}

.issue-checkbox {
    cursor: pointer;
    /* Normal checkbox size - intentionally NO sizing constraints */
    /* This ensures checkbox matches the cross-table-validation checkbox size */
}

.category-checkbox {
    /* Category-level checkbox styling */
    accent-color: var(--color-accent);
}

.issue-list {
    padding: var(--spacing-sm);
}

.issue-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    border-radius: var(--border-radius);
}

.issue-item:hover {
    background-color: var(--hover-bg);
}

.issue-item-content {
    flex: 1;
    min-width: 0; /* Allow text wrapping */
}

.issue-item-controls {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.issue-item-header {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
}

/* Deleted tag for soft-deleted objects */
.deleted-tag {
    display: inline-block;
    padding: var(--spacing-2xs) var(--spacing-xs);
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-error);
    background-color: var(--color-error-bg);
    border: 1px solid var(--color-error);
    border-radius: var(--border-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: help;
}

[data-theme="dark"] .deleted-tag {
    color: var(--color-error-on-dark);
    background-color: rgba(255, 107, 107, 0.1);
    border-color: var(--color-error-on-dark);
}

/* Age indicators for timestamps */
.issue-age-recent {
    color: var(--color-warning);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.issue-age-medium {
    color: var(--color-info);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.issue-age-old {
    color: var(--color-success);
    font-size: var(--font-size-xs);
    font-style: italic;
}

[data-theme="dark"] .issue-age-recent {
    color: #ffd700;
}

[data-theme="dark"] .issue-age-medium {
    color: #87ceeb;
}

[data-theme="dark"] .issue-age-old {
    color: #90ee90;
}

/* Deployment warning box in confirmation dialogs */
.deployment-warning {
    background-color: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius);
}

.deployment-warning p {
    margin: var(--spacing-xs) 0;
}

.deployment-warning p:first-child {
    margin-top: 0;
}

.deployment-warning p:last-child {
    margin-bottom: 0;
}

.deployment-warning ul {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
}

[data-theme="dark"] .deployment-warning {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: var(--color-warning);
}

/* Deployment result card styling */
.deployment-result-card {
    border-left: 4px solid var(--color-info);
}

.deployment-status.success {
    color: var(--color-success);
    font-weight: 600;
}

.deployment-status.error {
    color: var(--color-error);
    font-weight: 600;
}

.deployment-status .stat-label {
    font-size: var(--font-size-base);
}

.issue-item-details {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.issue-item-details ul {
    margin: var(--spacing-xs) 0 0 var(--spacing-md);
    padding-left: var(--spacing-md);
}

.issue-item-details li {
    margin-bottom: var(--spacing-2xs);
}

.issue-strategy-select {
    /* Strategy dropdown now visible (Phase 1) */
    min-width: 150px;
    max-width: 200px;
    margin-left: auto; /* Push to right side */
}

.issue-strategy-select:hover {
    border-color: var(--color-accent);
}

.issue-strategy-select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Parent Selection Modal (Phase 2) */
.reparent-modal {
    padding: var(--spacing-md);
}

.parent-selection-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    margin-top: var(--spacing-md);
}

.parent-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    transition: background-color 0.2s;
}

.parent-option:last-child {
    border-bottom: none;
}

.parent-option:hover {
    background-color: var(--color-hover-bg);
}

.parent-option.selected {
    background-color: var(--color-accent-bg);
    border-left: 4px solid var(--color-accent);
}

.parent-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.parent-option label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin: 0;
    flex: 1;
}

.parent-option label strong {
    font-weight: 600;
    color: var(--text-color);
}

.parent-option .parent-description {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

.parent-option-warning {
    border-left: 4px solid var(--color-warning);
}

.parent-option-warning.selected {
    border-left: 4px solid var(--color-accent);
}

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

.parent-option-type {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.parent-option-details {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .cleanup-section-summary:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .issue-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}


/* ===== PHASE 3: INLINE STYLE REPLACEMENTS (PAGE-SPECIFIC) ===== */

/* Recent Progress Page */
.recent-progress-loading {
    text-align: center;
    padding: 2rem;
}

/* Goals Page - Progress bars with dynamic width via CSS custom properties */
.goals-progress-fill {
    width: var(--progress-width, 0%);
}

/* Goals Page - Sorting tip */
.sorting-tip {
    text-align: center;
    font-style: italic;
    margin-top: 1rem;
    font-size: var(--font-size-xs);
    opacity: 0.8;
}

/* Goals Page - Remove animation */
.item-removing {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease;
    opacity: 0;
    height: 0;
    margin: 0;
    overflow: hidden;
}

/* Admin Pages - Filters and controls sections */
.admin-filters-section,
.admin-controls-section {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

/* Admin Analytics - Success value color */
.analytics-success-value {
    color: var(--color-success);
}

/* Chart Page - Theme data attribute support */
[data-theme="dark"] .chart-container {
    background-color: var(--dark-bg, #333333);
    color: var(--dark-text, #e0e0e0);
}

[data-theme="light"] .chart-container {
    background-color: var(--bg-color, #ffffff);
    color: var(--text-color, #333333);
}

/* ==========================================
   Goal Details Expander (Phase 5)
   ========================================== */

/* Parent list item: allow expander to wrap below content */
.goals-list-item:has(.goal-details-expander) {
    flex-wrap: wrap;
}

/* Outer container — takes full width of flex row */
.goal-details-expander {
    flex-basis: 100%;
    margin-block-start: var(--spacing-xs);
    padding-inline-start: var(--spacing-sm);
}

/* Toggle button — styled as a subtle link */
.goal-details-toggle {
    background: none;
    border: none;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.goal-details-toggle:hover {
    opacity: 0.8;
}

.goal-details-toggle:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--border-radius, 4px);
}

/* Collapsible content — uses data-display="false" pattern for visibility */
.goal-details-content {
    padding-block-start: var(--spacing-xs);
}

/* Count indicator */
.goal-details-count {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
    margin-block-end: var(--spacing-xs);
    padding-inline-start: var(--spacing-xs);
}

/* Children list */
.goal-details-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

/* Individual child item */
.goal-details-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius, 4px);
    transition: opacity var(--transition-speed, 0.2s) ease;
}

/* Dimmed styling for ignored items */
.goal-details-item[data-ignored="true"] {
    opacity: 0.5;
}

.goal-details-item[data-ignored="true"] label {
    text-decoration: line-through;
}

/* Checkbox pair styling within expander */
.goal-details-item .checkbox-pair {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.goal-details-item .checkbox-pair label {
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.goal-details-item .checkbox-pair input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

/* Mobile: 44x44px touch targets */
@media (pointer: coarse) {
    .goal-details-item {
        min-height: 44px;
        padding: var(--spacing-sm);
    }

    .goal-details-item .checkbox-pair input[type="checkbox"] {
        width: 22px;
        height: 22px;
        min-width: 44px;
        min-height: 44px;
    }

    .goal-details-toggle {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* Dark theme support */
[data-theme="dark"] .goal-details-toggle {
    color: var(--color-primary-light-text, #b39ddb);
}

[data-theme="dark"] .goal-details-count {
    color: var(--text-color);
}

/* ===== CHART COMPONENTS ===== */

/* Chart styles using design tokens and responsive patterns */
.chart-page-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Modal container */
.chart-modal-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    max-height: 80vh;
    max-width: 800px;
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chart-content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

.chart-header {
    margin: var(--spacing-sm) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-xs);
}

.chart-title {
    font-size: var(--font-size-lg);
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

.chart-link {
    color: var(--focus-color);
    text-decoration: none;
    margin-inline: var(--spacing-xs) var(--spacing-xs);
}

.chart-link:hover {
    text-decoration: underline;
}

.chart-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

[data-theme="dark"] .chart-container {
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.chart-display {
    position: relative;
    min-height: 300px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.chart-info {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-top: var(--spacing-md);
}

[data-theme="dark"] .chart-info {
    background-color: var(--light-bg);
}

.chart-canvas {
    max-height: 50vh;
}

.chart-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.chart-table th,
.chart-table td {
    padding: var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}

[data-theme="dark"] .chart-table th,
[data-theme="dark"] .chart-table td {
    border-color: var(--light-border);
}

.chart-table th {
    background-color: var(--light-bg);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

[data-theme="dark"] .chart-table th {
    background-color: var(--light-bg);
    color: var(--text-color);
}

.chart-tabs {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.chart-tab {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .chart-tab {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

.chart-tab.active {
    background-color: var(--focus-color);
    color: white;
    border-color: var(--focus-color);
}

.chart-loading {
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

/* Footer */
.chart-footer {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) 0;
    margin-top: auto;
}

/* Close button for modal view */
.chart-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--border-radius-full);
    transition: background-color var(--transition-speed) ease;
    min-height: 44px;
    min-width: 44px;
}

.chart-close-button:hover {
    background-color: rgb(0 0 0 / 10%);
}

[data-theme="dark"] .chart-close-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

/* Status indicators — base .status-sphere definition is in mystyle.css */

/* Size variants */
.status-sphere-small {
    --sphere-size: 16px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-xs);
}

.status-sphere-medium {
    --sphere-size: 24px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-sm);
}

.status-sphere-large {
    --sphere-size: 32px;

    width: var(--sphere-size);
    height: var(--sphere-size);
    font-size: var(--font-size-md);
}

.status-sphere-custom {
    width: var(--sphere-size, 24px);
    height: var(--sphere-size, 24px);
    font-size: calc(var(--sphere-size, 24px) * 0.4);
}

/* Data table styles */
.data-table-container {
    width: 100%;
    overflow-x: auto;
}

/* BPM chart container */
.bpm-chart-container {
    margin-top: var(--spacing-lg);
}

/* REMOVED: .chart-data-table - empty ruleset (uses base .chart-table styles) */

/* Responsive adjustments */
@media (width <= 768px) {
    .chart-display {
        min-height: 250px;
    }

    .chart-modal-container {
        max-width: 95%;
        max-height: 85vh;
    }
}

@media (width <= 576px) {
    .chart-display {
        min-height: 200px;
    }

    .chart-tabs {
        flex-direction: column;
    }

    .chart-tab {
        border-radius: var(--border-radius-sm);
    }
}

.chart-generic-container {
    margin: 0;
    position: relative;
    /* PAT-029: Ensure container has dimensions for proper chart sizing */
    /* This prevents fallback to window dimensions in JavaScript */
    min-width: 300px;
    min-height: 250px;
    width: 100%;
}

.chart-title-no-margin {
    margin-top: 0;
}

.chart-show-more-link {
    margin-top: var(--spacing-md);
    display: block;
}

/* Color variants */
.status-sphere-red {
    --sphere-color-light: #ff6b6b;
    --sphere-color-dark: #c23616;
    --sphere-text-color: white;
}

.status-sphere-yellow {
    --sphere-color-light: #ffeb3b;
    --sphere-color-dark: #fbc02d;
    --sphere-text-color: black;
}

.status-sphere-green {
    --sphere-color-light: #5adfb0;
    --sphere-color-dark: #26ae60;
    --sphere-text-color: black;
}

.status-sphere-white {
    --sphere-color-light: #fff;
    --sphere-color-dark: #f0f0f0;
    --sphere-text-color: black;

    border: 1px solid var(--light-border);
}

/* ================================
   SECTION - SHOWCASE PAGE STYLES
   ================================ */

/* Page wrapper */
.showcase-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

/* --- Skeleton loading --- */
.skeleton-block {
    background: var(--light-border);
    border-radius: var(--border-radius-sm);
    animation: showcase-skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton-block--avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
}
.skeleton-block--title  { height: 28px; width: 60%; margin-bottom: var(--spacing-sm); }
.skeleton-block--heading { height: 22px; width: 40%; margin-bottom: var(--spacing-md); }
.skeleton-block--card   { height: 120px; border-radius: var(--border-radius-md); }

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

/* --- Header --- */
.showcase-header {
    margin-bottom: var(--spacing-xl);
}
.showcase-header--skeleton {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}
.showcase-header__owner-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}
.showcase-header__avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-full);
    background: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.showcase-header__avatar--team {
    background: var(--color-info);
}
.showcase-header__owner-meta {
    flex: 1;
    min-width: 0;
}
.showcase-header__title {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-xs) 0;
}
.showcase-header__byline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
}
.showcase-header__owner-name {
    font-weight: 600;
}
.showcase-header__badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.showcase-header__badge--public   { background: var(--color-success-light); color: var(--color-success); }
.showcase-header__badge--unlisted { background: var(--color-warning-light); color: var(--color-warning); }
.showcase-header__badge--private  { background: var(--color-secondary-light); color: var(--color-secondary); }
.showcase-header__desc {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    line-height: 1.5;
}
.showcase-header__cta-row {
    margin-top: var(--spacing-md);
}
.showcase-header__cta {
    font-size: var(--font-size-md);
}

/* --- Sections --- */
.showcase-section {
    margin-bottom: var(--spacing-xxl);
}
.showcase-section__heading {
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-md) 0;
    border-bottom: 1px solid var(--light-border);
    padding-bottom: var(--spacing-xs);
}
/* --- Grid --- */
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-md);
}

/* --- Cards --- */
.showcase-card {
    background: var(--color-secondary-light);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: box-shadow 0.15s ease, transform 0.1s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.showcase-card:hover,
.showcase-card:focus {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transform: translateY(-1px);
    outline: none;
    border-color: var(--color-primary);
}
.showcase-card__type-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-info);
    margin-bottom: var(--spacing-xs);
}
.showcase-card__type-badge--lesson   { color: var(--color-success); }
.showcase-card__type-badge--category { color: var(--color-primary); }
.showcase-card__title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0;
}
.showcase-card__desc {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Progress indicator */
.showcase-card__progress {
    margin-top: auto;
    padding-top: var(--spacing-xs);
}
.showcase-card__progress-bar {
    height: 4px;
    background: var(--light-border);
    border-radius: var(--border-radius-full);
    overflow: hidden;
    margin-bottom: 2px;
}
.showcase-card__progress-fill {
    height: 100%;
    background: var(--color-info);
    border-radius: var(--border-radius-full);
    transition: width 0.3s ease;
}
.showcase-card__progress-fill--complete { background: var(--color-success); }
.showcase-card__progress-label {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
}

/* --- State pages --- */
.showcase-page--not-found,
.showcase-page--private,
.showcase-page--error {
    text-align: center;
    padding: var(--spacing-xxl) var(--spacing-md);
}
.showcase-not-found__home-btn {
    margin-top: var(--spacing-md);
}

/* --- Sign-up banner --- */
.showcase-signup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-xl);
    flex-wrap: wrap;
}
.showcase-signup-banner__text {
    margin: 0;
    font-size: var(--font-size-sm);
}

/* --- Warning banner --- */
.showcase-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-md);
}

/* --- Empty page message --- */
.showcase-page__empty {
    text-align: center;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xxl);
}

/* =====================================================================
   Showcase Management — Phase 3
   Slug input component, manage modal, My Showcases section, Team Showcases
   ===================================================================== */

/* --- Slug Input Component --- */
.slug-input-component {
    margin-bottom: var(--spacing-md);
}
.slug-input__label {
    display: block;
    margin-bottom: var(--spacing-xs);
}
.slug-input__row {
    display: flex;
    align-items: center;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--bg-color);
    transition: border-color 0.15s;
}
.slug-input__row:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.slug-input__prefix {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-secondary-light);
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    white-space: nowrap;
    border-right: 1px solid var(--light-border);
    flex-shrink: 0;
}
.slug-input__field {
    flex: 1;
    border: none;
    outline: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    background: transparent;
    min-width: 0;
}
.slug-input__field--valid  { background: var(--color-success-light, #f0fff0); }
.slug-input__field--invalid { background: var(--color-error-light, #fff0f0); }
.slug-input__icon {
    padding: 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.slug-input__icon--ok    { color: var(--color-success); }
.slug-input__icon--error { color: var(--color-error, var(--color-danger, #c00)); }
.slug-input__message {
    font-size: var(--font-size-xs);
    margin-top: 4px;
    min-height: 1.2em;
}
.slug-input__message--ok       { color: var(--color-success); }
.slug-input__message--error    { color: var(--color-error, var(--color-danger, #c00)); }
.slug-input__message--checking { color: var(--color-neutral); }
.slug-input__preview {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin-top: 2px;
    word-break: break-all;
}
.slug-input__preview--hidden { display: none; }

/* --- Showcase Manage Modal --- */
.showcase-modal__wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.showcase-modal__form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.showcase-modal__form .form-row {
    margin-bottom: 0;
}
.showcase-modal__input,
.showcase-modal__select {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
}
.showcase-modal__textarea {
    width: 100%;
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}
.showcase-modal__input:focus,
.showcase-modal__select:focus,
.showcase-modal__textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-light);
}
.showcase-modal__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    width: 100%;
}
.showcase-modal__radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background 0.1s;
}
.showcase-modal__radio-option:hover {
    background: var(--color-secondary-light);
}
.showcase-modal__radio-text { font-size: var(--font-size-sm); }
.showcase-modal__radio-desc { color: var(--color-neutral); }
/* PAT-028 exempt: gap 2px is vertical spacing between the interactive toggle label and its non-interactive hint text — not between two touch targets */
.showcase-modal__toggle-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.showcase-modal__toggle-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    cursor: pointer;
}
.showcase-modal__hint {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    margin: 0;
}
.showcase-modal__items-section {
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-md);
}
.showcase-modal__items-heading {
    font-size: var(--font-size-md);
    margin: 0 0 var(--spacing-xs) 0;
}
.showcase-modal__items-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--spacing-sm) 0;
}
.showcase-modal__items-empty {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    padding: var(--spacing-xs) 0;
}
.showcase-modal__item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--light-border);
    gap: var(--spacing-sm);
}
.showcase-modal__item-info {
    font-size: var(--font-size-xs);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.showcase-modal__item-actions { display: flex; gap: var(--spacing-xs); flex-shrink: 0; }
.showcase-modal__item-btn { font-size: var(--font-size-xs); padding: 0 2px; }
.showcase-modal__item-btn--remove { color: var(--color-error, var(--color-danger, #c00)); }
.showcase-modal__add-item-row {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-xs);
}
.showcase-modal__add-type { width: auto; flex-shrink: 0; }
.showcase-modal__add-id  { flex: 1; min-width: 140px; }
.showcase-modal__items-save-status {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    min-height: 1.2em;
}
.showcase-modal__items-save-status--ok    { color: var(--color-success); }
.showcase-modal__items-save-status--error { color: var(--color-error, var(--color-danger, #c00)); }
.showcase-modal__danger-zone {
    border-top: 1px solid var(--color-error, var(--color-danger, #c00));
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-sm);
}
.showcase-modal__danger-title {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-error, var(--color-danger, #c00));
    margin-bottom: var(--spacing-xs);
}
.showcase-modal__delete-btn {
    background: var(--color-error, var(--color-danger, #c00));
    color: #fff;
    border: none;
}
.showcase-modal__delete-btn:hover { opacity: 0.85; }
.showcase-modal__banner {
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
}
.showcase-modal__banner--error {
    background: var(--color-error-light, #fff0f0);
    border: 1px solid var(--color-error, var(--color-danger, #c00));
    color: var(--color-error, var(--color-danger, #c00));
}
.showcase-modal__banner--info {
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}
.showcase-modal__owner-row { display: flex; flex-direction: column; gap: var(--spacing-xs); }

/* --- My Showcases section (my-content page) --- */
.my-showcases-section {
    margin-top: var(--spacing-xxl);
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-lg);
}
.my-showcases-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}
.my-showcases-section__title {
    font-size: var(--font-size-lg);
    margin: 0;
}

.my-showcases-table__slug {
    font-size: var(--font-size-xs);
    color: var(--color-neutral);
    font-family: monospace;
}

/* --- Team Showcases subsection (admin team panel) --- */
.admin-team-showcases {
    border-top: 1px solid var(--light-border);
    padding-top: var(--spacing-md);
    margin-top: var(--spacing-md);
}
.admin-team-showcases__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-sm);
}
.admin-team-showcases__title {
    font-size: var(--font-size-md);
    margin: 0;
}

.admin-team-showcases__table {
    width: 100%;
    margin-top: var(--spacing-xs);
}

/* --- Showcase header: title row with copy-link button --- */
.showcase-header__title-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.showcase-header__copy-btn {
    font-size: var(--font-size-base);
    padding: 0;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-speed);
    flex-shrink: 0;
}
.showcase-header__copy-btn:hover { opacity: 1; }

/* --- Modal share banner (success state) --- */
.showcase-modal__banner--success {
    background: var(--color-success-light);
    color: var(--color-success);
    border-left: 3px solid var(--color-success);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-md);
}
.showcase-modal__share-msg {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}
.showcase-modal__share-path {
    background: var(--hover-bg);
    padding: 1px var(--spacing-xs);
    border-radius: var(--border-radius-xs);
}
.showcase-modal__share-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* --- ResponsiveLayoutManager question layout (data-screen-size replaces inline styles) --- */
[data-responsive-container][data-page-type="question"] [data-question-element="text"] {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

[data-responsive-container][data-screen-size="small"][data-page-type="question"] [data-question-element="text"] {
    font-size: 1rem;
}

[data-responsive-container][data-page-type="question"] .answer-option {
    padding: 1rem 0.75rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
}

[data-responsive-container][data-screen-size="small"][data-page-type="question"] .answer-option {
    padding: 0.75rem 0.5rem;
}

/* --- My Showcases dedicated page (/my-showcases) --- */
.my-showcases-page {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-lg) var(--spacing-md);
}

.my-showcases-table__actions {
    white-space: nowrap;
}

/* ===== HTML PAGE MAIN CONTENT LAYOUT ===== */

/* HTML Page Main Content Layout */
.html-page-main-content {
    display: flex;
    flex-direction: column;
}

.html-page-main-content .html-page-images {
    order: -1; /* Always keep images at top */
}

.html-page-main-content .html-page-content {
    order: 0;
}

/* Prevent reordering during resize */
@media (width <= 768px) {
    .html-page-main-content {
        flex-direction: column;
    }

    .html-page-main-content .html-page-images {
        order: -1;
    }
}

/* ===== LESSON PAGE STYLES ===== */

/* Lesson page wrapper */
.lesson-page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
}

/* Lesson page header */
.lesson-page-header {
    margin-bottom: var(--spacing-xl);
}

.lesson-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.lesson-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
    margin-top: var(--spacing-sm);
}

.lesson-page-breadcrumb .breadcrumb-link {
    color: var(--link-color);
    text-decoration: none;
}

.lesson-page-breadcrumb .breadcrumb-link:hover {
    text-decoration: underline;
}

.lesson-page-breadcrumb .breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

/* Lesson page info */
.lesson-page-info {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-xl);
}

.info-item {
    display: flex;
    gap: var(--spacing-sm);
}

.info-label {
    font-weight: 600;
    color: var(--text-color);
}

.info-value {
    color: var(--color-muted);
}

/* Activities section */
.lesson-page-activities {
    margin-top: var(--spacing-xl);
}

.lesson-page-section-heading {
    font-size: var(--font-size-xl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-lg) 0;
    border-bottom: 2px solid var(--light-border);
    padding-bottom: var(--spacing-sm);
}

.lesson-activities-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.lesson-activity-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
    min-height: 44px;
}

.lesson-activity-item:hover {
    background-color: var(--bg-color);
    border-color: var(--focus-color);
}

.lesson-activity-link {
    color: var(--link-color);
    text-decoration: none;
    font-size: var(--font-size-md);
    font-weight: 500;
}

.lesson-activity-link:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.lesson-activity-pages {
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

/* Empty state */
.lesson-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

/* Error page */
.lesson-page-error {
    max-width: 600px;
    margin: var(--spacing-xxl) auto;
    padding: var(--spacing-xl);
    text-align: center;
    background-color: var(--color-danger-light);
    border-radius: var(--border-radius);
}

.lesson-page-error h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.lesson-page-error p {
    color: var(--text-color);
    margin-bottom: var(--spacing-lg);
}

/* Responsive adjustments */
@media (width <= 768px) {
    .lesson-page-wrapper {
        padding: var(--spacing-md);
    }

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

    .lesson-page-info {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .lesson-activity-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* ===== ACTIVITY PAGE STYLES ===== */

/* Activity Page Wrapper - Main container for activity display */
.activity-page-wrapper {
    padding: var(--spacing-lg);
    max-width: 1200px;
    margin: 0 auto;
}

/* Activity Page Header */
.activity-page-header {
    margin-bottom: var(--spacing-lg);
}

.activity-page-title {
    font-size: var(--font-size-xxl);
    color: var(--text-color);
    margin: 0 0 var(--spacing-sm) 0;
}

.activity-page-breadcrumb {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin-bottom: var(--spacing-md);
}

.activity-page-breadcrumb a {
    color: var(--link-color);
    text-decoration: none;
}

.activity-page-breadcrumb .breadcrumb-separator {
    margin: 0 var(--spacing-xs);
    color: var(--color-muted);
}

.activity-page-breadcrumb .breadcrumb-current {
    color: var(--text-color);
    font-weight: 500;
}

/* Activity Page Info Section */
.activity-page-info {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.activity-page-info p {
    margin: var(--spacing-sm) 0;
    color: var(--color-neutral);
}

/* Activity Pages Section */
.activity-page-pages {
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.activity-page-section-heading {
    font-size: var(--font-size-lg);
    color: var(--text-color);
    margin: 0 0 var(--spacing-md) 0;
}

.activity-pages-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.activity-page-item {
    display: flex;
    align-items: center;
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.activity-page-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
}

.activity-page-link {
    color: var(--link-color);
    text-decoration: none;
    flex: 1;
}

.activity-page-link:hover {
    text-decoration: underline;
}

.activity-page-empty-state {
    padding: var(--spacing-xl);
    text-align: center;
    color: var(--color-muted);
    font-style: italic;
}

.activity-page-error {
    padding: var(--spacing-lg);
    background-color: var(--color-error-light);
    border-radius: var(--border-radius);
    color: var(--color-error);
}

/* ===== HYDRATE SETTINGS PAGE ===== */

.hydrate-settings-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.hydrate-settings-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.hydrate-settings-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    min-width: 130px;
    flex-shrink: 0;
}

.hydrate-settings-message {
    font-size: var(--font-size-sm);
}

/* Overrides table */
.hydrate-overrides-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.hydrate-overrides-table th,
.hydrate-overrides-table td {
    padding: var(--spacing-xs) var(--spacing-sm);
    text-align: left;
    border-bottom: 1px solid var(--light-border);
}

.hydrate-overrides-table th {
    font-weight: 600;
    color: var(--text-color);
    opacity: 0.7;
}

[data-theme="dark"] .hydrate-overrides-table th,
[data-theme="dark"] .hydrate-overrides-table td {
    border-color: var(--color-neutral);
}

/* Content search input and results dropdown */
.hydrate-override-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 320px;
}

.hydrate-override-search-input {
    width: 100%;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .hydrate-override-search-input {
    border-color: var(--color-neutral);
}

.hydrate-override-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0;
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

[data-theme="dark"] .hydrate-override-search-results {
    border-color: var(--color-neutral);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.hydrate-override-search-result-item {
    padding: var(--spacing-xs) var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.hydrate-override-search-result-item:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .hydrate-override-search-result-item:hover {
    background-color: var(--color-neutral);
}

/* Hydrate refresh message (shown after correct quiz answer or green flashcard) */
.hydrate-refresh-message {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    border-top: 1px solid var(--light-border);
}

[data-theme="dark"] .hydrate-refresh-message {
    border-color: var(--color-neutral);
}

.hydrate-refresh-message .hydrate-refresh-change-link {
    font-size: inherit;
    padding: 0;
    vertical-align: baseline;
}

/* Browse content tree (modal picker) */
.hydrate-browse-tree {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    padding: var(--spacing-xs) 0;
}

.hydrate-browse-empty {
    color: var(--text-color);
    opacity: 0.7;
    padding: var(--spacing-sm);
}

.hydrate-browse-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    padding-left: calc(var(--spacing-sm) + var(--browse-depth, 0) * var(--spacing-md));
    min-height: 44px;
    border-radius: var(--border-radius-xs);
    cursor: default;
}

.hydrate-browse-row:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .hydrate-browse-row:hover {
    background-color: var(--color-neutral);
}

.hydrate-browse-arrow {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.55;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hydrate-browse-arrow:hover {
    opacity: 1;
}

.hydrate-browse-arrow-spacer {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-block;
}

.hydrate-browse-title {
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    color: var(--text-color);
    text-align: left;
    padding: 0;
    flex: 1;
    min-width: 0;
}

.hydrate-browse-title:hover {
    text-decoration: underline;
}

.hydrate-browse-title--leaf {
    cursor: default;
}

.hydrate-browse-title--leaf:hover {
    text-decoration: none;
}

.hydrate-browse-change-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.6;
    padding: 2px var(--spacing-xs);
    flex-shrink: 0;
    white-space: nowrap;
}

.hydrate-browse-change-btn:hover {
    opacity: 1;
    text-decoration: underline;
}

.hydrate-browse-level {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.45;
    flex-shrink: 0;
    white-space: nowrap;
}

.hydrate-browse-override-badge {
    font-size: var(--font-size-xs);
    color: var(--color-accent, #6c6);
    background-color: rgba(102, 204, 102, 0.12);
    border: 1px solid rgba(102, 204, 102, 0.35);
    border-radius: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
    white-space: nowrap;
    cursor: default;
}

[data-theme="dark"] .hydrate-browse-override-badge {
    color: var(--color-accent, #8d8);
    background-color: rgba(136, 221, 136, 0.12);
    border-color: rgba(136, 221, 136, 0.3);
}