:root {
    
    --bg-color: #fff;
    --light-bg: #f5f5f5;
    --light-border: #ddd;
    --text-color: #333;
    --primary-color: #333;
    --focus-color: #4D90FE;
    --link-color: #1a0dab;
    --list-marker-color: #555;
    --header-bg: #333;
    --toggle-bg: #e0e0e0;
    --toggle-thumb: #555;
    --button-primary: #007bff;
    --button-primary-hover: #0056b3;
    --button-disabled: #ccc;
    --button-secondary-bg: #f8f9fa;
    --button-secondary-hover: #e2e6ea;
    --spacing-xxs: 2px;
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(6px, 1.5vw, 10px);
    --spacing-md: clamp(8px, 2vw, 16px);
    --spacing-lg: clamp(16px, 3vw, 24px);
    --spacing-xl: clamp(24px, 4vw, 32px);
    --spacing-xxl: clamp(32px, 5vw, 48px);
    --font-size-xs: clamp(12px, 1.8vw, 13px);

--font-size-sm: clamp(14px, 2.5vw, 16px);

--font-size-md: clamp(14px, 3vw, 16px);
    --font-size-lg: clamp(16px, 3vw, 24px);
    --font-size-xl: clamp(18px, 4vw, 28px);
    --font-size-xxl: clamp(24px, 5vw, 32px);
    --border-radius: 8px;
    --transition-speed: 0.2s;

--color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;
    --color-info: #4D90FE;
    --color-primary: #6f42c1;
    --color-secondary: #6c757d;
    --color-success-light: #d4edda;
    --color-warning-light: #fff3cd;
    --color-danger-light: #f8d7da;
    --color-info-light: #cce7ff;
    --color-primary-light: #e2d9f3;
    --color-secondary-light: #e2e3e5;
    --color-neutral: #666;
    --color-neutral-light: #ccc;
    --color-neutral-dark: #333;
    --color-accent: #ff8c00;
    --color-accent-light: #ffa54f;

--tag-public-bg: #e3f2fd;
    --tag-public-text: #1976d2;
    --tag-team-bg: #f3e5f5;
    --tag-team-text: #7b1fa2;
    --tag-personal-bg: #fff3e0;
    --tag-personal-text: #f57c00;
    --tag-system-bg: #e8f5e9;
    --tag-system-text: #388e3c;
    --tag-pink-bg: #fce4ec;
    --tag-pink-text: #c2185b;
    --tag-subject-bg: #e3f2fd;
    --tag-subject-text: #1976d2;
    --tag-type-bg: #f3e5f5;
    --tag-type-text: #7b1fa2;
    --tag-level-bg: #fff3e0;
    --tag-level-text: #f57c00;
    --tag-mode-bg: #e8f5e8;
    --tag-mode-text: #388e3c;

--border-radius-xs: 3px;
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-full: 50%;
    --border-radius-pill: 1.5rem;
    --border-radius-xl: 12px;

--z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-modal: 1001;
    --z-toast: 1002;
    --z-popover: 110;
    --z-supreme: 9999;

--content-min-width: 300px;
    --image-min-height: 6.25rem;

--hover-bg: #f5f5f5;
    --color-text-inverse: #fff;
    --color-surface-darkest: #000;
    --color-border-divider: #808080;
    --color-star: #ffd700;
    --video-bg: var(--color-surface-darkest);
    --video-overlay-bg: #111;

--clerk-primary-color: #4A90E2;

--color-error: var(--color-danger);
    --color-error-light: var(--color-danger-light);
    --focus-ring-color: var(--focus-color);
    --tag-public-border: #bbdefb;
    --color-warning-dark: #d35400;
    --warning-bg: var(--color-warning-light);
    --warning-text: #856404;

--question-spacing-xs: 0.3125rem; 
    --question-spacing-sm: 0.625rem;  
    --question-spacing-md: 1.25rem;   
    --question-font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
    --question-font-size-md: clamp(1rem, 3vw, 1.25rem);
    --question-border-radius: 0.25rem;
    --question-content-width: min(100%, 800px);
    --question-response-min-height: 3rem;
    --question-option-hover: rgb(0 0 0 / 5%);
    --question-option-selected: rgb(0 123 255 / 10%);

--modal-z-index: 1000;
    --modal-backdrop-color: rgb(0 0 0 / 50%);
    --modal-border-radius: 8px;
    --modal-padding: var(--spacing-lg);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    --modal-max-width-small: 450px;
    --modal-max-width-medium: 600px;
    --modal-max-width-large: 800px;
    --modal-animation-duration: 0.3s;
    --modal-safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --modal-android-nav-offset: 48px;
    --modal-android-nav-offset-landscape: 60px;
    --modal-fullscreen-height-mobile: calc(100dvh - var(--modal-android-nav-offset) - var(--modal-safe-area-bottom));
    --modal-fullscreen-height-mobile-landscape: calc(100dvh - var(--modal-android-nav-offset-landscape) - var(--modal-safe-area-bottom));
}

[data-theme="dark"] {
    --light-border: #444;
    --text-muted: #999;
    --color-neutral: #999;
    --success-bg: #1e4620;
    --success-text: #d4edda;
    --success-border: #2a6e2d;
    --error-bg: #721c24;
    --error-text: #f8d7da;
    --error-border: #9e2631;
    --warning-bg: #856404;
    --warning-text: #fff3cd;
    --warning-border: #ffeaa7;
    --hover-bg: #444;
    --accent-color: var(--focus-color);
    --accent-light: #2d5a87;
    --bg-color: #222;
    --light-bg: #2d2d2d;
    --text-color: #e0e0e0;
    --primary-color: #f0f0f0;
    --focus-color: #5D9FFF;
    --link-color: #5D9FFF;
    --list-marker-color: #aaa;
    --header-bg: #333;
    --toggle-bg: #555;
    --toggle-thumb: #e0e0e0;

--color-info-light: rgb(93 159 255 / 20%);
    --color-success-light: rgb(40 167 69 / 20%);
    --color-warning-light: rgb(255 193 7 / 20%);
    --color-danger-light: rgb(220 53 69 / 20%);
    --color-primary-light: rgb(111 66 193 / 20%);
    --color-secondary-light: rgb(108 117 125 / 20%);

--modal-backdrop-color: rgb(0 0 0 / 70%);
    --modal-shadow: 0 4px 20px rgb(0 0 0 / 60%);

--question-option-hover: rgb(255 255 255 / 10%);
    --question-option-selected: rgb(66 153 225 / 20%);

--tag-public-bg: rgb(25 118 210 / 20%);
    --tag-public-text: #90caf9;
    --tag-public-border: rgb(66 165 245 / 30%);
    --tag-team-bg: rgb(123 31 162 / 20%);
    --tag-team-text: #ce93d8;
    --tag-personal-bg: rgb(245 124 0 / 20%);
    --tag-personal-text: #ffb74d;
    --tag-system-bg: rgb(56 142 60 / 20%);
    --tag-system-text: #81c784;
    --tag-pink-bg: rgb(194 24 91 / 20%);
    --tag-pink-text: #f48fb1;
    --tag-subject-bg: rgb(25 118 210 / 20%);
    --tag-subject-text: #90caf9;
    --tag-type-bg: rgb(123 31 162 / 20%);
    --tag-type-text: #ce93d8;
    --tag-level-bg: rgb(245 124 0 / 20%);
    --tag-level-text: #ffb74d;
    --tag-mode-bg: rgb(56 142 60 / 20%);
    --tag-mode-text: #81c784;
    --color-success-on-dark: #4caf50;
    --bg-color-deeper: #1a1a1a;
    --color-warning-dark: #8b7500;
    --dark-warning-bg: #3a3a2a;
    --dark-warning-text: var(--color-warning);

--color-info-bg-dark: #0d47a1;
    --color-info-text-dark: #90caf9;
    --color-success-bg-dark: #1b5e20;
    --color-success-text-dark: #a5d6a7;
    --color-danger-bg-dark: #b71c1c;
    --color-danger-text-dark: #ef9a9a;
    --color-danger-border-dark: #e57373;
    --color-danger-muted-dark: #ffcdd2;
    --color-danger-faint-dark: #ffebee;
    --color-danger-on-dark: #ff6b6b;
}

* {
    box-sizing: border-box !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.65;
    margin: 0 auto;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    max-width: 100%
}

p {
    margin-bottom: 0.9em;
}

a {
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
    width: auto;

}

a:hover {
    text-decoration: underline;
    color: var(--button-primary-hover);
}

.btn {
    padding: .75rem 1rem;
    min-height: 2.5rem;
    background: var(--button-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: var(--spacing-sm);
    white-space: normal;
    font-size: var(--font-size-sm);
    justify-content: center;
    transition: background-color var(--transition-speed) ease;
    text-decoration: none;
}

.btn:hover,
.btn:focus {
    background: var(--button-primary-hover);
    transform: translateY(-1px);
}

.btn:active,
.btn:focus:active {
    background: var(--button-primary-hover);
    transform: translateY(1px);
}

@media (hover: none) and (pointer: coarse) {
    .btn:active {
        background: var(--button-primary-hover);
        transform: scale(0.98);
    }

button:active,
    .btn:active,
    a:active,
    [role="button"]:active,
    .clickable:active {
        transform: scale(0.98);
        opacity: 0.8;
        transition: transform 0.1s ease, opacity 0.1s ease;
    }

.wall-block-item:active,
    .goal-item:active {
        background-color: var(--light-bg);
        transform: scale(0.98);
    }

.btn,
    button {
        position: relative;
        overflow: hidden;
    }

    .btn::after,
    button::after {
        content: '';
        position: absolute;
        top: 50%;
        inset-inline-start: 50%;
        width: 0;
        height: 0;
        border-radius: var(--border-radius-full);
        background: rgb(255 255 255 / 30%);
        transform: translate(-50%, -50%);
        transition: width 0.2s ease, height 0.2s ease;
        pointer-events: none;
    }

    .btn:active::after,
    button:active::after {
        width: 120px;
        height: 120px;
    }
}

.btn:disabled {
    background: var(--button-disabled);
    cursor: not-allowed;
    transform: none;
}

.btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-danger {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
}

.btn-danger:hover {
    background-color: var(--color-danger);
    filter: brightness(90%);
}

.btn-small {
    padding: var(--spacing-xs) var(--spacing-sm);

font-size: var(--font-size-sm);

min-width: auto;
}

.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--link-color);
    font-weight: normal;
    text-decoration: none;
    margin: 0;
    cursor: pointer;
}

.btn-link:hover {
    background: none;
    text-decoration: underline;
    color: var(--button-primary-hover);
    transform: none;
}

.button-container {
    margin-bottom: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    align-items: flex-start;
    flex-wrap: nowrap;
}

.button-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--button-row-gap, var(--spacing-sm));
    margin-top: 1rem;
}

.button-row .btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: fit-content;
    align-self: stretch; 
    display: flex;
    font-size: var(--button-font-size, var(--font-size-sm));
}

.button-link-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.button-link-row .btn {
    flex: 0 0 auto;
    width: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
}

.icon-button-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;

min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

.icon-button-container:hover,
.icon-button-container:active {
    background-color: var(--light-bg);
}

.icon-button-container button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

.icon-link {
    color: var(--color-neutral);
    cursor: pointer;
}

.icon-text {
    color: var(--color-neutral);

font-size: var(--font-size-xs);
    margin: 0 var(--spacing-xs) 0 var(--spacing-xxs);
}

.empty-message {
    color: var(--color-neutral);
    font-style: italic;
}

.page-desc {
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-error {
    color: var(--color-error);
}

.section-empty {
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) 0;
}

