/* --- CORE THEME DNA --- */
:root {
    --background: #0D0D0D;
    --primary: #A67B5B;   /* Brown */
    --highlight: #C89F7B; /* Gold */
    --secondary: #555555; /* Grey */
    --gold-glow: 0 0 15px rgba(200, 159, 123, 0.5);
    --sattva-glow: #FDFBF7;
}

body {
    background-color: var(--background);
    color: var(--soft-white);
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    margin: 0;
    height: 100vh;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- THE GRID (Desktop) --- */
.ide-container {
    display: grid;
    grid-template-columns: 280px 1fr 280px; 
    width: 100%;
    max-width: 1300px;
    height: 100vh; 
    max-height: 803px;
    margin: 0 auto;
    gap: 0.75rem; 
    align-self: center;
}

/* --- BOOT SEQUENCE ANIMATION --- */

/* 1. The Starting State (Hidden & Lowered) */
.boot-col {
    opacity: 0;
    transform: translateY(15px);
    
    /* Prepare the smooth transition */
    /* cubic-bezier(0.2, 0.8, 0.2, 1) gives a nice "soft landing" feel */
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 2. The Active State (Visible & Reset) */
.boot-active {
    opacity: 1;
    transform: translateY(0);
}

/* --- LAYOUT CONTAINERS (Transparent Columns) --- */
/* These hold the modules but are invisible themselves */
.ide-main, .ide-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* THE KEY SPACER */
    height: 100%;
    border: none !important;
    background: none !important;
    overflow: visible;
}

/* --- MODULE STYLING (The Visible Boxes) --- */
.module, .right-module, .ide-sidebar {
    border: 1px dashed var(--primary);
    background-color: var(--background);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* --- HEADERS --- */
.module-header, .sidebar-header, .right-module-header {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8em;
    font-weight: 500; 
    color: var(--secondary);

    margin-top: 0.8rem;      /* Push down from the top module border */
    margin-left: 0.8rem;     /* Space from left edge */
    margin-right: 0.8rem;    /* Space from right edge */
    margin-bottom: 0.8rem;   /* Push content away from the header line */
    
    padding-bottom: 0.6rem;  /* Space between text and the underline */

    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed var(--secondary);
    
}

/* --- CONTENT AREAS --- */
.module-content, .right-module-content, .terminal-content { 
    padding: 1rem; /* Adjust this to your taste */
}

/* --- SIDEBAR INDEX (Matches Gita/Sutras App) --- */
.file-tree {
    display: block;      /* Always visible */
    overflow-y: auto;    /* Internal scrolling if list is long */
    max-height: 100%;    /* Fill the container */
    
    /* THE FIX: Remove Bullets & Add Spacing */
    list-style: none;    /* Kills the dot */
    
    /* Top: 0 */
    /* Left/Right: 0.8rem (Matches your header margin) */
    /* Bottom: 1.5rem (Creates the gap you want) */
    padding: 0 0.8rem 1.5rem 0.8rem !important;
    margin: 0;           /* Reset margin */
}

.file-item {
    display: block; /* Ensure it behaves like a block element */
    padding: 0.5rem 1rem;
    cursor: pointer;
    
    /* The Signature "Sutra" Look: Dashed lines between items */
    border-bottom: 1px dashed var(--secondary); 
    
    font-size: 0.85em; /* Adjusted slightly to match other text */
    color: var(--soft-white); /* Start as a dim light */
    transition: background 0.2s, color 0.2s;
    
    /* Remove any previous pseudo-elements like the '>' arrow */
}
.file-item::before { content: none !important; } /* Safety clear */

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

/* The Active State (Left Border Marker) */
.file-item.active {
    background-color: transparent;
    color: var(--highlight);
    font-weight: bold;
    
    /* This is the key visual marker */
    border-left: 3px solid var(--highlight); 
    
    /* Adjust padding slightly so text doesn't jump */
    padding-left: calc(1rem - 3px); 
}

/* Nav Links */
.nav-links { list-style: none; padding: 0; }
.nav-links li { margin-bottom: 0.5rem; }
.nav-links a { color: var(--highlight); text-decoration: none; }
.nav-links a: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);
}

/* --- COLUMN 2: MAIN STAGE --- */
/* 1. Stream (Flexible) */
#mod-stream {
    flex: 1; 
    min-height: 200px;
    overflow: hidden;
}

/* --- TERMINAL & ANIMATION --- */
.terminal-content {
    /* top | right | bottom | left */
    padding: 0.5rem 1rem 1rem 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
    height: 100%;    
}

.sys-line { color: var(--secondary); margin-bottom: 0; font-size: 0.9em; }
.sys-prompt { color: var(--highlight); margin-right: 0.5rem; }

/* MAIN DISPLAY CONTAINER */
.mantra-display {
    flex-grow: 1;
    display: flex;
    flex-direction: row; /* Side-by-Side Layout */
    justify-content: center; /* Align left */
    align-items: center; 
    /* UPDATED: Use this padding to push the whole group down from the top */
    padding-top: 0; /* Adjust this: 2rem = high, 6rem = low */ 
    margin-top: 0;
    gap: 0; /* Space between Roman and Sanskrit */
}


/* --- 1. THE COLUMNS (Parents) --- */
.mantra-roman-col {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    
    /* Center the lines horizontally */
    align-items: center; 
    
    /* Keep your existing Vertical alignment settings */
    justify-content: center; 
    align-items: center;

    /* PADDING TRICK: Top | Right | Bottom | Left */
    padding: 2rem 2rem 0.5rem 0 !important;

    box-sizing: border-box;

    /* Font Settings */
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.6;
    color: var(--soft-white);
    opacity: 0; 
    transition: opacity 2s ease-in;
}

