/* --- MCQ Block Styles - Sleek, Lightweight & Dynamically Scaled --- */
        .nk-mcq-block {
            position: relative;
            background: var(--bg-secondary);
            border: 1px solid color-mix(in srgb, var(--border-color) 65%, transparent);
            border-left: 3.5px solid var(--primary-color);
            border-radius: 12px;
            padding: 1.2rem 1.45rem;
            margin: 1.3em 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
            font-family: inherit;
            font-size: inherit;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        /* Difficulty-based left border color on the MCQ block */
        .nk-mcq-block:has(.nk-mcq-explanation[data-difficulty="easy"])   { border-left-color: #3ce29e !important; }
        .nk-mcq-block:has(.nk-mcq-explanation[data-difficulty="medium"]) { border-left-color: #ff9f43 !important; }
        .nk-mcq-block:has(.nk-mcq-explanation[data-difficulty="hard"])   { border-left-color: #ff5252 !important; }

        /* Subtle hover effect in read mode */
        body.read-mode .nk-mcq-block:not([data-answered="true"]):hover,
        .focus-mode-overlay .nk-mcq-block:not([data-answered="true"]):hover {
            border-color: color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.05);
        }

        /* Answered state */
        .nk-mcq-block[data-answered="true"] {
            border-left-color: var(--success-color) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), -1px 0 8px color-mix(in srgb, var(--success-color) 12%, transparent);
        }

        .nk-mcq-block[data-answered="true"][data-user-incorrect="true"] {
            border-left-color: var(--danger-color) !important;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03), -1px 0 8px color-mix(in srgb, var(--danger-color) 12%, transparent);
        }

        /* Question text - refined typography inheriting appearance settings */
        .nk-mcq-question {
            font-weight: 550;
            font-size: inherit;
            margin-bottom: 0.85rem;
            margin-right: 36px;
            outline: none;
            line-height: 1.42; /* Slightly reduced line spacing as requested */
            letter-spacing: -0.005em;
            color: var(--text-primary);
            font-family: inherit;
        }

        .nk-mcq-question:empty::before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
            font-weight: normal;
            opacity: 0.6;
        }

        /* MCQ Toolbar (write mode) - appears on hover */
        .nk-mcq-toolbar {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 4px;
            opacity: 0;
            transition: opacity 0.2s ease;
            z-index: 10;
        }

        body.write-mode .nk-mcq-block:hover .nk-mcq-toolbar {
            opacity: 1;
        }

        .nk-mcq-toolbar button {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.85rem;
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nk-mcq-toolbar button:hover {
            background: var(--bg-secondary);
            color: var(--text-primary);
            border-color: var(--primary-color);
        }

        .nk-mcq-toolbar .nk-mcq-delete-block:hover {
            color: var(--danger-color);
            border-color: var(--danger-color);
            background: color-mix(in srgb, var(--danger-color) 10%, var(--bg-secondary));
        }

        .nk-mcq-toolbar .nk-mcq-copy-block:hover {
            color: var(--success-color);
            border-color: var(--success-color);
            background: color-mix(in srgb, var(--success-color) 10%, var(--bg-secondary));
        }

        /* Hide toolbar in read mode and focus mode */
        body.read-mode .nk-mcq-toolbar,
        .focus-mode-overlay .nk-mcq-toolbar,
        .study-card-content-box .nk-mcq-toolbar {
            display: none;
        }

        .nk-mcq-options {
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
        }

        .nk-mcq-option {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .nk-mcq-option-radio {
            width: 20px;
            height: 20px;
            border: 2px solid var(--border-color);
            border-radius: 50%;
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            background: var(--bg-secondary);
        }

        .nk-mcq-option-radio:hover {
            border-color: var(--primary-color);
            transform: scale(1.08);
        }

        .nk-mcq-option-text {
            flex-grow: 1;
            outline: none;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid transparent;
            transition: all 0.2s ease;
            background: var(--bg-tertiary);
            min-height: 22px;
            font-family: inherit;
            font-size: 0.9em; /* 10% smaller than question for optimal hierarchy */
            line-height: 1.45;
        }

        .nk-mcq-option-text:focus-within {
            border-color: var(--primary-color);
            background-color: var(--bg-secondary);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
        }

        .nk-mcq-option-text:empty::before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
            opacity: 0.5;
        }

        /* --- Rich Media Options: Image Support --- */
        .nk-mcq-option-text img {
            max-height: 100px;
            max-width: 100%;
            object-fit: contain;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            margin: 4px 0;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            cursor: pointer;
        }

        .nk-mcq-option-text img:hover {
            transform: scale(1.02);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
        }

        .focus-mode-overlay .nk-mcq-option-text img {
            max-height: 150px;
        }

        .nk-mcq-option-text:has(img) {
            flex-grow: 0;
            width: fit-content;
            padding: 4px;
            margin-right: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            min-height: auto;
        }

        .nk-mcq-option-text:has(img) img {
            margin: 0;
            display: block;
        }

        .nk-mcq-delete-option {
            background: none;
            border: none;
            color: var(--text-secondary);
            cursor: pointer;
            opacity: 0;
            transition: all 0.2s ease;
            font-size: 1.25rem;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nk-mcq-option:hover .nk-mcq-delete-option {
            opacity: 0.5;
        }

        .nk-mcq-delete-option:hover {
            opacity: 1;
            color: var(--danger-color);
            background: color-mix(in srgb, var(--danger-color) 10%, transparent);
        }

        /* --- Write Mode Specific Styles --- */
        body.write-mode .nk-mcq-option[data-is-correct="true"] .nk-mcq-option-radio {
            background: var(--success-color);
            border-color: var(--success-color);
            box-shadow: 0 2px 8px color-mix(in srgb, var(--success-color) 40%, transparent);
        }

        body.write-mode .nk-mcq-option[data-is-correct="true"] .nk-mcq-option-radio::after {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 0.7rem;
            color: white;
            font-weight: bold;
            transform: translate(-50%, -50%);
        }

        /* --- Read Mode & Presentation Mode Option Styles --- */
        body.read-mode .nk-mcq-add-option,
        body.read-mode .nk-mcq-delete-option,
        body.read-mode .nk-mcq-option-radio,
        .focus-mode-overlay .nk-mcq-add-option,
        .focus-mode-overlay .nk-mcq-delete-option,
        .focus-mode-overlay .nk-mcq-option-radio {
            display: none !important;
        }

        body.read-mode .nk-mcq-option,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option {
            padding: 10px 14px;
            border: 1px solid color-mix(in srgb, var(--border-color) 45%, transparent);
            border-radius: 9px;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            background: color-mix(in srgb, var(--bg-tertiary) 45%, var(--bg-secondary));
            position: relative;
            display: flex;
            align-items: center;
            gap: 12px;
            overflow: hidden;
        }

        /* Sleek Radio Indicator */
        body.read-mode .nk-mcq-option::before,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option::before {
            content: '';
            width: 18px;
            height: 18px;
            min-width: 18px;
            border-radius: 50%;
            border: 1.5px solid color-mix(in srgb, var(--border-color) 75%, var(--text-secondary));
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
            flex-shrink: 0;
            box-sizing: border-box;
            line-height: 1;
        }

        body.read-mode .nk-mcq-option .nk-mcq-option-text,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option .nk-mcq-option-text {
            padding: 0;
            background: transparent;
            border: none;
            font-family: inherit;
            font-size: 0.9em;
            line-height: 1.45;
            color: var(--text-primary);
            flex: 1;
            min-width: 0;
        }

        /* Hover state */
        body.read-mode .nk-mcq-block:not([data-answered="true"]) .nk-mcq-option:hover,
        .focus-mode-overlay .nk-mcq-block:not([data-answered="true"]) .nk-mcq-option:hover {
            border-color: color-mix(in srgb, var(--primary-color) 45%, var(--border-color));
            background: color-mix(in srgb, var(--primary-color) 4%, var(--bg-tertiary));
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
        }

        body.read-mode .nk-mcq-block:not([data-answered="true"]) .nk-mcq-option:hover::before,
        .focus-mode-overlay .nk-mcq-block:not([data-answered="true"]) .nk-mcq-option:hover::before {
            border-color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-primary));
            transform: scale(1.08);
        }

        /* Answered state */
        body.read-mode .nk-mcq-block[data-answered="true"] .nk-mcq-option,
        .focus-mode-overlay .nk-mcq-block[data-answered="true"] .nk-mcq-option {
            cursor: default;
        }

        body.read-mode .nk-mcq-block[data-answered="true"] .nk-mcq-option:not(.correct):not(.incorrect),
        .focus-mode-overlay .nk-mcq-block[data-answered="true"] .nk-mcq-option:not(.correct):not(.incorrect) {
            opacity: 0.55;
        }

        /* ── Visually Enticing Correct Answer Style ─────────────────── */
        body.read-mode .nk-mcq-option.correct,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option.correct {
            border: 1.5px solid color-mix(in srgb, var(--success-color) 85%, transparent);
            background: linear-gradient(135deg,
                    color-mix(in srgb, var(--success-color) 16%, var(--bg-secondary)),
                    color-mix(in srgb, var(--success-color) 6%, var(--bg-secondary)));
            box-shadow: 0 0 16px color-mix(in srgb, var(--success-color) 22%, transparent),
                inset 0 0 14px color-mix(in srgb, var(--success-color) 5%, transparent);
            animation: mcqCorrectPulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 1 !important;
        }

        body.read-mode .nk-mcq-option.correct::before,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option.correct::before {
            content: '✓';
            width: 20px;
            height: 20px;
            min-width: 20px;
            border: none;
            background: linear-gradient(135deg, #10b981, #059669);
            color: #ffffff;
            font-size: 0.72rem;
            font-weight: 900;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5),
                inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
            transform: scale(1.08);
        }

        /* ── Visually Enticing Incorrect Answer Style ───────────────── */
        body.read-mode .nk-mcq-option.incorrect,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option.incorrect {
            border: 1.5px solid color-mix(in srgb, var(--danger-color) 85%, transparent);
            background: linear-gradient(135deg,
                    color-mix(in srgb, var(--danger-color) 16%, var(--bg-secondary)),
                    color-mix(in srgb, var(--danger-color) 6%, var(--bg-secondary)));
            box-shadow: 0 0 16px color-mix(in srgb, var(--danger-color) 22%, transparent),
                inset 0 0 14px color-mix(in srgb, var(--danger-color) 5%, transparent);
            animation: mcqIncorrectShake 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            opacity: 1 !important;
        }

        body.read-mode .nk-mcq-option.incorrect::before,
        .focus-mode-overlay .nk-mcq-block .nk-mcq-option.incorrect::before {
            content: '×';
            width: 20px;
            height: 20px;
            min-width: 20px;
            border: none;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 900;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5),
                inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
            transform: scale(1.08);
        }

        /* Dark Theme Specific Rich Glows */
        [data-theme="dark"] body.read-mode .nk-mcq-option.correct,
        [data-theme="dark"] .focus-mode-overlay .nk-mcq-block .nk-mcq-option.correct {
            border-color: rgba(16, 185, 129, 0.7);
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(16, 185, 129, 0.05));
            box-shadow: 0 0 18px rgba(16, 185, 129, 0.18), inset 0 0 14px rgba(16, 185, 129, 0.06);
        }

        [data-theme="dark"] body.read-mode .nk-mcq-option.incorrect,
        [data-theme="dark"] .focus-mode-overlay .nk-mcq-block .nk-mcq-option.incorrect {
            border-color: rgba(239, 68, 68, 0.7);
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.16), rgba(239, 68, 68, 0.05));
            box-shadow: 0 0 18px rgba(239, 68, 68, 0.18), inset 0 0 14px rgba(239, 68, 68, 0.06);
        }

        @keyframes mcqCorrectPulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.015);
            }
            100% {
                transform: scale(1);
            }
        }

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

        /* --- STUDY FLASHCARD MODE MCQ STYLING --- */
        .study-card-content-box.mcq-type {
            font-size: var(--study-card-font-size, 1.4rem);
            line-height: 1.55;
        }

        .study-card-content-box .nk-mcq-block {
            border: none;
            background: transparent;
            box-shadow: none;
            padding: 0.5rem 0;
            margin: 0;
            position: relative;
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-question {
            font-weight: 550;
            font-size: 1.05em;
            line-height: 1.45;
            margin-bottom: 1.1rem;
            color: var(--text-primary);
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-options {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option {
            padding: 11px 15px;
            border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            background: color-mix(in srgb, var(--bg-tertiary) 50%, var(--bg-secondary));
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option::before {
            content: '';
            width: 18px;
            height: 18px;
            min-width: 18px;
            border-radius: 50%;
            border: 1.5px solid color-mix(in srgb, var(--border-color) 75%, var(--text-secondary));
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option .nk-mcq-option-text {
            padding: 0;
            background: transparent;
            border: none;
            font-size: 0.9em;
            line-height: 1.45;
            color: var(--text-primary);
            flex: 1;
        }

        .study-card-content-box .nk-mcq-block:not([data-answered="true"]) .nk-mcq-option:hover {
            border-color: var(--primary-color);
            background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-secondary));
            transform: translateY(-1px);
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option.correct {
            border: 1.5px solid color-mix(in srgb, var(--success-color) 85%, transparent);
            background: linear-gradient(135deg,
                    color-mix(in srgb, var(--success-color) 16%, var(--bg-secondary)),
                    color-mix(in srgb, var(--success-color) 6%, var(--bg-secondary)));
            box-shadow: 0 0 16px color-mix(in srgb, var(--success-color) 22%, transparent);
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option.correct::before {
            content: '✓';
            width: 20px;
            height: 20px;
            min-width: 20px;
            background: linear-gradient(135deg, #10b981, #059669);
            border: none;
            color: white;
            font-size: 0.72rem;
            font-weight: 900;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
            transform: scale(1.08);
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option.incorrect {
            border: 1.5px solid color-mix(in srgb, var(--danger-color) 85%, transparent);
            background: linear-gradient(135deg,
                    color-mix(in srgb, var(--danger-color) 16%, var(--bg-secondary)),
                    color-mix(in srgb, var(--danger-color) 6%, var(--bg-secondary)));
            box-shadow: 0 0 16px color-mix(in srgb, var(--danger-color) 22%, transparent);
        }

        .study-card-content-box .nk-mcq-block .nk-mcq-option.incorrect::before {
            content: '×';
            width: 20px;
            height: 20px;
            min-width: 20px;
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border: none;
            color: white;
            font-size: 0.85rem;
            font-weight: 900;
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), inset 0 1px 1.5px rgba(255, 255, 255, 0.45);
            transform: scale(1.08);
        }

        .study-card-content-box .nk-mcq-block[data-answered="true"] .nk-mcq-explanation {
            margin-top: 0.9rem;
            padding: 0.85rem 1.25rem;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.09), rgba(34, 197, 94, 0.03));
            border: 1px solid rgba(34, 197, 94, 0.25);
            border-left: 3.5px solid #22c55e;
            border-radius: 10px;
            font-size: 0.9em;
            line-height: 1.55;
            color: var(--text-primary);
            box-shadow: 0 2px 10px rgba(34, 197, 94, 0.05);
        }

        /* ── NOTEKASH GREEN-TEXTILE INSPIRED EXPLANATION BLOCK ───────── */
        .nk-mcq-explanation {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transform: translateY(-6px);
            transition:
                max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.25s ease,
                margin 0.25s ease;

            outline: none;
            margin-top: 0;
            padding: 0 1.25rem;
            background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(34, 197, 94, 0.025));
            border: 1px solid rgba(34, 197, 94, 0.22);
            border-left: 3.5px solid #22c55e;
            border-radius: 10px;
            box-shadow: 0 1px 4px rgba(34, 197, 94, 0.05), 0 2px 8px rgba(0, 0, 0, 0.02);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            box-sizing: border-box;
            font-size: 0.9em;
            color: var(--text-primary);
            line-height: 1.55;
            font-family: inherit;
        }

        /* ── Dark Theme Green Aesthetics ────────────────────────────── */
        [data-theme="dark"] .nk-mcq-explanation,
        [data-theme="dark"] .study-card-content-box .nk-mcq-block[data-answered="true"] .nk-mcq-explanation {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0.03));
            border: 1px solid rgba(16, 185, 129, 0.26);
            border-left: 3.5px solid #10b981;
            box-shadow: 0 2px 14px rgba(16, 185, 129, 0.08), 0 1px 3px rgba(0, 0, 0, 0.3);
            color: var(--text-primary);
        }

        /* ── Sepia Theme Green Aesthetics ───────────────────────────── */
        [data-theme="sepia"] .nk-mcq-explanation,
        [data-theme="sepia"] .study-card-content-box .nk-mcq-block[data-answered="true"] .nk-mcq-explanation {
            background: linear-gradient(135deg, rgba(46, 125, 50, 0.09), rgba(46, 125, 50, 0.03));
            border: 1px solid rgba(46, 125, 50, 0.25);
            border-left: 3.5px solid #2e7d32;
            box-shadow: 0 2px 10px rgba(46, 125, 50, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
            color: var(--text-primary);
        }

        /* Write mode: Always show explanation for editing */
        body.write-mode .nk-mcq-explanation {
            max-height: none;
            opacity: 1;
            transform: translateY(0);
            margin-top: 0.9rem;
            padding: 0.85rem 1.25rem;
        }

        .nk-mcq-explanation:empty::before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
            opacity: 0.5;
            font-style: italic;
        }

        .nk-mcq-explanation:focus:empty::before {
            opacity: 0.3;
        }

        /* Read Mode & Focus Mode Reveal State */
        body.read-mode .nk-mcq-block[data-answered="true"] .nk-mcq-explanation,
        .focus-mode-overlay .nk-mcq-block[data-answered="true"] .nk-mcq-explanation {
            max-height: 800px;
            opacity: 1;
            transform: translateY(0);
            margin-top: 0.9rem;
            padding: 0.85rem 1.25rem;
            position: relative;
        }

        .nk-mcq-block[data-answered="true"] .nk-mcq-explanation:empty {
            display: none !important;
            max-height: 0 !important;
            margin: 0;
            padding: 0;
            border: none;
        }


        /* --- NEW: Text Tile (Feature #3 - "/textile" command) --- */
        .nk-text-tile {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            vertical-align: middle;
            background-color: var(--bg-secondary);
            border: 1px solid color-mix(in srgb, var(--border-color) 35%, transparent);
            border-left: 3.5px solid var(--border-color);
            border-radius: 9px;
            padding: 0.75rem 1.15rem;
            margin: 0.45rem 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.02);
            position: relative;
            width: 100%;
            max-width: 100% !important;
            box-sizing: border-box;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: break-word;
            transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        /* Subtle hover elevation in Write Mode */
        body.write-mode .nk-text-tile:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.03);
        }

        .nk-text-tile-icon {
            font-size: 1.05em;
            opacity: 0.92;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            line-height: 1;
            margin-top: 0.18em;
        }

        /* Textile Color Styles - Refined Left Anchor Bar with soft ambient fills */
        .nk-text-tile.color-1 {
            background: var(--textile-bg-1);
            border-color: color-mix(in srgb, var(--textile-border-1) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-1);
            color: var(--textile-text-1);
        }

        .nk-text-tile.color-2 {
            background: var(--textile-bg-2);
            border-color: color-mix(in srgb, var(--textile-border-2) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-2);
            color: var(--textile-text-2);
        }

        .nk-text-tile.color-3 {
            background: var(--textile-bg-3);
            border-color: color-mix(in srgb, var(--textile-border-3) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-3);
            color: var(--textile-text-3);
        }

        .nk-text-tile.color-4 {
            background: var(--textile-bg-4);
            border-color: color-mix(in srgb, var(--textile-border-4) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-4);
            color: var(--textile-text-4);
        }

        .nk-text-tile.color-5 {
            background: var(--textile-bg-5);
            border-color: color-mix(in srgb, var(--textile-border-5) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-5);
            color: var(--textile-text-5);
        }

        .nk-text-tile.color-6 {
            background: var(--textile-bg-6);
            border-color: color-mix(in srgb, var(--textile-border-6) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-6);
            color: var(--textile-text-6);
        }

        .nk-text-tile.color-7 {
            background: var(--textile-bg-7);
            border-color: color-mix(in srgb, var(--textile-border-7) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-7);
            color: var(--textile-text-7);
        }

        .nk-text-tile.color-8 {
            background: var(--textile-bg-8);
            border-color: color-mix(in srgb, var(--textile-border-8) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-8);
            color: var(--textile-text-8);
        }

        .nk-text-tile.color-9 {
            background: var(--textile-bg-9);
            border-color: color-mix(in srgb, var(--textile-border-9) 18%, transparent);
            border-left: 3.5px solid var(--textile-border-9);
            color: var(--textile-text-9);
        }

        /* Ensure content inherits correct colors */
        .nk-text-tile.color-1 .nk-text-tile-content,
        .nk-text-tile.color-2 .nk-text-tile-content,
        .nk-text-tile.color-3 .nk-text-tile-content,
        .nk-text-tile.color-4 .nk-text-tile-content,
        .nk-text-tile.color-5 .nk-text-tile-content,
        .nk-text-tile.color-6 .nk-text-tile-content,
        .nk-text-tile.color-7 .nk-text-tile-content,
        .nk-text-tile.color-8 .nk-text-tile-content,
        .nk-text-tile.color-9 .nk-text-tile-content {
            color: inherit;
        }

        /* Default fallback style */
        .nk-text-tile.color-default {
            background-color: color-mix(in srgb, var(--bg-tertiary) 60%, transparent);
            border: 1px solid color-mix(in srgb, var(--border-color) 40%, transparent);
            border-left: 3.5px solid var(--primary-color);
            color: var(--text-primary);
        }

        /* Content styling - Clean, highly legible typography */
        .nk-text-tile-content {
            outline: none;
            font-family: inherit;
            font-size: 0.9em;
            font-weight: 500;
            line-height: 1.5;
            color: inherit;
            min-width: 40px;
            letter-spacing: -0.01em;
            width: 100%;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        /* Normalize internal elements for natural flow and seamless line spacing */
        .nk-text-tile-content p,
        .nk-text-tile-content div {
            margin: 0.25em 0;
            line-height: inherit;
        }

        .nk-text-tile-content > *:first-child {
            margin-top: 0;
        }

        .nk-text-tile-content > *:last-child {
            margin-bottom: 0;
        }

        .nk-text-tile-content:empty::before {
            content: attr(data-placeholder);
            color: var(--text-secondary);
            opacity: 0.55;
            font-style: italic;
            font-weight: 400;
            pointer-events: none;
        }

        /* Subtle ambient illumination overlay */
        .nk-text-tile.color-1::before,
        .nk-text-tile.color-2::before,
        .nk-text-tile.color-3::before,
        .nk-text-tile.color-4::before,
        .nk-text-tile.color-5::before,
        .nk-text-tile.color-6::before,
        .nk-text-tile.color-7::before,
        .nk-text-tile.color-8::before,
        .nk-text-tile.color-9::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 8px;
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.12) 0%,
                    rgba(255, 255, 255, 0.03) 50%,
                    rgba(0, 0, 0, 0.01) 100%);
            pointer-events: none;
            z-index: 0;
        }

        /* Adjusted illumination overlay for dark theme */
        [data-theme="dark"] .nk-text-tile.color-1::before,
        [data-theme="dark"] .nk-text-tile.color-2::before,
        [data-theme="dark"] .nk-text-tile.color-3::before,
        [data-theme="dark"] .nk-text-tile.color-4::before,
        [data-theme="dark"] .nk-text-tile.color-5::before,
        [data-theme="dark"] .nk-text-tile.color-6::before,
        [data-theme="dark"] .nk-text-tile.color-7::before,
        [data-theme="dark"] .nk-text-tile.color-8::before,
        [data-theme="dark"] .nk-text-tile.color-9::before {
            background: linear-gradient(180deg,
                    rgba(255, 255, 255, 0.06) 0%,
                    rgba(255, 255, 255, 0.01) 50%,
                    rgba(0, 0, 0, 0.04) 100%);
        }

        /* Ensure content is above gradient */
        .nk-text-tile-content,
        .nk-text-tile-icon,
        .nk-text-tile-color-cycler {
            position: relative;
            z-index: 1;
        }

        .nk-text-tile-color-cycler {
            position: absolute;
            top: -10px;
            left: auto;
            right: 4px;
            background: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: scale(0.85);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        body.write-mode .nk-text-tile:hover .nk-text-tile-color-cycler {
            opacity: 1;
            transform: scale(1);
        }

        body.write-mode .nk-text-tile-color-cycler:hover {
            background: var(--primary-color);
            color: var(--text-on-primary);
            border-color: var(--primary-color);
            transform: scale(1.1);
        }

        .search-result-item .nk-text-tile {
            display: flex;
            width: 100%;
            max-width: 100%;
        }

        .search-result-item .nk-text-tile-content {
            font-size: inherit;
        }

        /* --- Decktile Container --- */
        .nk-textile-deck {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 0.75rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background-color: color-mix(in srgb, var(--bg-tertiary) 40%, transparent);
            margin: 0.65rem 0;
            position: relative;
            box-sizing: border-box;
        }

        /* Adjacent spacing optimizations between tiles/decks */
        .nk-text-tile + .nk-text-tile {
            margin-top: 0.35rem;
        }

        .nk-textile-deck + .nk-textile-deck {
            margin-top: 0.45rem;
        }

        .nk-text-tile + .nk-textile-deck,
        .nk-textile-deck + .nk-text-tile {
            margin-top: 0.45rem;
        }

        /* Collapse empty intermediate paragraphs when between textiles or decks */
        .nk-text-tile + p:has(> br:only-child):has(+ .nk-text-tile),
        .nk-textile-deck + p:has(> br:only-child):has(+ .nk-textile-deck),
        .nk-text-tile + p:has(> br:only-child):has(+ .nk-textile-deck),
        .nk-textile-deck + p:has(> br:only-child):has(+ .nk-text-tile) {
            margin-block: 0;
            line-height: 0;
            height: 4px;
        }

        /* A Textile inside a deck loses standalone margin to fit neatly */
        .nk-textile-deck .nk-text-tile {
            margin: 0;
            flex: 1 1 200px;
            min-width: 140px;
            width: auto;
            max-width: 100%;
        }

        /* Stack layout for Decks */
        .nk-textile-deck.layout-stack {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
        }

        .deck-add-tile-btn {
            display: none;
            align-items: center;
            justify-content: center;
            border: 1px dashed var(--border-color);
            border-radius: 10px;
            min-height: 42px;
            color: var(--text-secondary);
            font-size: 0.92rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            flex: 1 1 140px;
            min-width: 140px;
            background: transparent;
        }

        /* Show Add button ONLY in write mode */
        body.write-mode .deck-add-tile-btn {
            display: flex;
        }

        .deck-add-tile-btn:hover {
            background-color: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
            color: var(--primary-color);
            border-color: var(--primary-color);
        }

        .deck-layout-toggle {
            position: absolute;
            top: -10px;
            right: 8px;
            background-color: var(--bg-primary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            width: 22px;
            height: 22px;
            font-size: 0.75rem;
            color: var(--text-secondary);
            cursor: pointer;
            display: none;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
        }

        /* Show layout toggle on hover in BOTH modes */
        .nk-textile-deck:hover .deck-layout-toggle {
            display: flex;
        }

        .deck-layout-toggle:hover {
            color: var(--primary-color);
            transform: scale(1.1);
        }

        /* --- FIX: Make standalone text tiles full-width --- */
        #article-content>.nk-text-tile {
            display: flex;
            width: 100%;
            max-width: 100%;
            margin-left: 0;
            margin-right: 5px;
        }

        #article-content>.nk-text-tile .nk-text-tile-content {
            white-space: normal;
        }

        /* --- NEW: Power Quote Gradient Text (Theme-Sensitive v2) --- */
        .power-quote-gradient {
            font-weight: 500;
            font-style: italic;
            background-size: 200% auto;
            color: #000;
            background-clip: text;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: witty-text-glow 5s linear infinite;
            cursor: default;
        }

        [data-theme="light"] .power-quote-gradient {
            background-image: linear-gradient(90deg, #0d9488, #581c87, #0f766e);
        }

        [data-theme="dark"] .power-quote-gradient {
            background-image: linear-gradient(90deg, #E0B453, #34d399, #F7C96D);
        }

        [data-theme="sepia"] .power-quote-gradient {
            background-image: linear-gradient(90deg, #8c6d46, #4d7c0f, #73552a);
        }



        /* =====================================================
           AI MAGIC VIEWER PANEL (Sidebar Mode for Presentation/PDF)
           ===================================================== */

        /* Reusable Animations */
        @keyframes ai-viewer-slide-in {
            from {
                opacity: 0;
                transform: translateX(100%) scale(0.95);
            }

            to {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes ai-viewer-slide-up {
            from {
                opacity: 0;
                transform: translateY(100%) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes subtle-pan {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        @keyframes message-appear {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.96);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        @keyframes ai-glow {
            from {
                box-shadow: 0 0 8px -2px color-mix(in srgb, var(--primary-color) 40%, transparent);
                border-color: color-mix(in srgb, var(--primary-color) 70%, transparent);
            }

            to {
                box-shadow: 0 0 20px 4px color-mix(in srgb, var(--primary-color) 25%, transparent);
                border-color: var(--primary-color);
            }
        }

        @keyframes ai-border-glow {
            0% {
                border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
                box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            }

            50% {
                border-color: var(--primary-color);
                box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35), 0 0 25px 4px color-mix(in srgb, var(--primary-color) 25%, transparent);
            }

            100% {
                border-color: color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
                box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            }
        }

        @keyframes title-shimmer {

            0%,
            100% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes pulse-glow {

            0%,
            100% {
                box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-color) 30%, transparent);
            }

            50% {
                box-shadow: 0 0 15px 3px color-mix(in srgb, var(--primary-color) 20%, transparent);
            }
        }

        @keyframes thinking-bounce {

            0%,
            80%,
            100% {
                transform: scale(0.6);
                opacity: 0.5;
            }

            40% {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* AI Magic Toggle Button */
        #ai-magic-toggle {
            position: fixed;
            bottom: 1.5rem;
            right: 1.5rem;
            z-index: 25005;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: linear-gradient(135deg,
                    rgba(var(--bg-secondary-rgb), 0.95),
                    rgba(var(--bg-primary-rgb), 0.85));
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid color-mix(in srgb, var(--primary-color) 40%, var(--border-color));
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            cursor: pointer;
        }

        #ai-magic-toggle:hover {
            transform: scale(1.1) rotate(5deg);
            border-color: var(--primary-color);
            box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--primary-color) 50%, transparent);
            background: var(--bg-secondary);
        }

        #ai-magic-toggle:active {
            transform: scale(0.95);
        }

        #ai-magic-toggle svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }

        #ai-magic-toggle:hover svg {
            transform: rotate(-10deg);
        }

        /* ══════════════════════════════════════════════════════════════
           MCQ METADATA — DIFFICULTY, TAGS, PYQ (Top Header)
           ══════════════════════════════════════════════════════════════ */
        /* ── Meta bar container (Top Header) ──────────────────────────── */
        .nk-mcq-meta-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45em;
            margin-top: 0;
            margin-bottom: 0.55em;
            padding: 0;
            border: none;
            pointer-events: none;  /* non-interactive decorations */
            user-select: none;
            -webkit-user-select: none;
            line-height: 1;
        }
        /* ── Shared capsule base style ───────────────────────────────── */
        .nk-mcq-tag-capsule,
        .nk-mcq-pyq-capsule {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35em;
            white-space: nowrap;
            font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
            font-size: 0.62em !important;
            font-weight: 500 !important;
            letter-spacing: 0.02em !important;
            padding: 0.22em 0.72em !important;
            border-radius: 999px !important;
            box-sizing: border-box !important;
            line-height: 1.1 !important;
            border-style: solid !important;
            border-width: 1px !important;
        }

        .nk-mcq-tag-capsule .nk-capsule-text,
        .nk-mcq-pyq-capsule .nk-capsule-text {
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
        }

        /* ── Difficulty circular capsule (emoji/dot only) ───────────── */
        .nk-mcq-difficulty-capsule {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.05em !important;
            height: 1.05em !important;
            min-width: 1.05em !important;
            min-height: 1.05em !important;
            margin-right: 0.15em; /* Proportional gap between dot and first capsule */
            border-radius: 50% !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            line-height: 1 !important;
            vertical-align: middle;
        }

        .nk-mcq-difficulty-capsule .nk-capsule-icon {
            font-size: 0.72em !important;
            line-height: 1 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .nk-capsule-icon {
            font-size: 0.72em;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        /* ── Difficulty capsules ─────────────────────────────────────── */
        .nk-mcq-difficulty-capsule.nk-diff-easy {
            background: rgba(60, 226, 158, 0.12) !important;
            color: #3ce29e !important;
            border: 1.5px solid rgba(60, 226, 158, 0.6) !important;
            box-shadow: 0 0 5px rgba(60, 226, 158, 0.25) !important;
        }
        .nk-mcq-difficulty-capsule.nk-diff-medium {
            background: rgba(255, 159, 67, 0.12) !important;
            color: #ff9f43 !important;
            border: 1.5px solid rgba(255, 159, 67, 0.6) !important;
            box-shadow: 0 0 5px rgba(255, 159, 67, 0.25) !important;
        }
        .nk-mcq-difficulty-capsule.nk-diff-hard {
            background: rgba(255, 82, 82, 0.12) !important;
            color: #ff5252 !important;
            border: 1.5px solid rgba(255, 82, 82, 0.6) !important;
            box-shadow: 0 0 5px rgba(255, 82, 82, 0.25) !important;
        }
        
        /* ── Topic Tag & PYQ Icons inside capsules ──────────────────── */
        .nk-mcq-tag-capsule .nk-tag-icon,
        .nk-mcq-pyq-capsule .nk-pyq-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            font-size: 0.74em;
            line-height: 1;
            opacity: 0.85;
            vertical-align: middle;
            transform: translateY(-0.5px); /* Optical subpixel alignment with text */
        }

        /* ── Default / Light Theme Colors (Unified & Minimal) ────────── */
        .nk-mcq-tag-capsule,
        .nk-mcq-pyq-capsule {
            background: color-mix(in srgb, var(--text-primary) 4%, transparent) !important;
            color: var(--text-secondary) !important;
            border-color: color-mix(in srgb, var(--border-color) 60%, transparent) !important;
        }

        /* ── Dark Theme Colors ───────────────────────────────────────── */
        [data-theme="dark"] .nk-mcq-tag-capsule,
        [data-theme="dark"] .nk-mcq-pyq-capsule {
            background: rgba(255, 255, 255, 0.04) !important;
            color: #94a3b8 !important;
            border-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* ── Sepia Theme Colors ──────────────────────────────────────── */
        [data-theme="sepia"] .nk-mcq-tag-capsule,
        [data-theme="sepia"] .nk-mcq-pyq-capsule {
            background: rgba(92, 64, 51, 0.04) !important;
            color: #5c4033 !important;
            border-color: rgba(92, 64, 51, 0.15) !important;
        }
        
        /* ── Hide meta bar in write mode editor (never show in active editor content) ──────── */
        body.write-mode #article-content .nk-mcq-meta-bar { display: none !important; }

        /* ── Add Option button styling inside the editor ── */
        .nk-mcq-block .nk-mcq-add-option {
            margin-top: 10px;
            margin-left: 0;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            border-radius: 8px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-secondary));
            color: var(--primary-color) !important;
            border: 1px dashed color-mix(in srgb, var(--primary-color) 30%, transparent);
            outline: none;
            box-shadow: none;
        }
        .nk-mcq-block .nk-mcq-add-option:hover {
            background: color-mix(in srgb, var(--primary-color) 15%, var(--bg-secondary));
            border-style: solid;
            border-color: var(--primary-color);
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
        .nk-mcq-block .nk-mcq-add-option:active {
            transform: translateY(0);
        }
        /* ── Study card mode ─────────────────────────────────────────── */
        .study-card-content-box .nk-mcq-meta-bar {
            display: flex !important;
            pointer-events: none;
            margin-top: 8px;
            padding-top: 8px;
        }
        /* ── Focus/Presentation mode ─────────────────────────────────── */
        .focus-mode-overlay .nk-mcq-meta-bar {
            display: flex !important;
            pointer-events: none;
        }
        /* ── Teleprompter sidebar ────────────────────────────────────── */
        #teleprompter-sidebar .nk-mcq-meta-bar {
            display: none; /* Hide in teleprompter for cleanliness */
        }

        /* ── Chart Container: Bounded Responsive Height & Scroll Shield ── */
        .chart-container {
            position: relative;
            width: 100%;
            max-width: 100%;
            height: 340px;
            max-height: 400px;
            margin: 1.25rem 0;
            padding: 1.25rem;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--border-radius-lg, 12px);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 2px 8px rgba(0, 0, 0, 0.02);
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .chart-container canvas {
            width: 100% !important;
            height: 100% !important;
            max-width: 100%;
            display: block;
        }

        @media (max-width: 640px) {
            .chart-container {
                height: 280px;
                padding: 0.85rem;
                margin: 0.9rem 0;
            }
        }