.message-component[data-message-type="success"] {
    background-color: rgb(76 175 80 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="warning"] {
    background-color: rgb(255 152 0 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="error"] {
    background-color: rgb(244 67 54 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="info"] {
    background-color: rgb(33 150 243 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="success"] {
    background-color: rgb(76 175 80 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="warning"] {
    background-color: rgb(255 152 0 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="error"] {
    background-color: rgb(244 67 54 / 90%);
    color: var(--color-text-inverse);
}

#briefMessageDiv[data-message-type="info"] {
    background-color: rgb(33 150 243 / 90%);
    color: var(--color-text-inverse);
}

.message-component[data-message-type="default"],
#briefMessageDiv[data-message-type="default"] {
    background-color: rgb(0 0 0 / 80%);
    color: var(--color-text-inverse);
}

#briefMessageDiv {
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

#briefMessageDiv[data-message-position="top"] {
    top: 20px;
    bottom: auto;
}

#briefMessageDiv[data-message-position="bottom"] {
    top: auto;
    bottom: 20px;
}

#briefMessageDiv[data-message-position="center"] {
    top: 50%;
    bottom: auto;
}

[data-collapsible-icon] {
    transition: transform 0.2s ease;
}

[aria-expanded="true"] [data-collapsible-icon] {
    transform: rotate(180deg);
}

.message-success {
    color: var(--color-success, #28a745);
}

.message-error {
    color: var(--color-error);
}

.render-error-container {
    padding: var(--spacing-lg);
    color: var(--color-error);
    text-align: center;
}

.required-indicator {
    color: var(--color-error);
}

.loading-overlay {
    position: absolute;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    z-index: var(--z-popover);
    cursor: pointer;

filter: none;
}

.image-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
}

.input-with-margin {
    margin: var(--spacing-xs);
}

.input-pair,
.select-pair {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.input-pair label,
.select-pair label {
    font-weight: 500;
}

.input-pair input,
.select-pair select {
    flex: 1;
}

.checkbox-pair {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.clickable {
    cursor: pointer;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.align-start {
    align-items: flex-start;
}

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

.align-end {
    align-items: flex-end;
}

.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.margin-0 {
    margin: 0;
}

.padding-0 {
    padding: 0;
}

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

.padding-md {
    padding: var(--spacing-md);
}

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

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

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

.font-bold {
    font-weight: bold;
}

.font-normal {
    font-weight: normal;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-full {
    max-width: 100%;
}

.page-container {
    padding: clamp(var(--spacing-xs), 2vw, var(--spacing-md));
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.page-container li {
    margin-bottom: 0.6em;
}

.page-content-wrapper {
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
}

.btn-warning {
    background: var(--color-warning);
    color: var(--color-text-inverse);
}

.btn-success:hover,
.btn-success:focus {
    background: color-mix(in srgb, var(--color-success) 85%, var(--color-surface-darkest));
}

.btn-warning:hover,
.btn-warning:focus {
    background: color-mix(in srgb, var(--color-warning) 85%, var(--color-surface-darkest));
}

@supports not (color: color-mix(in srgb, red, blue)) {
    .btn-success:hover,
    .btn-success:focus {
        filter: brightness(0.85);
    }

    .btn-warning:hover,
    .btn-warning:focus {
        filter: brightness(0.85);
    }
}

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

.table-standard {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table-standard th {
    background-color: var(--header-bg);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
    text-align: left;
    font-weight: 600;
}

.table-standard td {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    transition: border-color 0.3s ease;
}

.table-standard tr:last-child td {
    border-bottom: none;
}

.table-standard tr:hover {
    background-color: var(--color-info-light);
}

.form-section {
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--light-border);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-row {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.form-row:last-child {
    margin-bottom: 0;
}

.input-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.button-section {
    display: flex;
    justify-content: flex-start;
}

.form-label {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
    display: block;
}

.control-label {
    font-weight: 600;
    color: var(--text-color);
    margin-right: var(--spacing-md);
    white-space: nowrap;
}

.control-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.radio-pair {
    display: block;
    line-height: 1.4;
}

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

.radio-pair label {
    font-weight: normal;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
    line-height: 1.2;
}

.radio-pair.inline {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.radio-pair.inline input[type="radio"] {
    margin-right: var(--spacing-xs);
}

.radio-pair.inline label {
    margin-bottom: 0;
}

.form-group:last-child {
    margin-bottom: 0;
}

ul {
    padding-inline-start: 1em;
}

#top-header-container {
    background-color: var(--header-bg);
    color: var(--color-text-inverse);
    padding: var(--spacing-sm);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#left-header,
#right-header {
    display: flex;
    align-items: center;
}

#menu-icon,
#user-icon {
    font-size: var(--font-size-lg);
    cursor: pointer;
    margin: 0 var(--spacing-sm);
}

#user-icon {
    margin-top: 6px;
}

#company-logo {
    font-size: var(--font-size-lg);
    font-weight: bold;
    margin-inline-start: var(--spacing-sm);
    padding-top: var(--spacing-xs);
    cursor: pointer;
}

#goals-icon {
    width: 44px;
    height: 44px;
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    padding: var(--spacing-sm);
    box-sizing: border-box;
}

#goals-icon svg {
    fill: none;
    stroke: var(--color-text-inverse);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#search-icon {
    
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
    color: var(--color-text-inverse);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;
}

#search-icon:hover,
#search-icon:active {
    background-color: rgb(255 255 255 / 10%);
}

#search-icon svg {
    width: 24px;
    height: 24px;
}

.header-dark-mode-toggle {
    margin: 0 var(--spacing-sm);
}

.goal-star-base {
    cursor: pointer;
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--color-star);
    transition: transform var(--transition-speed);
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    justify-content: center;
}

.goal-star-base:hover,
.goal-star-base:active {
    transform: scale(1.2);
}

.goal-star-base-empty {
    opacity: 0.5;
}

.goal-star-base-empty:hover,
.goal-star-base-empty:active {
    opacity: 0.8;
}

[data-theme="light"] .goal-star-base {
    text-shadow: -1px 0 var(--color-surface-darkest), 0 1px var(--color-surface-darkest), 1px 0 var(--color-surface-darkest), 0 -1px var(--color-surface-darkest);
}

#sidebar {
    position: fixed;
    inset-inline-start: -250px;
    top: 0;
    width: 250px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--light-bg);
    transition: inset-inline-start 0.3s ease-in-out;
    z-index: var(--z-overlay);
    display: block;
}

#sidebar.open {
    inset-inline-start: 0;
    display: block;
}

#sidebar-close-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: .25rem 1.5rem;
    clear: both;
    font: inherit;
    font-weight: 400;
    color: inherit;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.dropdown-item:hover,
.dropdown-item:active {
    color: inherit;
    text-decoration: none;
    background-color: var(--color-neutral-light);
}

#sidebar .dropdown-item:hover,
#sidebar .dropdown-item:active {
    background-color: transparent;
}

.dropdown-item.keyboard-selected {
    background-color: var(--color-neutral-light);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

#action-list {
    list-style-type: none;
    padding: var(--spacing-lg);
    margin: 0;
    margin-top: var(--spacing-md);
}

.divider {
    height: 1px;
    background-color: var(--light-border);
    margin: var(--spacing-md) 0;
}

input {
    
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    padding: 12px 16px;
    line-height: 1.4;

transition: border-color var(--transition-speed) ease;
    font-family: inherit;
}

input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

input:not([type="radio"], [type="checkbox"], [type="range"]) {
    
    min-height: 44px !important;           
    font-size: 16px !important;            
    box-sizing: border-box !important;     

-webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

@media (pointer: coarse) {
    input:not([type="radio"], [type="checkbox"], [type="range"]) {
        min-height: 48px !important;       
    }
}

.message-input {
    width: 180px;
}

.inline-submit-input {
    display: inline;
    margin: 5px;
}

.checkbox-input {
    margin-top: 5px;
}

[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

select {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    color: var(--text-color);
    background-color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

select:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.numberCircle {
    font: 12px Arial, sans-serif;

width: 1.6em;
    height: 1.6em;
    background: var(--bg-color);
    border: 0.1em solid var(--color-neutral);
    color: var(--color-neutral);
    text-align: center;
    border-radius: var(--border-radius-full);
    line-height: 1.6em;
    box-sizing: content-box;
}

.section-base {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    transition: background-color var(--transition-speed) ease, 
                border-color var(--transition-speed) ease;
}

.page-header-base {
    margin: var(--spacing-sm) 0;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--spacing-sm);

min-width: 0;
}

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

min-width: 0;
    flex-shrink: 1;
}

.page-separator {
    margin: calc(var(--spacing-xs) * 1.25) 0;
    height: 1px;
    width: 100%;
    background-color: var(--light-border);
}

.table-base {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: var(--spacing-lg);
}

.table-header-base {
    background-color: var(--light-bg);
    color: var(--text-color);
    font-weight: bold;
    padding: clamp(10px, 2.5vw, 12px);
    text-align: left;
    border-bottom: 2px solid var(--light-border);
    cursor: pointer;
    position: relative;
    transition: background-color var(--transition-speed) ease;
}

.table-cell-base {
    padding: clamp(8px, 2vw, 10px);
    border-bottom: 1px solid var(--light-border);
    text-align: left;
}

@media (width <= 480px) {
    .mobile-card-base {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: var(--spacing-lg);
        border-radius: var(--border-radius-lg);
        box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
        background-color: var(--bg-color);
        padding: clamp(10px, 2.5vw, 12px);
        position: relative;
        border: 1px solid var(--light-border);
        transition: box-shadow var(--transition-speed) ease;
        min-width: 0;
    }

    .mobile-card-base:hover {
        box-shadow: 0 4px 8px rgb(0 0 0 / 15%);
    }
}

@media (width <= 500px) {
    
    #company-logo {
        font-size: var(--font-size-sm);

margin-inline-start: var(--spacing-xs);
    }

#menu-icon,
    #user-icon {
        font-size: var(--font-size-xl);
        margin: 0 var(--spacing-xs);
    }

    #goals-icon {
        width: 20px;
        height: 20px;
        margin: -7px 5px 0;
    }

#top-header-container .theme-switch {
        width: 2.5rem !important;
        height: 1.2rem !important;
    }

    #top-header-container .theme-switch .slider::before {
        height: 0.8rem;
        width: 0.8rem;
    }

    #top-header-container input:checked+.slider::before {
        transform: translateX(1.2rem);
    }

#top-header-container .toggle-label {
        display: none;
    }

#top-header-container {
        padding: var(--spacing-xs);
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    #youtube-player-container {
        width: fit-content;
    }

.activity-title {
        width: 100%;
        margin: var(--spacing-xs) 0;
        order: -1;
    }
}

@media (width <= 250px) {
    #company-logo {
        display: none;
    }
}

@media (width >= 501px) and (width <= 768px) {
    #company-logo {
        font-size: var(--font-size-lg);
    }

    #top-header-container .toggle-label {
        font-size: var(--font-size-xs);
    }
}

@media (width >= 1000px) {
    body {
        width: 1000px;
    }
}

#outer-container {
    overflow: auto;
    flex: 1;
    width: 100%;
    margin: auto;
    text-align: left;
    max-width: 1000px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#content-container {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: var(--spacing-md);
}

#core-page-container {
    color: var(--text-color);
    position: relative;
    min-height: 300px;
}

.horSeparator {
    margin: var(--spacing-xs) 0 var(--spacing-xs) 0;
    height: 1px;
    width: 100%;
    max-width: 640px;
    background-color: var(--color-border-divider);
}

