@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/cairo-400.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/cairo-500.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/cairo-600.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/cairo-700.woff2') format('woff2');}
@font-face{font-family:'Cairo';font-style:normal;font-weight:800;font-display:swap;src:url('vendor/fonts/cairo-800.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/roboto-400.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/roboto-500.woff2') format('woff2');}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('vendor/fonts/roboto-700.woff2') format('woff2');}
@font-face{font-family:'Allura';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/allura-400.woff2') format('woff2');}
.fab, .fab-flower { overflow: visible !important; }
        .tooltip::before { content: attr(data-tip) !important; z-index: 10000; }
        .tooltip-tilt-up.tooltip-left::before, .tooltip-tilt-up.tooltip-left::after { top: calc(50% - 10px) !important; }
        .fab-flower .tooltip { --tooltip-offset: 0.52rem !important; }

/* ========================================= */
        /* التنسيقات الأصلية للتيمبلت (بدون أي حذف) */
        /* ========================================= */
        :root {
            --bg-outside: #060e1f;
            --panel: #000000;
            --h1-color: #FFFFFF;
            --h2-color: #B8B8B8;
            --h3-color: #9b59b6;
            --code-bg: #050505;
            --code-text: #e8e8e8;
            --code-border: rgba(255, 255, 255, 0.1);
            --accent-btn: #00ff41;
            --icon-color: #cccccc;
        }

        html,
        body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: var(--bg-outside);
            font-family: 'Roboto', sans-serif;
            font-size: 18px;
            overscroll-behavior: none;
            touch-action: none; /* يمنع أي gesture على الـ frame نفسه */
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .terminal {
            position: relative;
            width: 98vw;
            height: 98vh;
            height: 98dvh;
            border-radius: 25px;
            background: var(--panel);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.05);
            transition: background-color .22s ease;
            will-change: background-color;
            backface-visibility: hidden;
            transform: translateZ(0);
        }

        .bar {
            background: rgba(0, 0, 0, 0.4);
            padding: 4px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: none;
            position: sticky !important;
            top: 0 !important;
            z-index: 1000 !important;
            flex-shrink: 0 !important;
        }

        .bar-right {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* التبديل الجديد */
        .themeToggle {
            color: var(--icon-color);
            width: 1.8em;
            height: 1.8em;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .st-sunMoonThemeToggleBtn {
            position: relative;
            cursor: pointer;
            width: 100%;
            height: 100%;
            display: block;
        }

        .st-sunMoonThemeToggleBtn .themeToggleInput {
            opacity: 0;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: block;
        }

        .st-sunMoonThemeToggleBtn svg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            transition: transform 0.4s ease;
            transform: rotate(40deg);
            pointer-events: none;
            stroke-width: 1.5;
        }

        .st-sunMoonThemeToggleBtn svg .sunMoon {
            transform-origin: center center;
            transition: inherit;
            transform: scale(1);
        }

        .st-sunMoonThemeToggleBtn svg .sunRay {
            transform-origin: center center;
            transform: scale(0);
        }

        .st-sunMoonThemeToggleBtn svg mask>circle {
            transition: transform 0.64s cubic-bezier(0.41, 0.64, 0.32, 1.575);
            transform: translate(0px, 0px);
        }

        .st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg {
            transform: rotate(90deg);
        }

        .st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg mask>circle {
            transform: translate(16px, -3px);
        }

        .st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunMoon {
            transform: scale(0.55);
        }

        .st-sunMoonThemeToggleBtn .themeToggleInput:checked+svg .sunRay {
            animation: showRay1832 0.4s ease 0s 1 forwards;
        }

        @keyframes showRay1832 {
            0% {
                transform: scale(0);
            }

            100% {
                transform: scale(1);
            }
        }

        /* حاوية النقاط الثلاث */
        .window-dots {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .window-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            transition: transform 0.15s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .window-dot.red-dot {
            background: #ff5f57;
            cursor: pointer;
        }

        .window-dot.red-dot:hover {
            transform: scale(1.2);
        }

        .window-dot.red-dot::before,
        .window-dot.red-dot::after {
            content: '';
            position: absolute;
            width: 9px;
            height: 1.5px;
            background-color: black;
            border-radius: 1px;
            opacity: 0;
            transition: opacity 0.15s ease;
        }

        .window-dot.red-dot::before {
            transform: rotate(45deg);
        }

        .window-dot.red-dot::after {
            transform: rotate(-45deg);
        }

        .window-dot.red-dot:hover::before,
        .window-dot.red-dot:hover::after {
            opacity: 1;
        }

        .window-dot.yellow-dot {
            background: #febc2e;
            cursor: pointer;
        }
        
        .window-dot.yellow-dot:hover {
            transform: scale(1.2);
        }

        .window-dot.green-dot {
            background: #28c840;
            cursor: pointer;
        }
        
        .window-dot.green-dot:hover {
            transform: scale(1.2);
        }

        .content {
            flex: 1;
            padding: 25px;
            overflow-y: auto;
            min-height: 0 !important;
            color: #E5E5E5;
            position: relative;
            scroll-behavior: smooth;
            /* REMOVED: -webkit-overflow-scrolling: touch
               ده كان بيحول الـ scroll لـ native iOS layer
               اللي بيتجاهل preventDefault() تماماً ويخرجك من fullscreen */
            content-visibility: auto;
            contain-intrinsic-size: 800px;
            overscroll-behavior-y: contain; /* contain = يمنع الوصول لـ browser chrome */
            touch-action: pan-y;            /* يقول لـ iOS: فقط vertical scroll هنا */
        }

        .content.fade-in {
            animation: fadeIn .16s ease-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(3px);
            }

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

        h1,
        h2,
        h3,
        p {
            margin: 0 !important;
            padding: 0 !important;
            line-height: 1.1;
        }

        h1 {
            font-size: 1.6rem !important;
            font-weight: 700 !important;
            color: var(--h1-color);
        }

        h2 {
            font-size: 1.3rem !important;
            font-weight: 600 !important;
            color: var(--h2-color);
        }

        h3 {
            font-size: 1.1rem !important;
            font-weight: 500 !important;
            color: var(--h3-color);
        }

        .code-container {
            position: relative;
            background: var(--code-bg);
            padding: 12px 20px;
            border-radius: 18px;
            border: 1px solid var(--code-border);
            margin: 10px 0;
            width: fit-content;
            max-width: 85%;
            transition: border-color .15s ease, transform .15s ease;
            transform: translateZ(0);
        }

        .code-container:hover {
            transform: translateY(-1px);
        }

        pre {
            margin: 0;
            white-space: pre-wrap;
            word-break: break-all;
            font-family: 'Roboto', monospace;
            font-size: .95rem;
            max-width: 111ch;
            color: var(--code-text);
        }

        .code-token--keyword { color: #ff4757; }
        .code-token--string { color: #e5a663; }
        .code-token--number { color: #8a9ba8; }
        .code-token--comment { color: #6a6a6a; font-style: italic; }

        .newtons-cradle {
            --uib-size: 50px;
            --uib-speed: 1.2s;
            --uib-color: #474554;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--uib-size);
            height: var(--uib-size);
        }

        .newtons-cradle__dot {
            position: relative;
            display: flex;
            align-items: center;
            height: 100%;
            width: 25%;
            transform-origin: center top;
        }

        .newtons-cradle__dot::after {
            content: '';
            display: block;
            width: 100%;
            height: 25%;
            border-radius: 50%;
            background-color: var(--uib-color);
        }

        .newtons-cradle__dot:first-child { animation: swing var(--uib-speed) linear infinite; }
        .newtons-cradle__dot:last-child { animation: swing2 var(--uib-speed) linear infinite; }

        @keyframes swing {
            0% { transform: rotate(0deg); animation-timing-function: ease-out; }
            25% { transform: rotate(70deg); animation-timing-function: ease-in; }
            50% { transform: rotate(0deg); animation-timing-function: linear; }
        }

        @keyframes swing2 {
            0% { transform: rotate(0deg); animation-timing-function: linear; }
            50% { transform: rotate(0deg); animation-timing-function: ease-out; }
            75% { transform: rotate(-70deg); animation-timing-function: ease-in; }
        }

        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            opacity: 0;
            pointer-events: none;
            transition: opacity .12s ease, transform .12s ease, filter 0.2s, fill 0.2s;
            transform: translateY(-1px);
            will-change: opacity, transform;

            /* Settings from Uiverse & Headings Style Match */
            --color: var(--icon-color, #cccccc);
            --size: 16px;
            font-size: var(--size);
            fill: var(--color);
            background: none;
            border: none;
            padding: 0;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
        }

        .copy-btn:hover {
            fill: #ffffff;
            background: none;
            border: none;
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
        }

        .code-container:hover .copy-btn {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .code-container.show-copy .copy-btn {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        .copy-btn .clipboard {
            position: absolute;
            animation: keyframes-fill .5s;
            width: 1em;
            height: 1em;
        }

        .copy-btn .clipboard-check {
            position: absolute;
            display: none;
            animation: keyframes-fill .5s;
            width: 1em;
            height: 1em;
        }

        /* ------ On check event ------ */
        .copy-btn input:checked ~ .clipboard {
            display: none;
        }

        .copy-btn input:checked ~ .clipboard-check {
            display: block;
            fill: #ffffff; /* Let the checkmark stand out in white */
        }

        /* ------ Hide the default checkbox ------ */
        .copy-btn input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        /* ------ Animation ------ */
        @keyframes keyframes-fill {
            0% {
                transform: rotate(0deg) scale(0);
                opacity: 0;
            }
            50% {
                transform: rotate(-10deg) scale(1.2);
            }
        }

        /* زر العودة للأعلى - سهم فقط */
        #scrollToTopBtn {
            position: absolute;
            bottom: 18px;
            right: 18px;
            background: none;
            border: none;
            outline: none;
            color: var(--icon-color);
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            padding: 10px;
            line-height: 1;
            transition: text-shadow 0.2s ease, transform 0.12s ease;
            z-index: 9999;
            transform: translateZ(0);
            will-change: transform;
            font-family: ui-monospace, 'Cascadia Code', monospace;
            /* إرجاع الخط الأصلي للسهم */
        }

        #scrollToTopBtn:active {
            transform: scale(0.9);
        }

        #scrollToTopBtn:hover {
            text-shadow: 0 0 8px var(--accent-btn), 0 0 16px var(--accent-btn);
        }

        #articleBody,
        #articleBody.article-copy-protected {
            direction: ltr;
            text-align: left;
            -webkit-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
        }

        #articleBody .copy-btn,
        #articleBody .copy-btn * {
            -webkit-user-select: none;
            user-select: none;
        }

        @media print {
            #articleBody {
                display: none !important;
            }
        }

        /* Loading state */
        .loading-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 60%;
            gap: 16px;
            color: var(--h1-color);
            font-family: 'Roboto', sans-serif;
            letter-spacing: 2px;
            opacity: 0.7;
        }

        .loading-spinner {
            width: 32px;
            height: 32px;
            border: 2px solid rgba(0, 255, 65, 0.15);
            border-top-color: var(--h1-color);
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

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

        @media (prefers-reduced-motion: reduce) {
            .content.fade-in {
                animation: none;
            }

            .code-container,
            .copy-btn,
            #scrollToTopBtn {
                transition: none !important;
            }

            .content {
                scroll-behavior: auto;
            }

            .code-container:hover {
                transform: none;
            }

            .copy-btn {
                transform: none;
            }

            .st-sunMoonThemeToggleBtn svg {
                transition: none;
            }

            .st-sunMoonThemeToggleBtn svg mask>circle {
                transition: none;
            }

            .loading-spinner {
                animation: none;
            }
        }

        /* ========================================= */
        /* Tags Feature                              */
        /* ========================================= */
        .tag-icon-btn {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--icon-color);
            width: 2.2em;
            height: 2.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: color 0.2s, background 0.2s;
            padding: 0;
        }

        .tag-icon-btn:hover {
            color: #7a7a7a;
            background: rgba(255, 255, 255, 0.06);
        }

        .tag-icon-btn svg {
            width: 1.3em;
            height: 1.3em;
        }

        .tag-modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.82);
            z-index: 9999;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(6px);
        }

        .tag-modal-overlay.active {
            display: flex;
        }

        .tag-modal {
            background: #0b1120;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 26px 28px;
            width: 90%;
            max-width: 420px;
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 16px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
            font-family: 'Roboto', sans-serif;
        }

        .tag-modal-header {
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 14px;
        }

        .tag-modal-header svg {
            color: #7a7a7a;
        }

        .tag-modal-header h3 {
            margin: 0 !important;
            padding: 0 !important;
            font-size: 1rem;
            color: #7a7a7a;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .tag-modal input,
        .tag-modal textarea {
            width: 100%;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 8px;
            padding: 10px 12px;
            color: #fff;
            font-family: 'Roboto', sans-serif;
            font-size: 0.9rem;
            box-sizing: border-box;
            outline: none;
            transition: border-color 0.2s;
        }

        .tag-modal input::placeholder,
        .tag-modal textarea::placeholder {
            color: #555;
        }

        .tag-modal input:focus,
        .tag-modal textarea:focus {
            border-color: #7a7a7a;
        }

        .tag-modal textarea {
            resize: vertical;
            min-height: 80px;
        }

        .tag-modal-actions {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        .tag-modal-actions button {
            padding: 8px 18px;
            border-radius: 6px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            font-family: 'Roboto', sans-serif;
            font-size: 0.85rem;
            letter-spacing: 1px;
            transition: background 0.2s, color 0.2s;
        }

        .tag-btn-cancel {
            background: transparent;
            color: #888;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
        }

        .tag-btn-cancel:hover {
            background: rgba(255, 255, 255, 0.08) !important;
            color: #fff !important;
        }

        .tag-btn-save {
            background: #7a7a7a;
            color: #000;
        }

        .tag-btn-save:hover {
            filter: brightness(1.15);
        }

        .tag-toast {
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: #050505;
            padding: 12px 24px;
            border-radius: 8px;
            z-index: 10000;
            font-family: 'Roboto', sans-serif;
            font-size: 13px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.2s;
        }

        .tag-toast.show {
            opacity: 1;
        }

        .tag-toast.success {
            color: var(--accent-btn);
            border: 1px solid var(--accent-btn);
            box-shadow: 0 0 15px rgba(0, 255, 65, 0.2);
        }



        /* ========================================= */
        /* Tags Feature                              */
        /* ========================================= */

        .intel-marker {
            position: absolute;
            right: 20px;
            cursor: pointer;
            z-index: 50;
            opacity: 0.7;
            transition: opacity 0.2s ease, transform 0.2s ease;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
            animation: fadeInMarker 0.4s ease-out;
        }
        .intel-marker:hover {
            opacity: 1;
            transform: scale(1.15);
            filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
        }
        @keyframes fadeInMarker {
            from { opacity: 0; transform: translateY(-10px) scale(0.9); }
            to { opacity: 0.7; transform: translateY(0) scale(1); }
        }


        .tag-toast.error {
            color: #ff4d4d;
            border: 1px solid #ff4d4d;
            box-shadow: 0 0 15px rgba(255, 77, 77, 0.2);
        }

        /* ========================================= */
        /* Chic Scrollbar Styling                    */
        /* ========================================= */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        ::-webkit-scrollbar-track {
            background: transparent;
        }
        ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.12);
            border-radius: 10px;
            transition: background 0.3s ease;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        ::-webkit-scrollbar-corner {
            background: transparent;
        }
        ::-webkit-scrollbar-button {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }
        /* ========================================= */
        /* Chapter Plans Bottom Panel                */
        /* ========================================= */
        .plans-panel-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
            backdrop-filter: blur(2px);
        }
        .plans-panel-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .plans-panel {
            position: fixed;
            bottom: -40%;
            left: 0;
            width: 100%;
            height: 35%;
            background: rgba(65, 65, 65, 0.95);
            backdrop-filter: blur(10px);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 10001;
            transition: bottom 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            flex-direction: column;
            color: #fff;
            box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            font-family: 'Roboto', sans-serif;
        }
        .plans-panel.active {
            bottom: 0;
        }
        
        .plans-panel-content {
            flex: 1;
            overflow-y: auto;
            overflow-x: auto;
            padding: 20px 0; /* Reduced to move icons up */
            scroll-snap-type: x mandatory;
            position: relative;
        }

        .timeline-wrapper {
            display: flex;
            flex-direction: row;
            margin: 0 auto;
            padding: 0 30px;
            min-width: 100%;
            width: max-content;
            justify-content: center;
            gap: 0;
            position: relative;
        }

        .timeline-step {
            display: flex;
            flex-direction: column;
            width: 250px;
            position: relative;
            scroll-snap-align: start;
            flex-shrink: 0;
        }

        .timeline-marker {
            display: flex;
            align-items: center;
            width: 100%;
        }

        .marker-icon {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: #111;
            border: 1px solid rgba(255, 255, 255, 0.15);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #aaa;
            flex-shrink: 0;
            z-index: 2;
            transition: color 0.2s, border-color 0.2s;
        }

        .timeline-step:hover .marker-icon {
            color: #ddd; /* Light gray instead of green/blue */
            border-color: rgba(255, 255, 255, 0.3);
            box-shadow: 0 0 10px rgba(255,255,255,0.05);
        }

        .marker-line {
            flex: 1;
            height: 2px;
            background: rgba(255, 255, 255, 0.08);
        }

        .timeline-step:last-child .marker-line {
            background: transparent;
        }

        .timeline-content {
            display: flex;
            flex-direction: column;
            position: relative;
            padding-top: 8px; /* Reduced to stick to icon */
            padding-bottom: 5px;
        }

        .timeline-content::before {
            content: '';
            position: absolute;
            left: 15px; /* middle of 32px icon */
            top: 0;
            bottom: 5px;
            width: 2px;
            background: rgba(255, 255, 255, 0.08);
        }

        .timeline-title {
            font-weight: 600;
            color: #fff;
            font-size: 1.05rem;
            margin-bottom: 4px; /* Reduced gap */
            padding-left: 34px;
            padding-right: 15px;
            position: relative;
            line-height: 1.4;
            letter-spacing: 0.5px;
        }

        .timeline-subs {
            display: flex;
            flex-direction: column;
            gap: 4px; /* Reduced gap so they almost stick together */
        }

        .timeline-sub-item {
            display: flex;
            align-items: flex-start;
            position: relative;
            padding-left: 34px;
            padding-right: 15px;
        }

        .sub-dot {
            position: absolute;
            left: 11px; /* 15px vertical line center - 4px radius = 11px */
            top: 6px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #444;
            z-index: 2;
            transition: background 0.2s, box-shadow 0.2s;
        }

        .timeline-sub-item:hover .sub-dot {
            background: #ccc;
            box-shadow: 0 0 8px rgba(200, 200, 200, 0.3);
        }

        .sub-text {
            color: #888;
            font-size: 0.95rem;
            line-height: 1.4;
            transition: color 0.2s;
        }

        .timeline-sub-item:hover .sub-text {
            color: #e2e8f0;
        }

        #chapterPlansBtn {
            background: none;
            border: none;
            outline: none;
            color: var(--icon-color);
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            width: 1.5em;
            height: 1.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: color 0.2s, background 0.2s, transform 0.12s ease;
            padding: 0;
            font-family: ui-monospace, 'Cascadia Code', monospace;
        }
        #chapterPlansBtn svg {
            width: 20px;
            height: 20px;
            display: block;
        }
        #chapterPlansBtn:active {
            transform: scale(0.9);
        }
        #chapterPlansBtn:hover {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.08);
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }

.article-error {
    color: red;
}

.article-empty {
    color: gray;
    font-family: monospace;
    letter-spacing: 2px;
}

.chapter-page-figure {
    box-shadow: rgba(0, 0, 0, 0.12) 0 1px 3px, rgba(0, 0, 0, 0.24) 0 0 1px;
    transition: all 0.25s ease;
}

.chapter-page-figure.is-current {
    width: 56px;
    height: 56px;
    z-index: 10;
    background: #f4f4f5;
    color: #27272a;
}

.chapter-page-figure.is-other {
    width: 44px;
    height: 44px;
    z-index: 1;
    background: #ffffff;
    color: #a1a1aa;
}

.chapter-page-figure.chapter-page-offset {
    margin-left: -12px;
}

#chapterPagination:hover .chapter-page-figure {
    width: 38px;
    height: 38px;
    z-index: 1;
}

#chapterPagination .chapter-page-figure:hover {
    width: 64px;
    height: 64px;
    z-index: 50;
    background: #f4f4f5;
    color: #27272a;
}



/* ================================================================ */
/* [MULTI-LANGUAGE SWITCHER & RTL STYLING]                         */
/* ================================================================ */
.language-switcher-container {
    position: relative;
    display: inline-block;
    
    /* Base Natural Theme Colors (Light Mode) */
    --nat-background: oklch(1 0 0);
    --nat-foreground: oklch(0.145 0 0);
    --nat-card: oklch(1 0 0);
    --nat-card-foreground: oklch(0.145 0 0);
    --nat-popover: oklch(1 0 0);
    --nat-popover-foreground: oklch(0.145 0 0);
    --nat-primary: oklch(0.205 0 0);
    --nat-primary-foreground: oklch(0.985 0 0);
    --nat-secondary: oklch(0.97 0 0);
    --nat-secondary-foreground: oklch(0.205 0 0);
    --nat-muted: oklch(0.97 0 0);
    --nat-muted-foreground: oklch(0.556 0 0);
    --nat-accent: oklch(0.97 0 0);
    --nat-accent-foreground: oklch(0.205 0 0);
    --nat-destructive: oklch(0.577 0.245 27.325);
    --nat-border: oklch(0.922 0 0);
    --nat-input: oklch(0.922 0 0);
    --nat-ring: oklch(0.708 0 0);
    --nat-radius: 0.625rem;
}

