/* ==========================================================================
   Global Styles
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Typography
   ========================================================================== */
.gradient-text {
    background-image: linear-gradient(to right, #22d3ee, #818cf8); /* cyan-400 to indigo-400 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Simplified from -webkit-text-fill-color and text-fill-color */
}

.content-section h1 { /* Page title */
    font-size: 2.25rem; /* text-3xl or 4xl */
    line-height: 2.5rem;
    font-weight: 700; /* font-bold */
    margin-bottom: 2rem; /* mb-8 */
    /* Assuming h1 would also use a light color like other headings if not specified */
    color: #f1f5f9; /* slate-50, consistent with other main headings */
}

.content-section h2 { /* Main section titles */
    font-size: 1.5rem; /* text-2xl, from second definition */
    font-weight: 600; /* font-semibold, from second definition */
    color: #5eead4; /* teal-300, from second definition */
    margin-bottom: 1.5rem; /* mb-6 */
    padding-bottom: 0.5rem; /* from second definition */
    border-bottom: 1px solid #334155; /* slate-700, from second definition */
}

.content-section h3 { /* Card titles / Sub-section titles */
    font-size: 1.25rem; /* text-xl, from second definition */
    font-weight: 600; /* font-semibold, from second definition */
    color: #7dd3fc; /* sky-400, from second definition */
    margin-bottom: 1rem; /* mb-4 */
    /* margin-top: 2rem; was in first def, omitted as second def was chosen */
}
	.content-section p{
		color:#f1f1f1 !important;
	}
.content-section p,
.content-section ul li {
    color: #94a3b8; /* slate-400 */
    margin-bottom: 0.75rem; /* mb-3 */
    line-height: 1.6;
}

.content-section ul {
    list-style-position: inside;
    padding-left: 1rem; /* Ensures bullets are visible */
}
       /* Generic styling for all <ul> elements */
       .content-section ul {
            list-style: none; /* Remove default list bullets */
		   
            padding: 0;
            @apply space-y-3 md:space-y-4; /* Generic spacing */
            width: 100%; /* Ensure lists take full width of their container */
            max-width: 30rem; /* Constrain max width for readability */
        }

        /* Generic custom bullet point for all <li> elements within a ul */
        /* This will apply unless overridden by a more specific rule or inline style */
      .content-section  ul li::before {
            content: '●'; /* Unicode character for a solid circle */
            font-size: 1.25rem; /* text-xl equivalent */
            margin-right: 0.75rem; /* mr-3 equivalent */
            color: #6366f1; /* Default vibrant blue/purple for dark theme */
            flex-shrink: 0; /* Prevent bullet from shrinking */
        }

        /* Specific bullet colors for the first 'Our Features' list */
        /* These apply to <li> elements that don't have their own specific bullet styling */
        .features-list li:nth-child(1)::before { color: #6366f1; } /* Indigo */
        .features-list li:nth-child(2)::before { color: #22c55e; } /* Green */
        .features-list li:nth-child(3)::before { color: #a855f7; } /* Purple */
        .features-list li:nth-child(4)::before { color: #ef4444; } /* Red */

/* ==========================================================================
   Sidebar Navigation
   ========================================================================== */

aside.fixed {
position:fixed !important;
}
main.relative{
	position:relative;
}

main.worksheets{
	top: 0 !important; /*solved*/
	bottom: 0 !important; /*solved*/
	left: 0; /*solved*/
	z-index: 30;  
	width:100%; /*solved*/
}
/*.sidebar {
    background-color: #1e293b; /* slate-800 
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); 
}


.sidebar-hidden {
    transform: translateX(-100%);
}

.sidebar-visible {
    transform: translateX(0);
}
*/

  /* 1. Sidebar Styles */
        #sidebar {
            /* Initial state for mobile: off-screen to the left, transparent backdrop */
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            /* Added fixed positioning and z-index for mobile behavior */
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            z-index: 30; 
            width: 18rem; /* Equivalent to w-72 */
        }

        /* 2. Sidebar Open State */
        #sidebar.open {
            /* Open state for mobile: on-screen */
            transform: translateX(0);
        }

        /* 3. Sidebar Backdrop Styles */
        #sidebar-backdrop {
            position: fixed;
            inset: 0; /* Equivalent to top:0; right:0; bottom:0; left:0; */
            background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
            z-index: 20; /* Ensure it's above main content but below the sidebar */
            
            /* Initial state: hidden and fully transparent, does not capture clicks */
            display: none;
            opacity: 0;
            pointer-events: none;
            
            /* Smooth transition for fading in/out */
            transition: opacity 0.3s ease-in-out;
        }

        /* 4. Sidebar Backdrop Open State */
        #sidebar-backdrop.open {
            display: block; /* Make it visible */
            opacity: 1; /* Fade in to full opacity */
            pointer-events: auto; /* Enable click events on the backdrop */
        }

        /* 5. Responsive Behavior for Desktop (md breakpoint and up) */
        @media (min-width: 768px) { /* md breakpoint for Tailwind CSS */
            #sidebar {
                position: relative; /* Change from fixed to relative for desktop layout */
                transform: translateX(0); /* Always visible on desktop */
                display: flex !important; /* Ensure it's always displayed as flex column on desktop */
                flex-shrink: 0; /* Prevent sidebar from shrinking in a flex container */
                flex-direction: column; /* Ensure its content stacks vertically */
                /* width: 18rem; (Already defined for mobile, if needed specifically for desktop, redefine) */
            }

            #sidebar-backdrop {
                display: none !important; /* No backdrop on desktop */
            }

            /* Remove overflow-hidden from body on desktop */
            body.overflow-hidden-mobile {
                overflow: auto; /* Allow normal scrolling */
                touch-action: auto; /* Allow normal touch interactions */
            }
        }
.nav-link {
    display: flex; /* From second definition */
    align-items: center; /* From second definition */
    padding: 0.625rem 0.75rem; /* py-2.5 px-3, from second definition */
    border-radius: 0.375rem; /* rounded-md */
    color: #94a3b8; /* slate-400, from second definition */
    text-decoration: none; /* Added for completeness */
    font-weight: 500; /* font-medium */
    transition: background-color 0.2s, color 0.2s;
    gap: 0.75rem; /* space-x-3, from second definition */
}

.nav-link:hover,
.nav-link.active {
    background-color: #334155; /* slate-700, from second definition */
    color: #e2e8f0; /* slate-200, from second definition */
}

.nav-link svg {
    width: 18px; /* From second definition */
    height: 18px; /* From second definition */
    stroke-width: 2; /* From second definition */
    /* margin-right: 0.75rem; was in first def, replaced by gap in .nav-link */
}

/* ==========================================================================
   Card Styles (Info and Solver)
   ========================================================================== */
.info-card,
.solver-card {
    background-color: #1e293b; /* slate-800 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 1.5rem; /* p-6 */
    margin-bottom: 2rem; /* mb-8 */
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1); /* From second .solver-card definition */
    overflow: hidden; /* From first definition of .info-card, .solver-card */
}

.solver-card h3 { /* Specific h3 style for solver cards, distinct from .content-section h3 */
    margin-top: 0;
    font-size: 1.125rem;
    color: #22d3ee; /* cyan-400 */
    margin-bottom: 1rem;
}

.info-card p, .solver-card p,
.info-card ul, .solver-card ul,
.info-card ol, .solver-card ol {
    margin-bottom: 1rem;
    line-height: 1.75;
    color: #94a3b8; /* slate-400 */
}

.info-card li,
.solver-card li {
    margin-left: 1.5rem;
    list-style-type: none !important;
    margin-bottom: 0.5rem;
}

.info-card ol li,
.solver-card ol li {
    list-style-type: none !important;
}

.info-card code,
.solver-card code {
    background-color: #334155; /* slate-700 */
    padding: 0.2em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.9em;
    color: #e2e8f0; /* slate-200 */
}

.shape-svg-container { /* For SVGs within cards, e.g., calculator icons */
    width: 60px;
    height: auto;
    margin: 0 auto 1rem auto;
    color: #22d3ee; /* cyan-400 for SVG */
}

.shape-svg-container svg {
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Forms and Inputs (Primarily for Solver Cards)
   ========================================================================== */
.input-group {
    margin-bottom: 1rem; /* From second definition */
}

.input-label { /* From second definition block for label styling */
    display: block;
    color: #94a3b8; /* slate-400 */
    margin-bottom: 0.375rem; /* mb-1.5 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
}

/* Fallback label style if .input-label is not used, from first definition block */
.input-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #94a3b8; /* slate-400 */
    font-weight: 500;
}

.solver-input, /* Generic input class from second definition block */
.solver-card input[type="text"],
.solver-card input[type="number"],
.solver-card select,
.solver-card textarea {
    width: 100%;
    padding: 0.625rem 0.875rem; /* py-2.5 px-3.5, from .solver-input */
    border-radius: 0.375rem; /* rounded-md */
    border: 1px solid #475569; /* slate-600 */
    background-color: #334155;  /* slate-700 */
    color: #f1f5f9; /* slate-50 or #e2e8f0 slate-200 */
    font-size: 0.875rem; /* from .solver-input, first block had 1rem */
    margin-bottom: 0.5rem; /* From first definition block */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.solver-input:focus, /* Focus style from .solver-input */
.solver-card input:focus,
.solver-card select:focus,
.solver-card textarea:focus {
    outline: none;
    border-color: #38bdf8; /* sky-500, from .solver-input:focus */
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3); /* ring-sky-500, from .solver-input:focus */
}

.solver-card textarea {
    min-height: 100px; /* From first definition block */
}

.calculate-button, /* Generic calculate button from second definition block */
.solver-card button {
   
}

.calculate-button:hover,
.solver-card button:hover {
    background-color: #0284c7; /* sky-600, from .calculate-button:hover */
}

.calculate-button:active, /* :active from first solver-card button, applied to new base */
.solver-card button:active {
    transform: translateY(1px);
}

.calculate-button:disabled,
.solver-card button:disabled {
    background-color: #475569; /* slate-600 */
    cursor: not-allowed;
}

/* ==========================================================================
   Formula Display & Result Area
   ========================================================================== */
.formula-display {
    background-color: #334155; /* slate-700 */
    color: #e2e8f0; /* slate-200 */
    padding: 0.75rem 1rem; /* p-3 px-4 */
    border-radius: 0.5rem; /* rounded-md */
    margin-bottom: 1.5rem; /* mb-6 */
    text-align: center;
    font-size: 1.1rem;
}

.result-area { /* Using the second definition for .result-area */
    background-color: #334155; /* slate-700 */
    border: 1px solid #475569; /* slate-600 */
    border-radius: 0.375rem; /* rounded-md */
    padding: 1rem; /* p-4 */
    margin-top: 1rem; /* mt-4 */
    color: #e2e8f0; /* slate-200 */
    font-size: 0.9rem;
    min-height: 90px; /* To maintain space even when empty */
    line-height: 1.6;
    /* Transition properties from the first definition are omitted as this is a different component style */
}

.result-area.active { /* For the second definition of .result-area */
    border-left: 3px solid #22d3ee; /* cyan-400 */
    /* opacity and max-height transitions from first .result-area.active are omitted */
}

.result-area .step { /* Child of the second .result-area definition */
    margin-bottom: 0.5rem;
    color: #94a3b8; /* slate-400 */
}

.result-area .final-answer { /* Child of the second .result-area definition */
    margin-top: 0.75rem;
    font-weight: bold;
    color: #5eead4; /* teal-300 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
.tally-table {
    width: 100%;
    margin-top: 1rem;
    border-collapse: collapse;
}

.tally-table th,
.tally-table td {
    border: 1px solid #475569; /* slate-600 */
    padding: 0.75rem;
    text-align: left;
}

.tally-table th {
    background-color: #334155; /* slate-700 */
    font-weight: 600;
    color: #e2e8f0; /* slate-200 */
}

/* ==========================================================================
   KaTeX Math Rendering
   ========================================================================== */
.katex-display {
    margin: 0.75em 0;
    color: #e2e8f0; /* slate-200 */
    overflow-x: auto;
    overflow-y: hidden;
}

.katex {
    color: #e2e8f0; /* slate-200 */
    font-size: 1.1em; /* Default KaTeX font size adjustment */
}
/* .result-area .katex-error styling from the first block was specific to that result area version */

/* ==========================================================================
   Charts and Pictograms
   ========================================================================== */
.chart-container {
    width: 100%;
    max-width: 700px;
    margin: 1.5rem auto;
    background-color: #1e293b; /* slate-800 */
    padding: 1.5rem;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
}

.pictogram-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
    padding: 1rem;
    border: 1px solid #475569; /* slate-600 */
    border-radius: 0.5rem;
    min-height: 60px;
    background-color: #0f172a; /* slate-900 */
}

.pictogram-item span { /* e.g., for emoji or icon character */
    font-size: 1.75rem;
    line-height: 1;
}

.pictogram-label {
    font-size: 0.875rem;
    color: #94a3b8; /* slate-400 */
    text-align: center;
    margin-top: 4px;
}

.pictogram-key {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #cbd5e1; /* slate-300 */
}

/* ==========================================================================
   Solver History List
   ========================================================================== */
#solverHistoryListContainer {
    max-height: 20rem; /* From first definition */
    overflow-y: auto; /* From first definition */
    margin-bottom: 0.75rem; /* From first definition */
    padding: 0.5rem; /* From second definition */
    border-top: 1px solid #334155; /* slate-700, From second definition */
}