.progress-bar-container {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md));
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.progress-bar {
    width: 100%;
    max-width: 300px;
    height: 20px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: var(--spacing-sm) 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar {
    background-color: var(--light-border);
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-fill {
    height: 100%;
    background-color: var(--color-success);
    transition: width 0.3s ease-in-out;
    width: var(--progress-width, 0%);
}

.progress-bar-fill--instant {
    transition: none;
}

.progress-text {
    margin-left: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
    white-space: nowrap;
    font-weight: 500;
}

.progress-group-container {
    display: flex;
    align-items: center;
    min-width: 200px;
    gap: var(--spacing-xs, 4px);
}

.progress-bar-min-width {
    min-width: 150px;
}

.shell-footer-copyright {
    display: block;
    margin-left: 5px;
    margin-top: 5px;
    font-size: 75%;
    color: var(--color-neutral, #999);
}

.progress-bar-small {
    width: 60px;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-small {
    background-color: var(--color-neutral);
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-compact {
    width: 100%;
    height: 8px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
}

[data-theme="dark"] .progress-bar-compact {
    background-color: rgb(255 255 255 / 10%);
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-info {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.progress-bar-flexible {
    width: 100%;
    min-width: 80px;  
    max-width: 100%;
    height: 12px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    margin: 2px 0;
    flex: 1;
}

[data-theme="dark"] .progress-bar-flexible {
    background-color: var(--toggle-bg);
    border-color: rgb(255 255 255 / 20%);
}

.progress-bar-responsive {
    width: clamp(2.5rem, 5vw, 3rem);
    height: clamp(0.75rem, 1.5vw, 1rem);
    margin: 2px;
    background-color: var(--light-bg);
    border: 1px solid rgb(0 0 0 / 10%);
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

[data-theme="dark"] .progress-bar-responsive {
    background-color: var(--light-border);
    border-color: rgb(255 255 255 / 20%);
}

@media (width <= 480px) {
    .progress-bar {
        max-width: 100%;
        min-width: 30px;
    }
}

.testout-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--text-color);
    font-size: var(--font-size-sm);
    margin-left: var(--spacing-xs);
}

.testout-badge {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;

gap: 2px;
}

[data-theme="dark"] .testout-badge {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.testout-tooltip {
    
    padding: var(--spacing-sm);
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
    font-size: var(--font-size-sm);
    max-width: 250px;
    z-index: var(--z-overlay);
    position: absolute;
}

[data-theme="dark"] .testout-tooltip {
    background-color: var(--bg-color);
    border-color: var(--color-neutral);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
}

.testout-icon {
    font-size: var(--font-size-xs);
    color: var(--color-success);
}

.testout-badge-small {
    font-size: calc(var(--font-size-xs) - 1px);
    padding: 2px 6px;
    border-radius: var(--border-radius-xs);
}

.progress-bar-container.has-testout {
    position: relative;
}

.progress-bar-container .testout-indicator {
    margin-left: var(--spacing-sm);
    flex-shrink: 0;
}

.preference-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .preference-section {
    background-color: var(--bg-color);
    border-color: var(--color-neutral);
}

.preference-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.preference-label {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
}

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

.account-preferences-save-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.account-preferences-message {
    font-size: var(--font-size-sm);
}

.preference-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
}

.preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.preference-checkbox:checked::after {
    content: "✓";
    position: absolute;
    top: -1px;
    left: 2px;
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: bold;
}

[data-theme="dark"] .preference-checkbox {
    border-color: var(--color-neutral);
    background-color: var(--bg-color);
}

[data-theme="dark"] .preference-checkbox:checked {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.preference-frequency-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.preference-frequency-text {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
}

.preference-frequency-edit {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.preference-frequency-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.preference-frequency-number {
    width: 4rem;
    font-size: var(--font-size-sm);
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .preference-frequency-number {
    border-color: var(--color-neutral);
}

.preference-frequency-select {
    font-size: var(--font-size-sm);
    padding: 2px var(--spacing-xs);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-xs);
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] .preference-frequency-select {
    border-color: var(--color-neutral);
}

.preference-hydrate-details-link {
    display: block;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;

padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-container {
    position: relative;
    padding: 0;
    overflow: hidden;
    background-color: var(--video-bg);
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--video-overlay-bg);
    color: var(--color-text-inverse);
}

.video-loading {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    text-align: center;
    font-size: var(--font-size-sm);
    color: rgb(255 255 255 / 80%);
}

.video-loading::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    margin: var(--spacing-sm) auto;
    border-radius: var(--border-radius-full);
    border: 4px solid rgb(255 255 255 / 20%);
    border-color: rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 20%) rgb(255 255 255 / 80%);
    animation: video-loading 1.2s linear infinite;
}

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

.video-error {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--color-neutral-dark);
    color: var(--color-text-inverse);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

[data-theme="dark"] .video-error {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.video-error p {
    margin: var(--spacing-xs) 0;
}

@media (width <= 480px) {
    .modal-system-container.size-large {
        width: 95vw;
    }
    
    .modal-system-footer {
        flex-direction: column;
    }
    
    .modal-system-footer .btn {
        width: 100%;
        margin: var(--spacing-xs) 0;
    }
}

.modal-content {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: auto;
    padding: var(--spacing-sm);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-text-content {
    margin: var(--spacing-md) var(--spacing-sm);
    line-height: 1.65;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.modal-text-content p {
    margin-bottom: 0.9em;
}

.modal-text-content li {
    margin-bottom: 0.6em;
}

[data-theme="dark"] .modal-text-content p,
[data-theme="dark"] .modal-text-content div,
[data-theme="dark"] .modal-text-content span,
[data-theme="dark"] .modal-text-content h1,
[data-theme="dark"] .modal-text-content h2,
[data-theme="dark"] .modal-text-content h3,
[data-theme="dark"] .modal-text-content h4,
[data-theme="dark"] .modal-text-content h5,
[data-theme="dark"] .modal-text-content h6,
[data-theme="dark"] .modal-text-content li {
    color: var(--text-color);
}

.modal-image-container {
    margin: var(--spacing-sm);
    text-align: center;
    background-color: var(--bg-color);
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    display: inline-block;
    transition: border-color 0.3s ease;
}

[data-theme="dark"] .modal-image-container {
    border-color: var(--header-bg);

}

.modal-image {
    max-width: 100%;
    margin: 0;
    filter: none;

}

.modal-text-content a {
    font-weight: bold;
}

[data-theme="dark"] .modal-text-content a {
    color: var(--focus-color);
}

[data-theme="dark"] .modal-text-content a:hover {
    color: var(--focus-color);
}

.prompt-dialog {
    background-color: var(--bg-color);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
    color: var(--text-color);
}

[data-theme="dark"] .prompt-dialog {
    box-shadow: 0 4px 20px rgb(0 0 0 / 50%);
}

.prompt-title {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: var(--font-size-xl);
    color: var(--text-color);
}

.prompt-message {
    margin-bottom: 20px;
    color: var(--color-neutral);
    line-height: 1.4;
}

[data-theme="dark"] .prompt-message {
    color: var(--color-neutral-light);
}

.prompt-button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.prompt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-overlay);
}

.modal-system-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--modal-backdrop-color);
    z-index: var(--modal-z-index);
    display: flex;
    align-items: center;
    justify-content: center;

opacity: 0;
    visibility: hidden;
    transition: opacity var(--modal-animation-duration) ease,
        visibility var(--modal-animation-duration) ease;
}

.modal-system-overlay.modal-visible {
    opacity: 1;
    visibility: visible;
}

@media (width <= 768px) {
    .modal-system-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh; 
    }
}

.modal-system-container {
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    border: 1px solid var(--light-border);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    overflow: auto; 
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--modal-animation-duration) ease,
        background-color 0.3s ease,
        border-color 0.3s ease;

pointer-events: auto;

width: var(--modal-width, 100%);
    max-width: var(--modal-max-width, var(--modal-max-width-medium));
}

.modal-system-overlay[data-modal-state="visible"] .modal-system-container {
    transform: scale(1);
}

.modal-system-overlay[data-modal-state="hiding"] .modal-system-container {
    transform: scale(0.9);
}

.modal-system-container.size-small {
    max-width: var(--modal-max-width-small);
    width: 100%;
}

.modal-system-container.size-medium {
    max-width: var(--modal-max-width-medium);
    width: 100%;
}

.modal-system-container.size-large {
    max-width: var(--modal-max-width-large);
    width: 100%;
}

.modal-system-container.size-fullscreen {
    width: 95vw;
    height: 95vh;
    max-width: none;
    max-height: 95vh;
    overflow: hidden; 
}

.modal-system-container.size-fullscreen .modal-system-content {
    flex: 1 1 auto;
    min-height: 0; 
    overflow: hidden; 
}

.modal-system-container.size-fullscreen .content-modal-wrapper {
    height: 100%;
    overflow-y: auto; 
    overscroll-behavior: contain; 
}

.modal-system-header {
    flex-shrink: 0; 
    padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md);
    border-bottom: 1px solid var(--light-border);
    background-color: var(--light-bg);
    border-radius: var(--modal-border-radius) var(--modal-border-radius) 0 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-system-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
    padding-inline: 2rem;
    transition: color 0.3s ease;
}

.modal-system-content {
    flex: 1 1 auto;
    padding: var(--spacing-lg);
    overflow: auto; 
    color: var(--text-color);
    transition: color 0.3s ease;
    text-align: center;
    line-height: 1.5;
}

.content-modal-wrapper {

width: 100%;
    height: 100%;
}

.content-modal-wrapper--no-scroll {
    overflow: hidden;
}

.content-modal-wrapper--no-padding {
    padding: 0;
}

.content-modal-wrapper li {
    margin-bottom: 0.6em;
}

.modal-system-footer {
    flex-shrink: 0; 
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--light-border);
    background-color: var(--light-bg);
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-md);
    border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.modal-system-close {
    position: absolute;
    top: var(--spacing-sm);
    inset-inline-end: var(--spacing-sm);
    background: none;
    border: 1px solid transparent;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

z-index: 1;

min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-system-close:hover,
.modal-system-close:active {
    color: var(--color-neutral);
    background-color: rgb(0 0 0 / 10%);
    border-color: var(--light-border);
}

.modal-system-close:focus {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

[data-theme="dark"] .modal-system-close:hover,
[data-theme="dark"] .modal-system-close:active {
    color: var(--color-neutral-light);
    background-color: rgb(255 255 255 / 10%);
}

body.modal-open {
    overflow: hidden;
}

@media (width <= 768px) {
    .modal-system-overlay {
        padding: var(--spacing-sm);

align-items: flex-start;
        padding-top: 5vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 16px);
        max-width: none;
        margin: 0;

max-height: 90vh;
        position: relative;
        top: auto;
        inset-inline-start: auto;
        transform: none;
    }

    .modal-system-container.size-fullscreen {
        width: 100vw;

height: var(--modal-fullscreen-height-mobile);
        border-radius: 0;
        max-height: var(--modal-fullscreen-height-mobile);
        overflow: hidden; 

padding-bottom: env(safe-area-inset-bottom, 0);
        box-sizing: border-box;
    }

.modal-system-overlay:has(.modal-system-container.size-fullscreen) {
        padding-top: 0;
        align-items: flex-start; 
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-md);
    }

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

@media (width <= 480px) {
    .modal-system-overlay {
        padding: var(--spacing-xs);
        padding-top: 2vh;
    }

    .modal-system-container:not(.size-fullscreen) {
        width: calc(100vw - 8px);
        max-height: 95vh;
    }

    .modal-system-header,
    .modal-system-content,
    .modal-system-footer {
        padding: var(--spacing-sm);
    }

    .modal-system-footer {
        flex-direction: column;
        gap: var(--spacing-xs);
    }

    .modal-system-footer .btn {
        width: 100%;
        min-height: 44px;

}
}

@media (width <= 915px) and (orientation: landscape) {
    .modal-system-container.size-fullscreen {
        
        height: var(--modal-fullscreen-height-mobile-landscape);
        max-height: var(--modal-fullscreen-height-mobile-landscape);
    }
}

@media (prefers-contrast: high) {
    .modal-system-container {
        border: 2px solid var(--text-color);
    }

    .modal-system-header,
    .modal-system-footer {
        border-color: var(--text-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-system-overlay,
    .modal-system-container {
        transition: none;
    }
}

.modal-system-container.modal-dialog {
    max-width: var(--modal-max-width-small);
}

.modal-system-container.modal-dialog .modal-system-content {
    flex: 0 0 auto;
}

.modal-system-container.modal-dialog .modal-system-content .dialog-message {
    color: var(--color-neutral);
    line-height: 1.6;
    font-size: var(--font-size-sm);
}

[data-theme="dark"] .modal-system-container.modal-dialog .modal-system-content .dialog-message {
    color: var(--color-neutral-light);
}

.modal-system-container.modal-dialog .modal-system-footer {
    
    justify-content: center;
    background-color: transparent;
    border-top: none;
    padding: var(--spacing-md);
    border-radius: 0;
    display: flex;
    gap: var(--spacing-md);
}

.modal-system-container.modal-dialog .modal-system-footer .btn {
    min-width: 120px;
}

.modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--color-success-light);
    border-bottom-color: var(--color-success);
}

.modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    content: '✓ ';
    color: var(--color-success);
    font-weight: 700;
    margin-inline-end: var(--spacing-xs);
}

[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-header {
    background-color: var(--success-bg);
    border-bottom-color: var(--success-border);
}

[data-theme="dark"] .modal-system-container.modal-dialog.dialog-success .modal-system-title::before {
    color: var(--success-text);
}

.dialog-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.dialog-icon {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--border-radius-full);
    margin-bottom: 0.5rem;
}

.dialog-icon[data-icon-type="success"] {
    color: var(--color-success, #28a745);
}

.dialog-icon[data-icon-type="warning"] {
    color: var(--color-warning, #ffc107);
}

.dialog-icon[data-icon-type="error"] {
    color: var(--color-error, #dc3545);
}

.dialog-icon[data-icon-type="question"],
.dialog-icon[data-icon-type="info"] {
    color: var(--color-info, #17a2b8);
}

.dialog-message {
    line-height: 1.5;
    color: var(--text-color);
    text-align: start;
}

.sr-only {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-input-field {
    margin: var(--spacing-xs);
}

.breadcrumb-separator {
    color: var(--secondary-text-color, #888);
}

.correct-answer {
    color: var(--color-success);
}

.incorrect-answer {
    color: var(--color-danger);
}

[data-visible='false'] {
    visibility: hidden !important;
}

[data-display='false'] {
    display: none !important;
}

[data-opacity="false"] {
    opacity: 0 !important;
}

[data-interactive="false"] {
    visibility: hidden !important;
    pointer-events: none !important;
}

[data-modal-state="hidden"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

[data-modal-state="visible"] {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-modal-state="hiding"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

[data-transform-state="hidden"] {
    transform: scale(0.9) !important;
}

[data-transform-state="visible"] {
    transform: scale(1) !important;
}

.confetti-container {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: var(--border-radius-full);
    pointer-events: none;
    z-index: var(--z-supreme);
    opacity: 0;

background-color: var(--confetti-color, #f00);
    left: var(--confetti-x, 0);
    top: var(--confetti-y, 0);
    animation-name: var(--confetti-animation-name, confettiAnimation);
    animation-duration: var(--confetti-duration, 1000ms);
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes confettiAnimation {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    100% {
        transform: translate(var(--x), var(--y)) rotate(720deg);
        opacity: 0;
    }
}

.hotspot {
    cursor: pointer;
    position: absolute;
    border: 2px solid var(--color-danger);
    background-color: var(--color-danger);
    box-shadow: 2px 2px 6px rgb(0 0 0 / 60%);
}

.question-main-container {
    width: 100%;
    max-width: var(--question-content-width);
    margin: 0 auto;
    padding: clamp(var(--question-spacing-xs), 2vw, var(--question-spacing-md));
    color: var(--text-color);
    line-height: 1.5;
    transition: color 0.3s ease;
}

.question-section {
    margin-top: var(--question-spacing-md);
    margin-bottom: var(--question-spacing-md);
}

.question-text {
    font-size: var(--question-font-size-md);
    margin-bottom: var(--question-spacing-md);
    transition: font-size 0.3s ease;
}

.answer-section {
    display: flex;
    flex-direction: column;
    gap: var(--question-spacing-sm);
    margin-bottom: var(--question-spacing-md);
    width: 100%;
}

.answer-option {
    display: flex;
    align-items: center;
    padding: var(--question-spacing-sm) var(--question-spacing-md);
    border-radius: var(--question-border-radius);
    transition: background-color 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--light-border);
}

.answer-option .radio-pair {
    display: inline-flex;
    align-items: center;
    width: 100%;
    gap: var(--question-spacing-md);
}

.answer-option:hover {
    background-color: var(--question-option-hover);
}

.answer-option[selected="selected"] {
    background-color: var(--question-option-selected);
    border-color: var(--button-primary);
}

.answer-option .radio-pair input[type="radio"] {
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-option .radio-pair label {
    cursor: pointer;
    font-size: var(--question-font-size-sm);
    flex: 1;
    margin: 0;
}

.response-section {
    min-height: var(--question-response-min-height);
    margin-bottom: var(--question-spacing-md);
    width: 100%;
}

.response-text {
    padding: var(--question-spacing-sm) 0;
    font-size: var(--question-font-size-sm);
    font-weight: bold;
}

.question-image-wrapper {
    margin-bottom: var(--question-spacing-md);
    display: flex;
    justify-content: center;
    width: 100%;
}

.question-image-wrapper img {
    max-width: 100%;
    max-height: 50vh;
    object-fit: contain;
    border-radius: var(--question-border-radius);
    aspect-ratio: auto;
    content-visibility: auto;
    contain-intrinsic-size: auto 6.25rem;
}

[data-scaled="true"] .answer-option {
    padding: 0.75rem 0.5rem;
}

[data-scaled="true"] .answer-option input[type="radio"] {
    transform: scale(1.2);
    margin-inline-end: 1rem;
}

[data-scale-factor] .question-text {
    font-size: calc(1rem / var(--scale-factor, 1));
    margin-bottom: calc(1.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option {
    padding: calc(0.5rem / var(--scale-factor, 1));
}

[data-scale-factor] .answer-option input[type="radio"] {
    transform: scale(calc(1.2 / var(--scale-factor, 1)));
    margin-inline-end: calc(0.75rem / var(--scale-factor, 1));
}

.question-error-message {
    padding: var(--question-spacing-md);
    margin: var(--question-spacing-md) 0;
    background-color: rgb(220 53 69 / 10%);
    border: 1px solid var(--color-danger);
    border-radius: var(--question-border-radius);
    color: var(--color-danger);
}

@media (width <= 576px) {
    .question-text {
        font-size: var(--question-font-size-sm);
    }

    .answer-option {
        padding: calc(var(--question-spacing-sm) * 0.75) var(--question-spacing-sm);
    }
}

@media (width <= 350px), (height <= 450px) {
    .question-main-container {
        padding: calc(var(--question-spacing-xs) * 0.5);
    }

    .answer-option {
        padding: var(--question-spacing-xs);
    }
}

@media (width >= 768px) and (height <= 600px) {
    .question-image-wrapper {
        float: left;
        width: 40%;
        margin-right: var(--question-spacing-md);
    }

    .question-section,
    .answer-section,
    .response-section {
        width: calc(60% - var(--question-spacing-md));
        float: right;
        clear: right;
    }
}

[data-theme="dark"] .question-image-wrapper img:not([data-native-dark="true"], [data-no-invert="true"]) {
    filter: invert(1) hue-rotate(180deg);
}

[data-theme="light"] .question-image-wrapper img[data-native-dark="true"],
:root:not([data-theme]) .question-image-wrapper img[data-native-dark="true"] {
    filter: invert(1) hue-rotate(180deg);
}

.question-image-wrapper img[data-no-invert="true"] {
    filter: none;
}

.viewport-scaler-wrapper .answer-option {
    position: relative;

z-index: 5;
}

.viewport-scaler-wrapper {
    transform-origin: top left;
    width: 100%;
    position: relative;
    overflow: visible;
}

.viewport-scaler-wrapper * {
    max-height: none !important;
}

.viewport-scaler-wrapper #main-container {
    margin-bottom: 0;
}

.viewport-scaler-wrapper #main-container button {
    margin-top: 5px;
    margin-bottom: 5px;
}

.viewport-scaler-wrapper .btn {
    margin-bottom: 5px;
}

#top-header-container .theme-switch-wrapper {
    margin: 0;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#top-header-container .toggle-label {
    margin-inline-start: 0.625rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-inverse);

white-space: nowrap;
}

#top-header-container .theme-switch {
    display: inline-block;
    height: 1.5rem;
    position: relative;
    width: 3rem;
    margin: 0 var(--spacing-sm);
    vertical-align: middle;
}

#top-header-container .theme-switch input {
    display: none;
}

#top-header-container .slider {
    background-color: var(--color-neutral);
    inset: 0;
    cursor: pointer;
    position: absolute;
    transition: .4s;
    border-radius: var(--border-radius-pill);
}

#top-header-container .slider::before {
    background-color: var(--color-text-inverse);
    bottom: 0.25rem;
    content: "";
    height: 1rem;
    inset-inline-start: 0.25rem;
    position: absolute;
    transition: .4s;
    width: 1rem;
    border-radius: var(--border-radius-full);
}

#top-header-container input:checked+.slider::before {
    transform: translateX(1.5rem);
}

[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #content-container {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-theme="dark"] #sidebar {
    background-color: var(--color-neutral-dark);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--color-surface-darkest);
}

[data-theme="dark"] #sidebar .dropdown-item:hover {
    background-color: transparent;
}

[data-theme="dark"] .dropdown-item.keyboard-selected {
    background-color: var(--color-surface-darkest);
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

[data-theme="dark"] img:not([data-native-dark="true"], [data-no-invert="true"]) {
    filter: invert(1) hue-rotate(180deg);
}

img[data-no-invert="true"] {
    filter: none;
}

[data-theme="dark"] .modal-image-container img.modal-image {
    filter: none;
}

[data-theme="dark"] #core-page-container {
    color: var(--text-color, #e0e0e0);
    background-color: var(--bg-color, #222);
}

[data-theme="dark"] #core-page-container *:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] #core-page-container h1:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container p:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container li:not([data-dark-mode-exempt="true"]) {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] #core-page-container a:not([data-dark-mode-exempt="true"]),
[data-theme="dark"] #core-page-container .btn-link:not([data-dark-mode-exempt="true"]) {
    color: var(--link-color);
}

[data-theme="dark"] #core-page-container a:hover,
[data-theme="dark"] #core-page-container .btn-link:hover {
    color: var(--button-primary-hover);
}

[data-theme="light"] img[data-native-dark="true"],
:root:not([data-theme]) img[data-native-dark="true"] {
    filter: invert(1) hue-rotate(180deg);
}

.wall {
    box-sizing: border-box;
}

.wall-instructions {
    margin: var(--spacing-xs);
    font-style: italic;
    font-size: var(--font-size-sm);
    color: var(--text-color-secondary, var(--text-color));
    text-align: left;
}

.wall-sphere-interactive {
    cursor: pointer;
    pointer-events: auto;
    margin: 0;
}

.wall-sphere-interactive:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.wall-block-item[role="button"]:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
}

.list-sphere:focus-visible,
.list-block-item:focus-visible,
.activity-title:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

.wall-container-mini-mode:focus-visible,
.wall-container-icon-mode:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    border-radius: var(--border-radius-sm);
}