.mantra-sanskrit-col {
    flex: 0 0 50%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding-top: 0;
    align-items: center;
    border-left: 1px dashed var(--secondary);
    box-sizing: border-box;

    font-family: 'Noto Sans Devanagari', sans-serif;
    font-size: clamp(1.3rem, 2vw, 1.4rem);
    line-height: 1.6;
    color: var(--soft-white);
    opacity: 0;
    transition: opacity 2s ease-in;
}

/* --- 2. THE LINES (Children) --- */
.mantra-line {
    display: block;
    margin: 0;
    min-height: 1.6em;
    
    /* THE TRICK: Text flows Left, but the Box will be centered by the parent */
    text-align: left; 
    white-space: pre; 
    
    /* Safety */
    box-sizing: content-box; 
    
    /* Default State */
    opacity: 1;
    transition: opacity 0.2s;
}

/* Specific styling for Roman Lines */
.mantra-roman-col .mantra-line {
    color: var(--highlight);
    font-weight: 600;
    font-style: italic;
    text-shadow: 0 1px 1px rgba(0,0,0,0.8);
    opacity: 1; /* Start dimmed */
    transition: color 0.3s ease, text-shadow 0.3s ease, opacity 0.3s ease;
}

/* 3. SUPER-HOT TORCHLIGHT (The Active Typing State) */
.mantra-line.typing-active {
    /* Force White/Brightest Gold */
    color: #FFF !important; 
    
    /* Double Shadow: Inner White Glow + Outer Gold Flare */
    text-shadow: 
        0 0 5px #FFF, 
        0 0 15px var(--highlight), 
        0 0 30px var(--primary);
        
    /* Ensure opacity is full */
    opacity: 1 !important;
    
    /* 0.05s ensures it snaps to white instantly */
    transition: color 0.05s ease-out, text-shadow 0.05s ease-out, opacity 0.05s ease-out !important;
}

.cursor {
    display: inline-block;
    width: 0.5em; /* Updated from 10px to match homepage */
    height: 1em;
    background-color: var(--highlight);
    animation: blink 2s steps(2) infinite;
    vertical-align: text-bottom;
    
    /* OPTIONAL: Nudge it down 2px to compensate for the button's top-padding */
    margin-bottom: 0;
    margin-left: 2px;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- BUTTONS & CONTROLS --- */
/* --- FOCUS TOGGLE BUTTON --- */
.btn-focus {
    background: none;
    border: none; /* No boxy border */
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9em; /* Match header text size */
    color: var(--highlight); /* Default grey */
    cursor: pointer;
    padding: 0;
    transition: color 0.2s ease;
}

.btn-focus: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);
}

/* Optional: Active state style */
body.focus-active .btn-focus {
    color: var(--highlight);
    text-decoration: underline;
    font-weight: bold;
}

/* --- TERMINAL COMMAND BUTTON ([init_japa]) --- */
.btn-terminal-command {
    background: none;
    border: none;
    font-family: 'Source Code Pro', monospace;
    font-size: 1em; /* Matches the prompt text size */
    color: var(--highlight); /* Brown default */
    cursor: pointer;
    /* UPDATED: Added small padding so the hover box looks good */
    padding: 2px 4px;
    text-align: left;
    transition: all 0.2s ease;
}

.btn-terminal-command: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;
}

/* Add spacing between the Init buttons */
#btn-init-auto {
    margin-right: 0.5rem; /* Space between [init_auto] and [init_manual] */
}

/* Terminate Button Hover */
#btn-terminate-session:hover {
    background-color: #d9534f; /* Red */
    color: #fff !important; 
    text-shadow: none;
    border-radius: 2px;
    box-shadow: none !important; /* Remove any glow */
}

/* --- CODE COMMENT (// click command...) --- */
.code-comment {
    color: var(--secondary);
    font-size: 0.9em;
    margin-top: 0.8rem;
    margin-left: 0; /* Aligned with left edge */
    font-style: normal;
    opacity: 0.8;
}

/* --- DIGITAL BEAD THREAD (Progress Bar) --- */
#bead-progress-track {
    position: relative;
    width: 70%; 
    height: 2px; 
    margin: 1rem auto 0 auto; /* Top margin pushes it down from the text */
    
    /* The Thread (Background) */
    border-bottom: 1.5px dashed var(--secondary);
    opacity: 0.8;
}

#bead-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* JS updates this */
    
    /* The Bead Progress (Gold) */
    border-bottom: 1.5px dashed var(--highlight);
    filter: drop-shadow(0 0 2px var(--highlight));
    
    transition: width 0.3s ease-out;
    z-index: 2;
}

/* --- MODULE 2: CONTROL DECK (The Merged Module) --- */
#mod-control-deck {
    flex: 0 0 auto; 
    
    height: 160px;      
    min-height: 160px; 
    max-height: 160px;

    display: flex;
    flex-direction: column;
}

/* The Container for the columns */
.control-deck-layout {
    flex-grow: 1;
    display: flex;
    flex-direction: row; /* Split horizontal */
    padding: 0; /* Remove padding so borders touch edges */
}

/* --- THE COLUMNS --- */
.deck-col {
    flex: 0 0 50%; /* Strict 50% split */
    width: 50%;
    display: flex;
    align-items: center; /* Vertically center content */
    box-sizing: border-box;
    padding: 0 2rem; /* top | right | bottom | left */
}

/* Left Side (Status) - UPDATED STRUCTURE */
.deck-left {
    display: flex;
    flex-direction: column; /* Stack Header on top of Data */
    justify-content: flex-start; 
    padding-top: 0.7rem; /* Adjust this number to move it up or down */
    align-items: flex-start; /* Align text to the left */
    
    /* Keep your existing spacing fixes */
    margin-bottom: 0.8rem;
    margin-top: 0;
    
    /* Ensure padding is consistent */
    padding-left: 2rem; 
}

