/* Global */
:root {
    --primary: #004536;
    --primary-container: #005f4b;
    --primary-fixed: #a5f2d7;
    --on-primary: #ffffff;
    --on-primary-fixed-variant: #00513f;
    --surface: #f8fafa;
    --surface-container-low: #f2f4f4;
    --surface-container-lowest: #ffffff;
    --surface-container-high: #e6e8e9;
    --surface-container-highest: #e1e3e3;
    --surface-dim: #d8dada;
    --inverse-surface: #2e3131;
    --inverse-on-surface: #eff1f1;
    --on-surface: #191c1d;
    --on-surface-variant: #3f4945;
    --outline: #6f7974;
    --outline-variant: #bec9c3;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/vendor/fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/vendor/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/vendor/fonts/space-grotesk-v22-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/vendor/fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/vendor/fonts/inter-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/vendor/fonts/inter-italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Material Symbols Outlined';
    src: url('/vendor/fonts/MaterialSymbolsOutlined.woff2') format('woff2');
    font-weight: 100 700;
    font-display: block;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafa;
    color: #191c1d;
}

.navbar.sticky-top {
    top: 0;
}

h1,
h2,
h3,
h4 {
    font-family: 'Space Grotesk', sans-serif;
}

body > main.main-background-plain {
    background: #fff;
}

.with-sidebar {
    margin-left: 0;
}

@media (min-width: 1200px) {
    .with-sidebar {
        margin-left: 256px;
    }
}