.wall-sphere-icon-mode {
    border: none;
}

.wall-block-overflow-visible {
    overflow: visible !important;
}

.wall-full-mode {
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--dot-gap, 0);
    width: fit-content;
    max-width: min(500px, calc(100vw - 2 * var(--spacing-lg)));

    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) 0;

padding: var(--spacing-sm);
    position: relative;

overflow: visible;
}

.sphere-red {
    background-color: var(--color-danger-light);
}

.sphere-green {
    background-color: var(--color-success-light);
}

.sphere-yellow {
    background-color: var(--color-warning-light);
}

.wall-item-hover {
    color: var(--color-accent);

}

.status-sphere {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-full);
    margin: 0 var(--spacing-xs);
    font-weight: bold;
    font-family: system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at 30% 30%, var(--sphere-color-light, #f0f0f0), var(--sphere-color-dark, #e0e0e0));
    box-shadow: 0 calc(var(--sphere-size, 24px) / 12) calc(var(--sphere-size, 24px) / 6) rgb(0 0 0 / 20%);
    color: var(--sphere-text-color, var(--text-color));
    transition: all var(--transition-speed) ease;
}

.list-sphere.wall-item-hover,
.list-block-item.wall-item-hover,
.status-sphere.wall-item-hover {
    color: var(--sphere-text-color, var(--text-color));
}