/* --- CLEAR COUNT BUTTON --- */
#btn-clear-count {
    background: none;
    border: none;
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9em; /* Keep it small */
    font-weight: bold;
    color: var(--primary); /* Brown default */
    opacity: 1; /* Low profile default */
    cursor: pointer;
    padding: 0 2px;
    transition: all 0.2s ease;
}

/* Hover: Match [terminate] (Red Block) */
#btn-clear-count:hover {
    opacity: 1;
    background-color: #d9534f !important; /* Red Background */
    color: #fff;               /* White Text */
    text-shadow: none !important; /* Remove any glow */
    box-shadow: none !important; /* Remove any glow */  
    border-radius: 2px;
}

/* 1. Internal Header [// SYS_STATUS] */
.deck-internal-header {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.8em; /* Slightly smaller */
    color: var(--secondary);
    opacity: 1;
    margin-bottom: 1rem; /* Space between header and data */
}

/* 2. Content Container */
.deck-internal-content {
    display: flex;
    flex-direction: column; /* Stack MALA above RNDS */
    gap: 0.3rem; /* Space between the two rows */
}

/* 3. Tweak the stat groups to align nicely */
.stat-group {
    font-size: 0.9em;
    color: var(--soft-white);
    display: flex;
    align-items: center; /* Align label and numbers */
}

/* Right Side (Controls) - UPDATED STRUCTURE */
.deck-right {
    display: flex;
    flex-direction: column; /* Stack Header on top of Data */
    justify-content: flex-start; /* CHANGED: Align to top instead of center */
    padding-top: 0; /* ADD: Match the left side padding */
    align-items: flex-start; /* Align everything to the left edge of the column */
    
    border-left: 1px dashed var(--secondary); 
    
    /* Spacing fixes */
    margin-bottom: 1.5rem;
    margin-top: 0.7rem;
    
    /* Ensure padding matches the left side */
    padding-left: 2rem; 
}

/* Ensure the gap between Speed row and Suspend button matches the left side */
.deck-right .deck-internal-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Space between Speed row and Suspend button */
}

/* FIX: The Wrapper for Auto Controls (Speed + Suspend) */
#auto-controls-group {
    display: flex;
    flex-direction: column; /* CRITICAL: Forces Suspend below Speed */
    gap: 0.5rem; /* Controls the vertical space between the rows */
    width: 100%;
    
    /* Ensure no weird margins interfere */
    margin: 0;
    padding: 0;
}

/* Reset margins on the buttons so they align perfectly left */
.deck-right .btn-speed {
    margin-right: 0.5rem; /* Space between individual speed buttons */
    margin-left: 0;
}

#btn-toggle-process {
    margin-left: 0; /* Remove old margin so it aligns left */
    color: #d9534f;
}

/* Add space specifically between the divider (border-left) and the buttons */
.deck-right .speed-group {
    margin-left: 0; /* Increase this to widen the gap */
    padding-left: 0; /* Good safety measure */
}

.deck-left .stat-group:first-child {
    margin-left: 0; /* Adjust to match the visual balance */
}

/* --- INNER CONTENT STYLING --- */
/* Status Typography */
.stat-group {
    font-size: 0.9em;
    color: var(--soft-white);
}
.highlight-val {
    color: var(--highlight);
    font-size: 1.2em;
    font-weight: bold;
    margin: 0 0.2rem;
}
.sub-val {
    opacity: 0.7;
    font-size: 0.9em;
}

/* --- BUTTON STYLING (Restored) --- */

/* 1. Reset all buttons in the deck to the "Terminal" look */
.control-deck-layout button {
    background: none;
    border: none;
    color: var(--soft-white); /* Default grey */
    font-family: 'Source Code Pro', monospace; /* Ensure font matches */
    font-size: 0.9em;  /* Slightly smaller than main text */
    cursor: pointer;
    transition: color 0.2s;
    padding: 0;
}

.control-deck-layout button:hover {
    background-color: var(--mystic2) !important; 
    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);
}

/* 2b. ACTIVE STATE (Selected = Bold Gold Text) */
.control-deck-layout button.active {
    background-color: transparent; /* No block */
    color: var(--highlight);       /* Gold Text */
    font-weight: bold;             /* Thicker font */
    text-decoration: underline;         /* Underline for extra emphasis */
    text-shadow: 0 0 5px rgba(200, 159, 123, 0.5); /* Optional: Keep a faint glow */
    padding: 0; /* Reset padding so it doesn't jump */
}

/* 3. Specific Spacing for the Speed Group */
.deck-right .btn-speed {
    margin-right: 0.5rem; /* Space between [SLOW] [MED] [FAST] */
}

/* 4. Specific Style for Suspend/Resume */
#btn-toggle-process {
    width: fit-content; 
    align-self: flex-start; /* Prevents stretching in a column flex layout */
    color: #d9534f; /* Red for Suspend */
    margin-left: 0; /* Extra space to separate it from speed */
}

/* Option A: Turn Gold like the rest */
#btn-toggle-process: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);
}

/* Option B: If you want it to highlight RED instead of Gold */
/* #btn-toggle-process:hover {
    background-color: #d9534f;
    color: #fff; 
    text-shadow: none;
}
*/

/* --- COMPACT NUMBER INPUT --- */
.terminal-num-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--secondary); /* Dashed matches theme */
    color: var(--highlight);
    font-family: inherit;
    font-size: 0.9rem;
    width: 1.8rem; /* Narrow width to fit next to button */
    text-align: center;
    outline: none;
    padding: 0;
}

.terminal-num-input:focus {
    border-bottom: 1px solid var(--highlight);
}