.btn-gradient {
    background: linear-gradient(135deg, #004536 0%, #005f4b 100%);
}

.glass-nav {
    backdrop-filter: blur(12px);
    background-color: rgba(25, 28, 29, 0.85);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-family: 'Material Symbols Outlined';
    display: inline-block;
    white-space: nowrap;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.app-notice {
    z-index: 1080;
}

/* Common components */
.drawing-tool-icon-dashed-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1rem;
}

.drawing-tool-icon-dashed-arrow::before {
    content: '';
    position: absolute;
    left: 0.05rem;
    right: 0.45rem;
    top: 50%;
    border-top: 2px dashed currentColor;
    transform: translateY(-50%);
}

.drawing-tool-icon-dashed-arrow::after {
    content: '';
    position: absolute;
    right: 0.05rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
}

.sketch-canvas-grid {
    aspect-ratio: 16 / 9;
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
    background-size: 20px 20px;
    background-color: #ffffff;
}

.sketch-text-overlay {
    pointer-events: none;
}

/* Plans */
.workspace-catalog-item {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-bottom: 0.25rem;
    transition: background-color 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.workspace-catalog-item:hover {
    background: #a5f2d7;
}

.workspace-catalog-item .workspace-add-icon {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.workspace-catalog-item:hover .workspace-add-icon {
    opacity: 1;
}

/* Layout components */
.app-footer {
    background-color: #2e3131;
    color: #eff1f1;
}

.app-footer-link {
    color: #eff1f1;
}

.app-footer-link:hover {
    color: #89d5bc;
}

.app-sidebar {
    width: 256px;
    height: 100vh;
    padding-top: 96px;
    background: #f8fafa;
    z-index: 40;
}

.app-sidebar-title {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #6f7974;
}

.app-sidebar-nav {
    gap: 0.25rem;
}

.app-sidebar-link {
    color: #475569;
}

.app-sidebar-link:hover {
    background: #e2e8f0;
}

.app-sidebar-link.is-active {
    background: #ecfdf5;
    color: #004536;
    border-right: 4px solid #004536;
    font-weight: 700;
}

.table-action {
    background: transparent;
    border-radius: 0.25rem;
    color: #6f7974;
}

.table-action:hover {
    color: #004536;
}

.table-action-bg:hover {
    background: #a5f2d7;
}

.table-action-danger:hover {
    color: #ba1a1a;
    background: #ffdad6;
}

/* Admin design reference */
.admin-design-page {
    background: var(--surface);
}

.admin-design-eyebrow,
.admin-design-label {
    color: #004536;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-design-title {
    color: #004536;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.admin-design-subtitle,
.admin-design-note,
.admin-design-card p,
.admin-design-page .muted-line {
    color: #6f7974;
    font-size: 0.875rem;
}

.admin-design-version {
    background: #e1e3e3;
    border-radius: 999px;
    color: #004536;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.45rem 0.75rem;
}

.admin-design-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
}

.admin-design-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 69, 54, 0.06);
    grid-column: span 6;
    padding: 1.5rem;
}

.admin-design-card-wide {
    grid-column: span 12;
}

.admin-design-card-header {
    border-bottom: 1px solid rgba(190, 201, 195, 0.65);
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
}

.admin-design-card h2,
.admin-section-title {
    color: #191c1d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
}

.admin-design-stack {
    display: grid;
    gap: 1.25rem;
}

.admin-btn-secondary {
    background: transparent;
    border: 1px solid #bec9c3;
    border-radius: 0.5rem;
    color: #191c1d;
    font-weight: 700;
}

.admin-btn-danger {
    background: #ffdad6;
    border: 0;
    border-radius: 0.5rem;
    color: #ba1a1a;
    font-weight: 800;
}

.admin-design-page .icon-action {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    color: #6f7974;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    width: 32px;
}

.admin-design-page .icon-action:hover {
    background: #a5f2d7;
    color: #004536;
}

.admin-design-page .icon-action.delete:hover {
    background: #ffdad6;
    color: #ba1a1a;
}

.admin-stat-card {
    background: #f2f4f4;
    border-radius: 0.5rem;
    padding: 1rem;
}

.admin-stat-card span {
    color: #6f7974;
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.admin-stat-card strong {
    color: #004536;
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2rem;
    line-height: 1.1;
    margin-top: 0.35rem;
}

.admin-stat-card small {
    color: #6f7974;
    font-weight: 700;
}

.admin-form-control {
    background: #e1e3e3;
    border: none;
    border-radius: 0.5rem;
    box-shadow: none;
    color: #191c1d;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
}

.admin-form-control:focus {
    background: #e1e3e3;
    box-shadow: none;
    outline: 2px solid #004536;
}

.admin-check-panel {
    align-items: flex-start;
    background: #e1e3e3;
    border-radius: 0.5rem;
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.admin-check-panel .form-check-label {
    color: #191c1d;
    font-weight: 800;
}

.admin-check-panel .form-check-label span {
    color: #6f7974;
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
}

.admin-switch-panel {
    background: #e1e3e3;
    border-radius: 0.5rem;
    padding: 1rem 1rem 1rem 2.75rem;
}

.admin-switch-panel .form-check-label {
    color: #191c1d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.admin-callout {
    background: #e6e8e9;
    border-radius: 0.5rem;
    color: #6f7974;
    font-size: 0.875rem;
    padding: 0.875rem 1rem;
}

.admin-callout-warning {
    background: #fef9c3;
    color: #854d0e;
    font-weight: 700;
}

.admin-design-page .status-pill {
    background: #d9fbe8;
    border-radius: 999px;
    color: #0f6a36;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.28rem 0.6rem;
}

.admin-design-page .status-pill.draft {
    background: #fef9c3;
    color: #854d0e;
}

.admin-design-page .status-pill.premium {
    background: #dbeafe;
    color: #1d4ed8;
}

.admin-design-page .status-pill.deleted {
    background: #e1e3e3;
    color: #6f7974;
}

.filter-chip {
    background: #ffffff;
    border: 1px solid rgba(190, 201, 195, 0.6);
    border-radius: 999px;
    color: #191c1d;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 0.35rem;
    padding: 0.28rem 0.65rem;
}

.admin-design-page .admin-table {
    margin-bottom: 0;
}

.admin-design-page .admin-table thead th {
    background: #f7f8f8;
    border-bottom: 1px solid rgba(190, 201, 195, 0.75);
    color: #53625c;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 0.9rem 1.5rem;
    text-transform: uppercase;
}

.admin-design-page .admin-table tbody td {
    border: none;
    color: #191c1d;
    padding: 1.25rem 1.5rem;
    vertical-align: middle;
}

.admin-design-page .admin-table tbody tr + tr td {
    border-top: 1px solid rgba(190, 201, 195, 0.55);
}

.admin-empty-state {
    align-items: center;
    background: #f2f4f4;
    border-radius: 0.5rem;
    color: #6f7974;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding: 1.25rem;
}

.admin-design-page .plan-card {
    background: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 69, 54, 0.06);
    overflow: hidden;
}

.admin-design-page .plan-table tbody tr {
    transition: background-color 0.15s;
}

.admin-design-page .plan-table tbody tr:hover {
    background: rgba(165, 242, 215, 0.08);
}

.plan-reference-pagination {
    background: #f2f4f4;
    border-radius: 0.5rem;
    border-top: 1px solid rgba(190, 201, 195, 0.1);
}

.plan-reference-pagination > span {
    color: #6f7974;
    font-size: 0.75rem;
}

.plan-reference-pagination .btn {
    background: #e1e3e3;
    border: none;
    border-radius: 0.25rem;
    color: #191c1d;
    font-size: 0.75rem;
    height: 32px;
    width: 32px;
}

.plan-reference-pagination .btn.active {
    background: #004536;
    color: #ffffff;
}

.admin-design-page .pager-link {
    align-items: center;
    background: #e1e3e3;
    border-radius: 0.25rem;
    color: #191c1d;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    min-width: 32px;
    padding: 0 0.6rem;
    text-decoration: none;
}

.admin-design-page .pager-link.active {
    background: #004536;
    color: #ffffff;
}

.admin-design-page .pager-link.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.admin-design-page .user-tabs {
    border-bottom: 1px solid rgba(190, 201, 195, 0.75);
    display: flex;
    gap: 2rem;
    margin-bottom: 0;
}

.admin-design-page .user-tab {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #42504a;
    display: inline-flex;
    font-size: 0.875rem;
    font-weight: 700;
    gap: 0.45rem;
    padding: 0 0.25rem 1rem;
    text-decoration: none;
}

.admin-design-page .user-tab.active {
    border-color: #004536;
    color: #004536;
}

@media (max-width: 991.98px) {
    .admin-design-card,
    .admin-design-card-wide {
        grid-column: span 12;
    }
}

/* templates/plan/edit.html.twig */
.drawing-tool-icon-dashed-arrow {
                                        position: relative;
                                        display: inline-flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 1.25rem;
                                        height: 1rem;
                                    }

                                    .drawing-tool-icon-dashed-arrow::before {
                                        content: '';
                                        position: absolute;
                                        left: 0.05rem;
                                        right: 0.45rem;
                                        top: 50%;
                                        border-top: 2px dashed currentColor;
                                        transform: translateY(-50%);
                                    }

                                    .drawing-tool-icon-dashed-arrow::after {
                                        content: '';
                                        position: absolute;
                                        right: 0.05rem;
                                        top: 50%;
                                        width: 0.45rem;
                                        height: 0.45rem;
                                        border-top: 2px solid currentColor;
                                        border-right: 2px solid currentColor;
                                        transform: translateY(-50%) rotate(45deg);
                                    }


/* templates/plan/edit.html.twig */
.workspace-page {
            background:
                radial-gradient(circle at top left, rgba(13, 110, 253, 0.08), transparent 28%),
                linear-gradient(180deg, #f7f9fc 0%, #f2f5f9 100%);
        }

        .workspace-back-button,
        .workspace-save-button {
            min-width: 8.5rem;
        }

        .workspace-toolbar {
            position: relative;
            z-index: 2;
        }

        .workspace-columns {
            position: relative;
            z-index: 1;
        }

        .workspace-sidebar-stack {
            position: relative;
        }

        .workspace-overview-card {
            background: #fcfcfd;
            box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.04);
        }

        .workspace-overview-header {
            padding-bottom: 1rem !important;
        }

        .workspace-collapse-toggle {
            margin-bottom: 0.25rem;
        }

        .workspace-notice-editor {
            min-height: 6rem;
            height: 6rem;
            margin-bottom: 3rem;
            position: relative;
            z-index: 0;
        }

        .workspace-overview-card .ql-toolbar.ql-snow {
            margin-bottom: 0.75rem;
            position: relative;
            z-index: 1;
        }

        .workspace-overview-card .ql-container.ql-snow {
            margin-bottom: 0.5rem;
            min-height: 6rem;
            height: 6rem;
            position: relative;
            z-index: 0;
        }

        .workspace-overview-card #quill-notice.workspace-notice-editor.ql-container > .ql-editor {
            min-height: 6rem;
            max-height: 6rem;
            overflow-y: auto;
        }

        .workspace-save-row {
            padding-top: 3rem;
            margin-top: 0.5rem;
        }

        .workspace-visibility-check {
            padding: 0.9rem 1rem 0.9rem 2.25rem;
            border: 1px solid #e9ecef;
            border-radius: 1rem;
            background: #fafbfc;
        }

        .workspace-sidebar-separator {
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.45) 20%, rgba(148, 163, 184, 0.45) 80%, transparent 100%);
            margin-top: -0.25rem;
            margin-bottom: -0.25rem;
        }

        .sortable-ghost {
            opacity: 0.4;
            background: #e8f4ff;
            border: 2px dashed #0d6efd;
        }

        .workspace-sidebar-card {
            background: #f8f9fa;
            box-shadow: 0 0.75rem 2rem rgba(15, 23, 42, 0.05);
        }

        @media (min-width: 1200px) {
            .workspace-columns {
                align-items: stretch !important;
            }

            .workspace-columns > .col-xl-4 {
                display: flex;
            }

            .workspace-sidebar-stack {
                width: 100%;
                min-height: 100%;
            }

            .workspace-sidebar-card {
                position: sticky;
                top: 5rem;
                align-self: flex-start;
            }
        }

        .workspace-sidebar-top {
            background: rgba(255, 255, 255, 0.94);
        }

        .workspace-search-input {
            border-radius: 0.85rem;
        }

        .workspace-filter-select {
            border-radius: 0.75rem;
        }

        .workspace-sidebar-body {
            max-height: 38rem;
            overflow-y: auto;
        }

        #exercise-catalog {
            min-height: 4rem;
        }

        .workspace-catalog-item {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .workspace-sidebar-card {
            width: 100%;
            align-self: stretch;
        }

        .workspace-catalog-item:hover {
            border-color: #d0d7de;
            box-shadow: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.06);
        }

        .workspace-add-button {
            border-radius: 0.75rem;
        }

        .workspace-main-card {
            background: rgba(255, 255, 255, 0.98);
            box-shadow: 0 1rem 2.5rem rgba(13, 110, 253, 0.08);
        }

        .workspace-main-heading {
            min-width: 0;
        }

        .workspace-plan-notice {
            max-width: 48rem;
            padding: 0.85rem 1rem;
            background: #f8fbff;
            border: 1px solid #e7f0ff;
            border-radius: 1rem;
        }

        .workspace-plan-notice :last-child {
            margin-bottom: 0;
        }

        .workspace-main-badge {
            background: #eef4ff;
            color: #0d6efd;
            padding: 0.35rem 0.75rem;
            border-radius: 999px;
            font-weight: 600;
        }

        /* ABSTAND */
        #plan-items {
            gap: 0 !important;
            margin-top: 1rem;
            border-radius: 0.5rem;
        }

        .workspace-sequence {
            background-color: #f8faf9;
            background-image:
                linear-gradient(rgba(0, 69, 54, 0.07) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 69, 54, 0.07) 1px, transparent 1px);
            background-size: 18px 18px;
            border-radius: 0.5rem;
            padding: 0.75rem;
        }

        .workspace-sequence-header {
            background: transparent;
            border-radius: 0.5rem;
            padding: 1rem 1.25rem;
        }

        .workspace-sequence-label {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #004536;
            margin-bottom: 0.35rem;
        }

        .workspace-sequence-title {
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            color: #191c1d;
            font-size: 1.25rem;
        }

        .workspace-sequence-date {
            color: #6f7974;
            font-size: 0.875rem;
        }

        .workspace-sequence-stats {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .workspace-sequence-stat {
            background: #e1e3e3;
            border-radius: 999px;
            padding: 0.35rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 700;
            color: #004536;
        }

        .workspace-plan-notice {
            margin-top: 0.75rem;
            background: transparent;
            border-radius: 0.5rem;
            padding: 1rem 1.25rem;
            color: #191c1d;
        }

        .plan-item-card {
            display: block;
            margin: 0;
            padding: 0;
            background: transparent;
        }

        .plan-item-row {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            background: transparent;
            padding: 0;
            transition: background-color 0.15s ease;
        }

        #plan-items .plan-item-card:first-child .plan-item-row {
            border-top-left-radius: 0.5rem;
            border-top-right-radius: 0.5rem;
        }

        #plan-items .plan-item-card:last-child .plan-item-row {
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
        }

        .plan-item-card:hover .plan-item-row {
            background: rgba(242, 244, 244, 0.72);
        }

        .plan-item-card.section-break .plan-item-row {
            border-bottom: 1px solid rgba(0, 69, 54, 0.22);
        }

        .plan-item-meta {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .plan-item-duration {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            background: #f2f4f4;
            border-radius: 0.3rem;
            padding: 0.2rem 0.45rem;
            flex: 0 0 auto;
            color: #6f7974;
        }

        .plan-item-duration input {
            width: 48px;
            border: none;
            background: transparent;
            box-shadow: none;
            padding: 0;
            font-size: 0.75rem;
            color: #6f7974;
        }

        .plan-item-image,
        .plan-item-sketch-open-row,
        .plan-item-image-toggle,
        .plan-item-description,
        .plan-item-meta {
            margin-top: 0.5rem;
        }

        .item-actions {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            align-self: center;
        }

        .item-actions-inline {
            flex-direction: row;
            margin-left: 0.25rem;
            margin-right: 0.25rem;
        }

        .item-actions-move {
            opacity: 0;
            transition: opacity 0.2s;
            align-self: stretch;
            justify-content: center;
        }

        .item-actions .btn,
        .item-actions .drag-handle {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            background: #e9eceb;
        }

        .item-actions .btn:hover,
        .item-actions .drag-handle:hover {
            background: #dce3df;
        }

        .item-actions-move .drag-handle {
            width: 1.5rem;
            height: 100%;
            min-height: 2.75rem;
            border-radius: 0.5rem;
        }

        .plan-item-feedback-success {
            border-color: #75b798;
            box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.18), 0 0.75rem 1.5rem rgba(25, 135, 84, 0.12);
            animation: planItemSuccessPulse 1.6s ease;
        }

        .plan-item-feedback-danger {
            border-color: #ea868f;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.18), 0 0.75rem 1.5rem rgba(220, 53, 69, 0.12);
            opacity: 0.35;
            transform: translateX(0.35rem);
            transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
        }

        @keyframes planItemSuccessPulse {
            0% {
                transform: translateY(0.25rem);
                opacity: 0.72;
            }

            35% {
                transform: translateY(0);
                opacity: 1;
            }

            100% {
                transform: translateY(0);
            }
        }

        .plan-item-main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
            flex: 1 1 auto;
        }

        .plan-item-handle {
            width: 2.5rem;
            height: 2.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.75rem;
            background: #f8f9fa;
            flex: 0 0 auto;
        }

        .plan-item-duration .form-control {
            text-align: center;
        }

        .plan-item-content {
            min-width: 0;
            flex: 1 1 auto;
        }

        .plan-item-title {
            margin-bottom: 0.05rem;
            font-family: 'Space Grotesk', sans-serif;
            font-weight: 700;
            color: #191c1d;
            font-size: 1rem;
        }

        .plan-item-title-row {
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .plan-item-title-main {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            min-width: 0;
            flex: 1 1 auto;
        }

        .plan-item-controls-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            margin-top: 0.5rem;
        }

        .plan-item-controls-left {
            min-width: 0;
            flex: 1 1 auto;
        }

        .plan-item-description {
            color: #6f7974;
            font-size: 0.875rem;
            line-height: 1.5;
        }

        .plan-item-image-toggle {
            background: transparent;
            border-radius: 0;
            padding: 0;
            display: inline-flex;
            align-items: center;
            margin-top: 0;
            margin-bottom: 0;
            flex-shrink: 0;
            min-height: auto;
            margin-left: 2.75rem;
        }

        .plan-item-image-toggle .form-check-input {
            margin-top: 0;
            margin-right: 0.45rem;
        }

        .plan-item-image-toggle .form-check-label {
            color: #6f7974 !important;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0;
        }

        .plan-item-flag {
            background: #004536;
            color: #ffffff;
            border-radius: 999px;
            padding: 0.2rem 0.55rem;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .plan-item-image img,
        .plan-item-image-preview {
            display: block;
            width: 100%;
            max-width: 260px;
            border-radius: 0.5rem;
        }

        .plan-item-sketch-open-row {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .plan-item-sketch-layout {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            margin-top: 0.5rem;
        }

        .plan-item-sketch-layout .plan-item-image {
            margin-top: 0;
            flex: 1 1 auto;
            min-width: 0;
        }

        .plan-item-sketch-layout .plan-item-sketch-open-row {
            flex: 0 0 auto;
            flex-direction: column;
            align-items: stretch;
            margin-top: 0;
            margin-left: auto;
        }

        .plan-item-sketch-layout .plan-item-sketch-open-row .btn {
            white-space: nowrap;
        }

        .plan-item-image-toggle {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .plan-item-image-preview {
            display: block;
            width: 14rem;
            max-width: 100%;
            max-height: 8rem;
            object-fit: cover;
            border: 1px solid #dbe3ef;
            border-radius: 0.9rem;
        }

        .plan-item-actions {
            flex: 0 0 auto;
            align-self: center;
        }

        .plan-item-card .item-actions-inline {
            opacity: 0;
            transition: opacity 0.2s;
        }

        .plan-item-card:hover .item-actions-inline {
            opacity: 1;
        }

        .plan-item-card:hover .item-actions-move {
            opacity: 1;
        }

        .plan-items-empty {
            padding: 1rem 0;
            color: #6f7974;
        }

        @media (max-width: 767.98px) {
            .workspace-toolbar {
                align-items: stretch !important;
            }

            .workspace-toolbar > * {
                width: 100%;
            }

            .workspace-toolbar .d-flex.align-items-center.gap-3 {
                justify-content: space-between;
            }

            .workspace-back-button,
            .workspace-save-button {
                min-width: 0;
            }

            .workspace-sidebar-separator {
                margin-top: 0;
                margin-bottom: 0;
            }

            .plan-item-row {
                align-items: flex-start;
            }

            .plan-item-actions {
                align-self: center;
            }

            .plan-item-card .item-actions-inline {
                opacity: 1;
            }

            .plan-item-title-row {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: start;
                column-gap: 0.5rem;
                width: 100%;
            }

            .plan-item-title-main {
                flex-wrap: wrap;
                align-items: flex-start;
                min-width: 0;
            }

            .plan-item-title {
                min-width: 0;
                overflow-wrap: anywhere;
            }

            .plan-item-duration {
                justify-self: end;
                margin-left: 0.5rem;
            }
        }


/* templates\admin\category\edit.html.twig */
.admin-category-form .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .admin-category-form .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.5rem;
                    display: block;
                }

                .admin-category-form .form-control,
                .admin-category-form .form-select {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .admin-category-form .form-control:focus,
                .admin-category-form .form-select:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }


/* templates\admin\category\index.html.twig */
.admin-category-index .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                }

                .admin-category-index .plan-card {
                    background: #ffffff;
                    border: none;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                }

                .admin-category-index .plan-table tbody tr {
                    transition: background-color 0.15s;
                }

                .admin-category-index .plan-table tbody tr:hover {
                    background: rgba(165, 242, 215, 0.08);
                }

                .admin-category-index .admin-table {
                    margin-bottom: 0;
                }

                .admin-category-index .admin-table thead th {
                    background: #e6e8e9;
                    font-size: 10px;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    color: #6f7974;
                    font-weight: 700;
                    border: none;
                    padding: 0.9rem 1rem;
                }

                .admin-category-index .admin-table tbody td {
                    border: none;
                    padding: 1rem;
                    vertical-align: middle;
                    color: #191c1d;
                }

                .admin-category-index .admin-table tbody tr + tr td {
                    border-top: 1px solid rgba(190,201,195,0.15);
                }

                .admin-category-index .admin-table tbody tr:hover {
                    background: #f2f4f4;
                }

                .admin-category-index .category-chip {
                    display: inline-flex;
                    align-items: center;
                    border-radius: 999px;
                    background: #e1e3e3;
                    color: #6f7974;
                    padding: 0.4rem 0.7rem;
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.08em;
                }


/* templates\admin\category\new.html.twig */
.admin-category-form .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .admin-category-form .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.5rem;
                    display: block;
                }

                .admin-category-form .form-control,
                .admin-category-form .form-select {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .admin-category-form .form-control:focus,
                .admin-category-form .form-select:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }


/* templates\admin\exercise\edit.html.twig */
.admin-exercise-shell .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .admin-exercise-shell .admin-section-title {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    color: #004536;
                    margin-bottom: 0.75rem;
                    display: block;
                }

                .admin-exercise-shell .form-label,
                .admin-exercise-shell label.form-label,
                .admin-exercise-shell .admin-field-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.25rem;
                    display: block;
                }

                .admin-exercise-shell .form-control,
                .admin-exercise-shell .form-select {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .admin-exercise-shell .form-control:focus,
                .admin-exercise-shell .form-select:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }

                .admin-exercise-shell .form-check {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 0.85rem 1rem 0.85rem 2.5rem;
                }

                .admin-exercise-shell .form-check-label {
                    color: #191c1d;
                    font-weight: 600;
                }

                .admin-exercise-shell .form-check-input {
                    margin-top: 0.2rem;
                }

                .admin-exercise-shell .tag-badge {
                    background: #004536;
                    color: white;
                    border-radius: 999px;
                    padding: 0.5rem 0.75rem;
                    font-size: 0.75rem;
                    font-weight: 700;
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .admin-exercise-shell .tag-library-button {
                    border: none;
                    border-radius: 999px;
                    background: #e1e3e3;
                    color: #191c1d;
                    padding: 0.45rem 0.75rem;
                    font-size: 0.75rem;
                    font-weight: 700;
                    transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
                }

                .admin-exercise-shell .tag-library-button:hover {
                    background: #a5f2d7;
                    color: #004536;
                }

                .admin-exercise-shell .tag-library-button.is-selected {
                    background: #004536;
                    color: #ffffff;
                    opacity: 0.45;
                }

                .admin-exercise-shell .publish-toggle-card {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 1rem 1rem 1rem 3rem;
                }

                .admin-exercise-shell .publish-toggle-card .form-check-input {
                    margin-top: 0.1rem;
                }

                .admin-exercise-shell .publish-status-note {
                    font-size: 0.75rem;
                    color: #6f7974;
                }


/* templates\admin\exercise\index.html.twig */
.admin-exercise-table tbody tr {
            transition: background-color 0.15s ease;
        }

        .admin-exercise-table tbody tr:hover {
            background: #f2f4f4;
        }

        @media (max-width: 991.98px) {
            .admin-exercise-table .exercise-plans-column {
                display: none;
            }
        }


/* templates\admin\settings\index.html.twig */
.admin-settings-shell .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .admin-settings-shell .admin-section-title {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    color: #004536;
                    margin-bottom: 0.5rem;
                    display: block;
                }

                .admin-settings-shell .form-label,
                .admin-settings-shell .form-check-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                }

                .admin-settings-shell .form-control {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .admin-settings-shell .form-control:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }

                .admin-settings-shell .form-check {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 1rem 1rem 1rem 2.75rem;
                }

                .admin-settings-shell .form-check-input {
                    margin-top: 0.15rem;
                }

                .admin-settings-shell .form-check-label {
                    color: #191c1d;
                }