.recent-item {
    color: var(--color-danger);
}

[data-theme="dark"] #core-page-container .recent-item {
    color: var(--color-danger);
}

.recent-indicator {
    font-size: var(--font-size-xs);
    color: var(--focus-color);
    font-style: italic;
    margin: 0 var(--spacing-xs) var(--spacing-xs) var(--spacing-xs);
}

.recent-sphere {
    position: relative;
}

.recent-sphere::after {
    content: '';
    position: absolute;
    top: -2px;

right: -2px;

width: 6px;

height: 6px;

background-color: var(--color-danger);
    border-radius: var(--border-radius-full);
    border: 1px solid var(--bg-color);

z-index: 10;

}

@keyframes pulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 70%);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgb(255 0 0 / 0%);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgb(255 0 0 / 0%);
    }
}

[data-theme="dark"] .recent-sphere::after {
    background-color: var(--color-danger);
    box-shadow: 0 0 0 0 rgb(255 85 85 / 70%);
}

.act-row {
    margin: var(--spacing-xs) var(--spacing-xs) 0 0;
    display: flex;
}

.act-row-left {
    display: inline-block;
    width: 45px;
    height: 19px;
}

.act-row-right {
    display: inline-block;
    max-width: 75%;
    vertical-align: top;
}

.list-sphere-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.list-title {
    margin-inline-end: var(--spacing-sm);
}

.wall-block-item {
    overflow: visible; 
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transition: color 0.2s ease;
}

.wall-block-item.small-text {
    font-size: var(--font-size-xs);

}

.wall-block-item.medium-text {
    font-size: var(--font-size-sm);

}

.wall-sphere {
    transition: color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

[data-wall-element='item'].wall-item-hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--focus-color);

z-index: 10;
}

.wall [row-id] {
    overflow: visible;

width: 100%;
    max-width: 100%;

}

.wall [block-row] {
    overflow: visible;

flex-wrap: wrap;

gap: var(--spacing-xs);

}

.wall-mini-mode,
.wall-icon-mode {
    overflow: visible; 
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: var(--dot-gap, 0); 
    width: fit-content;
    max-width: 100%;
}

.wall-mini-mode {
    margin: var(--spacing-xs) auto;
}

.wall-icon-mode {
    margin: 0; 
}

@media (width <= 768px) {
    .wall-full-mode {
        max-width: calc(100vw - 2 * var(--spacing-md));

margin: var(--spacing-sm) auto;

}
}

[data-wall-item-id]:hover,
[data-wall-item-id]:hover~[data-wall-item-id],
[data-wall-item-id]:hover+[data-wall-item-id] {
    color: var(--color-accent);
}

[data-theme="dark"] .wall-full-mode {
    border-color: var(--header-bg);
}

[data-theme="dark"] #core-page-container .wall-item-hover {
    color: var(--color-accent);

}

[data-theme="dark"] #core-page-container .list-sphere.wall-item-hover,
[data-theme="dark"] #core-page-container .list-block-item.wall-item-hover,
[data-theme="dark"] #core-page-container .status-sphere.wall-item-hover {
    color: var(--sphere-text-color, var(--text-color));
}

[data-theme="dark"] .list-block-item {
    border-color: var(--header-bg);
}

[data-theme="dark"] .sphere-red {
    background-color: var(--color-danger);
}

[data-theme="dark"] .sphere-green {
    background-color: var(--color-success);
}

[data-theme="dark"] .sphere-yellow {
    background-color: var(--color-warning);
}

:focus {
    outline: 0.125rem solid var(--focus-color);
    outline-offset: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

.activity-title {
    cursor: pointer;
    transition: color 0.2s ease;
    margin: 0 var(--spacing-xs);
    font-weight: normal;
    flex-grow: 1;
}

.activity-title:hover,
.activity-title.wall-item-hover {
    color: var(--color-accent);

text-decoration: underline;
}

[data-theme="dark"] .activity-title:hover,
[data-theme="dark"] .activity-title.wall-item-hover {
    color: var(--color-accent-light);

}

.account-modal-content {
    position: static !important;
    transform: none !important;
    width: 100%;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.hotspot-modal-content {
    width: 100%;
    max-height: 70vh;
    overflow: hidden auto;
    padding: var(--spacing-lg);

position: static !important;
    transform: none !important;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.hotspot-modal-content .hotspot-image-container {
    margin-bottom: 1rem;
    text-align: center;
}

.hotspot-modal-content .hotspot-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.hotspot-modal-content .hotspot-text-content {
    margin-top: 1rem;
    line-height: 1.5;
}

.hotspot-modal-content::-webkit-scrollbar {
    width: 8px;
}

.hotspot-modal-content::-webkit-scrollbar-track {
    background: var(--light-bg);
    border-radius: var(--border-radius-sm);
}

.hotspot-modal-content::-webkit-scrollbar-thumb {
    background: var(--list-marker-color);
    border-radius: var(--border-radius-sm);
}

.hotspot-modal-content::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

.breadcrumb-container {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--light-border);
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--text-color);
}

.breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin-inline: var(--spacing-xs) var(--spacing-xs);
    color: var(--text-color);
    opacity: 0.6;
    font-size: var(--font-size-md);
}

.breadcrumb-link {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.breadcrumb-current {
    font-weight: bold;
    color: var(--text-color);
    padding: var(--spacing-xs) var(--spacing-xs);
}

[data-theme="dark"] .breadcrumb-container {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .breadcrumb-item {
    color: var(--text-color);
}

@media (width <= 768px) {
    .breadcrumb-container {
        padding: var(--spacing-sm);
    }

    .breadcrumb-list {
        font-size: var(--font-size-xs);
    }

    .breadcrumb-link,
    .breadcrumb-current {
        padding: var(--spacing-xs);
    }
}

.breadcrumb-context-menu,
.context-menu {
    position: absolute;
    left: var(--context-menu-left, 0);
    top: var(--context-menu-top, 0);
    background: var(--bg-color, #fff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    overflow: hidden;
    min-width: 200px;
    z-index: 10000;
}

.context-menu-content {
    padding: 4px 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--text-color, #333);
    font-size: var(--font-size-sm, 14px);
}

.context-menu-item:hover {
    background-color: var(--button-secondary-hover, #e2e6ea);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.menu-icon {
    width: 16px;
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: 1;
}

.menu-text {
    flex: 1;
}

[data-theme="dark"] .context-menu,
[data-theme="dark"] .breadcrumb-context-menu {
    background: var(--bg-color);
    border-color: var(--light-border);
    box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
}

[data-theme="dark"] .context-menu-item {
    color: var(--text-color);
}

[data-theme="dark"] .context-menu-item:hover {
    background-color: rgb(255 255 255 / 10%);
}

.hidden-status-tooltip {
    position: relative;
    cursor: help;
}

.hidden-status-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    z-index: var(--z-overlay);
}

.hidden-status-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

.nav-history-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(28px, 2rem, 32px);
    height: clamp(28px, 2rem, 32px);
    border-radius: var(--border-radius-full);
    background: transparent;
    padding: 0;
    color: var(--color-text-inverse);
    cursor: pointer;
    margin: 0 var(--spacing-sm);
    transition: background-color var(--transition-speed) ease;
    position: relative;
}

.nav-history-button:hover {
    background-color: rgb(255 255 255 / 10%);
}

.nav-history-button svg {
    width: clamp(18px, 1.5rem, 22px);
    height: clamp(18px, 1.5rem, 22px);
    fill: var(--color-text-inverse);

}

.nav-tooltip {
    position: absolute;
    top: calc(100% + var(--spacing-sm));
    left: 50%;
    transform: translateX(-50%);
    background-color: rgb(0 0 0 / 80%);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    z-index: var(--z-toast);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed), visibility var(--transition-speed);
    pointer-events: none;
}

.nav-tooltip.tooltip-visible {
    opacity: 1;
    visibility: visible;
}

.nav-history-button:hover .nav-tooltip {
    opacity: 1;
    visibility: visible;
}

.nav-history-popup {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--spacing-sm);
    width: clamp(220px, 30vw, 250px);
    max-height: clamp(250px, 40vh, 300px);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
    z-index: var(--z-dropdown);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease, visibility var(--transition-speed) ease;
    border: 1px solid var(--light-border);
}

[data-theme="dark"] .nav-history-popup {
    background-color: var(--light-bg);
    box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
}

.nav-history-popup-header {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 1px solid var(--light-border);
}

.nav-history-empty {
    padding: var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    font-style: italic;
    color: var(--text-color);
    opacity: 0.6;
}

.nav-history-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: clamp(280px, 40vw, 350px);
    background-color: var(--bg-color);
    box-shadow: -2px 0 10px rgb(0 0 0 / 15%);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    border-inline-start: 1px solid var(--light-border);
}

.nav-history-panel.panel-visible {
    transform: translateX(0);
}

[data-theme="dark"] .nav-history-panel {
    background-color: var(--light-bg);
    box-shadow: -2px 0 10px rgb(0 0 0 / 30%);
}

.nav-history-panel-overlay {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.nav-history-panel-overlay.overlay-visible {
    opacity: 1;
    visibility: visible;
}

.nav-history-panel-header {
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--light-border);
}

.nav-history-panel-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-history-panel-title {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-color);
}

.nav-history-panel-close {
    background: none;
    border: none;
    font-size: clamp(18px, 1.5rem, 22px);
    color: var(--text-color);
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-speed);
    width: 44px;
    height: 44px;
}

.nav-history-panel-close:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.nav-history-panel-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--light-border);
    cursor: pointer;
    transition: background-color var(--transition-speed);
    text-decoration: none;
    color: inherit;
}

.nav-history-panel-item:hover {
    background-color: var(--light-bg);
}

.nav-history-panel-item:last-child {
    border-bottom: none;
}

.nav-history-panel-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 500;
    flex-shrink: 0;
}

.nav-history-panel-item-icon.activity {
    background-color: var(--color-success);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.lesson {
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.category {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.metacat {
    background-color: var(--primary-color);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-icon.quiz,
.nav-history-panel-item-icon.quiz-item {
    background-color: var(--color-info);
    color: var(--color-text-inverse);
}

.nav-history-panel-item-details {
    flex: 1;
    min-width: 0;
}

.nav-history-panel-item-title {
    font-size: var(--font-size-md);
    color: var(--link-color);
    line-height: 1.4;
    margin-bottom: var(--spacing-xs);
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-decoration: none;
    transition: color var(--transition-speed), text-decoration var(--transition-speed);
}

.nav-history-panel-item-time {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.6;
}

.nav-history-panel-item:hover .nav-history-panel-item-title {
    color: var(--focus-hover);
    text-decoration: underline;
}

@media (width <= 768px) {
    .nav-history-panel {
        width: calc(100vw - 16px);
        max-width: 280px;
    }
}

.page-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: clamp(65px, 8vh, 75px);
    flex-wrap: nowrap;
    font-size: clamp(0.5rem, 3vw, 1rem);
    position: relative;

}

.context-group {
    display: flex;
    align-items: center;
    margin-inline-end: var(--spacing-md);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    position: relative;

flex-shrink: 1;
}

.current-activity {
    position: relative;
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;

z-index: 10;
}

.path-display {
    display: flex;
    align-items: center;
    margin-inline-start: var(--spacing-sm);

min-width: 0;
    flex: 1;
    flex-shrink: 1;
}

.path-separator {
    
    margin: 0 var(--spacing-sm);
    color: var(--text-color);
    opacity: 0.6;
    flex-shrink: 0;
}

.title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    max-width: clamp(300px, 50vw, 500px);
    min-width: 0;
    flex: 1;
}

.navigation-group {
    display: flex;
    align-items: center;
    margin-inline-start: auto;

flex-shrink: 0;
    white-space: nowrap;
}

.page-indicator {
    margin: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    white-space: nowrap;
}

.context-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: clamp(80px, 15vw, 120px);
    flex-shrink: 0;
}

.wall-container-icon-mode {
    position: relative;
    display: inline-flex;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    transform-origin: left top;
    overflow: visible;
}

.wall-with-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    gap: var(--spacing-xs);

}