/* Support dark theme based on .dark class, data-theme or prefers-color-scheme */
.dark .language-switcher-container,
[data-theme="0"] .language-switcher-container,
[data-theme="1"] .language-switcher-container,
[data-theme="2"] .language-switcher-container {
    --nat-background: oklch(0.145 0 0);
    --nat-foreground: oklch(0.985 0 0);
    --nat-card: oklch(0.205 0 0);
    --nat-card-foreground: oklch(0.985 0 0);
    --nat-popover: oklch(0.205 0 0);
    --nat-popover-foreground: oklch(0.985 0 0);
    --nat-primary: oklch(0.922 0 0);
    --nat-primary-foreground: oklch(0.205 0 0);
    --nat-secondary: oklch(0.269 0 0);
    --nat-secondary-foreground: oklch(0.985 0 0);
    --nat-muted: oklch(0.269 0 0);
    --nat-muted-foreground: oklch(0.708 0 0);
    --nat-accent: oklch(0.269 0 0);
    --nat-accent-foreground: oklch(0.985 0 0);
    --nat-destructive: oklch(0.704 0.191 22.216);
    --nat-border: oklch(1 0 0 / 10%);
    --nat-input: oklch(1 0 0 / 15%);
    --nat-ring: oklch(0.556 0 0);
}