/* templates\admin\user\edit.html.twig */
.admin-user-edit .admin-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .admin-user-edit .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                    margin-bottom: 0.5rem;
                    display: block;
                }

                .admin-user-edit .form-control,
                .admin-user-edit .form-select {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.75rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .admin-user-edit .form-control:focus,
                .admin-user-edit .form-select:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }


/* templates\admin\user\index.html.twig */
.admin-user-index .user-panel {
                    background: #ffffff;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                }

                .admin-user-index .plan-card {
                    background: #ffffff;
                    border-radius: 0.5rem;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                    overflow: hidden;
                }

                .admin-user-index .plan-table tbody tr {
                    transition: background-color 0.15s;
                }

                .admin-user-index .plan-table tbody tr:hover {
                    background: rgba(165, 242, 215, 0.08);
                }

                .admin-user-index .user-tabs {
                    border-bottom: 1px solid rgba(190,201,195,0.75);
                    display: flex;
                    gap: 2rem;
                    margin-bottom: 1.5rem;
                }

                .admin-user-index .user-tab {
                    border: 0;
                    border-bottom: 2px solid transparent;
                    background: transparent;
                    color: #42504a;
                    display: inline-flex;
                    gap: 0.45rem;
                    font-size: 0.875rem;
                    font-weight: 700;
                    padding: 0 0.25rem 1rem;
                    text-decoration: none;
                }

                .admin-user-index .user-tab.active {
                    border-color: #004536;
                    color: #004536;
                }

                .admin-user-index .search-input {
                    background: #ffffff;
                    border: 1px solid #bec9c3;
                    border-radius: 0.35rem;
                    color: #191c1d;
                    font-size: 0.875rem;
                    min-width: 220px;
                    padding: 0.7rem 0.9rem;
                }

                .admin-user-index .search-input:focus {
                    border-color: #004536;
                    box-shadow: none;
                    outline: 2px solid rgba(0,69,54,0.14);
                }

                .admin-user-index .admin-table {
                    margin-bottom: 0;
                }

                .admin-user-index .admin-table thead th {
                    background: #f7f8f8;
                    border-bottom: 1px solid rgba(190,201,195,0.75);
                    color: #53625c;
                    font-size: 10px;
                    font-weight: 800;
                    letter-spacing: 0.12em;
                    padding: 0.9rem 1.5rem;
                    text-transform: uppercase;
                }

                .admin-user-index .admin-table tbody td {
                    border: none;
                    color: #191c1d;
                    padding: 1.25rem 1.5rem;
                    vertical-align: middle;
                }

                .admin-user-index .admin-table tbody tr + tr td {
                    border-top: 1px solid rgba(190,201,195,0.55);
                }

                .admin-user-index .role-line {
                    color: #004536;
                    font-size: 0.75rem;
                    font-weight: 800;
                }

                .admin-user-index .muted-line {
                    color: #6f7974;
                    font-size: 0.78rem;
                }

                .admin-user-index .status-pill {
                    background: #d9fbe8;
                    border-radius: 999px;
                    color: #0f6a36;
                    display: inline-flex;
                    font-size: 0.75rem;
                    font-weight: 800;
                    padding: 0.28rem 0.6rem;
                }

                .admin-user-index .status-pill.deleted {
                    background: #e1e3e3;
                    color: #6f7974;
                }

                .admin-user-index .icon-action {
                    align-items: center;
                    background: transparent;
                    border: 0;
                    border-radius: 0.25rem;
                    color: #6f7974;
                    display: inline-flex;
                    height: 32px;
                    justify-content: center;
                    padding: 0;
                    text-decoration: none;
                    width: 32px;
                }

                .admin-user-index .icon-action:hover {
                    background: #a5f2d7;
                    color: #004536;
                }

                .admin-user-index .icon-action.delete:hover {
                    background: #ffdad6;
                    color: #ba1a1a;
                }

                .admin-user-index .pager-link {
                    align-items: center;
                    background: #e1e3e3;
                    border-radius: 0.25rem;
                    color: #191c1d;
                    display: inline-flex;
                    font-size: 0.78rem;
                    font-weight: 800;
                    height: 32px;
                    justify-content: center;
                    min-width: 32px;
                    padding: 0 0.6rem;
                    text-decoration: none;
                }

                .admin-user-index .pager-link.active {
                    background: #004536;
                    color: #ffffff;
                }

                .admin-user-index .pager-link.disabled {
                    opacity: 0.45;
                    pointer-events: none;
                }


/* templates\components\_navbar.html.twig */
.navbar-main-link {
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-weight: 700;
            text-decoration: none;
            color: #cbd5e1;
            transition: color 0.15s ease, background-color 0.15s ease;
        }

        .navbar-main-link:hover,
        .navbar-main-link:focus {
            color: #ffffff;
        }

        .navbar-main-link.is-active {
            color: #34d399;
        }

        .navbar-main-link.mobile-link {
            display: block;
            padding: 0.875rem 1rem;
            border-radius: 0.5rem;
        }

        .navbar-main-link.mobile-link.is-active {
            background: rgba(16, 185, 129, 0.12);
            border-left: 3px solid #10b981;
        }

        .navbar-user-dropdown .dropdown-item {
            color: #eff1f1;
            border-radius: 0.375rem;
            transition: background-color 0.15s ease, color 0.15s ease;
        }

        .navbar-user-dropdown .dropdown-item:hover,
        .navbar-user-dropdown .dropdown-item:focus {
            background-color: rgba(255, 255, 255, 0.08);
            color: #ffffff;
        }

        .navbar-user-dropdown .dropdown-item.logout-item {
            color: #ffb4ab;
        }

        .navbar-user-dropdown .dropdown-item.logout-item:hover,
        .navbar-user-dropdown .dropdown-item.logout-item:focus {
            background-color: rgba(186, 26, 26, 0.18);
            color: #ffdad6;
        }

        .navbar-mobile-user-block {
            border-top: 1px solid rgba(255,255,255,0.12);
            margin-top: 1rem;
            padding-top: 1rem;
        }

        .navbar-mobile-user-toggle {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            border: none;
            border-radius: 0.5rem;
            background: rgba(255, 255, 255, 0.04);
            color: #eff1f1;
        }

        .navbar-mobile-user-toggle:hover,
        .navbar-mobile-user-toggle:focus {
            background: rgba(255, 255, 255, 0.08);
        }

        .navbar-mobile-user-links {
            margin-top: 0.75rem;
            padding-left: 0.75rem;
            border-left: 1px solid rgba(255,255,255,0.12);
        }

        .navbar-desktop-center {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        .navbar-auth-link {
            font-family: 'Space Grotesk', sans-serif;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            font-weight: 700;
            text-decoration: none;
            color: #cbd5e1;
        }

        .navbar-auth-link:hover,
        .navbar-auth-link:focus {
            color: #ffffff;
        }


/* templates\components\_sidebar.html.twig */
@media (max-width: 1199.98px) {
        body.has-mobile-bottom-nav {
            padding-bottom: 76px;
        }

        .app-mobile-bottom-nav {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1040;
            background: #ffffff;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
        }

        .app-mobile-bottom-nav-link {
            color: #6f7974;
            text-decoration: none;
        }

        .app-mobile-bottom-nav-link.is-active {
            color: #004536;
        }
    }


/* templates\exercise\index.html.twig */
.exercise-toolbar-card {
            background: #f2f4f4;
            border-radius: 0.75rem;
            border: 1px solid rgba(190, 201, 195, 0.45);
        }

        .exercise-toolbar-input,
        .exercise-toolbar-select {
            background: #ffffff;
            border: 1px solid rgba(190, 201, 195, 0.55);
            border-radius: 0.75rem;
            min-height: 48px;
            font-size: 0.875rem;
            color: #191c1d;
            box-shadow: none;
        }

        .exercise-toolbar-input:focus,
        .exercise-toolbar-select:focus {
            border-color: #004536;
            box-shadow: 0 0 0 0.15rem rgba(0, 69, 54, 0.12);
        }

        .exercise-filter-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.45rem 0.7rem;
            border-radius: 999px;
            background: #ffffff;
            color: #191c1d;
            border: 1px solid rgba(190, 201, 195, 0.55);
            font-size: 0.75rem;
            font-weight: 600;
            text-decoration: none;
        }

        .exercise-card {
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .exercise-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(0,69,54,0.08);
        }

        .exercise-preview-image {
            filter: brightness(1.08) saturate(0.82);
            opacity: 0.82;
            transition: opacity 0.25s ease, filter 0.25s ease;
        }

        .exercise-card:hover .exercise-preview-image {
            filter: brightness(1.02) saturate(0.95);
            opacity: 0.96;
        }

.exercise-pagination .pager-link {
    align-items: center;
    background: #e1e3e3;
    border-radius: 0.25rem;
    color: #191c1d;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    height: 32px;
    justify-content: center;
    min-width: 32px;
    padding: 0 0.6rem;
    text-decoration: none;
}

.exercise-pagination .pager-link.active {
    background: #004536;
    color: #ffffff;
}

.exercise-pagination .pager-link.disabled {
    opacity: 0.45;
    pointer-events: none;
}


/* templates\exercise\show.html.twig */
.exercise-sketch-card {
                    background: #ffffff;
                    border-radius: 1rem;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                    overflow: hidden;
                }

                .exercise-sketch-link {
                    background: #f8fafa;
                    display: block;
                    padding: 1rem;
                }

                .exercise-sketch-image {
                    border-radius: 0.75rem;
                    display: block;
                    height: auto;
                    max-height: 560px;
                    object-fit: contain;
                    width: 100%;
                }

                .exercise-content {
                    line-height: 1.28;
                }

                .exercise-content p {
                    margin-bottom: 0.35rem;
                }

                .exercise-content p:last-child,
                .exercise-content ul:last-child,
                .exercise-content ol:last-child {
                    margin-bottom: 0;
                }

                .exercise-content li {
                    margin-bottom: 0.15rem;
                }

                .exercise-content ul,
                .exercise-content ol {
                    margin-bottom: 0.45rem;
                }

                .related-exercise-card {
                    background: var(--surface-container-low);
                    border-radius: 0.75rem;
                    color: #191c1d;
                    display: flex;
                    gap: 0.85rem;
                    padding: 0.85rem;
                    position: relative;
                    text-decoration: none;
                    transition: transform 0.18s ease, box-shadow 0.18s ease;
                }

                .related-exercise-card:hover {
                    box-shadow: 0 10px 24px rgba(0,69,54,0.08);
                    transform: translateY(-2px);
                }

                .related-exercise-card.is-locked {
                    background: #eef1f0;
                }

                .related-exercise-image {
                    border-radius: 0.5rem;
                    flex-shrink: 0;
                    height: 72px;
                    object-fit: cover;
                    opacity: 0.82;
                    width: 72px;
                }

                .related-exercise-lock {
                    align-items: center;
                    background: rgba(0,69,54,0.9);
                    border-radius: 999px;
                    color: #ffffff;
                    display: inline-flex;
                    font-size: 0.7rem;
                    font-weight: 800;
                    gap: 0.25rem;
                    padding: 0.25rem 0.55rem;
                }

                .exercise-facts {
                    background: var(--surface-container-lowest);
                    border-radius: 0.5rem;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                    display: flex;
                    flex-wrap: wrap;
                    gap: 1rem;
                    justify-content: space-between;
                    margin-bottom: 1.5rem;
                    padding: 1rem 1.25rem;
                }

                .exercise-fact-item {
                    border-right: 1px solid rgba(190,201,195,0.8);
                    flex: 1 1 120px;
                    min-width: 120px;
                    padding-right: 1rem;
                }

                .exercise-fact-item:last-child {
                    border-right: 0;
                    padding-right: 0;
                }


/* templates\plan\index.html.twig */
.plan-index-shell .plan-table tbody tr {
                    transition: background-color 0.15s ease;
                }

                .plan-index-shell .plan-table tbody tr:hover {
                    background: #f2f4f4;
                }

                .plan-index-shell .plan-card {
                    background: white;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 2px 8px rgba(0,69,54,0.06);
                }


/* templates\profile\index.html.twig */
.profile-card {
                    background: #f2f4f4;
                    border-radius: 0.5rem;
                    padding: 1.5rem;
                }

                .profile-eyebrow {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.1em;
                    color: #004536;
                }

                .profile-info-box {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 1rem 1.25rem;
                }

                .profile-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                    color: #6f7974;
                }

                .profile-plan-form {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 1rem;
                }

                .profile-legal-check {
                    font-size: 0.78rem;
                    line-height: 1.45;
                    color: #4f5a55;
                }