.wall-container-icon-mode.expanded .wall-with-button,
.wall-container-icon-mode:hover .wall-with-button {
    gap: 1px;
}

.wall-container-icon-mode.expanded .wall,
.wall-container-icon-mode:hover .wall {
    margin-bottom: 0;

}

.wall-back-button {
    background: var(--focus-color);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;

display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-speed) ease,
        visibility var(--transition-speed) ease,
        background-color var(--transition-speed) ease;
}

.wall-back-button.button-visible {
    opacity: 1;
    visibility: visible;
}

.wall-back-button:hover {
    background: var(--button-primary-hover);
}

@media (hover: hover) {
    .wall-container-icon-mode:hover {
        position: absolute;
        top: 0;
        left: 0;
        transform: scale(3.0);

box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
        z-index: var(--z-dropdown);
        background-color: var(--bg-color);
        border-radius: var(--border-radius-sm);
        padding: calc(var(--spacing-xs) * 0.5);
    }

    .wall-container-icon-mode:hover .wall-back-button {
        display: block;
        opacity: 1;
        visibility: visible;

align-self: stretch;
    }
}

.wall-container-icon-mode.expanded {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(3.0);

box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    z-index: var(--z-dropdown);
    background-color: var(--bg-color);
    border-radius: var(--border-radius-sm);
    padding: calc(var(--spacing-xs) * 0.5);
}

.wall-container-icon-mode.expanded .wall-back-button {
    display: block;
    opacity: 1;
    visibility: visible;

align-self: stretch;
}

.wall-touch-hint {
    position: absolute;
    bottom: -20px;
    left: 0;
    transform: none;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    background-color: var(--light-bg);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--transition-speed) ease;
    pointer-events: none;
    border: 1px solid var(--light-border);
}

.wall-container-icon-mode.show-hint .wall-touch-hint {
    opacity: 1;
}

.wall-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: var(--row-height, auto); 
}

.wall-full-mode .wall-row,
.wall-mini-mode .wall-row,
.wall-icon-mode .wall-row {
    width: auto;
    align-items: flex-start;
}

.wall-mini-mode .wall-row,
.wall-icon-mode .wall-row {
    height: var(--dot-size, auto);
}

.wall-row-title {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    margin-bottom: calc(var(--dot-gap, 2px) / 2);

align-self: flex-start;
    text-align: left;
    max-width: var(--grid-width, none);
}

.wall-block-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: auto;
    overflow: visible;
}

.wall-block-row.dot-grid {
    
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: var(--dot-gap, 0);
    width: fit-content;
    height: var(--dot-size, auto);
}

.wall-block-item.sphere-mode {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 2px;
    overflow: visible;
}

.wall-block-item.grid-cell {
    flex: 0 0 var(--dot-size);
    width: var(--dot-size);
    height: var(--dot-size);
    padding: 0;
    overflow: visible;
}

.wall-block-item.block-mode {
    cursor: pointer;
    border-left: 1px solid var(--color-text-inverse);
    border-bottom: 1px solid var(--color-text-inverse);
    border-right: 0;
    border-top: 0;
    width: var(--block-width, auto); 
    display: inline-block;
}

.wall-block-item.float-left {
    float: left;
    min-width: var(--block-min-width, auto);
}

.wall-block-item.float-right {
    float: right;
    min-width: var(--block-min-width, auto);
}

.wall-block-item[data-no-bottom-border] {
    border-bottom: none;
}

.wall-block-item[data-no-left-border] {
    border-left: none;
}

.wall-sphere.fixed-size {
    min-width: var(--sphere-size);
    min-height: var(--sphere-size);
    max-width: var(--sphere-size);
    max-height: var(--sphere-size);
    width: var(--sphere-size);
    height: var(--sphere-size);
}

.list-sphere {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.list-block-item {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-weight: bold;
    color: var(--text-color);
    transition: background-color var(--transition-speed) ease;
}

.list-block-item:hover {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
}

.current-activity-sphere {
    position: relative;

z-index: 2;
    box-shadow: 0 0 6px rgb(77 144 254 / 50%);
    background-color: rgb(0 0 0 / 10%);
}

.current-activity-sphere::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--border-radius-full);
    border: 2px solid var(--focus-color);
    z-index: -1;
    box-sizing: content-box;
}

[data-theme="dark"] .current-activity-sphere::before {
    border-color: var(--focus-color);
}

[data-theme="dark"] .current-activity-sphere {
    box-shadow: 0 0 6px rgb(93 159 255 / 50%);
    background-color: rgb(255 255 255 / 10%);
}

.wall-container-icon-mode .wall-sphere {
    cursor: pointer;
}

.wall-container-icon-mode .wall-sphere:hover {
    transform: scale(1.2);
    z-index: var(--z-sticky);
}

.wall-container-icon-mode .current-activity-sphere {
    
    z-index: 20;
}

@media (width <= 768px) {
    .page-subheader {
        justify-content: space-between;
        gap: var(--spacing-sm);
    }

    .context-group,
    .navigation-group {
        margin: 0;
    }

    .title-text {
        max-width: clamp(200px, 40vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-sm);
    }
}

@media (width <= 576px) {
    .prev-next-text {
        display: none;
    }

    .wall-text {
        display: none;
    }

    .context-link {
        
        max-width: clamp(80px, 20vw, 150px);
    }

    .title-text {
        
        max-width: clamp(180px, 45vw, 300px);
    }

    .page-indicator {
        margin: 0 var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

.context-group {
        margin-inline-end: var(--spacing-xs);
    }

    .path-display {
        margin-inline-start: var(--spacing-xs);
    }

    .path-separator {
        margin: 0 var(--spacing-xs);
    }

    .page-header-base {
        gap: var(--spacing-xs);
        margin: var(--spacing-xs) 0;
    }
}

@media (width <= 400px) {
    .page-indicator {
        font-size: var(--font-size-xs);
        margin: 0 var(--spacing-xs);
    }

    .context-link {
        
        max-width: clamp(70px, 18vw, 120px);
    }

    .title-text {
        
        max-width: clamp(140px, 40vw, 220px);
    }

.page-text {
        display: none;
    }
}

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

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

.search-component-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    outline: none;
}

.search-component-wrapper .search-component-input {
    width: 100%;
    padding-left: 3rem;        
    border: none;              
    background-color: transparent;

}

.search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 20%);
}

.search-component-wrapper .search-component-input:focus {
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

.search-component-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

z-index: 1;
}

.search-component-icon svg {
    width: 16px;
    height: 16px;
}

.search-component-clear {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-color);
    opacity: 0.6;
    cursor: pointer;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    transition: all var(--transition-speed) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

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

.search-component-clear svg {
    width: 16px;
    height: 16px;
}

.search-component-loading {
    position: absolute;
    right: var(--spacing-md);

top: 50%;
    transform: translateY(-50%);
    color: var(--text-color);
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    animation: search-loading-spin 1s linear infinite;
}

.search-component-loading svg {
    width: 16px;
    height: 16px;
}

@keyframes search-loading-spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

