/* ========================================
   LearningHub - Atomic Lesson Format CSS
   (Progressive atom-based learning)
   Extracted from common inline styles
   ======================================== */

        :root {
            --bg-primary: #0a0a12;
            --bg-card: #1a1a2e;
            --bg-card-hover: #252540;
            --accent-blue: #3b82f6;
            --accent-blue-light: #60a5fa;
            --accent-purple: #8b5cf6;
            --text-primary: #ffffff;
            --text-secondary: #a0a0b0;
            --border-color: #2a2a4a;
            --success: #22c55e;
            --error: #ef4444;
            --warning: #f59e0b;
        }

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

        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            line-height: 1.6;
        }

        .container { max-width: 900px; margin: 0 auto; padding: 2rem; }

        .nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 0;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 2rem;
        }

        .nav-link {
            color: var(--accent-blue);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
        }

        .nav-link:hover { color: var(--accent-blue-light); }

        .lesson-header { text-align: center; margin-bottom: 2rem; }

        .lesson-badge {
            display: inline-block;
            background: var(--accent-purple);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 50px;
            font-size: 0.875rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .lesson-title {
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .lesson-subtitle { color: var(--text-secondary); font-size: 1rem; }

        .progress-container {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-bottom: 2rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .progress-label { font-size: 0.875rem; color: var(--text-secondary); white-space: nowrap; }
        .progress-bar-wrapper { flex: 1; height: 8px; background: var(--bg-primary); border-radius: 4px; overflow: hidden; }
        .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-blue), var(--success)); width: 0%; transition: width 0.5s ease; border-radius: 4px; }
        .progress-percent { font-weight: 600; color: var(--accent-blue-light); min-width: 45px; text-align: right; }

        .goal-section {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(59, 130, 246, 0.1));
            border: 1px solid var(--accent-purple);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .goal-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
        .goal-icon { font-size: 1.5rem; }
        .goal-title { font-size: 1.25rem; font-weight: 600; color: var(--accent-purple); }
        .goal-text { font-style: italic; color: var(--text-secondary); font-size: 1.1rem; }

        .atom {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid var(--border-color);
            transition: all 0.3s ease;
        }

        .atom.atom-completed { border-color: var(--success); background: rgba(34, 197, 94, 0.05); }

        .atom-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

        .atom-number {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .atom-completed .atom-number { background: var(--success); }

        .atom-title { font-size: 1.25rem; font-weight: 600; }

        .atom-content { color: var(--text-secondary); margin-bottom: 1.5rem; }
        .atom-content p { margin-bottom: 0.75rem; }

        .atom-quiz { background: var(--bg-primary); border-radius: 12px; padding: 1.25rem; }

        .atom-question-text { font-weight: 600; margin-bottom: 1rem; color: var(--text-primary); }

        .atom-options { display: flex; flex-direction: column; gap: 0.5rem; }

        .atom-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.875rem 1rem;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .atom-option:hover { border-color: var(--accent-blue); transform: translateX(4px); }
        .atom-option.selected { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.1); }
        .atom-option.correct { border-color: var(--success); background: rgba(34, 197, 94, 0.15); }
        .atom-option.incorrect { border-color: var(--error); background: rgba(239, 68, 68, 0.15); }
        .atom-option.locked { pointer-events: none; opacity: 0.7; }

        .option-letter {
            width: 28px;
            height: 28px;
            background: var(--bg-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 0.875rem;
            flex-shrink: 0;
        }

        .atom-feedback {
            margin-top: 1rem;
            padding: 0.875rem;
            border-radius: 8px;
            display: none;
            font-weight: 500;
        }

        .atom-feedback.correct { display: block; background: rgba(34, 197, 94, 0.15); border: 1px solid var(--success); color: var(--success); }
        .atom-feedback.incorrect { display: block; background: rgba(239, 68, 68, 0.15); border: 1px solid var(--error); color: var(--error); }

        .atom-hint {
            margin-top: 0.75rem;
            padding: 0.75rem;
            background: rgba(245, 158, 11, 0.1);
            border: 1px solid var(--warning);
            border-radius: 8px;
            font-size: 0.9rem;
            color: var(--warning);
        }

        .hint-icon { margin-right: 0.5rem; }

        .feedback-icon { margin-right: 0.5rem; }

        .restart-section {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
            text-align: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            border: none;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .btn-primary { background: var(--accent-blue); color: white; }
        .btn-primary:hover { background: var(--accent-blue-light); }

        .btn-success { background: var(--success, #22c55e); color: white; }
        .btn-success:hover { opacity: 0.88; }

        .btn-center { text-align: center; margin-top: 1.5rem; }

        footer {
            text-align: center;
            padding: 2rem 0;
            border-top: 1px solid var(--border-color);
            color: var(--text-secondary);
            font-size: 0.875rem;
            margin-top: 2rem;
        }

        footer a { color: var(--accent-blue); }

        /* ========================================
           Format C: FRAME Section
           ======================================== */

        .lesson-frame {
            margin-bottom: 2rem;
        }

        .pain-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .pain-card {
            border-radius: 12px;
            padding: 1.25rem;
            border: 1px solid var(--border-color);
        }

        .pain-card.bad {
            background: rgba(239, 68, 68, 0.08);
            border-color: var(--error);
        }

        .pain-card.bad h3 { color: var(--error); font-size: 1rem; margin-bottom: 0.75rem; }

        .pain-card.good {
            background: rgba(34, 197, 94, 0.08);
            border-color: var(--success);
        }

        .pain-card.good h3 { color: var(--success); font-size: 1rem; margin-bottom: 0.75rem; }

        .pain-card ul { list-style: none; padding: 0; }
        .pain-card li { padding: 0.3rem 0; color: var(--text-secondary); font-size: 0.95rem; }
        .pain-card.bad li::before { content: "✗ "; color: var(--error); font-weight: 700; }
        .pain-card.good li::before { content: "✓ "; color: var(--success); font-weight: 700; }

        .learning-outcomes {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1.25rem;
            margin-top: 1.5rem;
            border: 1px solid var(--border-color);
        }

        .learning-outcomes h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent-blue-light);
            margin-bottom: 0.75rem;
        }

        .learning-outcomes ul { list-style: none; padding: 0; }
        .learning-outcomes li {
            padding: 0.4rem 0;
            padding-left: 1.5rem;
            position: relative;
            color: var(--text-secondary);
        }
        .learning-outcomes li::before {
            content: "▸";
            position: absolute;
            left: 0;
            color: var(--accent-blue);
            font-weight: 700;
        }

        /* ========================================
           Format C: TRY Section
           ======================================== */

        .try-section {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
            border: 1px solid var(--accent-blue);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 2rem;
        }

        .try-section h2 {
            color: var(--accent-blue-light);
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .try-challenge {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1.25rem;
            margin-bottom: 1rem;
        }

        .try-challenge p { color: var(--text-secondary); margin-bottom: 0.75rem; }
        .try-challenge ol { padding-left: 1.5rem; color: var(--text-secondary); }
        .try-challenge li { padding: 0.3rem 0; }

        .hint-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            margin-bottom: 0.5rem;
            overflow: hidden;
        }

        .hint-box summary {
            padding: 0.75rem 1rem;
            cursor: pointer;
            color: var(--warning);
            font-weight: 500;
        }

        .hint-box summary:hover { background: rgba(245, 158, 11, 0.05); }
        .hint-box p { padding: 0 1rem 0.75rem; color: var(--text-secondary); }

        .bonus-challenge {
            background: rgba(139, 92, 246, 0.08);
            border: 1px solid var(--accent-purple);
            border-radius: 12px;
            padding: 1.25rem;
            margin-top: 1rem;
        }

        .bonus-challenge h4 { color: var(--accent-purple); margin-bottom: 0.5rem; }
        .bonus-challenge p { color: var(--text-secondary); }

        /* ========================================
           Format C: PRACTICE Section
           ======================================== */

        .practice-section {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 1.5rem;
            margin-top: 2rem;
            border: 1px solid var(--border-color);
        }

        .practice-section h2 {
            font-size: 1.25rem;
            margin-bottom: 1.5rem;
            color: var(--text-primary);
        }

        .practice-exercise {
            background: var(--bg-primary);
            border-radius: 12px;
            padding: 1.25rem;
            margin-bottom: 1rem;
            border: 1px solid var(--border-color);
        }

        .practice-exercise:last-child { margin-bottom: 0; }

        .practice-exercise h3 { font-size: 1rem; margin-bottom: 0.75rem; }

        .practice-exercise[data-level="minim"] h3 { color: var(--success); }
        .practice-exercise[data-level="standard"] h3 { color: var(--accent-blue-light); }
        .practice-exercise[data-level="performanta"] h3 { color: var(--accent-purple); }

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

        /* ========================================
           Format C: REVIEW Section
           ======================================== */

        .review-section {
            margin-top: 2rem;
        }

        .summary-box {
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.08));
            border: 1px solid var(--success);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .summary-box h2 {
            color: var(--success);
            font-size: 1.25rem;
            margin-bottom: 1rem;
        }

        .summary-box ul { list-style: none; padding: 0; }
        .summary-box li {
            padding: 0.4rem 0;
            padding-left: 1.5rem;
            position: relative;
            color: var(--text-secondary);
        }
        .summary-box li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--success);
            font-weight: 700;
        }

        .next-lesson {
            background: var(--bg-card);
            border-radius: 12px;
            padding: 1.5rem;
            text-align: center;
            border: 1px solid var(--border-color);
        }

        .next-lesson h3 { font-size: 1rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
        .next-lesson p { color: var(--text-secondary); margin-bottom: 1rem; }

        .btn-next {
            display: inline-block;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 8px;
            font-weight: 600;
            text-decoration: none;
            transition: opacity 0.2s ease;
        }

        .btn-next:hover { opacity: 0.9; }

        /* ========================================
           Content Boxes (info, warning, tip, example)
           ======================================== */

        .info-box, .warning-box, .tip-box, .example-box {
            border-radius: 12px;
            padding: 1rem 1.25rem;
            margin: 1rem 0;
            border-left: 4px solid;
        }

        .info-box {
            background: rgba(59, 130, 246, 0.08);
            border-color: var(--accent-blue);
        }

        .warning-box {
            background: rgba(245, 158, 11, 0.08);
            border-color: var(--warning);
        }

        .tip-box {
            background: rgba(16, 185, 129, 0.08);
            border-color: #10b981;
        }

        .example-box {
            background: rgba(139, 92, 246, 0.08);
            border-color: var(--accent-purple);
        }

        /* ========================================
           Nav bar (Format C .nav-btn style)
           ======================================== */

        .nav-btn {
            color: var(--accent-blue);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: background 0.2s ease;
        }

        .nav-btn:hover {
            background: rgba(59, 130, 246, 0.1);
            color: var(--accent-blue-light);
        }

        /* ========================================
           Code Blocks & Syntax Highlighting
           ======================================== */

        .copyable-code {
            position: relative;
            margin: 1rem 0;
        }

        .code-block {
            background: #0d1117;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 1rem 1.25rem;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.875rem;
            line-height: 1.6;
            color: #e6edf3;
            white-space: pre-wrap;
            word-wrap: break-word;
            overflow-x: auto;
            tab-size: 4;
        }

        .copy-btn {
            position: absolute;
            top: 0.5rem;
            right: 0.5rem;
            background: var(--bg-card);
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 0.3rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            z-index: 1;
        }

        .copy-btn:hover { background: var(--accent-blue); color: white; border-color: var(--accent-blue); }

        .code-label {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 6px 6px 0 0;
            font-size: 0.75rem;
            font-weight: 600;
            margin-bottom: -1px;
        }

        .code-label-green { background: rgba(34, 197, 94, 0.15); color: var(--success); }
        .code-label-blue { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }

        /* Syntax highlighting */
        .code-block .kw { color: #ff7b72; }
        .code-block .type { color: #79c0ff; }
        .code-block .fn { color: #d2a8ff; }
        .code-block .str { color: #a5d6ff; }
        .code-block .num { color: #79c0ff; }
        .code-block .cmt { color: #8b949e; font-style: italic; }
        .code-block .op { color: #ff7b72; }

        /* Inline code */
        code {
            background: rgba(59, 130, 246, 0.1);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 0.15rem 0.4rem;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 0.85em;
            color: var(--accent-blue-light);
        }

        .code-block code {
            background: none;
            border: none;
            padding: 0;
            font-size: inherit;
            color: inherit;
        }

        /* ========================================
           TRY Section — Challenge Components
           ======================================== */

        .try-header { margin-bottom: 1rem; }

        .try-badge {
            display: inline-block;
            background: rgba(59, 130, 246, 0.15);
            color: var(--accent-blue-light);
            padding: 0.3rem 0.75rem;
            border-radius: 6px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .try-subtitle {
            color: var(--text-secondary);
            font-size: 0.95rem;
            margin-bottom: 1rem;
        }

        .challenge-box {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1.25rem;
            margin: 1rem 0;
        }

        .challenge-title {
            font-weight: 600;
            color: var(--accent-blue-light);
            margin-bottom: 1rem;
            font-size: 1rem;
        }

        .challenge-step {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .challenge-step:last-child { margin-bottom: 0; }

        .challenge-step-num {
            width: 28px;
            height: 28px;
            min-width: 28px;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.85rem;
            color: white;
            margin-top: 0.1rem;
        }

        .challenge-step-text {
            color: var(--text-secondary);
            line-height: 1.6;
            flex: 1;
        }

        .challenge-step-text strong { color: var(--text-primary); }

        /* ========================================
           Comparison Grid (TRY section)
           ======================================== */

        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            margin: 1rem 0;
        }

        .comparison-card {
            border-radius: 12px;
            padding: 1.25rem;
            border: 1px solid var(--border-color);
        }

        .comparison-card .icon { font-size: 2rem; margin-bottom: 0.5rem; }
        .comparison-card h4 { font-size: 1rem; margin-bottom: 0.5rem; }
        .comparison-card p { color: var(--text-secondary); font-size: 0.9rem; }

        .comparison-card.bad {
            background: rgba(239, 68, 68, 0.08);
            border-color: var(--error);
        }
        .comparison-card.bad h4 { color: var(--error); }

        .comparison-card.good {
            background: rgba(34, 197, 94, 0.08);
            border-color: var(--success);
        }
        .comparison-card.good h4 { color: var(--success); }

        /* ========================================
           Definition Box
           ======================================== */

        .definition {
            background: rgba(139, 92, 246, 0.08);
            border: 1px solid var(--accent-purple);
            border-left: 4px solid var(--accent-purple);
            border-radius: 12px;
            padding: 1rem 1.25rem;
            margin: 1rem 0;
        }

        .definition h4 { color: var(--accent-purple); margin-bottom: 0.5rem; }
        .definition p { color: var(--text-secondary); }

        /* ========================================
           Highlight & Misc Inline
           ======================================== */

        .highlight {
            background: rgba(59, 130, 246, 0.2);
            color: var(--accent-blue-light);
            padding: 0.1rem 0.3rem;
            border-radius: 3px;
            font-weight: 600;
        }

        .step-item {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
            padding: 0.5rem 0;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
            margin: 1rem 0;
        }

        .feature-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
        }

        .feature-card h4 { color: var(--text-primary); margin-bottom: 0.5rem; }
        .feature-card p { color: var(--text-secondary); font-size: 0.9rem; }

        /* Nested .try-section fix (migration artifact) */
        .try-section .try-section {
            background: none;
            border: none;
            padding: 0;
            margin-bottom: 0;
        }

        /* ========================================
           Answer Textarea
           ======================================== */

        .answer-area {
            width: 100%;
            min-height: 200px;
            padding: 1rem;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            font-size: 0.95rem;
            line-height: 1.6;
            resize: vertical;
            box-sizing: border-box;
            transition: border-color 0.2s;
        }

        .answer-area:focus {
            outline: none;
            border-color: var(--accent-blue);
        }

        .answer-area::placeholder { color: var(--text-muted); }

        /* ========================================
           Step Reorder (Drag & Drop Challenge)
           ======================================== */

        .step-reorder-container { margin: 1.5rem 0; }

        .reorder-title {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 0.75rem;
            text-align: center;
        }

        .shuffled-steps {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .step-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: var(--bg-card);
            border: 2px solid var(--border-color);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            cursor: grab;
            user-select: none;
            transition: border-color 0.15s, background 0.15s, opacity 0.15s;
        }

        .step-card:active { cursor: grabbing; }

        .step-card.drag-over {
            border-color: var(--accent-blue);
            background: rgba(59, 130, 246, 0.08);
        }

        .step-card.correct-pos {
            border-color: var(--success);
            background: rgba(34, 197, 94, 0.08);
        }

        .step-card.wrong-pos {
            border-color: var(--error);
            background: rgba(239, 68, 68, 0.08);
        }

        .step-handle { color: var(--text-muted); font-size: 1rem; flex-shrink: 0; }
        .step-text { color: var(--text-primary); font-size: 0.95rem; line-height: 1.4; }

        .check-order-btn {
            display: block;
            width: 100%;
            padding: 0.75rem;
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .check-order-btn:hover { opacity: 0.88; }

        .order-feedback {
            margin-top: 0.75rem;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            font-size: 0.9rem;
            display: none;
        }

        .order-feedback.show { display: block; }

        .order-feedback.correct {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid var(--success);
            color: var(--success);
        }

        .order-feedback.wrong {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid var(--error);
            color: var(--error);
        }

        /* ========================================
           Hint Toggle (lectia2 style)
           ======================================== */

        .hints-container { margin-top: 1.25rem; }

        .hint-toggle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(245, 158, 11, 0.08);
            border: 1px solid rgba(245, 158, 11, 0.3);
            border-radius: 8px;
            padding: 0.65rem 1rem;
            cursor: pointer;
            margin-bottom: 0.25rem;
            user-select: none;
            transition: background 0.15s;
        }

        .hint-toggle:hover { background: rgba(245, 158, 11, 0.15); }

        .hint-toggle-text { color: var(--text-primary); font-size: 0.9rem; }

        .hint-arrow {
            color: var(--text-muted);
            font-size: 0.75rem;
            transition: transform 0.2s;
            display: inline-block;
        }

        .hint-toggle.open .hint-arrow { transform: rotate(90deg); }

        .hint-content {
            background: rgba(245, 158, 11, 0.04);
            border: 1px solid rgba(245, 158, 11, 0.2);
            border-top: none;
            border-radius: 0 0 8px 8px;
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
            display: none;
            margin-bottom: 0.5rem;
        }

        .hint-content.open { display: block; }

        /* ========================================
           Hint Box (lectia4 style — div-based toggle)
           ======================================== */

        .hint-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.65rem 1rem;
            cursor: pointer;
            user-select: none;
            transition: background 0.15s;
        }

        .hint-header:hover { background: rgba(245, 158, 11, 0.08); }
        .hint-header span { font-size: 0.9rem; }
        .hint-box.open .hint-arrow { transform: rotate(90deg); }

        .hint-box .hint-content {
            padding: 0.75rem 1rem;
            font-size: 0.9rem;
            color: var(--text-secondary);
            display: none;
        }

        .hint-box.open .hint-content { display: block; }

        /* ========================================
           Responsive
           ======================================== */

        @media (max-width: 768px) {
            .container { padding: 1rem; }
            .lesson-title { font-size: 1.75rem; }
            .pain-comparison { grid-template-columns: 1fr; }
            .comparison-grid { grid-template-columns: 1fr; }
            .feature-grid { grid-template-columns: 1fr; }
            .code-block { font-size: 0.8rem; padding: 0.75rem; }
        }

        @media (max-width: 480px) {
            .container { padding: 0.75rem; }
            .lesson-title { font-size: 1.5rem; }
            .atom { padding: 1rem; }
            .practice-exercise { padding: 1rem; }
        }