.history-item { /* Using second definition */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8; /* slate-400 */
    border-radius: 0.375rem; /* rounded-md */
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s; /* Added color transition */
    word-break: break-word; /* allow long expressions to wrap if needed */
    /* margin-bottom from first definition omitted, background-color from first definition omitted */
}

.history-item:hover { /* Using second definition's hover */
    background-color: #334155; /* slate-700 */
    color: #e2e8f0; /* slate-200 */
}

.history-expression-text {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 0.5rem; /* Consistent from both */
}

.remove-history-item-btn { /* Using second definition */
    background: none;
    border: none;
    color: #64748b; /* slate-500 */
    font-size: 1.1rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
    opacity: 0.6;


    flex-shrink: 0; /* Added from first definition, good property */
    transition: color 0.2s, opacity 0.2s; /* Added opacity transition */
}

.history-item:hover .remove-history-item-btn { /* Using second definition's hover effect */
    color: #ef4444; /* red-500 */
    opacity: 1;
}

#clearHistoryButton { /* Using second definition */
    margin-top: 0.75rem;
    width: 100%;
    font-size: 0.75rem;
    text-align: center;
    color: #38bdf8; /* sky-500 */
    border: 1px solid rgba(56, 189, 248, 0.3); /* sky-500/30 */
    background-color: rgba(56, 189, 248, 0.05); /* sky-500/5 */
    padding: 0.375rem 0;
    border-radius: 0.375rem;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* Added border-color transition */
    cursor: pointer; /* Added */
}

#clearHistoryButton:hover { /* Using second definition's hover */
    background-color: rgba(56, 189, 248, 0.15);
    color: #0ea5e9; /* sky-400, original was #a78bfa from first def, but this matches button color */
    border-color: rgba(56, 189, 248, 0.5); /* Stronger border on hover */
}

#clearHistoryButton:disabled { /* Using second definition's disabled style (implicitly, by not being :hover) */
    opacity: 0.5;
    cursor: not-allowed;
    /* background-color: #475569; from first def, opacity is often enough */
}


/* ==========================================================================
   Fixed Action Buttons (Scroll to Top, Next Solver)
   ========================================================================== */
.fixed-action-button { /* Base style from second definition block */
    position: fixed;
    right: 1.5rem; /* right-6 */
    background-color: #6366f1; /* indigo-500 */
    color: white;
    font-weight: 600; /* font-semibold */
    padding: 0.75rem; /* p-3 */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out, box-shadow 0.3s ease-in-out; /* Added box-shadow transition from old #nextSolverButton */
    z-index: 50; /* Lower than snackbar (1000), higher than most content */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.fixed-action-button:hover {
    background-color: #4f46e5; /* indigo-600 */
    transform: scale(1.05) translateY(-2px); /* Added translateY from old #nextSolverButton:hover */
    box-shadow: 0 10px 20px rgba(96, 165, 250, 0.3); /* From old #nextSolverButton:hover, adjusted color slightly */
}

.fixed-action-button svg {
    width: 20px;
    height: 20px;
}

#nextSolverButton { /* Specifics for Next Solver button */
    /* Default right is 1.5rem from .fixed-action-button */
    bottom: calc(20px + 1.5rem + 40px + 1rem); /* Adjust based on scroll-to-top and potential ad */
    padding: 0.75rem 1rem; /* Slightly wider for text */
}

#nextSolverButtonText { /* Text part of the Next Solver button */
    margin-right: 0.5rem; /* Creates space before the icon if icon is on the right, or if used as span before svg */
    /* If icon is inside button, this might be margin-left if text is after icon */
}

#stk-scroll-to-top-btn { /* Specifics for Scroll to Top button */
    /* Default right is 1.5rem from .fixed-action-button, first definition had left:20px */
    left: 1.5rem; /* Explicitly set left for this button */
    right: auto; /* Remove right positioning from base class */
    bottom: calc(20px + 1.5rem); /* Default bottom position */
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s, background-color 0.3s, transform 0.2s; /* Ensure all transitions */
}

#stk-scroll-to-top-btn.visible {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); /* Ensure it's reset if hover transform was applied */
}

/* ==========================================================================
   Dot Loader Animation (for buttons etc.)
   ========================================================================== */
.dot-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dot-loader div { /* Using second definition */
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    margin: 0 3px;
    animation: dot-loader-anim 1.4s infinite ease-in-out both;
}

.dot-loader div:nth-child(1) { animation-delay: -0.32s; }
.dot-loader div:nth-child(2) { animation-delay: -0.16s; }
.dot-loader div:nth-child(3) { animation-delay: 0s; } /* Ensuring 3rd dot has a delay if present */

@keyframes dot-loader-anim { /* Using second (simpler) definition */
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1.0);
    }
}

/* ==========================================================================
   Snackbar / Notifications
   ========================================================================== */
.stats-snackbar-container { /* Using second definition, adjusted for ad */
    position: fixed;
    bottom: calc(60px + 10px); /* Default bottom, 10px above bottom ad bar */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000; /* High z-index */
    display: flex;
    flex-direction: column-reverse; /* Newest on bottom, pushes old ones up */
    align-items: center; /* Center snackbars horizontally if they have varying widths */
    gap: 0.5rem; /* 10px, from second definition. First was 10px */
}

.stats-snackbar { /* Using second definition */
    background-color: #334155; /* slate-700, base color */
    color: #e2e8f0; /* slate-200 */
    padding: 0.8rem 1.2rem; /* Adjusted from 12px 20px */
    border-radius: 0.375rem; /* rounded-md, first was 0.5rem */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Adjusted shadow */
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between icon and text, first was 10px */
    opacity: 0;
    transform: translateY(20px); /* Start off-screen */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Smoother transitions */
    min-width: 280px;
    max-width: 450px; /* Max width from second definition */
}

.stats-snackbar.show {
    opacity: 1;
    transform: translateY(0); /* Slide in */
}

.stats-snackbar-icon svg { /* For SVG icons */
    width: 20px;
    height: 20px;
}
/* For Font Awesome or other font icons (from first definition) */
.stats-snackbar-icon {
    margin-right: 10px; /* Retained if not using gap, or for non-SVG icons */
    font-size: 1.25rem; /* For font icons */
}