[data-theme="dark"] .search-component-wrapper {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .search-component-wrapper .search-component-input {
    background-color: transparent;
    color: var(--text-color);
}

[data-theme="dark"] .search-component-wrapper:focus-within {
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(93 159 255 / 20%);
}

[data-theme="dark"] .search-component-wrapper .search-component-input::placeholder {
    color: var(--text-color);
    opacity: 0.6;
}

[data-theme="dark"] .search-component-icon {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear {
    color: var(--text-color);
}

[data-theme="dark"] .search-component-clear:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .search-component-loading {
    color: var(--text-color);
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-input {
    flex: 1;
    padding-right: 40px;    

}

.search-icon {
    position: absolute;
    right: var(--spacing-sm, 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    font-size: var(--font-size-md, 1rem);
    padding: var(--spacing-xs, 0.25rem);
    border-radius: var(--border-radius-sm, 4px);
    transition: color 0.2s, background-color 0.2s;
}

.search-icon:hover {
    color: var(--text-color, #333);
    background-color: var(--hover-color, #f8f9fa);
}

.search-spinner {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color, #e9ecef);
    border-top: 2px solid var(--primary-color, #007bff);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.search-spinner.active {
    opacity: 1;
}

@keyframes spin {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes popup-fade-in {
    from {
        opacity: 0;
        transform: translate(-50%, -55%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes overlay-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[data-theme="dark"] .search-input {
    background-color: var(--input-background, #2d3748);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-input:focus {
    border-color: var(--focus-color, #4299e1);
    box-shadow: 0 0 0 2px rgb(66 153 225 / 25%);
}

[data-theme="dark"] .search-icon {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-icon:hover {
    color: var(--text-color, #e2e8f0);
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-overlay);
    backdrop-filter: blur(2px);
    animation: overlay-fade 0.2s ease-out;
    touch-action: none;
}

.search-results-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background-color: var(--background-color, #fff);
    border-radius: var(--border-radius-md, 8px);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--z-overlay);
    animation: popup-fade-in 0.25s ease-out;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.search-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    background-color: var(--background-color, #fff);
    position: sticky;
    top: 0;

z-index: 2;
    margin-bottom: var(--spacing-md, 1rem);
    margin-top: calc(-1 * var(--spacing-md, 1rem));
    padding-top: var(--spacing-md, 1rem);
}

.search-popup-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.25rem);
    font-weight: 600;
    color: var(--text-color, #333);
}

.search-close-button {
    background: none;
    border: none;
    font-size: var(--font-size-xl, 1.5rem);
    cursor: pointer;
    color: var(--text-color-muted, #6c757d);
    padding: var(--spacing-xs, 0.25rem);
    line-height: 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm, 4px);
}

.search-close-button:hover {
    background-color: var(--hover-color, #f8f9fa);
    color: var(--text-color, #333);
}

.search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-md, 1rem);
}

.search-result-item {
    padding: var(--spacing-md, 1rem);
    border-bottom: 1px solid var(--border-color, #e9ecef);
    cursor: pointer;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: var(--hover-color, #f8f9fa);
}

.search-result-item:focus {
    outline: 2px solid var(--focus-color, #007bff);
    outline-offset: -2px;
    background-color: var(--focus-background, #e3f2fd);
}

.search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #e3f2fd);
    border-left: 3px solid var(--primary-color, #007bff);
}

.search-result-type {
    display: inline-block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--border-radius-sm, 4px);
    margin-bottom: var(--spacing-xs, 0.25rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.search-result-type.type-page {
    background-color: var(--tag-subject-bg);
    color: var(--tag-subject-text);
}

.search-result-type.type-activity {
    background-color: var(--tag-type-bg);
    color: var(--tag-type-text);
}

.search-result-type.type-lesson {
    background-color: var(--tag-mode-bg);
    color: var(--tag-mode-text);
}

.search-result-type.type-category {
    background-color: var(--tag-level-bg);
    color: var(--tag-level-text);
}

.search-result-type.type-metacat {
    background-color: var(--tag-pink-bg);
    color: var(--tag-pink-text);
}

.search-result-title {
    font-size: var(--font-size-md, 1rem);
    font-weight: 600;
    margin-bottom: var(--spacing-xs, 0.25rem);
    color: var(--text-color, #333);
}

.search-result-path {
    font-size: var(--font-size-sm);
    color: var(--color-neutral, #666);
    margin-bottom: var(--spacing-xs);
    font-style: italic;
}

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

.search-result-content {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-color-secondary, #555);
    line-height: 1.4;
}

.search-highlight {
    background-color: var(--highlight-color, #fff3cd);
    color: var(--highlight-text-color, #856404);
    padding: 0 2px;
    border-radius: var(--border-radius-xs);
}

.search-no-results {
    text-align: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-no-results h3 {
    margin-bottom: var(--spacing-md, 1rem);
    color: var(--text-color, #333);
}

.search-results-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-lg, 2rem);
    color: var(--text-color-muted, #6c757d);
}

.search-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color, #e9ecef);
    border-top: 3px solid var(--primary-color, #007bff);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
    margin-bottom: var(--spacing-md, 1rem);
}

.search-loading-text {
    font-size: var(--font-size-md, 1rem);
    text-align: center;
}

.search-load-more {
    width: 100%;
    padding: var(--spacing-md, 1rem);
    background-color: var(--surface-color, #f8f9fa);
    border: 1px solid var(--border-color, #e9ecef);
    border-radius: var(--border-radius-sm, 4px);
    color: var(--text-color, #333);
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: var(--spacing-md, 1rem);
}

.search-load-more:hover {
    background-color: var(--hover-color, #e9ecef);
}

.search-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[data-theme="dark"] .search-overlay {
    background-color: rgb(0 0 0 / 70%);
}

[data-theme="dark"] .search-results-popup {
    background-color: var(--background-color, #2d3748);
}

[data-theme="dark"] .search-popup-header {
    background-color: var(--background-color, #2d3748);
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-popup-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-close-button {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-close-button:hover {
    background-color: var(--hover-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-item {
    border-bottom-color: var(--border-color, #4a5568);
}

[data-theme="dark"] .search-result-item:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-result-item:focus {
    background-color: var(--focus-background, #2d3748);
}

[data-theme="dark"] .search-result-item[aria-selected="true"] {
    background-color: var(--selected-color, #2d3748);
}

[data-theme="dark"] .search-result-title {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-result-content {
    color: var(--text-color-secondary, #cbd5e0);
}

[data-theme="dark"] .search-highlight {
    background-color: var(--highlight-color, #744210);
    color: var(--highlight-text-color, #faf089);
}

[data-theme="dark"] .search-no-results {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-no-results h3 {
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more {
    background-color: var(--surface-color, #1a202c);
    border-color: var(--border-color, #4a5568);
    color: var(--text-color, #e2e8f0);
}

[data-theme="dark"] .search-load-more:hover {
    background-color: var(--hover-color, #4a5568);
}

[data-theme="dark"] .search-results-loading {
    color: var(--text-color-muted, #a0aec0);
}

[data-theme="dark"] .search-loading-spinner {
    border-color: var(--border-color, #4a5568);
    border-top-color: var(--primary-color, #4299e1);
}

[data-theme="dark"] .search-loading-text {
    color: var(--text-color-muted, #a0aec0);
}

html.searching,
html.searching * {
    cursor: wait !important;
}

html.searching body,
html.searching div,
html.searching a,
html.searching button,
html.searching input,
html.searching select,
html.searching textarea {
    cursor: wait !important;
}

html.searching ::selection {
    background: transparent;
}

html.searching input,
html.searching textarea {
    caret-color: transparent;
}

html.searching .search-container *,
html.searching .skills-table * {
    cursor: wait !important;
}

#search-cursor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-supreme);
    cursor: wait;
    background-color: transparent;
}

.search-result-item-with-goal {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
    width: 100%;
}

.search-result-content-goals {
    flex: 1;
    min-width: 0;

}

.goals-search-button-area {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex-shrink: 0;
    min-width: clamp(120px, 15vw, 160px);
}

.goal-status-indicator {
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.goal-status-indicator.is-goal {
    background-color: var(--color-success-light, #d4edda);
    color: var(--color-success, #28a745);
    border: 1px solid var(--color-success, #28a745);
}

.goal-status-indicator.not-goal {
    background-color: var(--color-secondary-light, #e2e3e5);
    color: var(--color-secondary, #6c757d);
    border: 1px solid var(--color-secondary, #6c757d);
}

[data-theme="dark"] .goal-status-indicator.is-goal {
    background-color: rgb(40 167 69 / 20%);
    color: var(--color-success-on-dark);
    border-color: var(--color-success-on-dark);
}

[data-theme="dark"] .goal-status-indicator.not-goal {
    background-color: rgb(108 117 125 / 20%);
    color: var(--list-marker-color);
    border-color: var(--color-neutral);
}

.goal-action-button {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed, 0.2s) ease;
    text-align: center;
    white-space: nowrap;

}

.goal-action-button.add-goal {
    background-color: var(--color-success, #28a745);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-success, #28a745);
}

.goal-action-button.add-goal:hover {
    background-color: var(--color-success-hover, #218838);
    border-color: var(--color-success-dark, #1e7e34);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.goal-action-button.remove-goal {
    background-color: var(--color-danger, #dc3545);
    color: var(--color-text-inverse);
    border: 2px solid var(--color-danger, #dc3545);
}

.goal-action-button.remove-goal:hover {
    background-color: var(--color-danger-hover, #c82333);
    border-color: var(--color-danger-dark, #bd2130);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.goal-action-button:disabled,
.goal-action-button:disabled:hover {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.goal-path-info {
    margin-bottom: var(--spacing-md);
    opacity: 0.8;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.goal-delete-button {
    margin-top: var(--spacing-md);
    margin-right: auto; 
}

.goal-settings-link {
    margin-left: var(--spacing-sm);
}

.goal-progress-segment {
    width: var(--segment-width, 0%);
}

.goal-progress-legend {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.goal-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.goal-color-indicator {
    width: 1rem;
    height: 1rem;
    border-radius: var(--border-radius-full);
    background-color: var(--indicator-color, #ccc);
}

.goal-notification-info {
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
    color: var(--text-color);
}

.goal-notification-actions {
    margin-top: var(--spacing-md);
}

.content-type-badge {
    display: inline-block;
    font-size: var(--font-size-xs);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    background-color: var(--color-info-light, #cce7ff);
    color: var(--color-info, #06c);
    border: 1px solid var(--color-info, #06c);
}

[data-theme="dark"] .content-type-badge {
    background-color: rgb(93 159 255 / 20%);
    color: var(--focus-color);
    border-color: var(--focus-color);
}

@media (width <= 768px) {
    .search-result-item-with-goal {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }

    .goals-search-button-area {
        flex-direction: row;
        justify-content: space-between;
        min-width: auto;
    }

    .goal-action-button {
        flex: 1;
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

.help-link-small {
    font-size: var(--font-size-xs);
}

.help-link-inline {
    font-size: inherit;
    font-weight: normal;
}

.help-link-form {
    font-size: var(--font-size-xs);
    color: var(--text-color-muted);
}

.help-link-form:hover {
    color: var(--link-hover-color);
}

.testout-toggle-component {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

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

.testout-toggle-label {
    font-weight: 500;
    color: var(--text-color);
    cursor: pointer;
    margin: 0;
    user-select: none;
}

.testout-toggle-help-link {
    margin-left: var(--spacing-xs);
}

.testout-toggle-page-header {
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) 0;
}

[data-theme="dark"] .testout-toggle-page-header {
    background-color: rgb(255 255 255 / 5%);
}

.testout-toggle-form {
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--light-border);
    margin-top: var(--spacing-md);
}

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

.testout-toggle-compact {
    padding: var(--spacing-xs);
}

.testout-toggle-compact .testout-toggle-label {
    font-size: var(--font-size-xs);
    font-weight: normal;
}

.testout-toggle-compact .testout-toggle-checkbox-container {
    gap: var(--spacing-xs);
}

.assessment-completion-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
}

.assessment-score-display {
    text-align: center;
    padding: var(--spacing-lg);
    background-color: var(--color-info);
    color: var(--color-text-inverse);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.assessment-primary-score {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.assessment-primary-score strong {
    font-weight: 700;
}

.assessment-detail-stats {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
}

.assessment-detail-stats p {
    margin: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.assessment-detail-stats p:first-child {
    margin-top: 0;
}

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

[data-theme="dark"] .assessment-score-display {
    background-color: var(--focus-color);
    color: var(--color-text-inverse);
}

[data-theme="dark"] .assessment-detail-stats {
    background-color: var(--header-bg);
    border-color: var(--primary-color);
    color: var(--text-color);
}

[data-theme="dark"] .assessment-detail-stats p {
    color: var(--text-color);
}

.loading-container {
    position: fixed;
    top: var(--loading-top, 50%);
    left: var(--loading-left, 50%);
    transform: translate(-50%, -50%);
    z-index: var(--loading-z-index, 110);
    cursor: pointer;
    background-color: var(--bg-color);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
    text-align: center;
    filter: none; 
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

.loading-container.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-gif {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
}

.loading-text {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    font-weight: 600;
}

[data-theme="dark"] .loading-container {
    background-color: var(--light-bg);
    box-shadow: 0 2px 10px rgb(0 0 0 / 40%);
}

.image-wrapper {
    display: flex;
    justify-content: var(--justify-content, flex-start);
    align-items: flex-start;
    width: var(--wrapper-width, 100%);
    padding: var(--wrapper-padding, 0);
    box-sizing: border-box;
}

.image-wrapper img {
    background-color: var(--image-bg-color, transparent);
    opacity: var(--image-opacity, 1);
    max-width: var(--image-max-width, 100%);
    height: var(--image-height, auto);
    object-fit: var(--image-object-fit, contain);
    transition: opacity var(--transition-speed) ease;
}

.image-loading-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
    transition: opacity var(--transition-speed) ease,
                visibility var(--transition-speed) ease;
}

.image-loading-placeholder.hidden {
    opacity: 0;
    visibility: hidden;
}

.image-error-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    color: var(--color-danger);
    background-color: var(--color-danger-light);
    border: 1px dashed var(--color-danger);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    text-align: center;
}

.image-gallery {
    display: grid;
    gap: var(--spacing-md);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius);
    transition: transform var(--transition-speed) ease;
}

.gallery-item:hover {
    transform: translateY(-2px);
}

.gallery-item.gallery-item-flex {
    flex: 1 1 auto;
}

.gallery-item.gallery-item-clickable {
    cursor: pointer;
}

[data-theme="dark"] .image-error-placeholder {
    background-color: rgb(220 53 69 / 20%);
    border-color: var(--color-danger);
}

.confidence-container {
    margin: var(--spacing-sm);

display: block;
}

@media (width >= 482px) {
    .confidence-container {
        display: inline;
    }
}

.progress-sphere {
    cursor: pointer;
    transition: outline var(--transition-speed) ease;
}

.progress-sphere.selected {
    outline: 2px solid var(--focus-color);
    outline-offset: 2px;
    cursor: default;
    pointer-events: none;
}

.progress-bar-fill.empty {
    width: 0%;
}

.progress-bar-fill.full {
    width: 100%;
}

.clerk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
    z-index: var(--z-modal);
    display: flex;
    justify-content: center;
    align-items: center;
}

.clerk-sign-up-wrapper {
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color);
}

.clerk-sign-in-container {
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh; 
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color);
}

.clerk-verification-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    width: 100%;
    max-width: 400px;
    margin: auto;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-color);
}

.clerk-verification-input {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    width: 100%;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--text-color);
}

.clerk-verify-button {
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-success);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    width: 100%;
}

.clerk-verify-button:hover {
    opacity: 0.88;
}

@media (width <= 768px) {
    .clerk-modal-overlay {
        align-items: flex-start;
        padding-top: 5vh;
        height: 100dvh;
    }

    .clerk-sign-in-container,
    .clerk-verification-container {
        align-items: flex-start;
        padding-top: 5vh;
    }
}

.clerk-container {
    position: relative;
    background: var(--bg-color);
    border-radius: var(--border-radius);
    margin: var(--spacing-md);
    box-shadow: 0 4px 20px rgb(0 0 0 / 30%);
    max-width: 480px;
    width: 100%;
}

.clerk-close-button {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--text-color);
    padding: var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    transition: background-color var(--transition-speed) ease;

z-index: 20;
}

.clerk-close-button:hover {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .clerk-container {
    box-shadow: 0 4px 20px rgb(0 0 0 / 60%);
}

[data-theme="dark"] .cl-rootBox,
[data-theme="dark"] .cl-card,
[data-theme="dark"] .cl-cardBox,
[data-theme="dark"] .cl-modalContent {
    background-color: var(--light-bg) !important;
}

[data-theme="dark"] .cl-internal-b3fm6y {
    background-color: var(--bg-color-deeper) !important;
}

.flashcard-main-container {
    padding: var(--spacing-md);
    color: var(--text-color);
    line-height: 1.5;
}

.flashcard-title {
    font-size: var(--font-size-xl);
    font-weight: bold;
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--text-color);
}

.flashcard-question {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-question p {
    margin-top: 0;
}

.flashcard-image-container {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.flashcard-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.flashcard-answer {
    background-color: var(--bg-color);
    border: 2px solid var(--color-info);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.flashcard-answer p {
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    line-height: 1.6;
}

.flashcard-answer p:last-child {
    margin-bottom: 0;
}

.flashcard-show-answer {
    display: block;
    margin: var(--spacing-lg) auto;
    min-height: 44px; 
    min-width: 120px;
    font-size: var(--font-size-md);
    font-weight: bold;
}

.flashcard-self-reporting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
}

.flashcard-progress-label {
    font-size: var(--font-size-md);
    color: var(--text-color);
    margin-right: var(--spacing-sm);
    cursor: pointer;
}

.flashcard-buttons {
    display: flex;
    justify-content: center;
    margin-top: var(--spacing-lg);
}

.flashcard-continue-button {
    min-height: 44px; 
    min-width: 120px;
}

@media (width <= 600px) {
    .flashcard-main-container {
        padding: var(--spacing-sm);
    }

    .flashcard-question {
        font-size: var(--font-size-md);
        padding: var(--spacing-sm);
    }

    .flashcard-title {
        font-size: var(--font-size-lg);
    }

    .flashcard-self-reporting {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .flashcard-progress-label {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }
}

.flex-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.flex-row {
  display: flex;
  flex-flow: row wrap;
}

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

.flex-grow {
  flex: 1 1 auto;
}

.flex-shrink {
  flex: 0 1 auto;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-start {
  justify-content: flex-start;
}

.flex-end {
  justify-content: flex-end;
}

.responsive-width {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.responsive-height {
  height: auto;
  max-height: 100vh;
}

[data-page-type="question"] .answer-option {
  cursor: pointer;
  transition: background-color 0.2s;
}

[data-page-type="question"] .answer-option:hover {
  background-color: rgb(0 0 0 / 5%);
}

@media (width <= 768px) {
  .sm-stack {
    flex-direction: column !important;
  }

  .sm-hide {
    display: none !important;
  }

  .sm-full-width {
    width: 100% !important;
  }
}

.content-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--spacing-md) 0;
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.content-image.inline {
    display: inline-block;
    margin: 0 var(--spacing-xs);
    vertical-align: middle;
    max-height: 2em;
}

.error-container {
    text-align: center;
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) auto;
    max-width: 600px;
    background-color: var(--light-bg);
    border-radius: var(--border-radius);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.error-container h2 {
    color: var(--color-danger);
    margin-bottom: var(--spacing-md);
}

.error-details {
    font-family: 'Courier New', monospace;
    background-color: var(--light-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius-sm);
    margin: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.validation-errors {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-left: 4px solid var(--color-danger);
    border-radius: var(--border-radius-sm);
}

.validation-errors h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-danger);
    font-size: var(--font-size-md);
    font-weight: 600;
}

.validation-errors ul {
    margin: 0;
    padding-left: var(--spacing-lg);
    list-style-type: disc;
}

.validation-errors li {
    color: var(--color-danger);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.validation-errors li:last-child {
    margin-bottom: 0;
}

.expandable-text {
    max-width: 550px;
}

.expandable-text-content {
    margin: 0 0 var(--spacing-xs) 0;
    font-style: italic;
}

.expandable-text-toggle {
    white-space: nowrap;
    margin: 0 var(--spacing-xs) var(--spacing-xs) 0;
}

.data-table {
    width: 100%;
}

.sort-indicator {
    margin-left: var(--spacing-sm);
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-style: solid;
    transition: opacity var(--transition-speed);
    opacity: 0.3;
}

.sort-indicator.asc {
    border-width: 0 4px 4px;
    border-color: transparent transparent var(--text-color) transparent;
}

.sort-indicator.desc {
    border-width: 4px 4px 0;
    border-color: var(--text-color) transparent transparent transparent;
}

[data-theme="dark"] .sort-indicator.asc {
    border-color: transparent transparent var(--text-color) transparent;
}

[data-theme="dark"] .sort-indicator.desc {
    border-color: var(--text-color) transparent transparent transparent;
}

.sort-indicator.active {
    opacity: 1;
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.radio-input {
    margin-top: 0.25rem;
    cursor: pointer;
}

.radio-label {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    flex: 1;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s ease;
}

.radio-label:hover {
    background-color: var(--toggle-bg);
}

[data-theme="dark"] .radio-label:hover {
    background-color: rgb(255 255 255 / 5%);
}

.radio-label-text {
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: 0.125rem;
}

.radio-label-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.9;
}

.input-error {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgb(204 51 51 / 20%);
}

.ownership-tag {
    display: inline-block;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    margin-left: var(--spacing-sm);
    vertical-align: middle;
}

.ownership-tag-small {
    padding: var(--spacing-xxs) var(--spacing-xs);
    font-size: var(--font-size-xs);
}

.ownership-tag-medium {
    padding: var(--spacing-xxs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.ownership-tag-large {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.ownership-tag-public {
    background-color: var(--tag-public-bg);
    color: var(--tag-public-text);
}

.ownership-tag-team {
    background-color: var(--tag-team-bg);
    color: var(--tag-team-text);
}

.ownership-tag-personal {
    background-color: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

.ownership-tag-system {
    background-color: var(--tag-system-bg);
    color: var(--tag-system-text);
}

.ownership-tag-icon {
    display: inline;
    font-size: 0.9em;
}

[data-theme="dark"] .ownership-tag-public {
    background-color: var(--tag-public-bg);
    color: var(--tag-public-text);
}

[data-theme="dark"] .ownership-tag-team {
    background-color: var(--tag-team-bg);
    color: var(--tag-team-text);
}

[data-theme="dark"] .ownership-tag-personal {
    background-color: var(--tag-personal-bg);
    color: var(--tag-personal-text);
}

[data-theme="dark"] .ownership-tag-system {
    background-color: var(--tag-system-bg);
    color: var(--tag-system-text);
}

.form-control {
    width: 100%;
    padding: var(--spacing-xs) 12px;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm, 14px);
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
}

.form-control:focus {
    outline: none;
    border-color: var(--focus-color, #4D90FE);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);
}

.form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-color, #333);
    opacity: 0.9;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

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

.input-group input {
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

.input-help {
    line-height: 1.3;
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.9;
}

.adhoc-modal-step {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
}

.adhoc-modal-context {
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
    margin: 0;
}

.adhoc-modal-section-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.adhoc-item-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
}

.adhoc-item-btn {
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
}

.adhoc-item-btn:hover {
    background: var(--button-secondary-hover);
    border-color: var(--light-border);
}

.adhoc-modal-divider {
    height: 1px;
    background: var(--light-border);
    margin: 0;
}

.adhoc-input-row {
    display: flex;
    gap: var(--spacing-sm);
}

.adhoc-name-input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background: var(--bg-color);
    color: var(--text-color);
    min-height: 44px;
    box-sizing: border-box;
}

.adhoc-name-input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

.adhoc-confirm-heading {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
}

.adhoc-modal-summary {
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.adhoc-summary-row {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

.adhoc-summary-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-secondary);
    min-width: 5.5em;
    flex-shrink: 0;
}

.adhoc-summary-value {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.adhoc-new-badge {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-primary, #3498db);
    background: rgb(52 152 219 / 12%);
    border-radius: 3px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.adhoc-modal-error {
    font-size: var(--font-size-sm);
    color: var(--color-error, #c0392b);
    margin: 0;
}

.adhoc-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.adhoc-nav-left {
    display: flex;
    gap: var(--spacing-sm);
}

.adhoc-nav-right {
    display: flex;
    gap: var(--spacing-sm);
}

[data-theme="dark"] .adhoc-name-input {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
    color: var(--text-color);
}

[data-theme="dark"] .adhoc-item-btn:hover {
    background: rgb(255 255 255 / 8%);
}

[data-theme="dark"] .adhoc-modal-summary {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
}

[data-theme="dark"] .adhoc-new-badge {
    color: var(--color-text-inverse);
    background: rgb(93 173 226 / 30%);
}

[data-theme="dark"] .adhoc-modal-error {
    color: var(--color-error);
}

.adhoc-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.adhoc-textarea {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-family: inherit;
    line-height: 1.5;
    background: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
    box-sizing: border-box;
}

.adhoc-textarea:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgb(77 144 254 / 25%);
}

.adhoc-answers-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.adhoc-answer-card {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.adhoc-answer-card.adhoc-answer-correct {
    border-color: var(--color-success, #27ae60);
    background: rgb(39 174 96 / 5%);
}

.adhoc-answer-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.adhoc-correct-label {
    display: flex;
    align-items: center;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    cursor: pointer;
    user-select: none;
}

.adhoc-correct-label input[type="radio"] {
    cursor: pointer;
    accent-color: var(--color-success, #27ae60);
}

.adhoc-response-input {
    font-size: var(--font-size-xs);
    min-height: 36px;
}

[data-theme="dark"] .adhoc-answer-card.adhoc-answer-correct {
    background: rgb(39 174 96 / 10%);
}

.adhoc-type-options {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.adhoc-type-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
}

.adhoc-type-option input[type="radio"] {
    cursor: pointer;
    accent-color: var(--focus-color, #4d90fe);
}

[data-theme="dark"] .adhoc-textarea {
    background: var(--color-neutral-dark);
    border-color: var(--color-neutral);
    color: var(--text-color);
}

.adhoc-name-input.adhoc-input-error,
.adhoc-textarea.adhoc-input-error {
    border-color: var(--color-error, #c0392b);
    box-shadow: 0 0 0 2px rgb(192 57 43 / 20%);
}

.adhoc-name-input.adhoc-input-error:focus,
.adhoc-textarea.adhoc-input-error:focus {
    border-color: var(--color-error, #c0392b);
    box-shadow: 0 0 0 2px rgb(192 57 43 / 30%);
}

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

.debug-window {
    margin: 15px 5px 5px;
    width: 90%;
    height: auto;
}

.browser-not-supported-message {
    margin: 5px;
    text-shadow: none;
}

.label-normal {
    font-weight: normal;
}

.link-loading {
    pointer-events: none;
    opacity: 0.5;
}

.js-position-relative {
    position: relative;
}

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

.offscreen-test-container {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.borderless-iframe {
    border: none;
}

.input-section-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

.hidden-content-filter-container {
    margin-bottom: 15px;
    padding-left: 5px;
}

.ripple {
    position: absolute;
    width: 1px;
    height: 1px;
    border-radius: 50%;
    background-color: rgb(255 255 255 / 40%);
    transform: scale(0);
    animation: ripple-expand 0.6s ease-out forwards;
    pointer-events: none;
    left: var(--ripple-left, 50%);
    top: var(--ripple-top, 50%);
}

@keyframes ripple-expand {
    to {
        transform: scale(30);
        opacity: 0;
    }
}