/* --- PASTE THE CSS BELOW INTO A NEW FILE: sutras.css --- */
        
        /* 1. ROOT VARIABLES (MATCHING DASHBOARD) */
        :root {
            --background: #0D0D0D;
            --primary: #A67B5B;
            --highlight: #C89F7B;
            --secondary: #555555;
            --mystic2: #00FF7F; /* Neon Green for Sanskrit */
            --panel-bg: #111111;
            --border-color: #333;
        }

         /* New Column Wrapper Style */
    .dashboard-column {
        display: flex;
        flex-direction: column;
        /* This is your new VERTICAL gap between modules */
        gap: 0.75rem; 
    }

    .module {
        border: 1px dashed var(--primary); padding: 0.6rem 0.8rem; 
        opacity: 0; transform: translateY(10px);

        /* --- THIS IS THE LOAD-IN TRANSITION --- */
        /* It only runs once when .visible is added */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;

        position: relative; background-color: var(--background);
    }
    .module.visible { 
        opacity: 1; 
        transform: translateY(0); 
        
        /*          * This is the master transition rule we had.
         * It will conflict, but we are accepting that for now
         * to get the animation back.
        */
        transition: 
            box-shadow 0.3s ease-in-out,
            transform 2s ease-out, 
            filter 3s ease-out,
            color 2s ease, 
            background-color 2s ease;
    }

    .module-title {
        font-size: 0.8em; font-weight: 500; color: var(--secondary);
        margin: 0 0 0.6rem 0; padding-bottom: 0.4rem; 
        border-bottom: 1px dashed var(--secondary);
        white-space: nowrap; text-transform: uppercase;
        transition: opacity 0.3s ease-out, transform 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out; 
        position: relative;
        z-index: 5; /* Puts it on top of the content */
    }
    .module-content { font-size: 0.9em; } 
    .module-content p { margin: 0.3rem 0; }
    .sub-text { color: var(--secondary); font-size: 0.85em; } 

        body {
            background-color: var(--background);
            color: var(--soft-white);
            font-family: 'Source Code Pro', monospace;
            font-size: 14px;
            margin: 0;
            height: 100vh;
            /* 1. Add Padding to frame the whole interface */
            padding: 1rem; 
            box-sizing: border-box; /* Ensure padding doesn't break 100vh */
            /* --- VERTICAL CENTERING --- */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Centers the IDE vertically */
        }

        /* --- 2. IDE LAYOUT GRID --- */
        .ide-container {
            display: grid;
            grid-template-columns: 280px 1fr 280px; 
    
            /* --- LOCKED DIMENSIONS --- */
            width: 100%;
            max-width: 1300px;
            height: 100%; 
            max-height: 803px; /* Prevents stretching on huge screens */
            margin: 0 auto;
            overflow: hidden;
            gap: 0.75rem; 
    
            /* Optional: Subtle shadow to make it float */
            /* box-shadow: 0 0 50px rgba(0,0,0,0.5); */
        }

        /* --- RIGHT SIDEBAR (Column 3) --- */
        .ide-sidebar-right {
            /* It's a flex container for modules, not a module itself */
            display: flex;
            flex-direction: column;
            gap: 0.75rem; /* Matches the grid gap */
            overflow-y: auto;
        }

        /* Define the "Mini Modules" for the right column */
        .right-module {
            border: 1px dashed var(--primary);
            background-color: var(--background);
            padding: 0; /* Padding handled by content/header */
    
            /* Flex setup for internal layout */
            display: flex;
            flex-direction: column;
    
            /* Default to sharing space, but we can set fixed heights */
            flex-grow: 1; 
            min-height: 10em; /* Minimum size for placeholders */
        }

        /* Header for right modules */
        .right-module-header {
            padding: 0.6rem 0;
            margin: 0 0.8rem;
            border-bottom: 1px dashed var(--secondary);
            font-size: 0.8em;
            font-weight: 500;
            color: var(--secondary);
            text-transform: uppercase;
        }

        /* Content for right modules */
        .right-module-content {
            padding: 1rem;
            font-size: 0.9em;
            overflow-y: auto;
        }



        /* --- Root Sutra Module --- */
        /* 1. Container Layout */
        #root-sutra-module {
            /* Match the column width exactly (280px) */
            height: 256px;
            min-height: 256px;
            max-height: 256px;
    
            /* Ensure borders don't add to the size */
            box-sizing: border-box; 
    
            flex-grow: 0; 
            display: flex;
            flex-direction: column;
        }

        #root-sutra-module .right-module-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center; /* Center looks best for a "Quote" */
            padding: 1.5rem 1rem;
            flex-grow: 1; /* Ensures content fills the square height */
        }

        /* 2. Typography Hierachy */
        .root-sanskrit {
            font-family: 'Noto Sans Devanagari', sans-serif;
            font-size: 2.2em;
            color: var(--highlight); /* Amber/Gold */
            margin: 0;
            margin-bottom: 1.5rem; /* Tight spacing to Roman */
            line-height: 1.3;
        }

        .root-roman {
            font-family: 'Source Code Pro', monospace;
            font-size: 1.2em;
            color: var(--soft-white); /* Light Brown */
            margin: 0;
            margin-bottom: 2rem; /* Standard spacing to Translation */
        }

        .root-translation {
            font-family: 'Source Code Pro', monospace;
            font-size: 0.85em;
            color: var(--primary); /* bronze */
            font-style: italic;
            margin: 0;
            margin-top: 0; /* Little extra space before translation */
        }

        /* --- Middle Module: System Links (Flexible) --- */
        #system-links-module {
            flex-grow: 1; /* This fills the space */
            min-height: 0; /* Failsafe */
            display: flex;
            flex-direction: column;
        }

        /* Ensure content scrolls if there are too many links */
        #system-links-module .right-module-content {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            padding: 1rem; /* Breathing room */
        }

        /* --- Bottom Module: System ID (Fixed) --- */
        #system-id-module {
            flex-grow: 0; /* Stop growing */
    
            /* Fixed Height (Adjust this to fit your logo perfectly) */
            min-height: 14em; 
            max-height: 14em;
    
            display: flex;
            flex-direction: column;
        }

        /* --- Center the System ID Logo --- */
        .system-id-link .right-module-content {
            /* Turn on Flexbox Centering */
            display: flex;
            justify-content: center; /* Horizontal Center */
            align-items: center;     /* Vertical Center */
    
            /* Ensure it takes up the full height of the module so vertical centering works */
            flex-grow: 1; 
            height: 100%;
            padding: 0; /* Remove padding so it's perfectly centered */
        }


        /* --- Graphic Logo Alignment (replaces .lv8-mini-logo) --- */
        /* --- Graphic Logo Alignment & Glow --- */
        .sys-logo-img {
            max-width: 85%;       
            max-height: 10em;     
            width: auto;
            height: auto;
            display: block;
            
            /* --- THE STATIC GLOW --- */
            /* This creates a soft, ambient light behind the transparent pixels */
            filter: drop-shadow(0 0 5px var(--primary));
            
            /* NOTE: If using var(--primary) makes the glow too intense or solid, 
            swap it for a custom rgba value to lower the opacity, like this:
            filter: drop-shadow(0 0 15px rgba(166, 123, 91, 0.4)); */
        }

        /* --- System Link Styling --- */
        .feedback-link {
         /* 1. Stack them vertically */
            display: block; 
    
            /* 2. Remove default underline */
            text-decoration: none;
    
            /* 3. Apply System Colors */
            color: var(--highlight); /* Brown/Gold Base */
    
            /* 4. Spacing & Typography */
            font-size: 0.9em;
            margin-bottom: 0.5rem; /* Adds space between links */
            transition: color 0.2s ease;
        }

        .feedback-link:hover {
            background-color: var(--mystic2); 
            color: #000000; 
                
            /* The Structure */
            border-radius: 2px;
            text-decoration: none;
                
            /* Optional: A subtle glow to make it feel like a light source */
            box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
            border-color: var(--mystic2);
            cursor: pointer;
        }

        .ide-sidebar {
            /* 3. Full Module Styling */
            border: 1px dashed var(--primary); /* Full border */
            background-color: var(--background); /* Match dashboard BG */
            display: flex;
            flex-direction: column;
            box-sizing: border-box; /* Keeps the border inside the 100% height */
            overflow-y: auto;
    
            /* Add internal padding for the content */
            padding: 0; 
        }

        .sidebar-header {
            /* Match module-title typography */
            font-size: 0.8em; 
            font-weight: 500; 
            color: var(--secondary);
            text-transform: uppercase;
    
            /* Match module-title spacing */
            padding: 0.6rem 0.8rem; 
            /* This pulls the whole box (and the line) in from the edges */
            margin: 0 0.8rem;
            border-bottom: 1px dashed var(--secondary);
    
            /* Create the Left/Right split */
            display: flex;
            justify-content: space-between;
            cursor: pointer;
        }

        .sidebar-header:hover {
            color: var(--highlight);
        }

        .file-tree {
            list-style: none;
            /* This pulls the list items (and their borders) away from the edge */
            padding: 0 0.8rem;
            margin: 0;
        }

        .file-item {
            padding: 0.5rem 1rem;
            cursor: pointer;
            /* Use the secondary dashed style for list items */
            border-bottom: 1px dashed var(--secondary); 
            transition: background 0.2s, color 0.2s;
            font-size: 0.8em;
            color: var(--soft-white); /* Default to secondary color */
}