.lang-switcher-btn {
    background: none;
    border: none;
    outline: none;
    color: var(--icon-color, #ccc);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    width: 1.5em;
    height: 1.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s, transform 0.12s ease;
    padding: 0;
}
.lang-switcher-btn:active {
    transform: scale(0.9);
}
.lang-switcher-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
.lang-switcher-btn svg {
    width: 20px;
    height: 20px;
    display: block;
}
.lang-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--nat-popover);
    border: 1px solid var(--nat-border);
    border-radius: var(--nat-radius);
    min-width: 120px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    display: none;
    flex-direction: column;
    padding: 6px; /* Rhea compact padding */
    animation: fadeInDropdown 0.15s ease-out;
    font-family: var(--font-main);
}
.lang-dropdown-menu.active {
    display: flex;
}
.lang-dropdown-item {
    background: transparent;
    border: none;
    color: var(--nat-muted-foreground);
    padding: 8px 12px; /* Rhea compact padding */
    text-align: center;
    font-size: 0.8rem; /* Rhea typography */
    font-family: var(--font-main);
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    border-radius: calc(var(--nat-radius) - 4px);
}
.lang-dropdown-item:hover {
    background: var(--nat-accent);
    color: var(--nat-accent-foreground);
}
.lang-dropdown-item.active {
    background: var(--nat-secondary);
    color: var(--nat-secondary-foreground);
    font-weight: 600;
}

@keyframes fadeInDropdown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* RTL Support for Arabic Content */
.rtl-content {
    direction: rtl !important;
    text-align: right !important;
    --font-main: 'Cairo', 'Inter', sans-serif !important;
    font-family: var(--font-main) !important;
}
.rtl-content :not(i):not(svg):not(pre):not(code):not([class*="fa-"]) {
    font-family: 'Cairo', 'Roboto', sans-serif !important;
}
.rtl-content pre, .rtl-content code, .rtl-content .copy-btn {
    direction: ltr !important;
    text-align: left !important;
}

/* Article metadata badge */
.article-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 20px;
}

/* Language Tabs in Admin Editor */
.lang-tabs-container {
    display: flex;
    gap: 4px;
    align-items: center;
}
.lang-tab-btn {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #888;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}
.lang-tab-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ccc;
}
.lang-tab-btn.active {
    background: rgba(0, 255, 65, 0.1);
    border-color: rgba(0, 255, 65, 0.3);
    color: #00ff41;
    font-weight: 600;
}
.lang-tab-delete {
    color: #ff5f57;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease;
    font-size: 0.7rem;
    padding: 0 2px;
}
.lang-tab-delete:hover {
    opacity: 1;
}

.chapter-header-rendered {
    margin-bottom: 24px !important;
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.article-context-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    color: #eee;
    font-size: 0.85rem;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.article-context-menu-icon {
    width: 16px;
    height: 16px;
}

.content-fallback {
    margin: 12px 0;
    max-width: 100%;
}

.content-fallback pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: normal;
    line-height: 1.65;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    color: inherit;
    font-family: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.9rem;
}


        /* Custom Colors & Style Rhea (Neutral/Natural Theme) */
        .tag-modal, #commentModalOverlay {
            --background: oklch(1 0 0);
            --foreground: oklch(0.145 0 0);
            --card: oklch(1 0 0);
            --card-foreground: oklch(0.145 0 0);
            --popover: oklch(1 0 0);
            --popover-foreground: oklch(0.145 0 0);
            --primary: oklch(0.205 0 0);
            --primary-foreground: oklch(0.985 0 0);
            --secondary: oklch(0.97 0 0);
            --secondary-foreground: oklch(0.205 0 0);
            --muted: oklch(0.97 0 0);
            --muted-foreground: oklch(0.556 0 0);
            --accent: oklch(0.97 0 0);
            --accent-foreground: oklch(0.205 0 0);
            --destructive: oklch(0.577 0.245 27.325);
            --border: oklch(0.922 0 0);
            --input: oklch(0.922 0 0);
            --ring: oklch(0.708 0 0);
            --radius: 0.625rem;

            font-family: 'Inter', sans-serif !important;
        }

        html[data-theme="0"] .tag-modal,
        html[data-theme="1"] .tag-modal,
        html[data-theme="2"] .tag-modal,
        html[data-theme="0"] #commentModalOverlay,
        html[data-theme="1"] #commentModalOverlay,
        html[data-theme="2"] #commentModalOverlay,
        .dark .tag-modal,
        .dark #commentModalOverlay {
            --background: oklch(0.145 0 0);
            --foreground: oklch(0.985 0 0);
            --card: oklch(0.205 0 0);
            --card-foreground: oklch(0.985 0 0);
            --popover: oklch(0.205 0 0);
            --popover-foreground: oklch(0.985 0 0);
            --primary: oklch(0.922 0 0);
            --primary-foreground: oklch(0.205 0 0);
            --secondary: oklch(0.269 0 0);
            --secondary-foreground: oklch(0.985 0 0);
            --muted: oklch(0.269 0 0);
            --muted-foreground: oklch(0.708 0 0);
            --accent: oklch(0.269 0 0);
            --accent-foreground: oklch(0.985 0 0);
            --destructive: oklch(0.704 0.191 22.216);
            --border: oklch(1 0 0 / 10%);
            --input: oklch(1 0 0 / 15%);
            --ring: oklch(0.556 0 0);
        }

        /* Tag Modal Custom Styling */
        .tag-modal {
            background-color: var(--card) !important;
            color: var(--card-foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
            padding: 24px !important;
            width: 90% !important;
            max-width: 420px !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }

        .tag-modal-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            border-bottom: 1px solid var(--border) !important;
            padding-bottom: 12px !important;
            margin-bottom: 8px !important;
            gap: 8px !important;
        }

        .tag-modal-header h3 {
            font-family: 'Inter', sans-serif !important;
            font-size: 1.1rem !important;
            font-weight: 600 !important;
            color: var(--card-foreground) !important;
            margin: 0 !important;
            flex: 1 !important;
            text-transform: none !important;
            letter-spacing: normal !important;
        }

        .tag-modal input {
            width: 100% !important;
            background-color: var(--input) !important;
            color: var(--foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: calc(var(--radius) - 2px) !important;
            padding: 10px 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.95rem !important;
            outline: none !important;
            transition: border-color 0.2s, box-shadow 0.2s !important;
        }

        .tag-modal input:focus {
            border-color: var(--ring) !important;
            box-shadow: 0 0 0 2px var(--ring) !important;
        }

        .tag-modal textarea {
            width: 100% !important;
            background-color: var(--input) !important;
            color: var(--foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: calc(var(--radius) - 2px) !important;
            padding: 10px 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.95rem !important;
            outline: none !important;
            resize: vertical !important;
            transition: border-color 0.2s, box-shadow 0.2s !important;
        }

        .tag-modal textarea:focus {
            border-color: var(--ring) !important;
            box-shadow: 0 0 0 2px var(--ring) !important;
        }

        /* Direct editable Tag Content Box */
        .view-tag-textarea {
            width: 100% !important;
            min-height: 100px !important;
            background-color: var(--input) !important;
            color: var(--card-foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: calc(var(--radius) - 2px) !important;
            padding: 12px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.95rem !important;
            line-height: 1.5 !important;
            outline: none !important;
            resize: none !important;
            transition: border-color 0.2s, box-shadow 0.2s !important;
        }

        .view-tag-textarea:focus {
            border-color: var(--ring) !important;
            box-shadow: 0 0 0 2px var(--ring) !important;
            background-color: var(--background) !important;
        }

        /* Reposition / Delete / Close buttons in View Tag Modal */
        .tag-modal-header .bsis-181,
        .tag-modal-header .tag-modal-close-btn {
            background: transparent !important;
            border: none !important;
            color: var(--muted-foreground) !important;
            cursor: pointer !important;
            padding: 6px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: calc(var(--radius) - 4px) !important;
            transition: background 0.2s, color 0.2s !important;
        }

        .tag-modal-header .bsis-181:hover,
        .tag-modal-header .tag-modal-close-btn:hover {
            background: var(--accent) !important;
            color: var(--accent-foreground) !important;
        }

        .tag-modal-header .bsis-182 {
            background: transparent !important;
            border: none !important;
            color: var(--destructive) !important;
            cursor: pointer !important;
            padding: 6px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            border-radius: calc(var(--radius) - 4px) !important;
            transition: background 0.2s, filter 0.2s !important;
        }

        .tag-modal-header .bsis-182:hover {
            background: oklch(from var(--destructive) l c h / 10%) !important;
            filter: brightness(1.1) !important;
        }

        .tag-modal-actions {
            display: flex !important;
            justify-content: flex-end !important;
            gap: 10px !important;
            margin-top: 4px !important;
        }

        .tag-btn-cancel {
            background-color: var(--secondary) !important;
            color: var(--secondary-foreground) !important;
            border: 1px solid var(--border) !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: calc(var(--radius) - 2px) !important;
            cursor: pointer !important;
            transition: background-color 0.2s !important;
        }

        .tag-btn-cancel:hover {
            background-color: var(--accent) !important;
        }

        .tag-btn-save {
            background-color: var(--primary) !important;
            color: var(--primary-foreground) !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: calc(var(--radius) - 2px) !important;
            cursor: pointer !important;
            border: none !important;
            transition: opacity 0.2s !important;
        }

        .tag-btn-save:hover {
            opacity: 0.9 !important;
        }

        .tag-btn-delete {
            background-color: var(--destructive) !important;
            color: #ffffff !important;
            font-weight: 500 !important;
            padding: 8px 16px !important;
            border-radius: calc(var(--radius) - 2px) !important;
            cursor: pointer !important;
            border: none !important;
            transition: opacity 0.2s !important;
        }

        .tag-btn-delete:hover {
            opacity: 0.9 !important;
        }

        /* Comment Modal/Box Custom Styling */
        .comment-modal-container {
            background-color: var(--card) !important;
            color: var(--card-foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: var(--radius) !important;
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4) !important;
            padding: 20px !important;
            font-family: 'Inter', sans-serif !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 12px !important;
        }

        #commentMessageInput {
            background-color: var(--input) !important;
            color: var(--foreground) !important;
            border: 1px solid var(--border) !important;
            border-radius: calc(var(--radius) - 2px) !important;
            padding: 12px 48px 12px 14px !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.95rem !important;
            width: 100% !important;
            outline: none !important;
            box-sizing: border-box !important;
            transition: border-color 0.2s, box-shadow 0.2s !important;
        }

        #commentMessageInput:focus {
            border-color: var(--ring) !important;
            box-shadow: 0 0 0 2px var(--ring) !important;
        }

        #commentModalOverlay button[data-bs-click="saveCommentAction()"] {
            background-color: var(--primary) !important;
            color: var(--primary-foreground) !important;
            border-radius: calc(var(--radius) - 4px) !important;
            border: none !important;
            padding: 6px 12px !important;
            transition: opacity 0.2s !important;
        }

        #commentModalOverlay button[data-bs-click="saveCommentAction()"]:hover {
            opacity: 0.9 !important;
        }

        #commentModalOverlay button[data-bs-click="closeCommentModal()"] {
            color: var(--muted-foreground) !important;
            font-family: 'Inter', sans-serif !important;
            font-size: 0.8rem !important;
            text-transform: uppercase !important;
            letter-spacing: 0.05em !important;
            background: none !important;
            border: none !important;
            cursor: pointer !important;
            transition: color 0.2s !important;
        }

        #commentModalOverlay button[data-bs-click="closeCommentModal()"]:hover {
            color: var(--foreground) !important;
        }

/* Accessibility: visually-hidden skip link (screen-reader only) */
.bs-skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* FAB flicker fix: keep flower actions hidden from first paint (before async daisyui-fab.css @layer rules load), while preserving the focus-within reveal. Unlayered rules win over daisyui's @layer rules, so BOTH states must be declared here. */
.fab > :nth-child(n+2) {
  opacity: 0;
  visibility: hidden;
}
.fab:focus-within > :nth-child(n+2) {
  opacity: 1;
  visibility: visible;
}