/* Type-specific styles: Icon colors from second definition, backgrounds from first */
.stats-snackbar-info { background-color: #3b82f6; /* blue-500 */ }
.stats-snackbar-info .stats-snackbar-icon { color: #38bdf8; /* sky-500, or white if background is dark enough */ }

.stats-snackbar-success { background-color: #10b981; /* green-500 */ }
.stats-snackbar-success .stats-snackbar-icon { color: #22c55e; /* green-500, or white */ }

.stats-snackbar-error { background-color: #ef4444; /* red-500 */ }
.stats-snackbar-error .stats-snackbar-icon { color: #ef4444; /* red-500, or white */ }

.stats-snackbar-warning { background-color: #f59e0b; /* amber-500 */ }
.stats-snackbar-warning .stats-snackbar-icon { color: #f97316; /* orange-500, or white */ }

#snackbar-container { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 1000; display: flex; flex-direction: column-reverse; gap: 0.5rem; }
.snackbar { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 0.375rem; color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.2); transform: translateY(150%); opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; min-width: 250px; max-width: 350px; }
.snackbar.show { transform: translateY(0); opacity: 1; }
.snackbar-icon { margin-right: 0.75rem; display: flex; align-items: center; }
.snackbar-icon svg { width: 1.25rem; height: 1.25rem; }
.snackbar-info { background-color: #3b82f6; }
.snackbar-success { background-color: #22c55e; }
.snackbar-error { background-color: #ef4444; }

@media (max-width: 767px) { 
	body.overflow-hidden-mobile { overflow: hidden; } 
	.page-title { font-size: 1.75rem; line-height: 2.25rem; }
	.section-title { font-size: 1.5rem; }
	.solver-subtitle { font-size: 1.1rem; }
	.fixed-action-button { width: 3rem; height: 3rem; }
	.fixed-action-button svg { width: 1rem; height: 1rem; }
	#nextSectionButton { bottom: 5.5rem; }
	#snackbar-container { left: 50%; transform: translateX(-50%); width: calc(100% - 3rem); align-items: center; }
}


/* ==========================================================================
   Ad Placeholder Styles
   ========================================================================== */
.stk-ad-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem; /* text-sm */
    color: #94a3b8; /* slate-400 */
    border: 1px dashed #475569; /* slate-600 */
}

.stk-ad-top {
    height: 60px; /* Fixed height for top ad */
    background-color: #1e293b; /* slate-800 */
    margin-bottom: 1.5rem; /* Space below top ad */
}

.stk-ad-bottom {
    position: fixed; /* To ensure it stays at the bottom */
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px; /* Fixed height for bottom ad */
    background-color: #1e293b; /* slate-800 */
    z-index: 998; /* Above content, below scroll-to-top/snackbar */
}


/* ==========================================================================
   Utility Classes
   ========================================================================== */
.hidden {
    display: none;
}

/* Used for mobile to prevent scrolling when sidebar/modal is open */
/* body.overflow-hidden-mobile is defined within media query */


/* ==========================================================================
   Back Link (e.g., for returning to a previous page/section)
   ========================================================================== */
.back-link {
    display: inline-flex;
    align-items: center;
    color: #94a3b8; /* slate-400 */
    font-size: 0.875rem; /* text-sm */
    text-decoration: none; /* Added for completeness */
}
.back-link:hover {
    color: #38bdf8; /* sky-400 */
}
.back-link svg {
    margin-right: 0.5rem; /* mr-2 */
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
    body.overflow-hidden-mobile {
        overflow: hidden;
    }

    #stk-scroll-to-top-btn {
        bottom: calc(60px + 1rem); /* 60px ad height + 1rem margin */
        left: 1rem;
        /* width/height are controlled by .fixed-action-button padding or can be overridden if needed */
        /* Example: width: 40px; height: 40px; padding: 0.5rem; to make it smaller */
    }

    #nextSolverButton {
        bottom: calc(60px + 1rem); /* 60px ad height + 1rem margin */
        right: 1rem;
        /* padding can be adjusted if needed: e.g. padding: 0.6rem 0.8rem; */
    }
    /* .stats-snackbar-container is already adjusted based on ad height */
}


/* In master.css */
/* In master.css */

/* Find this existing block at the end of the file: */
/* ==========================================================================
   Media Queries
   ========================================================================== */
.wsheet{
		display:block;
	}
/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
    body.overflow-hidden-mobile {
        overflow: hidden;
    }

    #stk-scroll-to-top-btn {
        bottom: calc(60px + 1rem); /* 60px ad height + 1rem margin */
        left: 1rem;
    }

    #nextSolverButton {
        bottom: calc(60px + 1rem); /* 60px ad height + 1rem margin */
        right: 1rem;
    }
	.wsheet{
		display:none !important;
	}
}

/* Tablet and Desktop Styles (768px and up) */
@media (min-width: 768px) { /* md breakpoint */
    .sidebar-hidden {
        transform: translateX(0); 
    }

    /* === ADD THIS HACK === */
    /* This hack pushes the main content to the right to make space
       for a sidebar that is assumed to be 18rem wide and fixed/absolute
       on the left side of the viewport on desktop screens.
       The selector 'main.flex-1' targets your specific main element
       based on the classes in your areashape.html.
    */
    main.flex-1 {
        margin-left: 18rem; /* This should match your sidebar's width (w-72) */
    }
    /* === END OF ADDED HACK === */
}


/*BASIC ARITHMETIC*/
  .sidebar {
        /* transition: transform 0.3s ease-in-out; */ /* In master.css, though master.css has an additional 'box-shadow' in transition */
        /* Note: master.css .sidebar has box-shadow and a more complex transition property.
           If the inline transition was meant to be simpler, it's different.
           However, if all specified properties of the inline version are covered by master.css and values are identical, they are removed.
           master.css has 'background-color: #1e293b;'
           master.css has 'transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;'
           The inline 'transition: transform 0.3s ease-in-out;' is simpler.
           Let's assume if a property is defined in master, and inline defines it with same value, it's repeated.
           If the inline 'transition' is considered distinct due to having fewer parts, it would stay.
           For this cleanup, if 'background-color: #1e293b;' is in master, it's removed.
           If 'transition: transform 0.3s ease-in-out;' is meant to be the *only* transition, it differs from master.
           Given master.css defines `background-color: #1e293b;` and a `transition` that includes `transform 0.3s ease-in-out`,
           the inline definitions for these specific properties are covered.
        */
    }

    .gradient-text {
        background-image: linear-gradient(to right, #8B5CF6, #EC4899); /* Purple to Pink - This gradient is different from master.css */
        /* -webkit-background-clip: text; background-clip: text; color: transparent; are identical to master.css */
    }

    .content-section h1.page-title {
        font-size: 2rem; /* Different from master.css .content-section h1 */
        line-height: 2.25rem; /* Different from master.css .content-section h1 */
        /* font-weight: 700; margin-bottom: 2rem; are same as master.css .content-section h1 (if we consider .page-title as a specificity for h1) */
        /* However, master.css targets '.content-section h1'. This inline targets '.content-section h1.page-title'.
           Since the selector is more specific and not identical, and values are different, it's kept.
           If master.css also had h1.page-title with different values, we'd only list differing properties.
           For now, assuming master.css does not have 'h1.page-title' specifically.
        */
    }

    .content-section h2.section-title { /* For main solver titles */
        color: #a78bfa; /* Light Purple - Different from master.css .content-section h2 which is teal-300 */
        /* font-size, font-weight, margin-bottom, padding-bottom, border-bottom are identical to master.css .content-section h2 */
    }

    .content-section h3.solver-subtitle { /* For sub-sections or explanations */
        color: #c4b5fd; /* Lighter Purple - Different from master.css .content-section h3 which is sky-400 */
        /* font-size, font-weight, margin-bottom are identical to master.css .content-section h3 */
    }

    /* .content-section p, .content-section ul li, .content-section ol li definitions are identical to master.css */
    /* .content-section ul, .content-section ol definitions are identical to master.css */
    /* .content-section code definitions are identical to master.css */

    /* .solver-card, .info-card definitions for background-color, border-radius, padding, margin-bottom, box-shadow are identical to master.css */
    
    /* .input-group { margin-bottom: 1rem; } is identical to master.css */
    /* .input-label properties are identical to master.css */

    .solver-input, .solver-select {
        font-size: 0.95rem; /* Different from master.css .solver-input which is 0.875rem */
        /* other properties (background-color, border, color, padding, border-radius, width, transition) are identical to master.css */
    }

    .solver-input:focus, .solver-select:focus {
        border-color: #7c3aed; /* Purple-600 - Different from master.css .solver-input:focus (sky-500) */
        box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3); /* Different from master.css .solver-input:focus */
        /* outline: none; is identical */
    }

     .action-button, .secondary-action-button { /* Generic button for actions */
            background-color: #7c3aed; /* Purple-600 */ color: white; font-weight: 500;
            padding: 0.625rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s;
            margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
            /* width: 100%; Make buttons full width by default, but allow override */
        }
    .results-display-area {
        background-color: #2d3748; /* Slightly lighter than card for contrast */
        /* border, border-radius, padding, margin-top, color, font-size, min-height, line-height are different from master.css's .result-area or it's a new distinct style */
        transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out, padding 0.3s ease-in-out, margin 0.3s ease-in-out;
        overflow: hidden;
    }
    .results-display-area.results-hidden {
        opacity: 0; max-height: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-top: 0px !important;
    }
    .results-display-area.active {
        border-left: 3px solid #8b5cf6; /* Purple-500 - master.css .result-area.active uses cyan-400 */
    }
    .results-display-area .step-block {
        margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px dashed #475569;
    }
    .results-display-area .step-block:last-child {
        border-bottom: none; padding-bottom: 0;
    }
    .results-display-area .step-explanation {
        color: #94a3b8; font-size: 0.9rem; margin-top: 0.35rem; padding-left: 1rem; border-left: 2px solid #64748b;
    }
    .results-display-area .final-result-block {
        margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #64748b; font-weight: bold; color: #a7f3d0; /* Light Teal */
    }
    .error-message { /* This might be new or a specific override */
        color: #f87171; font-weight: 500;
    }
    
    .live-preview-area {
        background-color: #2d3748; color: #e5e7eb; padding: 0.75rem; border-radius: 0.375rem;
        min-height: 2.5em; border: 1px solid #4b5563; margin-top: 0.75rem; margin-bottom:1rem; font-size: 1rem; overflow-x: auto;
    }

    /* HTU Specific Styles - Assuming these are all new and not in master.css */
    .htu-step-container {
        font-family: 'Courier New', Courier, monospace; margin-bottom: 1.5rem; padding: 1rem;
        background-color: #293548; border-radius: 0.5rem; border-left: 4px solid #60A5FA; /* Blue accent */
    }
    .htu-calculation {
        display: grid; justify-items: end; gap: 0.25rem; margin-bottom: 0.5rem;
        padding-right: 0.5rem; direction: rtl; overflow-x: auto; max-width: 100%;
    }
    .htu-calculation div, .htu-calculation span { direction: ltr; text-align: center; min-width: 22px; line-height: 1.5; }
    .htu-header-cell { font-size: 0.8rem; color: #9ca3af; font-weight: bold; padding-bottom: 0.25rem; }
    .htu-digit { padding: 0.1rem; font-size: 1.2rem; }
    .htu-carry { font-size: 0.85rem; color: #FBBF24; height: 1.2em; min-width: 22px; text-align: center; font-weight: bold; }
    .htu-borrow { font-size: 0.85rem; color: #EF4444; text-decoration: line-through; }
    .htu-borrowed-from { font-size: 0.85rem; color: #FBBF24; }
    .htu-operator { grid-column: 1 / 2; font-size: 1.2rem; padding-right: 0.5rem; align-self: center; font-weight: bold; }
    .htu-line { grid-column: 1 / -1; height: 2px; background-color: #4b5563; margin-top: 0.25rem; margin-bottom: 0.25rem; }
    .htu-step-explanation { font-size: 0.9rem; color: #9ca3af; margin-top: 0.75rem; text-align: left; }
    .htu-partial-product-sum-line { grid-column: 1 / -1; height: 2px; background-color: #60A5FA; margin-top: 0.25rem; margin-bottom: 0.25rem; }

    /* History Styling */
   
    #solverHistoryListContainer { 
        padding: 0.5rem; /* In master.css */
        border-top: 1px solid #334155;  /* In master.css */

    }
  
		    /* History Styling */
        #solverHistoryListContainer { padding: 0.5rem; border-top: 1px solid #334155; }
        .history-item { 
            display: flex; flex-direction: column; 
            align-items: flex-start; 
            justify-content: space-between; padding: 0.6rem 0.5rem; 
            font-size: 0.8rem; color: #94a3b8; 
            border-radius: 0.375rem; cursor: pointer; 
            transition: background-color 0.2s; 
            word-break: break-word; position: relative; 
        }
        .history-item:hover { background-color: #334155; color: #e2e8f0; }
        .history-expression-text { 
            flex-grow: 1; white-space: nowrap; 
            overflow: hidden; text-overflow: ellipsis; 
            margin-right: 1.5rem; 
            width: calc(100% - 1.5rem); 
        }
        .history-timestamp {
            font-size: 0.7rem; color: #64748b; 
            margin-top: 0.25rem;
        }
        .history-item:hover .history-timestamp { color: #94a3b8; } 
        .remove-history-item-btn { 
            background: none; border: none; 
            color: #64748b; font-size: 1.1rem; 
            cursor: pointer; padding: 0 0.3rem; 
            line-height: 1; opacity: 0.6;
            position: absolute; top: 0.3rem; right: 0.3rem; 
        }
        .history-item:hover .remove-history-item-btn { color: #ef4444; opacity: 1; }
		
    #clearHistoryButton { 
        /* margin-top, width, font-size, text-align are identical to master.css's #clearHistoryButton */
        color: #a78bfa; /* Different from master.css #clearHistoryButton (sky-500) */
        border: 1px solid rgba(167, 139, 250, 0.3); /* Different from master.css */
        background-color: rgba(167, 139, 250, 0.05); /* Different from master.css */
        /* padding, border-radius, transition are identical */
    }
    #clearHistoryButton:hover { 
        background-color: rgba(167, 139, 250, 0.15); /* Different from master.css */
        color: #8b5cf6; /* Different from master.css */
    }
   
    /* Assuming this is new or distinct */
    .stats-snackbar-container { 
        position: fixed; bottom: 20px; /* master.css has calc(60px + 10px) */
        left: 50%; transform: translateX(-50%); z-index: 1000; 
        display: flex; flex-direction: column-reverse; gap: 0.5rem; 
        /* master.css also aligns-items: center; */
    }
    /* .stats-snackbar and .stats-snackbar.show have properties identical to master.css */
    /* Interactive Practice Specific - Assuming these are all new */
    #interactivePracticeQuestion { font-size: 1.25rem; margin-bottom: 1rem; text-align: center; }
    #interactivePracticeFeedback { margin-top: 1rem; padding: 0.75rem; border-radius: 0.375rem; }
    #interactivePracticeFeedback.correct { background-color: #166534; color: #dcfce7; border-left: 4px solid #22c55e;}
    #interactivePracticeFeedback.incorrect { background-color: #991b1b; color: #fee2e2; border-left: 4px solid #ef4444;}
    #interactivePracticeFeedback.hint { background-color: #713f12; color: #fef3c7; border-left: 4px solid #f59e0b;}
    #interactivePracticeFeedback.answer { background-color: #1d4ed8; color: #dbeafe; border-left: 4px solid #3b82f6;}

    /* Fixed Action Buttons */
    .fixed-action-button { 
        /* position, right, color, font-weight, padding, border-radius, box-shadow, z-index, display, align-items, justify-content are identical to master.css */
        background-color: #7c3aed; /* Purple-600 - Different from master.css (indigo-500) */
        transition: background-color 0.3s ease-in-out, transform 0.2s ease-in-out; /* Different from master.css (includes box-shadow transition) */
    }
    .fixed-action-button:hover { 
        background-color: #6d28d9; /* Purple-700 - Different from master.css (indigo-600) */
        /* transform: scale(1.05); - master.css also has translateY(-2px) and different box-shadow */
    }
    /* .fixed-action-button svg { width: 20px; height: 20px; } is identical */
    #scrollToTopBtn { 
        bottom: 1.5rem; /* master.css has calc(20px + 1.5rem) and left: 1.5rem; right: auto; */
        /* visibility, opacity, transition are identical */
    }
    /* #scrollToTopBtn.visible is identical */
    #nextSectionButton { 
        bottom: calc(1.5rem + 44px + 1rem); /* master.css #nextSolverButton has a different calc or default */
        padding: 0.75rem 1rem; /* Identical to master.css #nextSolverButton */
    }
   
    @media (max-width: 767px) {
        /* .htu-calculation properties are new */
        .htu-calculation { gap: 0.1rem; }
        /* .htu-digit, .htu-carry, .htu-borrow, .htu-header-cell properties are new */
        .htu-digit, .htu-carry, .htu-borrow, .htu-header-cell { min-width: 18px; font-size: 1rem; }
        /* The media query for #stk-scroll-to-top-btn and #nextSolverButton in master.css might make these redundant if they target the same IDs/classes with same values. */
        /* The media query structure itself is defined in master.css */
    }
    /* #expandingNavLinks scrollbar style is identical to master.css (Firefox part) */

     .counter {
        line-height: 1; /* Ensures text in badge is vertically centered */
    }
    .engagement-button.action-taken {
        background-color: #0ea5e9; /* Sky 500 for active state */
        color: white;
    }

/* MODULE CARDS**/
.module-card {
            background-color: #1e293b; /* bg-slate-800 */
            border-radius: 0.5rem; /* rounded-lg */
            padding: 1.25rem; /* p-5 */
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
            border: 1px solid #334155; /* border-slate-700 */
        }
        .module-card h3 {
            font-size: 1.125rem; /* text-lg */
            font-weight: 600; /* font-semibold */
            color: #818cf8; /* text-indigo-400 */
            margin-bottom: 0.75rem; /* mb-3 */
        }
        .module-card h3 a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease-in-out;
        }
        .module-card h3 a:hover {
            color: #a5b4fc; /* lighter indigo on hover */
        }
        .module-card ul {
            list-style-type: none !important;
            padding-left: 0.5rem !important;
            margin-left: 0 !important;
            font-size: 0.875rem;
            color: #94a3b8; /* text-slate-400 */
            flex-grow: 1;
        }
        .module-card ul li {
            list-style-type: none !important;
            padding-left: 0.75rem !important;
            margin-left: 0 !important;
            margin-bottom: 0.5rem;
            line-height: 1.5;
            border-left: 2px solid #334155; /* border-slate-700 */
            position: relative;
        }
        .module-card ul li a {
            color: inherit;
            text-decoration: none;
            display: block;
            transition: color 0.2s ease-in-out;
        }
        .module-card ul li a:hover {
            color: #cbd5e1; /* text-slate-300 */
        }
 
 .sidebar nav#appendixNav { /* Target specific nav */
            transition: max-height 0.5s ease-in-out;
            overflow: hidden; /* Needed for max-height transition */
        }
        .sidebar nav a {
            display: flex;
            align-items: center;
            /* space-x-3; Tailwind class equivalent applied directly to children or via margin */
            padding: 0.5rem 0.75rem; /* py-2 px-3 */
            border-radius: 0.375rem; /* rounded-md */
            font-size: 0.875rem; /* text-sm */
            color: #94a3b8; /* text-slate-400 */
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
        }
         .sidebar nav a svg { /* Style for SVGs in nav links */
            margin-right: 0.75rem; /* space-x-3 equivalent */
        }
        .sidebar nav a:hover {
            background-color: #334155; /* bg-slate-700 */
            color: #f1f5f9; /* text-slate-100 */
        }
        .sidebar nav a.active-link {
            background-color: #4f46e5; /* bg-indigo-600 */
            color: #ffffff; /* text-white */
            font-weight: 500;
        }
        .sidebar nav a.active-link svg {
            color: #a5b4fc; /* text-indigo-300 */
        }
        .show-more-nav-button {
            display: block; /* Or 'flex' if you need to center content inside */
            width: 100%;
            text-align: center;
            padding: 0.5rem 0.75rem;
            margin-top: 0.5rem; /* space-y-2 on parent if it was the only child */
            font-size: 0.875rem; /* text-sm */
            color: #94a3b8; /* text-slate-400 */
            hover:text-slate-200 /* Lighter on hover */
            background-color: transparent; /* Or a subtle bg */
            border: 1px solid #334155; /* border-slate-700 */
            border-radius: 0.375rem; /* rounded-md */
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }
        .show-more-nav-button:hover {
            background-color: #334155; /* bg-slate-700 */
            color: #f1f5f9; /* text-slate-100 */
        }






/**EXPERIMENTAL**/
/* Use a specific wrapper ID to scope custom styles */

        /* Styling for thinking bubble */
        #math-concepts-app-wrapper .thinking-dots span {
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #9ca3af; /* gray-400 */
            border-radius: 50%;
            margin: 0 2px;
            animation: thinking-blink 1.4s infinite both;
        }
        #math-concepts-app-wrapper .thinking-dots span:nth-child(1) { animation-delay: 0s; }
        #math-concepts-app-wrapper .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
        #math-concepts-app-wrapper .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes thinking-blink {
            0%, 80%, 100% { opacity: 0; }
            40% { opacity: 1; }
        }

        /* Delete button styling */
        #math-concepts-app-wrapper .message-delete-button { /* Renamed for clarity */
            background-color: transparent;
            border: none;
            color: #9ca3af; /* gray-400 */
            cursor: pointer;
            padding: 4px;
            margin-left: 8px;
            float: right; /* Position to the right within the message */
            line-height: 1; /* Ensure icon aligns well */
        }
        #math-concepts-app-wrapper .message-delete-button:hover {
            color: #e5e7eb; /* gray-200 */
        }
        #math-concepts-app-wrapper .message-content-wrapper { /* Wrapper for content and delete button */
            display: flex;
            justify-content: space-between;
            align-items: flex-start; /* Align button to top of text */
        }
         #math-concepts-app-wrapper .message-text-content {
            flex-grow: 1; /* Allow text to take available space */
        }


        /* KaTeX specific styling */
        #math-concepts-app-wrapper .katex {
            font-size: 1.1em !important; /* Adjust base KaTeX size if needed */
            line-height: 1.5 !important;
            word-break: break-word !important;
            overflow-wrap: break-word !important;
            vertical-align: middle !important;
            padding-block: 6px !important;
            transition: font-size 0.3s ease, color 0.3s ease !important;
        }
        #math-concepts-app-wrapper .katex-display {
            font-size: calc(1.1em + 0.125rem) !important; /* ~1.125rem based on base */
            line-height: 1.85 !important;
            font-weight: 600 !important;
            padding-block: 20px !important;
            margin-block: 24px !important;
            text-align: center !important;
            overflow-x: auto !important;
            white-space: normal !important;
        }
        #math-concepts-app-wrapper .katex .mfrac {
            margin: 0 5px !important;
            display: inline-flex !important;
            align-items: center !important;
            font-size: 1em !important;
        }
        #math-concepts-app-wrapper .katex .mfrac .frac-line {
            border-color: rgba(229, 231, 235, 0.4) !important; /* text-gray-200 with opacity */
            border-width: 1px !important;
            border-style: solid !important;
        }
        #math-concepts-app-wrapper .katex .vlist {
            overflow: visible !important;
        }
        #math-concepts-app-wrapper .katex .binom {
            vertical-align: middle !important;
        }

        /* Message bubble specific styles (can be simplified if Tailwind is fully leveraged) */
        #math-concepts-app-wrapper .bot-message-bubble { /* Example class for bot message bubble */
            /*color: var(--text-primary);  */ /* Using Tailwind text-gray-200 */
            padding: 10px;
            border-radius: 12px;
            align-self: flex-start;
            font-size: 14px;
			background:none !important;
        }
        #math-concepts-app-wrapper .user-message-bubble { /* Example class for user message bubble */
            padding: 10px;
            border-radius: 12px;
            max-width: 75%;
            align-self: flex-end;
            font-size: 14px;
            word-wrap: break-word;
        }
        #math-concepts-app-wrapper .bot-message-bubble p,
        #math-concepts-app-wrapper .bot-message-bubble ul,
        #math-concepts-app-wrapper .bot-message-bubble ol,
        #math-concepts-app-wrapper .bot-message-bubble li {
            margin-bottom: 0.75rem;
            line-height: 1.5;
            white-space: pre-wrap; /* Important for preserving line breaks from API */
        }
         #math-concepts-app-wrapper .bot-message-bubble h1,
         #math-concepts-app-wrapper .bot-message-bubble h2,
         #math-concepts-app-wrapper .bot-message-bubble h3 {
            margin-top: 1em;
            margin-bottom: 0.5em;
            font-weight: 600;
        }
        #math-concepts-app-wrapper .bot-message-bubble h1 { font-size: 1.5em; }
        #math-concepts-app-wrapper .bot-message-bubble h2 { font-size: 1.25em; }
        #math-concepts-app-wrapper .bot-message-bubble h3 { font-size: 1.1em; }

        #math-concepts-app-wrapper .math-block { /* For KaTeX display blocks */
            margin: 1.5em 0;
            text-align: center;
        }
		.modal,
        .modal-overlay {
          display: none;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.5); 
          justify-content: center;
          align-items: center;
          z-index: 9999;
        }

        .modal-content {
          background-color: #1f2937; 
          color: #e5e7eb; 
          padding: 20px;
          border-radius: 12px;
          text-align: center;
          width: 90%;
          max-width: 400px;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        }

        .modal-actions {
          margin-top: 20px;
          display: flex;
          justify-content: center; 
          gap: 12px;
        }

        .modal-button {
          padding: 10px 20px;
          font-size: 16px;
          font-weight: bold;
          border-radius: 8px;
          border: none;
          cursor: pointer;
          transition: background-color 0.2s ease; 
        }
        .modal-button.confirm {
          background-color: #dc2626; 
          color: #ffffff; 
        }


        .modal-button.cancel {
          background-color: #4b5563; 
          color: #e5e7eb; 
        }

        .modal-button.confirm:hover {
          background-color: #b91c1c; 
        }

        .modal-button.cancel:hover {
          background-color: #6b7280; 
        }

        /* AI Suggestion Box Styles */
        #math-concepts-app-wrapper #suggestionBox {
        }

        #math-concepts-app-wrapper .suggestion-item {
            padding: 0.75rem 1rem; 
            color: #e5e7eb; 
            cursor: pointer;
            font-size: 0.875rem; 
            border-bottom: 1px solid #374151; 
        }

        #math-concepts-app-wrapper .suggestion-item:last-child {
            border-bottom: none; 
        }

        #math-concepts-app-wrapper .suggestion-item:hover {
            background-color: #374151; 
        }
		
        /* Chat History Modal Specifics */
        #math-concepts-app-wrapper #chatHistoryContent {
        }

        #math-concepts-app-wrapper .history-message {
            padding: 0.5rem 0.75rem; 
            border-radius: 0.375rem; 
            border: 1px solid #374151; 
            font-size: 0.875rem; 
        }

        #math-concepts-app-wrapper .history-message.user {
            background-color: #1e40af; 
            color: #dbeafe; 
            margin-left: 2rem; 
            border-color: #1e3a8a; 
        }

        #math-concepts-app-wrapper .history-message.bot {
            background-color: #374151; 
            color: #d1d5db; 
            margin-right: 2rem; 
        }
        
        #math-concepts-app-wrapper .history-message p {
            margin-bottom: 0.25rem; 
            white-space: pre-wrap; 
            word-wrap: break-word;
        }

        #math-concepts-app-wrapper .chat-actions {
            margin-top: 0.5rem; 
            display: flex;
            gap: 0.5rem; 
        }

        #math-concepts-app-wrapper .chat-actions button {
            background-color: #4b5563; 
            color: #e5e7eb; 
            padding: 0.25rem 0.5rem; 
            border-radius: 0.25rem; 
            border: none;
            font-size: 0.75rem; 
            cursor: pointer;
        }

        #math-concepts-app-wrapper .chat-actions button:hover {
            background-color: #6b7280; 
        }

        /* Toast Message Style */
        .toast-message {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #222; 
            color: #fff;
            padding: 10px 20px; 
            border-radius: 8px;
            font-size: 0.875rem; 
            z-index: 10000; 
            box-shadow: 0 4px 8px rgba(0,0,0,0.5); 
            opacity: 0;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; 
            transform: translateX(-50%) translateY(10px); 
        }
        .toast-message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0); 
        }
         .toast-message.warning { /* For token warnings */
            background-color: #ca8a04; /* amber-600 */
            color: #ffffff;
        }
        .toast-message.error { /* For critical errors or token depletion */
            background-color: #dc2626; /* red-600 */
            color: #ffffff;
        }


        /* Input Area Overlay Menu Styles */
        #math-concepts-app-wrapper #inputOverlayMenu {
            position: absolute;
            bottom: calc(100% + 0.5rem); 
            left: 0; 
            background-color: #1f2937; 
            border: 1px solid #374151; 
            border-radius: 0.5rem; 
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); 
            z-index: 40; 
            width: 200px; 
            padding: 0.5rem; 
        }

        #math-concepts-app-wrapper .input-overlay-item {
            display: flex;
            align-items: center;
            padding: 0.5rem 0.75rem; 
            color: #e5e7eb; 
            font-size: 0.875rem; 
            border-radius: 0.375rem; 
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
        }
        #math-concepts-app-wrapper .input-overlay-item:hover {
            background-color: #374151; 
        }
        #math-concepts-app-wrapper .input-overlay-item svg {
            margin-right: 0.75rem; 
            width: 1.25rem; 
            height: 1.25rem; 
            color: #9ca3af; 
        }
	.snackbar {
  visibility: hidden; /* Hidden by default */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #111; /* Dark background */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 30px; /* 30px from the bottom */
  font-size: 17px; /* Increase font size */
  opacity: 0; /* Start fully transparent */
  transition: opacity 0.5s, bottom 0.5s; /* Smooth fade and slide animation */
}