/* templates\registration\register.html.twig */
.register-shell .register-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.75rem;
                }

                .register-shell .form-label,
                .register-shell .form-check-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                }

                .register-shell .form-control {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.85rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .register-shell .form-control:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }

                .register-shell .form-check {
                    background: #e1e3e3;
                    border-radius: 0.5rem;
                    padding: 1rem 1rem 1rem 2.5rem;
                }

                .register-shell .form-check-input {
                    margin-top: 0.15rem;
                }

                .register-shell .legal-check-label {
                    text-transform: none;
                    font-size: 0.78rem;
                    line-height: 1.45;
                    letter-spacing: 0;
                }


/* templates\reset_password\check_email.html.twig */
.reset-check-shell .reset-check-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.75rem;
                }


/* templates\reset_password\request.html.twig */
.reset-request-shell .reset-request-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.75rem;
                }

                .reset-request-shell .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                }

                .reset-request-shell .form-control {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.85rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .reset-request-shell .form-control:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }


/* templates\reset_password\reset.html.twig */
.reset-password-shell .reset-password-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.75rem;
                }

                .reset-password-shell .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                }

                .reset-password-shell .form-control {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.85rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .reset-password-shell .form-control:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }


/* templates\security\login.html.twig */
.login-shell .login-card {
                    background: #f2f4f4;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 1.75rem;
                }

                .login-shell .form-label {
                    font-size: 10px;
                    font-weight: 700;
                    text-transform: uppercase;
                    color: #6f7974;
                    letter-spacing: 0.05em;
                }

                .login-shell .form-control {
                    background: #e1e3e3;
                    border: none;
                    border-radius: 0.5rem;
                    padding: 0.85rem 1rem;
                    font-size: 0.875rem;
                    color: #191c1d;
                    box-shadow: none;
                }

                .login-shell .form-control:focus {
                    outline: 2px solid #004536;
                    box-shadow: none;
                    background: #e1e3e3;
                }