/* --- CUSTOM LIMIT CONTROLS --- */
.terminal-arrow-btn {
    background: transparent;
    border: none;
    color: var(--secondary); /* Dim by default */
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    user-select: none; /* Prevents text highlighting when tapping fast */
}

.terminal-arrow-btn:hover {
    color: var(--highlight);
}

.terminal-arrow-btn:active {
    transform: scale(0.9);
}

/* Ensure the ugly native arrows are GONE for good */
.terminal-num-input::-webkit-inner-spin-button, 
.terminal-num-input::-webkit-outer-spin-button { 
  -webkit-appearance: none !important; 
  margin: 0 !important; 
}
.terminal-num-input {
  -moz-appearance: textfield !important; /* Firefox */
}

/* --- MANUAL MODE STYLING --- */

/* 1. The [+1] Command Button */
#btn-manual-count {
    background: none;
    border: none; /* Removed the box */
    
    /* Typography matches the counters on the left */
    color: var(--highlight);
    font-family: 'Source Code Pro', monospace;
    font-size: 1.4em; 
    font-weight: bold;
    
    cursor: pointer;
    width: 100%;
    text-align: center;
    
    /* THE INVISIBLE HIT BOX */
    /* top | left/right | bottom */
    padding: 0.5rem 0 0.5rem 0;
    margin: 0;
    
    /* Fast transition for the "Glitch" flash */
    transition: color 0.05s ease, text-shadow 0.05s ease;
}

/* Hover: Subtle Glow */
#btn-manual-count:hover {
    color: #FFF; 
    text-shadow: 0 0 8px var(--highlight);
}

/* Click (Active): The "White Flash" Signal */
#btn-manual-count:active {
    color: #FFF;
    text-shadow: 0 0 10px #FFF, 0 0 20px var(--highlight);
    transform: scale(0.98); /* Slight tactile press */
}

/* 2. The Breathing Glow Animation (For Static Text) */
@keyframes breathingGlow {
    0%, 100% {
        color: var(--highlight); /* Dimmer base */
        text-shadow: 0 0 2px var(--background), 0 0 5px rgba(166, 123, 91, 0.2);
    }
    50% {
        color: var(--highlight); /* Bright peak */
        text-shadow: 0 0 2px var(--background), 0 0 15px var(--highlight), 0 0 20px var(--highlight);
    }
}

/* Class to apply the animation */
.mantra-breathing {
    animation: breathingGlow 5s ease-in-out infinite;
    /* Ensure opacity stays full so we see the color shift */
    opacity: 1 !important; 
}

/* --- MODULE 3: JAPA INPUT (Keyboard Practice) --- */
#mod-japa-input {
    flex: 0 0 auto;
    
    /* Fixed Height as requested */
    height: 160px;
    min-height: 160px;
    max-height: 160px;
    
    display: flex;
    flex-direction: column;
}

#mod-japa-input .module-content {
    flex-grow: 1;
    padding: 0 1rem 1rem 1rem; /* top | right | bottom | left */
    display: flex;
    flex-direction: column;
}

/* --- INPUT MODULE VISUAL STATES --- */

/* 1. The Parent Module (Behavior Only) */
.module-disabled {
    /* Stop interaction, but KEEP visuals sharp (no blur/opacity on border) */
    pointer-events: none; 
}

/* 2. The Content Inside (Visual Blur) */
/* This targets the text area and prompt only when the module is disabled */
.module-disabled .module-content,
.module-disabled .module-header {
    opacity: 0.7;              /* Dim the text area */
    filter: blur(1.5px);       /* Blur just the contents */
    transition: all 0.5s ease;
}

/* 2. Active Typing State (Applied when user clicks to type) */
#mod-japa-input.input-active {
    border-color: var(--highlight); /* Gold Border */
    background-color: rgba(200, 159, 123, 0.05); /* NEW: Faint Gold Background Fill ("Powered On" look) */
    box-shadow: 0 0 25px rgba(200, 159, 123, 0.15); /* STRONGER: Increased glow radius and opacity */
    transition: all 0.3s ease;
}

/* 3. Text Area Focus Enhancement */
#mantra-input-field:focus {
    color: var(--highlight); /* Text turns Gold */
    text-shadow: 0 0 5px rgba(200, 159, 123, 0.3); /* Glowing text */
}

/* 4. Transmission Flash (Animation for when Enter is pressed) */
@keyframes transmitFlash {
    0% { color: #FFF; text-shadow: 0 0 10px #FFF; opacity: 1; }
    50% { color: var(--highlight); opacity: 0.5; }
    100% { color: var(--primary); opacity: 0; }
}

.transmission-sent {
    animation: transmitFlash 0.5s ease-out forwards;
}

@keyframes sattvaPulse {
    0% {
        /* Start at Gold (Active State) */
        border-color: var(--highlight);
        box-shadow: 0 0 15px rgba(200, 159, 123, 0.2);
        color: var(--highlight);
        text-shadow: 0 0 5px rgba(200, 159, 123, 0.5);
    }
    50% {
        /* Peak at Sattva (White/Pure Light) */
        border-color: var(--sattva-glow);
        /* Massive White Glow */
        box-shadow: 0 0 50px rgba(255, 255, 255, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.2);
        color: var(--sattva-glow);
        /* Crisp Text Shadow */
        text-shadow: 0 0 10px var(--sattva-glow), 0 0 20px var(--highlight);
        filter: brightness(1.2);
    }
    100% {
        /* Return to Gold */
        border-color: var(--highlight);
        box-shadow: 0 0 15px rgba(200, 159, 123, 0.2);
        color: var(--highlight);
        text-shadow: 0 0 5px rgba(200, 159, 123, 0.5);
    }
}

/* The Class to trigger it */
.sattva-complete {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Subtle inner light */
    animation: sattvaPulse 4s infinite ease-in-out !important; /* Slow, deep breathing */
}

/* Ensure ALL text inside the module adopts the glow */
.sattva-complete * {
    color: inherit !important;
    text-shadow: inherit !important;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}

/* The Wrapper for the Prompt > and Text */
.terminal-input-wrapper {
    display: flex;
    flex-grow: 1;
    height: 100%;
}

/* The little ">" prompt arrow */
.input-arrow {
    color: var(--highlight);
    margin-right: 0.5rem;
    font-weight: bold;
    user-select: none;
}

/* The Actual Input Area */
#mantra-input-field {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    resize: none; /* Disable manual resizing handle */
    
    /* Terminal Font Styling */
    font-family: 'Source Code Pro', monospace;
    font-size: 0.9rem;
    color: var(--highlight);
    line-height: 1.5;
    
    /* Remove default scrollbars if possible */
    overflow: auto;
}