.snackbar.show {
  visibility: visible; /* Show the snackbar */
  opacity: 1; /* Fade in */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 4.5s; /* Safari, Chrome and Opera > 12.1 */
  animation: fadein 0.5s, fadeout 0.5s 4.5s; /* Fade in and then fade out after 4.5s (total 5s) */
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}


/*------------------------------------*\
  #BASE STYLES & TYPOGRAPHY
\*------------------------------------*/

body {
    font-family: 'Roboto', sans-serif;
    /* Ensure !important is only used if absolutely necessary to override external styles. */
}
.crumbs a {
	font-weight:normal !important;

	
}


  .concept-svg-container { 
            width: 100%; max-width:250px; height:auto; min-height:180px; 
            background-color:#283347; border:1px solid #475569; 
            margin: 0.5rem auto 1rem auto; border-radius:0.25rem; padding: 0.5rem;
        }
        .concept-svg-container svg { width: 100%; height: auto; display: block; }
        .concept-svg-container svg polygon, .concept-svg-container svg line, .concept-svg-container svg rect, .concept-svg-container svg path {
            stroke: #a78bfa; /* Violet for main lines */
        }
        .concept-svg-container svg text { fill: #cbd5e1; } /* slate-300 for text */
        .concept-svg-container svg .angle-arc { stroke: #c084fc; /* Purple for angle arcs */ }
        .concept-svg-container svg .right-angle-symbol { stroke: #94a3b8; /* slate-400 for right angle symbol */ }
/* Buttons */
        .calculate-button, .action-button {
            background-color: #7c3aed; /* Purple-600 */ color: white; font-weight: 500;
            padding: 0.75rem 1.25rem; border-radius: 0.375rem; transition: background-color 0.2s;
            margin-top: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
        }
input[type="number"] {
  background-color: #334155 !important;
  border: none !important;
  color: #e2e8f0;
  padding: 0.625rem 0.875rem;
  border-radius: 0.375rem;
  width: 100%;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
  margin: 0;
}

        .calculate-button:hover, .action-button:hover { background-color: #6d28d9; /* Purple-700 */ }
        .calculate-button:disabled { background-color: #5b21b6; cursor:not-allowed; }
        .secondary-action-button { background-color: #475569; /* slate-600 */ }
        .secondary-action-button:hover { background-color: #334155; /* slate-700 */ }

   .interactive-hint-area { margin-top: 0.5rem; font-size: 0.85rem; }
        .interactive-hint-area button { font-size: 0.8rem; padding: 0.25rem 0.5rem; margin-right: 0.5rem; background-color: #4a5568; }
        .interactive-hint-area button:hover { background-color: #2d3748; }

        /* Plot Containers */
        .plot-container { width: 100%; height: 400px; background-color: #1e293b; border-radius: 0.375rem; margin-top: 1.5rem; }
        /* Specific for Extrema Plot */
        .extrema-plot-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
        @media (min-width: 1024px) { .extrema-plot-grid { grid-template-columns: 1fr 1fr; } }


    body.overflow-hidden-mobile { overflow: hidden; }
        
        .gemini-solver-input {
            margin-top: 1rem;
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.375rem;
            border: 1px solid #475569;
            background-color: #334155;
            color: #e2e8f0;
        }
        .gemini-solver-button {
            margin-top: 0.75rem;
            background-color: #3b82f6; /* Blue-500 */
            color: white;
            font-weight: 500;
            padding: 0.625rem 1rem;
            border-radius: 0.375rem;
            transition: background-color 0.2s;
        }
        .gemini-solver-button:hover {
            background-color: #2563eb; /* Blue-600 */
        }


        .gemini-solver-button:disabled {
            background-color: #1e3a8a; /* Darker blue for disabled */
            cursor: not-allowed;
        }
		/* Gemini Usage Bar Styling */
        .gemini-usage-container {
            margin-top: 1rem;
            padding: 0.75rem;
            background-color: #1a202c; /* Darker slate */
            border-radius: 0.5rem;
            border: 1px solid #334155;
            text-align: center;
        }
        .gemini-usage-bar {
            width: 100%;
            background-color: #475569; /* slate-600 */
            border-radius: 0.25rem;
            height: 8px;
            overflow: hidden;
            margin-top: 0.5rem;
        }
        .gemini-usage-fill {
            height: 100%;
            width: 0%; /* Initial width */
            background-color: #8b5cf6; /* purple-500 */
            border-radius: 0.25rem;
            transition: width 0.5s ease-in-out;
        }
        .gemini-usage-text {
            font-size: 0.8rem;
            color: #cbd5e1;
            font-weight: 500;
        }
 /* Unit Conversion specific styles, adapted for consistency */
        #currencyDisclaimer {
            font-size: 0.75rem;
            color: #FCD34D; /* Default: yellow-400 for info */
            margin-top: 1rem;
            padding: 0.5rem;
            background-color: rgba(252, 211, 77, 0.1);
            border-radius: 0.375rem;
            border: 1px solid rgba(217, 119, 6, 0.3);
        }
        #currencyDisclaimer.error {
            color: #F87171; /* red-400 for errors */
            background-color: rgba(248, 113, 113, 0.1);
            border-color: rgba(220, 38, 38, 0.3);
        }

img.h-5 {
    width: 30px;
}
.content-section p, .content-section li { margin-bottom: 1rem; line-height: 1.75; color: #9ca3af; }

.crumbs a{
	font-size:0.95rem !important;
}

/* Base styles for list items */
li {
    list-style: none; /* Remove default list markers */
}

/* Base styles for code blocks/snippets */
code {
    background-color: #334155;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.9em;
    color: #e2e8f0;
}

/* Base styles for canvas elements */
canvas {
    margin: 1rem auto; /* Center it */
    display: block; /* Remove extra space below */
}

/*------------------------------------*\
  #HEADINGS
\*------------------------------------*/

h1.gradient-text {
    background: linear-gradient(to right, #a78bfa, #60a5fa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h1.mobile {
    display: block;
    font-size: 16px; /* Mobile-first font size */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}

h2 {
    font-size: 30px; /* Smaller for mobile */
    padding: 10px 0;
    margin: 10px 0;
    font-weight: bolder;
}

h3 {
    padding: 10px 0;
    text-align: left;
    font-weight: bolder;
    margin: 5px 0;
}

h4 {
    padding: 15px 0;
    font-size: 18px; /* Smaller for mobile */
    font-weight: bold;
}

.page-title {
    font-size: 1.75rem; /* Smaller for mobile */
    line-height: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.section-title {
    font-size: 1.5rem; /* Smaller for mobile */
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #475569; /* Slate-600 */
    color: #e2e8f0; /* Gray-200 */
}

.solver-subtitle {
    font-size: 1rem; /* Smaller for mobile */
    font-weight: 600;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    color: #6EE7B7; /* Emerald-300 */
}

/*------------------------------------*\
  #LINKS
\*------------------------------------*/

a {
    color: var(--link-color);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background-color: var(--link-underline);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

a:hover,
a:focus {
    color: var(--link-hover);
    outline: none;
}

a:hover::after,
a:focus::after {
    transform: scaleX(1);
}

a:focus-visible {
    outline: 2px dashed var(--link-focus);
    outline-offset: 4px;
}

/* Specific Link Overrides for main/mathcontent */
main a {
    color: #F1FD74; /* Custom link color */
}

.mathcontent a {
    color: #B1FF95; /* Light green for math content links */
    text-decoration: underline;
    font-weight: bold;
}

.mathcontent a:hover {
    text-decoration: underline;
}

/*------------------------------------*\
  #BUTTONS
\*------------------------------------*/

button {
    border: none;
    /* Reset default button border */
    background: none;
    /* Reset default button background */
}

.button-grid {
    display: flex;
    flex-direction: column; /* Stack buttons on small screens */
    gap: 0.75rem;
    margin-top: 1rem;
}

.button-grid .calculate-button {
    width: 100%; /* Full width for mobile */
    margin-top: 0;
}

.solver-card button {
    padding: 0.6rem 1.5rem;
    background-color: #2563eb; /* Blue-600 */
    color: #fff;
    font-weight: 600;
    border-radius: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    font-family: inherit;
    width: 100%; /* Full width on mobile */
}

.solver-card button:hover {
    background-color: #1d4ed8; /* Blue-700 */
}

.solver-card button:focus {
    outline: 2px solid #60a5fa; /* Blue-400 */
    outline-offset: 2px;
}

.solver-input-area button {
    background-color: #10B981;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    width: 100%;
    border: none;
}

.solver-input-area button:hover {
    background-color: #059669;
}

/* Calculator Card Buttons */
.calculator-card button:not(.accordion-button) {
    background-color: #10B981;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    border: none;
    display: block;
    width: 100%;
    margin-top: 0.5rem;
}

.calculator-card button:not(.accordion-button):hover {
    background-color: #059669;
}

/* History Buttons */
.history-show-more-button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #93C5FD; /* Light Blue-300 */
    background-color: transparent;
    border: 1px solid #2563EB; /* Blue-600 */
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.history-show-more-button:hover {
    background-color: #1E40AF; /* Blue-800 */
    color: white;
}

#clearGeometryHistoryButton,
#toggleGeometryHistoryViewButton {
    margin-top: 0.75rem;
    width: 100%;
    font-size: 0.75rem;
    text-align: center;
    color: #a78bfa;
    border: 1px solid rgba(167, 139, 250, 0.3);
    background-color: rgba(167, 139, 250, 0.05);
    padding: 0.375rem 0;
    border-radius: 0.375rem;
    transition: background-color 0.2s, color 0.2s;
}

#clearGeometryHistoryButton:hover,
#toggleGeometryHistoryViewButton:hover {
    background-color: rgba(167, 139, 250, 0.15);
    color: #c084fc;
}

#clearGeometryHistoryButton:disabled,
#toggleGeometryHistoryViewButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Engagement Buttons */
.engagement-button {
    background-color: transparent;
    border: 1px solid #475569; /* Slate-600 */
    color: #94a3b8; /* Slate-400 */
    border-radius: 50%;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
}

.engagement-button:hover {
    background-color: #475569; /* Slate-600 */
    color: white;
}

.engagement-button .counter {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    background-color: #ef4444; /* Red-500 */
    color: white;
    font-size: 0.625rem;
    font-weight: 600;
    border-radius: 50%;
    min-width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem;
}

.engagement-buttons-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #475569; /* Slate-600 */
}

/* Floating Action Buttons (FABs) should generally be positioned for mobile first */
#nextSectionButton,
#nextSectionButtonFAB,
#nextSectionBtn {
    bottom: 14.5rem;
    /* Adjust as needed for mobile */
}

#scrollToTopBtn {
    bottom: 3.0rem;
    /* Adjust as needed for mobile */
}


/*------------------------------------*\
  #INPUTS & FORMS
\*------------------------------------*/

input[type="text"] {
    border: none;
    /* Reset default input border */
}

/* Remove spinner arrows from number input fields */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Modern styling for number input fields (applies to all number inputs unless overridden) */
input[type="number"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 1rem;
    line-height: 1.5;
    color: #374151;
    background-color: #ffffff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

input[type="number"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
}

input[type="number"]::placeholder {
    color: #9ca3af;
}

.solver-input:focus,
.solver-select:focus {
    outline: none;
    border-color: #38bdf8;
    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.3);
}

.solver-input-area label,
.input-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}

.input-group label {
    margin-bottom: 0.25rem;
    color: #94a3b8; /* Slate-400 */
}

.solver-input-area input[type="text"],
.solver-input-area input[type="number"],
.solver-input-area select {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #475569;
    background-color: #334155;
    color: #e2e8f0;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.solver-input-area input[type="text"]:focus,
.solver-input-area input[type="number"]:focus,
.solver-input-area select:focus {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

.solver-input-block label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: #cbd5e1;
    font-weight: 500;
}

.solver-input-block input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #475569;
    background-color: #334155;
    color: #e2e8f0;
    font-size: 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.solver-input-block input[type="text"]:focus {
    outline: none;
    border-color: #10B981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
}

.formula-input,
.formula-select {
    background-color: #334155;
    border: 1px solid #475569;
    color: #e2e8f0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.375rem;
    width: 100%;
    font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    margin-bottom: 0.5rem;
}

.formula-input:focus,
.formula-select:focus {
    outline: none;
    border-color: #8b5cf6; /* Violet-500 for focus */
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.calculator-card input[type="number"],
.calculator-card textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid #475569;
    background-color: #334155;
    color: #e2e8f0;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.calculator-card textarea {
    min-height: 80px;
    font-family: monospace;
}

.solver-card input[type="text"],
.solver-card input[type="number"],
.solver-card select,
.interactive-card input[type="text"],
.interactive-card input[type="number"],
.interactive-card select,
.interactive-card input[type="range"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid #475569;
    background-color: #334155;
    color: #e2e8f0;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.interactive-card input[type="range"] {
    padding: 0.25rem;
}

.solver-card input[type="text"]:focus,
.solver-card input[type="number"]:focus,
.solver-card select:focus,
.interactive-card input[type="text"]:focus,
.interactive-card input[type="number"]:focus,
.interactive-card select:focus,
.interactive-card input[type="range"]:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: #8B5CF6; /* Violet focus */
    box-shadow: 0 0 0 2px #A78BFA; /* Lighter Violet shadow */
}

/* DMS Input Group */
.dms-input-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.dms-input-group input {
    width: 60px;
    text-align: center;
}

/* Tom Select Styling */
.tom-select {
    background-color: #1f2937;
    color: #f8fafc;
    border: 1px solid #334155;
    border-radius: 0.375rem;
}

.tom-select .item {
    color: #f8fafc;
    background-color: transparent;
}

.ts-dropdown {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
}

.ts-dropdown .option {
    color: #1e293b;
    padding: 0.5rem 1rem;
}

.ts-dropdown .option.active,
.ts-dropdown .option:hover {
    background-color: #e2e8f0;
    color: #000;
}

/*------------------------------------*\
  #LAYOUT & GRID SYSTEMS
\*------------------------------------*/

.input-group {
    margin-bottom: 1rem;
}

.input-grid,
.input-grid-2,
.solver-input-grid,
.grid-inputs {
    display: grid;
    grid-template-columns: 1fr; /* Single column for mobile */
    gap: 1rem;
    margin-bottom: 1rem;
}

.solver-input-coeffs {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    gap: 0.75rem;
}

.solver-input-coeffs>div {
    flex: 1;
}

.complex-input-grid {
    display: grid;
    grid-template-columns: 1fr; /* Stack elements for mobile */
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.complex-input-grid span {
    text-align: center;
    font-size: 1.1rem;
    color: #9ca3af;
}

.equation-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.eq-input {
    min-width: 40px;
    max-width: 100%;
    flex: 1 1 auto; /* Allow items to grow and shrink, but respect content */
    text-align: center;
    margin-bottom: 0;
}

.eq-op {
    color: #9ca3af;
    white-space: nowrap;
    margin: 0 0.25rem;
}

/*------------------------------------*\
  #CARDS & BLOCKS
\*------------------------------------*/

.solver-input-block {
    background-color: #1e293b;
    padding: 1rem; /* Smaller padding for mobile */
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 1.5rem; /* Smaller margin for mobile */
}

/*------------------------------------*\
  #RESULTS & DISPLAYS
\*------------------------------------*/

.realtime-equation-display {
    text-align: center;
    font-size: 1rem; /* Smaller for mobile */
    color: #7dd3fc;
    padding: 0.5rem; /* Smaller padding */
    margin-bottom: 0.75rem;
    min-height: 3em;
    border: 1px dashed #334155;
    border-radius: 0.375rem;
    background-color: #111827;

}

.results-display-area,
.result-area {
    background: none;
    border-left: none;
}

.calculator-result-area {
    background-color: #293548;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-top: 1rem;
    min-height: 3rem;
    border-left: 4px solid #34D399;
}

.calculator-result-area p.step {
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed #475569;
    color: #e2e8f0;
}

.calculator-result-area p.step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.calculator-result-area p.final-result-step strong {
    color: #6EE7B7;
}

/* LLM Response Area */
.llm-response-area {
    background-color: #2d3748;
    border-left: 3px solid #60a5fa; /* blue-400 */
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    color: #e2e8f0;
    line-height: 1.6;
}

.llm-response-area.loading {
    font-style: italic;
    color: #94a3b8;
}

/* Animation for loading state on Gemini result area */
@keyframes pulse-border-purple {
    0% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
        border-color: rgba(139, 92, 246, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(139, 92, 246, 0);
        border-color: rgba(139, 92, 246, 1);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
        border-color: rgba(139, 92, 246, 0.6);
    }
}

.gemini-result-area.is-loading {
    animation: pulse-border-purple 1.5s infinite ease-out;
    border-color: #8b5cf6;
    /* Ensure border is visible during animation */
}

/* Styles for the new progress bar */
.query-progress-container {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: #1e293b;
    border-radius: 0.5rem;
    border: 1px solid #334155;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.query-progress-label {
    font-size: 0.875rem;
    color: #94a3b8;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.query-progress-bar-outer {
    width: 100%;
    background-color: #475569;
    border-radius: 0.25rem;
    height: 8px;
    overflow: hidden;
}

.query-progress-bar-inner {
    height: 100%;
    background-color: #34d399; /* Green */
    width: 0%; /* Will be updated by JS */
    border-radius: 0.25rem;
    transition: width 0.3s ease-in-out;
}

.query-progress-bar-inner.warn {
    background-color: #fbbf24; /* Yellow */
}

.query-progress-bar-inner.danger {
    background-color: #ef4444; /* Red */
}

/* Quiz specific styles */
.quiz-option-btn {
    background-color: #334155; /* slate-700 */
    color: #e2e8f0;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
    text-align: left;
    width: 100%;
    transition: background-color 0.2s, border-color 0.2s;
    border: 1px solid #475569;
}

.quiz-option-btn:hover:not(:disabled) {
    background-color: #475569; /* slate-600 */
}

.quiz-option-btn.selected {
    border-color: #8b5cf6; /* purple-500 */
    background-color: #4f46e5; /* indigo-600 */
}

.quiz-option-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.quiz-option-btn.correct-answer {
    background-color: #16a34a; /* green-600 */
    border-color: #16a34a;
    color: white;
    font-weight: 600;
}

.quiz-option-btn.wrong-answer {
    background-color: #dc2626; /* red-600 */
    border-color: #dc2626;
    color: white;
    font-weight: 600;
}

.quiz-feedback-correct {
    color: #22c55e; /* green-500 */
    font-weight: 500;
}

.quiz-feedback-incorrect {
    color: #ef4444; /* red-500 */
    font-weight: 500;
}

.quiz-explanation {
    background-color: #2d3748;
    border-left: 3px solid #8b5cf6;
    padding: 1rem;
    margin-top: 1rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
}

/* Scientific Calculator specific styles */
#scientific-calculator-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.calculator-body {
    background-color: #2d3748; /* Darker slate-700 */
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    width: 100%; /* Full width for mobile */
    display: flex;
    flex-direction: column;
}

.calculator-display {
    background-color: #1a202c; /* Even darker for display */
    color: #e2e8f0;
    font-size: 1.75rem; /* Smaller for mobile */
    text-align: right;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    white-space: nowrap;
    font-family: 'Roboto Mono', monospace;
    min-height: 60px; /* Adjust height for mobile */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    user-select: none;
}

.calculator-buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Adjust to 4 columns for better mobile layout */
    gap: 0.5rem; /* Smaller gap for mobile */
}

.calc-button {
    background-color: #475569; /* slate-600 */
    color: #e2e8f0;
    font-size: 1rem; /* Smaller for mobile */
    padding: 1rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.calc-button:hover {
    background-color: #64748b; /* slate-500 */
}

.calc-button:active {
    transform: scale(0.95);
    background-color: #334155; /* slate-700 */
}

.calc-button.operator {
    background-color: #7c3aed; /* purple-600 */
    color: white;
}

.calc-button.operator:hover {
    background-color: #6d28d9; /* purple-700 */
}

.calc-button.clear,
.calc-button.delete {
    background-color: #ef4444; /* red-500 */
    color: white;
    font-size: 0.9rem; /* Smaller for mobile */
}

.calc-button.clear:hover,
.calc-button.delete:hover {
    background-color: #dc2626; /* red-600 */
}

.calc-button.equals {
    background-color: #22c55e; /* green-500 */
    color: white;
}

.calc-button.equals:hover {
    background-color: #16a34a; /* green-600 */
}

.calc-button.large {
    grid-column: span 2;
}

.solid-svg-container {
    width: 100px; /* Smaller for mobile */
    height: 80px; /* Smaller for mobile */
    margin: 0.5rem auto 1rem auto;
    background-color: #2d3748;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.grid-inputs label {
    font-size: 12px;
}

.solid-svg-container svg {
    width: 90%;
    height: 90%;
    stroke: #9ca3af;
    stroke-width: 1.5;
    fill: rgba(107, 114, 128, 0.1);
}

.chart-container {
    width: 100%;
    max-width: 600px;
    margin: 1rem auto 0 auto; /* Adjust margin for mobile */
    background-color: #1e293b;
    padding: 0.75rem; /* Smaller padding */
    border-radius: 0.5rem;
}

.grouped-data-row {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on small screens */
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    align-items: center;
}

.grouped-data-row input {
    margin-bottom: 0;
    flex: 1 1 100px; /* Allow input to shrink and grow, with a minimum width */
    min-width: 0;
}

.remove-row-btn {
    background-color: #ef4444;
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.875rem;
}

th,
td {
    border: 1px solid #475569;
    padding: 0.5rem;
    text-align: center;
}

th {
    background-color: #334155;
}

/*------------------------------------*\
  #STEP-BY-STEP & EXPLANATIONS
\*------------------------------------*/

.step-block {
    background-color: #2d3748;
    padding: 0.75rem;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    border-left: 3px solid #22C55E;
}

.step-math {
    margin-bottom: 0.75rem; /* Slightly smaller margin */
    padding-top: 0.35rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #475569; /* slate-600 */
}

.step-block p {
    margin-bottom: 0.25rem;
    color: #e5e7eb;
    word-wrap: break-word;
}

.step-explanation {
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.sub-step-explanation {
    font-size: 0.8rem;
    color: #a0aec0;
    margin-left: 1rem;
    margin-top: 0.25rem;
}

/*------------------------------------*\
  #PLOTTING & CANVAS
\*------------------------------------*/

#quadraticGraphCanvas {

    width: 100%;
    max-width: 600px;
    height: 300px; /* Adjust height for mobile */
    max-height: 300px;
    background-color: #273040;
    border-radius: 0.375rem;
    margin-top: 1rem;
    display: block;
}

.plot-container {
    width: 100%;
    height: 300px; /* Adjust height for mobile */
    background-color: #111827;
    border-radius: 0.375rem;
    padding: 0.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.6rem;
}

.plot-container canvas {
    width: 100%;
    height: 100%;
}

/* Overriding plot-container for specific use cases */
.plot-container {
    background-color: #1e293b;
    margin-top: 1.5rem;
    padding: 1rem;
}

.plot-container {
    width: 100%;
    height: 350px; /* Adjust height for mobile */
    background-color: #1f2937; /* gray-800 */
    border-radius: 0.375rem;
    margin-top: 1.5rem;
    margin-bottom: 1.6rem;
}

#circleCanvas {
    border: 1px solid #4b5563; /* gray-600 */
    background-color: #2d3748; /* gray-700 */
    border-radius: 0.375rem; /* rounded-md */
    width: 100%;
    max-width: 400px;
    height: 350px; /* Adjust height for mobile */
    margin: 1rem auto;
    display: block;
}

#triangleConstructionCanvas {
    border: 1px solid #475569;
    background-color: #283347;
    border-radius: 0.375rem;
    width: 100%;
    max-width: 400px;
    height: 250px; /* Adjust height for mobile */
    margin: 1rem auto;
    display: block;
}

/*------------------------------------*\
  #SIDEBAR & NAVIGATION
\*------------------------------------*/
/*
#sidebar {
    padding: 20px 10px; /* Reduced padding for mobile 
}
*/
aside button {
    font-size: 12px; /* Smaller font for mobile */
    text-align: center;
}

.topnavheader {
    padding: 10px 15px;
    font-size: 0.85rem;
}

.sidebar nav#pageNavIterative {
    transition: max-height 0.5s ease-in-out;
    overflow: hidden;
}

.sidebar nav a.nav-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.9rem;
    color: #94a3b8;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.sidebar nav a.nav-link svg {
    margin-right: 0.75rem;
    width: 18px;
    height: 18px;
}

.sidebar nav a.nav-link:hover {
    background-color: #334155;
    color: #f1f5f9;
}

.sidebar nav a.nav-link.active-link {
    background-color: #10B981;
    color: #ffffff;
    font-weight: 500;
}

.sidebar nav a.nav-link.active-link svg {
    color: #A7F3D0;
}

.show-more-nav-button {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #94a3b8;
    background-color: transparent;
    border: 1px solid #334155;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.show-more-nav-button:hover {
    background-color: #334155;
    color: #f1f5f9;
}

.nav-group-title {
    padding: 0.5rem 0.75rem;
    margin-top: 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
}

.nav-category-header {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
}

.nav-category-header:hover {
    background-color: #334155;
}

/*------------------------------------*\
  #ACCORDION
\*------------------------------------*/

.accordion-button {
    width: 100%;
    background-color: #283347;
    color: #e2e8f0;
    padding: 0.75rem 1rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid #334155;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-button:hover {
    background-color: #334155;
}

.accordion-content {
    padding: 0;
    background-color: #1e293b;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}

.accordion-arrow {
    transition: transform 0.3s ease;
}

.accordion-button.active .accordion-arrow {
    transform: rotate(180deg);
}

/* Accordion for Solver Blocks */
/* This block duplicates the above accordion-button and accordion-content.
   I'll keep the more specific `accordion-button` styling for solver blocks,
   but consolidate the `accordion-content` since its behavior is similar.
*/
.accordion-button {
    background-color: #293548; /* Slightly lighter than card for distinction */
    padding: 1rem 1.5rem;
    font-weight: 600;
    border-bottom: 1px solid #1e293b; /* Separator when closed */
}

/* The accordion-content styles are already defined above and are generally good. */
.accordion-content.active {
    display: block;
    /* This overrides max-height: 0, allowing content to show.
       For a smooth transition, `max-height` should be set to a value
       larger than the content when active, and 0 when not active.
       A JS solution would be best for dynamic height, otherwise
       set a generous `max-height` value here.
    */
    max-height: 500px; /* Example: set a large enough value */
    padding: 1.5rem;
}


.accordion-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    color: #6EE7B7;
}

/*------------------------------------*\
  #HISTORY SECTIONS
\*------------------------------------*/

#formulaHistoryListContainer,
#geometryHistoryListContainer {
    padding: 0.5rem;
    border-top: 1px solid #334155;
}

#hyperbolicDiffSolverHistoryList,
#geometryHistoryList {
    max-height: 10rem;
    overflow-y: auto;
    transition: max-height 0.3s ease-in-out;
}