.file-item:hover {
    color: var(--mystic2); /* Text glows green */
    background-color: rgba(0, 255, 127, 0.05); /* Faint green terminal wash */
}

.file-item.active {
    /* Match the dashboard 'active' feel */
    background-color: transparent;
    color: var(--highlight);
    font-weight: bold;
    border-left: 3px solid var(--highlight); /* Keep this distinct mark */
}

        /* --- 4. MAIN STAGE --- */
        .ide-main {
            /* No border, no background - just a transparent container */
            border: none;
            background-color: transparent;
    
            display: flex;
            flex-direction: column;
            height: 100%;
            overflow-y: hidden; /* Inner .code-block handles scrolling */
            position: relative;
        }

        /* Top Toolbar */
        .ide-toolbar {
            /* Match spacing */
            padding: 0.6rem 0.8rem;
            border-bottom: 1px dashed var(--secondary);
            background-color: var(--background);
            /* --- ADD SIDE MARGINS --- */
            margin: 0 0.8rem;
    
            /* Flex spacing */
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
    
            /* Typography matches title */
            font-size: 0.8em; 
            font-weight: 500;
            color: var(--secondary);
            text-transform: uppercase;
        }

        .status-line { color: var(--secondary); }
        .nav-controls { display: flex; gap: 1rem; align-items: center; }
        
        .nav-btn {
            cursor: pointer;
            color: var(--secondary); /* <-- UPDATED */
            user-select: none;
            transition: color 0.2s ease; /* Optional: Adds a smooth fade */

            /* 2. Turn the button into a Flex Container */
            display: inline-flex; 
    
            /* 3. Center the text/icon strictly in the middle */
            align-items: center; 
            justify-content: center;
    
            /* 4. Kill standard line-height so the box hugs the text */
            line-height: 1;
        }
        .nav-btn:hover { 
            background-color: var(--mystic2); 
            color: #000000 !important; 
                
            /* The Structure */
            border-radius: 2px;
            text-decoration: none;
                
            /* Optional: A subtle glow to make it feel like a light source */
            box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
            border-color: var(--mystic2);
            cursor: pointer;
        }

        /* Content Area */
        .code-block {
            /* 1. Expand to fill the column */
            width: 100%;
            max-width: none; /* <-- REMOVED LIMIT */
            margin: 0;
            padding: 0; /* Keep inner breathing room */
            box-sizing: border-box;

            /* Change alignment to start (Left) */
            align-items: stretch; /* Let boxes fill width */
            text-align: left;     /* <-- UPDATED */
    
            /* 2. Layout Engine */
            display: flex;
            flex-direction: column;
            gap: 0.75rem; /* Consistent vertical rhythm */

            /* Ensure it fills the height so flex-grow works */
            height: 100%; 
            overflow: hidden; /* Prevent outer scrolling */
        }

        /* --- Module Specific Layouts --- */

        /* Syntax Module (Stays Compact) */
        #syntax-module {
            flex-grow: 0;
            min-height: auto;
            display: flex;
            flex-direction: column;
        }

        /* Purport Module (Fills Space) */
        #purport-module {
            flex-grow: 1; /* Takes all remaining height */
            min-height: 0; /* Flexbox failsafe */
            display: flex;
            flex-direction: column;
        }

        /* --- Purport Specific Overrides --- */
        #purport-module .fold-content {
            display: block !important; /* Never hide via display:none */
            height: auto;
            flex-grow: 1;
            opacity: 1; /* The container is visible... */
        }

        /* --- Purport Animation States --- */

        #purport-display {
            /* 1. BASE STATE: Hidden and Cold */
            opacity: 0; 
            color: var(--soft-white); /* Start as a dim light */
            text-shadow: none;
    
            /* 2. TRANSITIONS: 
            Opacity takes 1.5s (Fade In).
            Color/Shadow takes 3s (Cool Down).
            */
            transition: opacity 1.5s ease-in, color 3s ease-out, text-shadow 3s ease-out;

            /* Layout */
            padding: 1rem;
            overflow-y: auto;
            flex-grow: 1;
        }

        /* 2. VISIBLE STATE: Just handles appearing */
        #purport-display.visible {
            opacity: 1;
        }

        /* 3. HOT STATE: Glowing Gold */
        #purport-display.hot {
            color: var(--highlight);
            text-shadow: 0 0 10px var(--highlight);
        }

        /* 4. INSTANT RESET CLASS (Crucial for the bug) */
        #purport-display.reset-animation {
            transition: none !important; /* Kill animations instantly */
            opacity: 0 !important;
        }

        /* The Button Style */
        .module-refresh-btn {
            color: var(--secondary);
            cursor: pointer;
            display: inline-block; /* Required for transform */
    
            /* Use a fast (0.1s) transition for the transform so it feels snappy */
            transition: color 0.3s ease, transform 0.1s ease; 
        }

        .module-refresh-btn:hover {
            color: var(--highlight);
        }

        .module-refresh-btn:active {
            /* The "Keypress" Effect (FIXED) */
            /* Shrinks slightly instead of rotating */
            transform: scale(0.96); 
        }   

        /* --- 5. SUTRA ELEMENTS --- */
        
        /* --- 1. Source Code Container (The Box) --- */
        .sanskrit-display {
            /* Border & Background */
            border: 1px dashed var(--primary);
            /* background-color: rgba(200, 159, 123, 0.03); (slight gold shade) */
    
            /* Layout */
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            text-align: left;
            position: relative;

            /* --- THE FIX --- */
            /* Ensure the box itself is always visible */
            opacity: 1; 
            transition: none; 
        }

        /* --- 2. The Header --- */
        .source-header {
            font-size: 0.8em;
            font-weight: 500;
            color: var(--secondary);
            text-transform: uppercase;
            padding: 0.6rem 0;
            margin: 0 0.75rem;
            border-bottom: 1px dashed var(--secondary);
            /* --- ADD FLEXBOX FOR LAYOUT --- */
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* --- 3. The Content Wrapper --- */
        .source-content {
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* --- Animation Utilities --- */
        .no-transition {
            transition: none !important;
        }

        /* --- 4. The Sanskrit Text (Animated by JS) --- */
        #sanskrit-text {
            font-family: 'Noto Sans Devanagari', sans-serif;
            font-size: 2em;
            line-height: 1.2;
    
            /* Base State (Cold/Stable) */
            color: var(--highlight); /* Stays highlight, but we'll animate shadow */
            text-shadow: none;
            opacity: 0;
    
            /* Animate Opacity and Shadow */
            transition: opacity 1s ease-in, text-shadow 1s ease-out;
        }

        /* The "Hot" State for Sanskrit */
        #sanskrit-text.hot {
            /* Intense glow during fade-in */
            text-shadow: 0 0 20px var(--highlight), 0 0 40px var(--primary);
        }

        .source-divider {
            border-bottom: 1px dashed var(--secondary);
            opacity: 0.5;
            width: 100%;
        }

        /* Romanized (Transliteration) */
        .roman-display {
            font-size: 1.2em;
            font-family: 'Source Code Pro', monospace;
            color: var(--soft-white);
            min-height: 1.5em;
    
            /* Reset previous box styles */
            border: none;
            padding: 0;
            margin: 0;
            text-align: left;
        }

        /* Syntax & Purport (Foldable Sections) */
        .foldable-section {
            /* Inherit the exact module style */
            border: 1px dashed var(--primary); 
            padding: 0.6rem 0.8rem;
            margin-bottom: 0;
            position: relative;
            background-color: var(--background);
        }

        .fold-header {
            /* Match .module-title style exactly */
            font-size: 0.8em; 
            font-weight: 500; 
            color: var(--secondary);
            padding-bottom: 0.4rem; 
            margin-bottom: 0.5rem;
            border-bottom: 1px dashed var(--secondary);
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            transition: color 0.3s ease;
        }
        .fold-header:hover { color: var(--highlight); }

        .fold-content {
            padding: 1rem;
            display: none; /* Hidden by default */
            font-size: 0.9em;
            line-height: 1.6;
        }
        .fold-content.open { display: block; }

        /* --- Generic Accordion Logic (For Syntax) --- */

        /* 1. Default State: Closed */
        .fold-content {
            display: none; 
            padding: 1rem;
            /* Optional: Add a top border when open to separate from header */
            /* border-top: 1px dashed var(--secondary); */
        }

        /* 2. Active State: Open */
        /* The JS adds this class when you click [+] */
        .fold-content.open {
            display: block;
            /* Add a subtle slide/fade for polish */
            animation: accordionFade 0.3s ease-out;
        }

        /* Simple fade animation for the opening */
        @keyframes accordionFade {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

       /* --- New Syntax Flow Styles --- */
        .syntax-flow {
            /* Standard text block formatting */
            display: block;
            font-size: 0.95em;
            line-height: 1.8; /* Extra height for readability */
            color: var(--primary);
        }

        /* The Sanskrit Word */
        .syntax-word {
            color: var(--highlight); /* Amber/Gold */
            font-weight: 700; /* Bold to stand out */
        }

        /* The English Definition */
        .syntax-meaning {
            color: var(--soft-white); /* Slightly dimmer to separate from Sanskrit */
        }

        /* The Separator (—) and Delimiter (;) */
        .syntax-separator {
            color: var(--secondary);
            opacity: 0.6;
            margin: 0 0.3rem;
        }

        /* 1. The Container (The visible border) */
        .translation-box {
            background-color: transparent;
            border: 1px dashed var(--primary);
            margin: 0;
    
            /* Remove padding here so we can control header/content separately */
            padding: 0; 
    
            display: flex;
            flex-direction: column;
        }

        /* 2. The Header (With the gap logic) */
        .translation-header {
            font-size: 0.8em;
            font-weight: 500;
            color: var(--secondary);
            text-transform: uppercase;
    
            /* Vertical spacing */
            padding: 0.6rem 0;
    
            /* Horizontal Margin creates the 0.75rem gap from the edges */
            margin: 0 0.75rem; 
    
            /* The divider line */
            border-bottom: 1px dashed var(--secondary);
        }

        /* 3. The Content (Where the text types) */
        #translation-display {
            /* This moves the text padding to the inner element */
            padding: 1.5rem; 
            font-size: 1em;
            line-height: 1.6;
            color: var(--highlight);
            text-align: left;
        }

        /* --- 6. CURSOR ANIMATION --- */
        .cursor {
            display: inline-block;
            width: 8px;
            height: 1em;
            background-color: var(--highlight);
            animation: blink 1s steps(2) infinite;
            vertical-align: middle;
            box-shadow: 0 0 5px var(--highlight); /* Glowing cursor */
        }

        /* --- Torchlight Typing Effect --- */
        .typing-active {
            color: var(--highlight) !important;
            text-shadow: 0 0 5px var(--highlight);
            transition: color 0.5s ease, text-shadow 0.5s ease;
        }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

        /* --- SECONDARY LINK STYLE --- */
        .link-secondary {
            color: var(--secondary) !important; /* Grey base */
            /* THE FIX: Pushes this link to the very bottom of the flex container */
            margin-top: auto !important; 
    
            /* Optional: Add a little extra top breathing room */
            padding-top: 0;
        }

        /* Optional: Ensure it still glows gold on hover */
        .link-secondary:hover {
            background-color: var(--mystic2); 
            color: #000000 !important; 
                
            /* The Structure */
            border-radius: 2px;
            text-decoration: none;
                
            /* Optional: A subtle glow to make it feel like a light source */
            box-shadow: 0 0 10px rgba(0, 255, 127, 0.5);
            border-color: var(--mystic2);
            cursor: pointer;
        }

/* =========================================
   MOBILE RESPONSIVE VIEW (Max-Width: 768px)
   ========================================= */
@media (max-width: 768px) {
    /* UNIVERSAL SAFETY LOCK */
    * {box-sizing: border-box;}

    /* --- 1. GLOBAL LAYOUT RESET --- */
    body {
        height: auto;
        
        /* MATCH DASHBOARD: Put padding back on Body */
        padding: 0.2rem !important;
        
        display: block;
        overflow-x: hidden;
        width: 100%;
        box-sizing: border-box;
    }

    /* --- 1. GLOBAL LAYOUT RESET --- */
    .ide-container {
        /* SWITCH TO GRID (Matches Dashboard Logic) */
        display: grid !important;
        grid-template-columns: 100% !important; /* Creates a strict fence */
        
        /* FIX: Kill the 803px Desktop Limit */
        max-height: none !important;

        height: auto !important;
        overflow: visible !important;

        /* Standard Layout Settings */
        width: 100%;
        
        margin: 0;
        gap: 0;
        
        /* Move padding here to create the "Safe Area" */
        padding: 0.2rem; 
        box-sizing: border-box;
    }

   /* --- 2. MODULE CONTAINERS --- */
    .sanskrit-display,
    .foldable-section,
    .translation-box,
    .ide-sidebar,
    .right-module,
    #system-id-module {
        /* GRID FIX: Fill the grid cell exactly */
        width: 100% !important;
        min-width: 0 !important; /* Critical for Safari */
        
        /* Keep your spacing */
        margin: 0 0 0.75rem 0; 
        
        /* Reset Desktop styles */
        padding: 0; 
        min-height: auto;
        height: auto;

        /* Visuals */
        /* OPTION A: Full Box */
        /* border: 1px dashed var(--primary);   */
        /* OPTION B: Bottom Line Only (Transparent sides keep the spacing) */
        border: 1px dashed transparent; 
        border-bottom-color: var(--primary);


        box-sizing: border-box; 
        border-radius: 0;
    }

    /* --- 3. HEADERS & SECONDARY LINES (Requirement #2 & #4) --- */
    /* Strategy: Restore secondary border. Add 0.5rem padding so the line 
       and text start slightly inward, not at the screen edge. */
    .sidebar-header,
    .right-module-header,
    .module-title,
    .fold-header,
    .source-header,
    .translation-header {
        /* REQ #2: Restore the secondary dashed line */
        border-bottom: 1px dashed var(--secondary);
        
        /* 2. Remove padding so text aligns with the start of the line */
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* UPDATE: Change 0.6rem to 0.75rem (Top/Bottom) */
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        
        margin: 0 0.5rem !important;
        width: auto; /* Let padding control the width */
        text-align: left;
    }

    /* --- 4. MAIN CONTENT ADJUSTMENTS --- */
    .ide-main { 
        order: 1; 
        /* Force the container to respect the screen width */
        min-width: 0 !important;
        width: 100% !important;

        /* FIX: Unlock the height so it grows with the animation */
        height: auto !important; 
        min-height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure the inner block acts as a stack */
    .code-block {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0; /* We rely on module margins */
    }

    /* REQ #3: Hide the divider between Sanskrit and Roman */
    .source-divider {
        display: none;
    }

    /* Sanskrit Hero Text */
    .source-content {
        text-align: center;
        padding: 1.5rem 0.5rem 1.5rem 0.5rem; /* Top padding for visual balance */
    }
    #sanskrit-text {
        font-size: 2.2em;
        padding: 0 0.5rem;
    }
    .roman-display {
        text-align: center;
        padding: 0.5rem;
    }

    /* Readability Sections */
    .fold-content, 
    #translation-display {
        font-size: 0.9em;
        line-height: 1.6;
        /* Add the 0.5rem padding to the text content too */
        padding: 1rem 0.5rem; 
    }

    /* --- 5. NAVIGATION & SIDEBARS --- */
    
    /* Toolbar: Needs to match Header Alignment */
    .ide-toolbar {
        padding: 0.75rem 0.5rem; /* Matches header padding */
        margin: 0;
        border: none;
        border-bottom: 1px dashed var(--primary);
        position: sticky;
        top: 0;
        background-color: var(--background);
        z-index: 100;
    }

    /* Left Sidebar (File Index) */
    .ide-sidebar { 
        order: 2; 
        
        /* 1. REMOVE the fixed height/overflow hacks */
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        
        /* 2. Keep the Grid Constraints */
        width: 100% !important;
        min-width: 0 !important;
    }
    .ide-sidebar.open {
        max-height: none !important;
        border-bottom: 2px solid var(--highlight);
    }

    /* 2. Show the list when the Sidebar is Open */
    .ide-sidebar.open .file-tree {
        display: block;
        /* Uses the same fade animation as your Syntax module */
        animation: accordionFade 0.3s ease-out;
    }

    /* Right Sidebar (Bottom Stack) */
    .ide-sidebar-right { 
        order: 3; 
        padding-bottom: 2rem;
        
        /* ADD: Safari Grid Constraints */
        width: 100% !important;
        min-width: 0 !important;
        
        /* CHANGE: Use block instead of flex for the container */
        /* This stops it from trying to be a flexible wrapper */
        display: block !important; 
        gap: 0;
    }

    /* Hide Root Sutra (Space saving) */
    #root-sutra-module { display: none; }

    /* System ID (Bottom Logo) */
    #system-id-module {
        margin-top: 0;
    }
    #system-id-module .right-module-content {
        padding: 2rem 0;
        display: flex;
        justify-content: center;
    }

    /* Thumb Buttons */
    .nav-controls { gap: 1.5rem; }
    .nav-btn { font-size: 1.4em; padding: 0.5rem; }

    /* FIX: Change Source Header line to Primary */
    .source-header {
        border-bottom: 1px dashed var(--secondary) !important;
    }

    /* FIX: Force the secondary border to appear on Var Definitions */
    .fold-header,
    .sidebar-header {
        /* Ensure the line exists */
        border-bottom: 1px dashed var(--secondary) !important;
        
        /* Add spacing underneath the line so it doesn't merge with the container border */
        margin-bottom: 1rem !important; 
    }

    /* =========================================
       ACTIVE STATE ANIMATIONS (CLEANED)
       Goal: Full Highlight Border (Inset handled by Body Padding)
       ========================================= */

    /* 1. SIDEBAR OPEN STATE */
    .ide-sidebar.open {
        width: 100%;
        /* Just keep the standard bottom gap */
        margin: 0 0 0.75rem 0 !important; 
        
        border: 1px dashed var(--highlight) !important;
        box-sizing: border-box; 
    }

    /* 2. SYNTAX MODULE OPEN STATE */
    #syntax-module:has(.fold-content.open) {
        width: 100%;
        /* Just keep the standard bottom gap */
        margin: 0 0 0.75rem 0 !important; 
        
        border: 1px dashed var(--highlight) !important;
        box-sizing: border-box;
    }
    /* --- FIX: Syntax Module Internal Spacing --- */

    /* 1. Space below the Secondary Dashed Line (Header) */
    #syntax-module .fold-header {
        /* This pushes the text content away from the line */
        margin-bottom: 1rem !important; 
    }

    /* 2. Space above/below the Main Syntax Text */
    #syntax-module .fold-content {
        /* Adds EXTRA space on top of the header margin */
        padding-top: 0 !important; 
        
        /* Space between Text and the Bottom Gold Border */
        padding-bottom: 1rem !important; 
    }

    /* --- FIX: Purport Module Internal Spacing --- */

    /* 1. Space below the [// DOC_STRING] line */
    #purport-module .fold-header {
        margin-bottom: 1rem !important; 
    }

    /* 2. Space around the Purport text */
    #purport-display {
        /* Remove top padding so we rely on the header margin */
        padding-top: 0 !important;
        
        /* Space between Text and the Bottom Gold Border */
        padding-bottom: 1rem !important;
    }

    /* --- FIX: File Index Internal Spacing --- */

    /* 1. Space below the [// FILE_INDEX] line */
    .ide-sidebar .sidebar-header {
        margin-bottom: 1rem !important;
    }

    /* --- FIX: System ID Internal Spacing --- */

    /* 1. Space below the [// SYS_ID] line */
    #system-id-module .right-module-header {
        margin-bottom: 2rem !important;
    }

    /* 2. Space around the Logo */
    #system-id-module .right-module-content {
        /* Remove top padding, rely on header margin */
        padding-top: 0 !important;
        
        /* Space between Logo and the Bottom Gold Border */
        padding-bottom: 2rem !important;
    }
    /* FIX: Restore the bottom border for the System ID Module */
    #system-id-module {
        /* Turn the gold dashed line back on */
        border-bottom: 1px dashed var(--primary) !important;
        
        /* Add the standard gap below it (so it doesn't touch the browser bottom edge) */
        margin-bottom: 0.2rem !important;
    }

    /* FIX: Make all interactive buttons Gold (Highlight) on Mobile */
    .nav-btn,
    .toggle-icon {
        color: var(--highlight) !important;
        
        /* Optional: Make them slightly bolder so the color pops */
        /* font-weight: 700; */
    }

    /* FIX: Remove scrollbar from System ID and force full height */
    #system-id-module .right-module-content {
        overflow: visible !important; /* Disable the scrollbar */
        height: auto !important;      /* Force the box to grow to fit the logo */
        display: block !important;    /* Ensure it behaves like a standard block */
    }

    /* FIX: Center the ASCII Logo */
    #system-id-module .right-module-content {
        /* Ensure the parent tries to center its children */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
    }

    

    /* FIX: Prevent Text Blowout (Missing Borders) */
    #sanskrit-text, 
    .root-sanskrit, 
    .roman-display,
    .fold-content,
    #translation-display {
        /* Force long words to break if they hit the edge */
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        
        /* Ensure they never exceed the container width */
        max-width: 100%;
    }

    /* =========================================
       FINAL TEXT ALIGNMENT FIX
       Goal: Match Purport's 1rem indentation everywhere
       ========================================= */

    #syntax-module .fold-content,
    #translation-display,
    .file-tree,
    #system-id-module .right-module-content {
        /* Increase side padding from 0.5rem to 1rem */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* --- UNIFIED FILE TREE STYLE --- */
    .file-tree {
        /* 1. LOGIC: Hide the list by default (Closed State) */
        display: none;
        
        /* 2. SPACING: Reset top padding (rely on header margin) */
        padding-top: 0 !important;
        
        /* 3. SPACING: Bottom gap (Space between last item and border) */
        /* Set to 1.5rem to match Sys I/O, or 1rem for tighter fit */
        padding-bottom: 1.5rem !important; 
        
        /* 4. ALIGNMENT: Match the unified side padding (1rem) */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }


    
    /* Ensure the parent container GROWS to fit the logo + border */
    #system-id-module .right-module-content {
        width: 100%;
        
        /* 1. Force height to match content */
        height: auto !important;
        
        /* 2. Don't clip! Let it show. */
        overflow: visible !important; 
        
        /* 3. Padding Adjustments */
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 2rem !important; /* Buffer for border */
    }
    
    /* Ensure the module wrapper itself doesn't clip */
    #system-id-module {
        /* 1. UNLOCK HEIGHT: Remove desktop 14em limit so it can grow */
        max-height: none !important; 
        
        /* 2. PREVENT SQUASHING: Force it to keep its size even if page is full */
        flex-shrink: 0 !important; 
        
        /* 3. Standard Layout Resets */
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
        
        /* 4. Ensure Bottom Border Stays Visible */
        border-bottom: 1px dashed var(--primary) !important;
        margin-bottom: 0.2rem !important;
    }

}