/* Placeholder Text Styling */
#mantra-input-field::placeholder {
    color: var(--secondary);
    font-size: 0.8rem;
    opacity: 0.8;
    font-style: italic;
}


/* --- RIGHT SIDEBAR (Column 3 - Sutras Match) --- */

/* 1. Top Module: Protocol Definition */
#root-sutra-module {
    height: 180px;       /* Even tighter height (was 200px) */
    min-height: 180px;
    max-height: 180px;
    flex: 0 0 auto;
    overflow: hidden;
}

#root-sutra-module .right-module-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 0.5rem;
    height: 100%;
}

/* New Container for Side-by-Side Text */
.proto-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem; /* Space between row and definition */
    width: 100%;
}

/* Typography Updates */
.root-sanskrit {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.8em; /* Slightly smaller to fit nicely */
    color: var(--highlight);
    line-height: 1;
    margin: 0;
    
    /* The Vertical Divider Logic */
    padding-right: 2rem;
    border-right: 1px dashed var(--secondary);
}

.root-roman {
    font-family: 'Source Code Pro', monospace;
    font-size: 1.2em;
    color: var(--soft-white);
    margin: 0;
    
    /* Spacing from the divider */
    padding-left: 2rem;
}

.root-translation {
    font-family: 'Source Code Pro', monospace;
    font-size: 0.85em;
    color: var(--soft-white);
    font-style: italic;
    margin: 0;
    line-height: 1.4;
    text-align: center;
    max-width: 90%; /* Keeps the text from hitting the edges */
}

/* 2. Middle Module: System Links (Flexible) */
#system-links-module {
    flex: 1; /* Grow to fill space */
    min-height: 0;
}

#system-links-module .right-module-content {
    /* NEW: Top=0.4rem, Right=1rem, Bottom=1rem, Left=1rem */
    padding: 0.2rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    /* THE FIX: Force this container to fill the module's height */
    flex-grow: 1; 
    height: 100%;
}

.feedback-link {
    display: block;
    text-decoration: none;
    color: var(--highlight);
    font-size: 0.8em;
    margin-bottom: 0.5rem;
    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);
}

/* --- 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; 
        
    /* 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);
    }

/* 3. Bottom Module: System ID (Fixed Height) */
#system-id-module {
    flex: 0 0 auto;
    min-height: 14em; 
    max-height: 14em;
    transition: border-color 0.3s;
}

/* Center the Logo Horizontally, Align Top Vertically */
.system-id-link .right-module-content {
    display: flex;
    justify-content: center; /* Keep horizontal center */
    
    /* UPDATED: Move from middle to top */
    align-items: flex-start; 
    
    /* UPDATED: Add spacing from the header line */
    padding-top: 0; /* Adjust this dial: 1rem = higher, 2rem = lower */
    
    flex-grow: 1;
    height: 100%;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

/* --- 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)); */
        }


/* --- GAMIFICATION (The 108 Supernova Event) --- */

/* --- GLOBAL SUPERNOVA SHOCKWAVE SYSTEM --- */

/* 1. KILL THE OLD PARENT FLASH */
/* We stop the wrapper (.ide-main) from lighting up its border */
.ide-main.mala-complete {
    border-color: transparent !important; 
    box-shadow: none !important;
    background: transparent !important;
}

/* 2. TARGET THE MANTRA MODULE (The New Shockwave) */
/* When parent triggers, the Child Module explodes with light */
.ide-main.mala-complete #mod-stream {
    /* Solid Gold Border */
    border: 1px solid var(--highlight) !important;
    
    /* Inner Light Fill (Semi-transparent) */
    background-color: rgba(200, 159, 123, 0.25) !important;
    
    /* Massive Glow (Outer + Inner) */
    box-shadow: 
        0 0 60px rgba(200, 159, 123, 0.6), 
        inset 0 0 40px rgba(200, 159, 123, 0.4) !important;
    
    /* IGNITION: Instant expansion */
    transition: all 0.1s ease-out !important;
}

/* 3. THE COOL DOWN (Decay) */
/* Ensure the module fades out slowly when the class is removed */
#mod-stream {
    transition: box-shadow 2.0s ease-out, background-color 2.0s ease-out, border-color 2.0s ease-out;
}