#hyperbolicDiffSolverHistoryList.expanded,
#geometryHistoryList.expanded {
    max-height: 20rem;
}

.history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    word-break: break-word;
}

/*------------------------------------*\
  #INTERACTIVE ELEMENTS
\*------------------------------------*/

.interactive-step-container {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #334155;
}

.interactive-step-prompt {
    color: #e2e8f0;
    margin-bottom: 0.75rem;
}

.interactive-input-group {
    display: flex;
    flex-direction: column; /* Stack inputs on mobile */
    gap: 0.5rem;
    align-items: flex-start; /* Align stacked items to the start */
}


/* --- Media Queries for Larger Screens (Tablet and Desktop) --- */

/* Small devices (tablets, 640px and up) */
@media (min-width: 640px) {

    /* Headings */
    h1.mobile {
        font-size: 20px; /* Slightly larger */
        max-width: 350px;
    }

    h2 {
        font-size: 45px;
    }

    h3 {
        padding: 12px 0;
        margin: 8px 0;
    }

    h4 {
        padding: 20px 0;
        font-size: 20px;
    }

    .page-title {
        font-size: 2.25rem;
        line-height: 2.5rem;
        margin-bottom: 2rem;
    }

    .section-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .solver-subtitle {
        font-size: 1.25rem;
    }

    /* Buttons */
    .button-grid {
        flex-direction: row; /* Row for tablets and up */
        flex-wrap: wrap; /* Allow wrapping if needed */
    }

    .button-grid .calculate-button {
        flex-grow: 0; /* Don't force full width */
        width: auto;
    }

    .solver-card button {
        width: auto; /* Revert to auto width for wider screens */
    }

    .solver-input-area button,
    .calculator-card button:not(.accordion-button) {
        width: auto; /* Revert to auto width */
    }

    /* Inputs & Forms */
    .input-grid,
    .input-grid-2 {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .solver-input-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .solver-input-coeffs {
        flex-direction: row; /* Row for tablets and up */
    }

    .grid-inputs {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .calculator-card .grid-inputs {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .complex-input-grid {
        grid-template-columns: 1fr auto 1fr auto; /* Restore original layout */
    }

    .equation-line {
        flex-wrap: nowrap; /* Prevent wrapping */
    }

    /* Cards & Blocks */
    .solver-input-block {
        padding: 1.5rem;
        margin-bottom: 2rem;
    }

    /* Calculator */
    .calculator-body {
        width: 450px; /* Limit width on larger screens */
    }

    .calculator-display {
        font-size: 2.25rem; /* Larger font for desktop */
        min-height: 70px;
    }

    .calculator-buttons-grid {
        grid-template-columns: repeat(5, 1fr); /* 5 columns for more scientific functions */
        gap: 0.75rem; /* Larger gap */
    }

    .calc-button {
        font-size: 1.25rem; /* Larger font */
    }

    .calc-button.clear,
    .calc-button.delete {
        font-size: 1rem;
    }

    .solid-svg-container {
        width: 120px;
        height: 100px;
    }

    /* Plotting & Canvas */
    #quadraticGraphCanvas,
    .plot-container {
        height: 350px;
        max-height: 350px;
    }

    #circleCanvas {
        height: 400px;
    }

    #triangleConstructionCanvas {
        height: 300px;
    }

    /* Sidebar */
	/*
    #sidebar {
        padding: 60px 10px;
    }*/

    aside button {
        font-size: 13px;
    }

    /* Interactive Elements */
    .interactive-input-group {
        flex-direction: row; /* Row for tablets and up */
        align-items: center;
    }
}

/*WORKSHEETS*/
.worksheets .content-section{
display: flex;
	 width: 100%; /* Full width on mobile, constrained by max-width */
    max-width: 1200px; /* Limit width on larger screens for better readability */
	flex-direction: column; 
	align-items: center
	

}
/* Styles for the worksheet generator controls */
.generator-controls {
    background-color: #1f2937; /* gray-800 */
    padding: 1.5rem;
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column; /* Stack controls vertically by default (mobile) */
    align-items: center; /* Center items for single column layout (labels/inputs within their div) */
    gap: 1.5rem; /* Increased gap between elements */
    width: 100%; /* Full width on mobile, constrained by max-width */
    max-width: 600px; /* Limit width on larger screens for better readability */
    /* REMOVED: margin-left: auto; margin-right: auto; - now centered by parent .content-section */
}

        @media (min-width: 640px) { /* Small screens (sm breakpoint) and up */
            .generator-controls {
                flex-direction: row; /* Arrange items in a row */
                justify-content: center; /* Center items horizontally within the row */
                flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
                gap: 1rem; /* Adjusted gap for row layout */
            }
        }

        /* Styling for each individual control group (label + input/select) */
        .generator-controls div {
            display: flex;
            flex-direction: column; /* Stack label and input/select vertically by default (mobile) */
            align-items: center; /* Center label and input/select */
            width: 100%; /* Take full width within the generator-controls container */
        }

        @media (min-width: 640px) { /* Small screens (sm breakpoint) and up */
            .generator-controls div {
                width: auto; /* Allow control groups to take natural width */
                flex-direction: row; /* Arrange label and input/select in a row */
                gap: 0.5rem; /* Gap between label and input */
            }
        }

        /* Styling for labels */
        .generator-controls label {
            font-weight: 500;
            margin-bottom: 0.5rem; /* Space below label on mobile */
            white-space: nowrap; /* Prevent label text from wrapping */
            font-size: 0.85rem;
            display: block; /* Ensure label takes its own line on mobile */
            color: #cbd5e1; /* Soft gray for dark mode */
        }

        @media (min-width: 640px) { /* Small screens (sm breakpoint) and up */
            .generator-controls label {
                margin-bottom: 0; /* Remove bottom margin when in row layout */
            }
        }

        /* Styling for number input and select elements */
        .generator-controls input[type="number"],
        .generator-controls select {
            background-color: #374151; /* gray-700 */
            border: 1px solid #4b5563; /* gray-600 */
            color: #e5e7eb; /* gray-200 */
            padding: 0.5rem 0.75rem;
            border-radius: 0.25rem;
            width: 100%; /* Full width on mobile */
            text-align: center;
        }

        @media (min-width: 640px) { /* Small screens (sm breakpoint) and up */
            .generator-controls input[type="number"] {
                width: 80px; /* Fixed width for number input on larger screens */
            }
            .generator-controls select {
                width: 180px; /* Fixed width for select dropdown on larger screens */
            }
        }

        /* Focus styles for input and select */
        .generator-controls input[type="number"]:focus,
        .generator-controls select:focus {
            outline: none; /* Remove default outline */
            border-color: #A78BFA; /* Violet-400 */
            box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.5); /* Custom focus ring */
        }

        /* Styling for the generate worksheet button */
        .generator-controls button {
            background-image: linear-gradient(to right, #8b5cf6, #ec4899) !important; /* from-purple-600 to-pink-500 */
            color: white;
            padding: 0.5rem 1.5rem !important; /* py-2 px-6 */
            border-radius: 9999px !important; /* rounded-full */
            font-weight: 600; /* font-semibold */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* shadow-lg */
            transition: all 0.3s ease !important; /* Smooth transitions for hover effects */
            border: none; /* Remove default button border */
            cursor: pointer; /* Indicate clickable element */
            width: 100% !important; /* Full width on mobile */
            margin-top: 1rem !important; /* Space above button on mobile */
        }

        @media (min-width: 640px) { /* Small screens (sm breakpoint) and up */
            .generator-controls button {
                width: auto; /* Auto width on larger screens */
                margin-top: 0; /* Remove top margin when in row layout */
            }
        }

        /* Text alignment and font size for content section paragraphs */
        .content-section p {
         
            font-size: 0.9rem;
        }
        
       
        /* Styles for the questions area */
        #questionsArea {
            width: 100%; /* Take full available width of its parent */
            max-width: 600px; /* Align with generator controls max-width for centering */
            margin-left: auto;
            margin-right: auto;
            margin-top: 1.5rem; /* Adjusted margin top for spacing */
        }

        /* Styles for individual question items */
        .question-item {
            background-color: #2d3748;
            padding: 1rem 1.5rem;
            border-radius: 0.375rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            width: 100%; /* Ensure question items always take full width within their container */
        }
        .question-item p.question-text {
            font-size: 1.25rem; /* Increased font size for KaTeX */
            font-weight: 500;
            margin-bottom: 0.75rem;
            color: #e5e7eb;
            min-height: 2em; /* Ensure space for KaTeX rendering */
            /* Add these for better text wrapping/overflow handling */
            word-wrap: break-word; /* Allows long words to break and wrap */
            overflow-wrap: break-word; /* Modern equivalent */
        }
        .question-item .actions {
            display: flex;
            flex-wrap: wrap; /* Allow buttons to wrap on small screens */
            gap: 0.75rem; /* Space between buttons */
            margin-top: 0.5rem;
        }
        .question-item .actions button {
            padding: 0.5rem 1rem;
            border-radius: 0.25rem;
            font-size: 0.875rem;
            font-weight: 500;
            transition: background-color 0.2s ease-in-out;
            flex-grow: 1; /* Allow buttons to grow and share space */
        }
         @media (min-width: 400px) { /* Adjust breakpoint as needed */
            .question-item .actions button {
                flex-grow: 0; /* Don't grow if there's enough space */
            }
        }
        .show-answer-btn {
            background-color: #6D28D9;
            color: white;
        }
        .show-answer-btn:hover {
            background-color: #5B21B6;
        }
        .show-steps-btn {
            background-color: #0D9488;
            color: white;
        }
        .show-steps-btn:hover {
            background-color: #0F766E;
        }

        /* Snackbar for answers/steps */
       .worksheets  #snackbar {
            position: fixed !important;
            bottom: 20px;
            right: 20px;
            left: 20px; /* Added for mobile to not be too wide */
            background-color: #151515 !important; /* Darker background for snackbar */
            color: #e5e7eb;
            padding: 1rem 1.5rem;
            border-radius: 0.375rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
            transform: translateY(20px);
            min-width: 300px !important;
            max-width: 450px;
        }
        @media (min-width: 640px) { /* sm breakpoint */
            .worksheets  #snackbar {
                left: auto !important; /* Revert to right-only positioning on larger screens */
            }
        }
        #snackbar.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        #snackbarTitle {
            font-size: 1.125rem;
            font-weight: 600;
            color: #A78BFA;
        }
        #snackbarMessage {
            font-size: 1rem; /* Increased for KaTeX readability */
            line-height: 1.7; /* Adjusted for KaTeX */
            margin-top: 0.5rem;
            max-height: 200px; /* Limit height for scrolling */
            overflow-y: auto; /* Enable vertical scrolling */
            padding-right: 0.5rem; /* Add some padding for the scrollbar */
        }
        /* Modern scrollbar styles for snackbarMessage */
        #snackbarMessage::-webkit-scrollbar {
            width: 6px;
            height: 6px; /* Added for consistency, though not strictly needed for y-scroll */
        }
        #snackbarMessage::-webkit-scrollbar-track {
            background: #28303a; /* Darker track */
            border-radius: 3px;
        }
        #snackbarMessage::-webkit-scrollbar-thumb {
            background: #5a6675; /* Grayer thumb */
            border-radius: 3px;
        }
        #snackbarMessage::-webkit-scrollbar-thumb:hover {
            background: #718096; /* Lighter gray on hover */
        }

        #snackbarMessage ul {
            list-style-type: decimal;
            padding-left: 1.25rem;
            margin-top: 0.5rem;
        }
        #snackbarMessage li {
            margin-bottom: 0.35rem; /* Adjusted for KaTeX */
        }
        #closeSnackbar {
            background: none;
            border: none;
            color: #9ca3af;
            font-size: 1.5rem;
            line-height: 1;
            cursor: pointer;
            padding: 0.25rem;
        }
        #closeSnackbar:hover {
            color: #e5e7eb;
        }
        /* KaTeX display style correction for inline math */
        .katex { font-size: 1.1em; } /* Adjust base KaTeX size if needed */
        .katex-display > .katex {
            font-size: 1.25em; /* Slightly larger for display math */
        }