/* The Animation Sequence */
@keyframes supernovaShockwave {
    /* 0% - START: Standard State */
    0% { 
        border-color: var(--primary); 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
    
    /* 10% - IMPACT: Sharp Flash to White (The "Spark") */
    10% { 
        border-color: #FFF; 
        box-shadow: 0 0 20px 5px #FFF; /* Bright white core */
    }
    
    /* 30% - EXPANSION: Bloom to Gold + Ripple Outward */
    30% { 
        border-color: var(--highlight); 
        /* The ripple expands (20px spread) but opacity lowers */
        box-shadow: 0 0 30px 20px rgba(200, 159, 123, 0.4); 
    }
    
    /* 100% - COOLDOWN: Fade back to normal */
    100% { 
        border-color: var(--primary); 
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* The Active Class applied by JS */
.mala-complete {
    /* Updated Duration: 3s for the full "Cool Down" effect */
    animation: supernovaShockwave 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    
    /* Ensure it sits on top if the shadow overlaps neighbors */
    z-index: 10; 
}

/* --- THE HEARTBEAT (Session Complete) --- */

/* 1. The Pulse Animation */
@keyframes goldPulse {
    0% {
        box-shadow: 0 0 15px rgba(200, 159, 123, 0.2), inset 0 0 10px rgba(200, 159, 123, 0.1);
        border-color: rgba(200, 159, 123, 0.6);
    }
    50% {
        /* Expand the glow */
        box-shadow: 0 0 40px rgba(200, 159, 123, 0.5), inset 0 0 20px rgba(200, 159, 123, 0.2);
        border-color: var(--highlight);
    }
    100% {
        /* Return to start */
        box-shadow: 0 0 15px rgba(200, 159, 123, 0.2), inset 0 0 10px rgba(200, 159, 123, 0.1);
        border-color: rgba(200, 159, 123, 0.6);
    }
}

/* 2. The Active State Class */
/* We apply this to #mod-stream via JS */
.session-complete {
    /* Set the base look */
    background-color: rgba(200, 159, 123, 0.1) !important;
    border: 1px solid var(--highlight) !important;
    
    /* Apply the heartbeat rhythm */
    /* 4 seconds per beat = very slow, deep breathing */
    animation: goldPulse 4s infinite ease-in-out !important;
}

/* --- FOCUS MODE --- */
.focus-active .ide-sidebar, 
.focus-active .ide-sidebar-right,
.focus-active #mod-control-deck,
.focus-active #mod-japa-input {
    opacity: 0.1;
    pointer-events: none;
    filter: blur(2px);
    transition: opacity 0.5s, filter 0.5s;
}

/* --- MOBILE RESPONSIVENESS (Japa App) --- */
@media (max-width: 768px) {
    
    /* 1. THE CANVAS */
    body {
        padding: 0.2rem !important;
        height: auto !important;
        overflow-x: hidden;
    }

    /* 2. THE CONTAINER (Vertical Stack) */
    .ide-container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        gap: 0.75rem;
    }

    /* 3. THE UNWRAP TRICK (Dissolve Columns) */
    .ide-main, 
    .ide-sidebar-right {
        display: contents !important;
    }

    /* 4. THE RE-ORDERING (Your Requested Sequence) */
    
    /* 0: Sidebar (Index) */
    .ide-sidebar { order: 0; }
    /* Note: Since .ide-sidebar is display:contents, we might need to target the .file-tree or wrapper.
       Actually, in Japa app, .ide-sidebar IS a module (unlike Gita app where it was a wrapper).
       Wait, looking at your HTML... .ide-sidebar is an <aside>. 
       If we set display:contents, we lose its border.
       Correction: In Japa App, .ide-sidebar IS the box. 
       So we DON'T use display:contents on .ide-sidebar. 
       We only use it on .ide-main and .ide-sidebar-right because they are transparent wrappers. */

    /* CORRECTED UNWRAP LOGIC FOR JAPA APP: */
    .ide-main, .ide-sidebar-right {
        display: contents !important;
    }
    
    /* Now we target the specific IDs/Classes for ordering */
    
    /* 0: Sidebar Module */
    .ide-sidebar { order: 0; }

    /* 1: Main Mantra Module */
    #mod-stream { order: 1; }

    /* 2: Sys-Control Module */
    #mod-control-deck { order: 2; }

    /* 3: Japa Input Module */
    #mod-japa-input { order: 3; }

    /* 4: Proto Definition */
    #root-sutra-module { order: 4; }

    /* 5: System Links */
    #system-links-module { order: 5; }

    /* 6: Logo */
    #system-id-module { order: 6; }


    /* 5. MODULE RESET (Full Width & Borders) */
    .module, 
    .right-module, 
    .ide-sidebar {
        /* Force full width */
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        
        /* Reset heights so they grow naturally */
        height: auto !important;
        min-height: auto !important;
        flex: none !important; /* Disable flex-grow/shrink */
        flex-grow: 0 !important;
        
        margin: 0 !important;
        padding: 0 !important;

        /* Ensure padding doesn't break width */
        box-sizing: border-box !important;
        
        /* STRICT REQUEST: FULL BORDERS */
        /* border: 1px dashed var(--primary) !important; */

        /* OPTION B: EDGE-TO-EDGE MODE (Clean Mobile Look) */
        border: none !important;
        border-bottom: 1px dashed var(--primary) !important;
    }

    /* --- MOBILE INTERACTION: FIX "STICKY HOVER" --- */

    /* 1. DISABLE HOVER EFFECTS */
    /* We force the buttons to ignore hover styles on mobile */
    button:hover, 
    .btn-speed:hover, 
    .file-item:hover, 
    .sidebar-header:hover,
    .control-btn:hover {
        /* Reset to default (inherits the non-hover look) */
        background: transparent !important; 
        color: var(--primary) !important; 
        transform: none !important;
        box-shadow: none !important;
        
        /* Note: If you have specific background colors for buttons, 
           you might need to set 'background' to that specific color 
           instead of 'transparent' here. */
    }

    /* 2. ADD INSTANT TOUCH FEEDBACK (:active) */
    /* This fires the Millisecond you touch the screen */
    button:active, 
    .btn-speed:active, 
    .file-item:active, 
    .sidebar-header:active,
    .control-btn:active {
        opacity: 0.5 !important; /* Flash transparent */
        transform: scale(0.97) !important; /* Tiny shrink effect */
        transition: none !important; /* REMOVE ANIMATION LAG */
    }

    /* --- 6. INTERNAL REFLOW (Module Specifics) --- */

    /* A. Main Mantra Module (Sanskrit Top / Roman Bottom) */
    #mod-stream .mantra-display {
        flex-direction: column !important; /* Stack vertically */
        padding-top: 1rem !important; /* Reset padding */
        gap: 1rem !important;
    }

    /* --- MOBILE FOCUS MODE: HIGHLIGHT MAIN MANTRA --- */
    /* Only target the mantra stream module */
    body.focus-active #mod-stream {

        /* Override primary with highlight when open */
        border: 1px dashed var(--highlight) !important;
        
        /* Add the subtle glow to match the Sidebar Open state */
        box-shadow: 0 0 10px rgba(200, 159, 123, 0.15) !important;
        transition: border-color 0.3s ease;
    }

    /* The Columns */
    .mantra-roman-col,
    .mantra-sanskrit-col {
        width: 100% !important;
        flex: none !important;
        
        /* Reset spacing */
        padding: 1rem !important;
        margin: 0 !important;
        
        /* Remove the side border from Sanskrit */
        border-left: none !important;
        
        /* Add Divider (Border Bottom on Sanskrit) */
        /* Since we re-order them, we need to be careful.
           HTML Order: Roman (Left), Sanskrit (Right).
           We want Sanskrit Top. */
    }

    /* RE-ORDERING INSIDE MANTRA MODULE */
    /* Force Sanskrit to be visual first */
    .mantra-sanskrit-col { 
        order: 1; 
        border-bottom: 1px dashed var(--secondary) !important; /* Horizontal Divider */
        padding-bottom: 2rem !important;
    }
    
    .mantra-roman-col { 
        order: 2; 
        padding-top: 2rem !important;
    }

    /* B. Control Deck (Status Top / Controls Bottom) */
    .control-deck-layout {
        flex-direction: column !important;
    }

    .deck-col {
        width: 100% !important;
        flex: none !important;
        padding: 1rem 1rem !important;
    }

    /* Left Side (Status) */
    .deck-left {
        order: 1;
        border-bottom: 1px dashed var(--secondary) !important; /* Horizontal Divider */
        padding-bottom: 1rem !important;
        margin-bottom: 1rem !important;
    }

    /* Right Side (Controls) */
    .deck-right {
        order: 2;
        border-left: none !important; /* Remove vertical divider */
        padding-top: 0 !important;
    }
    
    /* Ensure the module height grows to fit stacked content */
    #mod-control-deck {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }

    /* --- MOBILE: SIDEBAR COLLAPSE LOGIC --- */
    
    /* 1. Hide the list by default */
    #mantra-list {
        display: none;
        padding-bottom: 1rem; /* Add breathing room when open */
        /* THE SCROLL FIX: */
        max-height: 40vh; /* Cap height at 40% of screen */
        overflow-y: auto; /* Scroll internally */
        
        /* Optional: Smooth scroll feel */
        -webkit-overflow-scrolling: touch;
    }

    /* 2. Show the list when the parent has the 'mobile-open' class */
    .ide-sidebar.mobile-open #mantra-list {
        display: block;
        animation: accordionFade 0.3s ease-out;
    }

    /* 4. Active Open State: Gold Border */
    .ide-sidebar.mobile-open {
        /* Override primary with highlight when open */
        border: 1px dashed var(--highlight) !important;
        
        /* Optional: Add a subtle glow to emphasize it's active */
        box-shadow: 0 0 10px rgba(200, 159, 123, 0.1);
        transition: border-color 0.3s ease;
    }

    /* 3. Make the header look clickable */
    .ide-sidebar .sidebar-header {
        cursor: pointer;
        /* The existing margin-bottom: 0.8rem creates your requested empty space! */
    }
    
    /* Optional: Fade animation */
    @keyframes accordionFade {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

  /* --- MOBILE: MANTRA REFLOW STRATEGY (The "Block" Fix) --- */

    /* 2. KILL THE FLEXBOX (The Critical Fix) */
    /* We switch the parents from 'flex' to 'block' so children can flow inline */
    .mantra-roman-col,
    .mantra-sanskrit-col,
    .mantra-text-block {
        display: block !important; /* Stop Flexing! */
        width: 100% !important;
        text-align: center !important; /* Center the flowing text */
        
        /* Reset any desktop positioning */
        align-items: initial !important;
        justify-content: initial !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* 3. MAKE LINES FLOW LIKE SENTENCES */
    .mantra-line {
        /* CHANGED: inline-block allows the JS to lock the width! */
        display: inline-block !important; 
        
        /* REMOVED: width: auto !important; (This was killing the lock) */
        
        /* Spacing */
        margin: 0 !important;
        margin-right: 0.4em !important; 
        
        /* CRITICAL: Text inside the box must be Left Aligned to stop internal jitter */
        text-align: left !important; 
        
        /* Keeps lines aligned at the top if they wrap */
        vertical-align: top !important;
        
        /* Ensure visibility */
        opacity: 1 !important; 
    }
    
    /* Remove trailing space from last word */
    .mantra-line:last-child {
        margin-right: 0 !important;
    }

    /* --- MOBILE EXCEPTION: FORCE STACK (Maha Mantra) --- */
    /* If the column has .force-stack, revert lines to blocks */
    .force-stack .mantra-line {
        display: block !important; 
    
            /* 1. UNLOCK WIDTH: Remove 'width: 100%' so JS can lock the specific pixel size */
        width: fit-content !important; 
    
        /* 2. CENTER THE BOX: Use margins to center the element itself */
        margin-left: auto !important;
        margin-right: auto !important;
    
        margin-bottom: 0.2rem !important; 
    
        /* 3. ALIGN TEXT LEFT: Keeps the cursor moving right, prevents jitter */
        /* Since the box is exactly the size of the text (thanks to JS), this still looks centered visually */
        text-align: left !important;
    }

/* Ensure the text container doesn't hug the left border */
    #roman-stage, #sanskrit-stage {
        padding-left: 5px !important;
        padding-right: 5px !important;
        box-sizing: border-box !important;
    }

    /* --- 1. GLOBAL SAFETY (Fixes the borders) --- */
    /* Instead of 100%, we use 98% to force a gap on the sides */
    .module, 
    .right-module, 
    .ide-sidebar {
        width: 98% !important; 
        margin-left: auto !important; /* Centers the module */
        margin-right: auto !important;
        
        /* Ensure padding doesn't blow out width */
        box-sizing: border-box !important;
    }

    /* --- 2. CIVILIAN MODULES (Safe to wrap) --- */
    /* Apply wrapping only to non-animated modules */
    #mod-control-deck, 
    #mod-japa-input, 
    #system-links-module, 
    .ide-sidebar {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    /* --- 3. MANTRA MODULE (Shrink the Iron Bar) --- */
    /* We don't force wrap here (keeps animation smooth). */
    /* We simply shrink the text so the JS calculates a smaller width. */
    .mantra-sanskrit-col { 
        font-size: 1.1rem !important; /* Slightly smaller to fit "Om Namo..." */
        padding: 0.5rem !important; 
    }
    .mantra-roman-col { 
        font-size: 1rem !important; 
        padding: 0.5rem !important; 
    }
    
    /* Ensure the container itself isn't adding invisible width */
    #mod-stream {
        padding-left: 0 !important;
        padding-right: 0 !important;

        /* DECAY: When the glow is removed, take 2 seconds to fade back to normal */
        /* This creates the smooth "cooling down" effect */
        transition: box-shadow 2.0s ease-out, background-color 2.0s ease-out, border-color 2.0s ease-out !important;

        /* Tells browser: "User cannot zoom here, so fire clicks instantly" */
        touch-action: manipulation !important; 
        
        /* Optional: Change cursor to indicate it's clickable in this mode */
        cursor: pointer;
    }

    

    /* --- INPUT FIELD STYLING (2-Line Textarea) --- */
    #mantra-input-field {
        /* Make it look like a seamless box */
        resize: none !important; /* Hides the drag handle */
        overflow: hidden !important; /* Hides scrollbar */
        
        /* Font Sizing */
        font-family: inherit !important; /* Keep your monospace font */
        font-size: 0.8rem !important; 
        line-height: 1.3 !important;   /* Slightly loose for readability */
        
        /* Layout */
        width: 100% !important;
        height: auto !important;
        min-height: 3rem !important; /* Enough height for 2 lines */
        padding: 0.5rem !important;
        
        /* Remove default textarea borders if you want it to look flat */
        border: none !important;
        background: transparent !important;
        color: var(--primary) !important; /* Matches your text color */
        outline: none !important;
    }

    /* Style the placeholder specifically */
    #mantra-input-field::placeholder {
        font-size: 0.75rem !important;
        color: var(--secondary) !important;
        opacity: 0.6;
        white-space: pre-wrap; /* Critical: Allows the line break to render */
    }

    /* 1. Reset the Container (Strip default padding) */
    #system-id-module {
        padding: 0 !important;
        /* Ensure no extra height is calculated */
        height: auto !important; 
    }

    /* 2. Balance the Logo (Un-even margins to look even) */
    #system-id-module pre {
        /* Tiny top margin (because the Header above it already has a margin) */
        margin-top: 0.7rem !important; 
        
        /* Larger bottom margin to push the border away */
        margin-bottom: 1.5rem !important;
        
        display: block !important;
    }

    /* --- MOBILE FOCUS MODE: HIDE COL 3 --- */
    /* When body has class 'focus-active', hide these specific modules */
    body.focus-active #root-sutra-module,      /* Proto-Def */
    body.focus-active #system-links-module,    /* Sys I/O */
    body.focus-active #system-id-module {      /* Sys ID (Logo) */
        display: none !important;
    }

    /* --- FIX [+1] BUTTON (Mobile Only) --- */
    #btn-manual-count {
        /* 1. KILL THE ZOOM BUG (Critical) */
        /* Eliminates the 300ms delay and prevents double-tap zoom */
        touch-action: manipulation !important; 

        /* 2. THE FADE OUT (Base State) */
        filter: brightness(1); /* Return to normal brightness */
        /* When you release, it takes 0.5s to fade back to gold */
        transition: color 0.5s ease, text-shadow 0.5s ease, transform 0.5s ease !important;
    }

    /* 3. THE TAP (Active State - Force Brightness) */
    #btn-manual-count:active {
        /* INSTANT SNAP */
        transition: none !important;
        
        /* FORCE WHITE: Over-expose the element to make it glow pure white */
        filter: brightness(3.0) sepia(0) saturate(0) !important;
        
        /* If filter isn't enough, we still set color, but filter does the heavy lifting */
        color: #FFFFFF !important;
        
        /* Massive Glow */
        text-shadow: 0 0 20px #FFFFFF, 0 0 40px var(--highlight) !important;
        
        /* Tactile Shrink */
        transform: scale(0.95) !important;
    }

    /* 4. KILL STICKY HOVER */
    /* Prevents the button from staying white after you tap */
    @media (hover: none) {
        #btn-manual-count:hover {
            color: var(--highlight) !important;
            text-shadow: none !important;
        }
    }
}