.quizblock button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background-color: #2563eb; /* Tailwind's blue-600 */
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 100%;
}

.quizblock button:hover {
  background-color: #1d4ed8; /* blue-700 */
  transform: translateY(-1px);
}


        
        #mathcravequiz-layout-container {
            display: flex;
            flex-direction: column; /* Stack columns on small screens */
            width: 100%;
            max-width: 1200px; /* Max width for the entire app */
            gap: 1.5rem; /* Space between columns */
        }

        @media (min-width: 1024px) { /* Large screens (lg) */
            #mathcravequiz-layout-container {
                flex-direction: row; /* Side-by-side on large screens */
            }
        }

        #mathcravequiz-app {
            background-color: #16162a; /* Slightly darker app background */
            color: #e0e0e0; /* Light text for dark theme */
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2); /* shadow-2xl */
            padding: 1.5rem 2rem; /* p-6 sm:p-8 lg:p-10 */
            width: 100%;
            flex: 3; /* Takes 3/4 of space on large screens */
        }

        #mathcravequiz-aside {
          
            color: #e0e0e0;
            border-radius: 0.75rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
            padding: 0.5rem;
            width: 100%;
            flex: 1; /* Takes 1/4 of space on large screens */
            min-height: 200px; /* Minimum height for aside */
            overflow-y: auto; /* Enable scrolling for history */
            max-height: calc(100vh - 2rem); /* Max height to fit viewport, accounting for body padding */
        }
        @media (min-width: 1024px) {
            #mathcravequiz-aside {
                max-height: none; /* Remove max-height on larger screens if not needed */
            }
        }

        .mathcravequiz-math-expression {
            font-size: 1.125rem; /* Reduced from 1.25rem */
            line-height: 1.5;
            color: #e0e0e0; /* Ensure math expressions are light */
        }
        .mathcravequiz-option-button {
            transition: all 0.2s ease-in-out;
            @apply shadow-sm hover:shadow-md;
            background-color: #26263a; /* Darker option background */
            border: 1px solid #3a3a5a; /* Darker border */
            color: #e0e0e0; /* Light text */
            font-size: 1rem; /* Reduced from 1.25rem */
        }
        .mathcravequiz-option-button:hover:not(.selected):not(.disabled) {
            background-color: #3a3a5a; /* Lighter dark on hover */
            border-color: #5a5a7a; /* Lighter dark border on hover */
        }
        .mathcravequiz-option-button.selected {
            background-color: #28a745; /* Green for selected */
            border-color: #218838; /* Darker green border */
            color: #ffffff;
        }
        .mathcravequiz-option-button.correct {
            background-color: #28a745; /* Green for correct */
            border-color: #218838; /* Darker green border */
            color: #ffffff;
        }
        .mathcravequiz-option-button.incorrect {
            background-color: #dc3545; /* Red for incorrect */
            border-color: #c82333; /* Darker red border */
            color: #ffffff;
        }
        .mathcravequiz-button-primary {
            /* Modern primary button for dark theme */
            @apply text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transition duration-300 ease-in-out transform hover:-translate-y-0.5;
            background-image: linear-gradient(to right, #6a0dad, #8a2be2); /* Purple gradient */
            border: none;
			  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 100%;
        }
        .mathcravequiz-button-primary:hover {
            background-image: linear-gradient(to right, #5a0da0, #7a1be0);
        }
        .mathcravequiz-button-secondary {
            /* Modern secondary button for dark theme */
            @apply text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out;
            background-color: #3a3a5a; /* Dark gray */
            border: 1px solid #5a5a7a; /* Lighter dark border */
			  justify-content: center;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background-color: #2563eb; /* Tailwind's blue-600 */
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 100%;
  max-width: 100%;
        }
        .mathcravequiz-explanation-container {
            /* Dark theme for explanation section */
            background-color: #26263a; /* Darker background */
            color: #e0e0e0; /* Light text */
            border-left: 4px solid #8a2be2; /* Purple border */
            border-radius: 0.5rem; /* Rounded corners */
            padding: 1rem;
            position: relative; /* For positioning the progress bar */
        }
        /* Style for text within explanation-container */
        .mathcravequiz-explanation-container .mathcravequiz-math-expression {
            color: #e0e0e0; /* Ensure math expressions are also light */
        }
        /* Dark theme for AI solver response */
        #mathcravequiz-ai-solver-response {
            background-color: #3a3a5a; /* Darker gray */
            color: #e0e0e0; /* Light text */
            border: 1px solid #5a5a7a; /* Darker border */
            border-radius: 0.5rem;
        }
        #mathcravequiz-ai-solver-response .font-semibold {
            color: #a1a1aa; /* Zinc 400 for labels */
        }

        /* Adjustments for quiz screen elements */
        #mathcravequiz-quiz-screen .bg-blue-50 {
            background-color: #26263a; /* Dark background for question box */
            color: #e0e0e0; /* Light text */
        }
        #mathcravequiz-quiz-screen .text-blue-800 {
            color: #8a2be2; /* Purple for topic */
        }
        #mathcravequiz-quiz-screen .text-gray-700 {
            color: #b0b0b0; /* Lighter gray for general text */
        }
        #mathcravequiz-feedback-message {
            color: #ffffff; /* Ensure feedback messages are visible */
        }
        #mathcravequiz-feedback-message.text-green-600 {
            color: #28a745; /* Green for correct feedback */
        }
        #mathcravequiz-feedback-message.text-red-600 {
            color: #dc3545; /* Red for incorrect feedback */
        }

        /* Results screen adjustments */
        #mathcravequiz-results-screen .bg-blue-100 {
            background-color: #26263a; /* Dark background */
            color: #e0e0e0; /* Light text */
        }
        #mathcravequiz-results-screen .text-blue-800 {
            color: #8a2be2; /* Purple for score */
        }
        #mathcravequiz-results-screen .bg-red-50 {
            background-color: #26263a; /* Dark background for mistakes */
            color: #e0e0e0; /* Light text */
        }
        #mathcravequiz-mistakes-summary .text-red-800 {
            color: #dc3545; /* Red for topics to review */
        }
        #mathcravequiz-classroom-suggestions {
            background-color: #3a3a5a; /* Darker background */
            border-color: #5a5a5a; /* Darker border */
            color: #e0e0e0; /* Light text */
        }
        #mathcravequiz-classroom-suggestions .font-semibold {
            color: #b0b0b0; /* Lighter gray for labels */
        }
        #mathcravequiz-classroom-suggestions .text-gray-600 {
            color: #c0c0c0; /* Even lighter gray for list items */
        }


        /* Custom scrollbar for better aesthetics */
        .overflow-y-auto::-webkit-scrollbar {
            width: 8px;
        }
        .overflow-y-auto::-webkit-scrollbar-track {
            background: #26263a;
            border-radius: 10px;
        }
        .overflow-y-auto::-webkit-scrollbar-thumb {
            background: #5a5a7a;
            border-radius: 10px;
        }
        .overflow-y-auto::-webkit-scrollbar-thumb:hover {
            background: #7a7a9a;
        }
        /* Tooltip styles */
        .mathcravequiz-tooltip-container {
            position: relative;
            display: inline-block;
        }
        .mathcravequiz-tooltip-container .mathcravequiz-tooltip-text {
            visibility: hidden;
            background-color: #5a5a7a; /* Darker tooltip background */
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 8px;
            position: absolute;
            z-index: 1;
            bottom: 125%; /* Position above the button */
            left: 50%;
            margin-left: -60px; /* Center the tooltip */
            opacity: 0;
            transition: opacity 0.3s;
            width: 120px;
            font-size: 0.75rem;
        }
        .mathcravequiz-tooltip-container .mathcravequiz-tooltip-text::after {
            content: "";
            position: absolute;
            top: 100%; /* At the bottom of the tooltip */
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #5a5a7a transparent transparent transparent; /* Darker tooltip arrow */
        }
        .mathcravequiz-tooltip-container:hover .mathcravequiz-tooltip-text {
            visibility: visible;
            opacity: 1;
        }

        /* New Scoreboard Progress Bar Styles */
        .mathcravequiz-topic-progress-bar-container {
            width: 100%;
            height: 10px;
            background-color: #3a3a5a; /* Dark background for empty bar */
            border-radius: 9999px;
            overflow: hidden;
            margin-top: 0.25rem;
        }
        .mathcravequiz-topic-progress-bar-fill {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.3s ease-in-out;
        }
        .mathcravequiz-topic-progress-bar-fill.strength {
            background-color: #28a745; /* Green for strength */
        }
        .mathcravequiz-topic-progress-bar-fill.improvement {
            background-color: #dc3545; /* Red for improvement */
        }
        .mathcravequiz-topic-label {
            font-weight: 600;
            color: #e0e0e0;
        }
        .mathcravequiz-topic-percentage {
            font-size: 0.875rem; /* sm text */
            color: #b0b0b0;
        }
        /* Style for score history list items */
        #mathcravequiz-score-history li {
            background-color: #26263a;
            padding: 0.75rem;
            border-radius: 0.5rem;
            margin-bottom: 0.5rem;
            border: 1px solid #3a3a5a;
        }

        /* Quiz Progress Bar */
        #mathcravequiz-progress-bar-container {
            width: 100%;
            height: 12px;
            background-color: #3a3a5a;
            border-radius: 9999px;
            overflow: hidden;
            margin-bottom: 1.5rem;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
        }
        #mathcravequiz-progress-bar-fill {
            height: 100%;
            background-image: linear-gradient(to right, #6a0dad, #8a2be2); /* Purple gradient */
            border-radius: 9999px;
            transition: width 0.5s ease-out;
        }

        /* AI Solver Loading Spinner */
        .mathcravequiz-spinner {
            border: 4px solid rgba(255, 255, 255, 0.3);
            border-top: 4px solid #8a2be2;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }