/* GLOBAL BOX-SIZING FIX */
    * {
      box-sizing: border-box;
    }

    :root {
    --primary:  #6C5CE7;
    --accent: #38bdf8;
    --success: #00B894;
    --error: #D63031;
    --background: #000820;
    --text: #ffffff;
    --surface: rgba(255, 255, 255, 0.04);
    --container-bg: #000820;
    --neon: #00F3FF;
    --chat-bg: rgba(255, 255, 255, 0.06);
    --chat-border: rgba(129, 140, 248, 0.2);
    --tab-inactive-bg: rgba(255, 255, 255, 0.03);
    --tab-active-bg: rgba(255, 255, 255, 0.08);
    --tab-hover-bg: rgba(255, 255, 255, 0.05);
    --tab-border: rgba(255,255,255,0.1);
    /* Calculator specific vars (can be overridden by themes) */
    --calculator-bg: var(--surface);
    --calculator-display-bg: rgba(0,0,0,0.2);
    --calculator-display-text: var(--text);
    --calculator-button-bg: rgba(255,255,255,0.05);
    --calculator-button-text: var(--text);
    --calculator-button-hover-bg: rgba(255,255,255,0.1);
    --calculator-operator-button-bg: rgba(var(--primary-rgb, 56, 189, 248), 0.3); /* Use RGB version for opacity */
    --calculator-operator-button-text: var(--primary);
    --calculator-equals-button-bg: var(--accent);
    --calculator-equals-button-text: white;
    }
    /* Helper to convert hex to rgb for opacity usage */
    :root[style*="--primary: #38bdf8"] { --primary-rgb: 56, 189, 248; }
    :root[style*="--primary: #00f3ff"] { --primary-rgb: 0, 243, 255; }
    :root[style*="--primary: #4A90E2"] { --primary-rgb: 74, 144, 226; }
    :root[style*="--primary: #00c200"] { --primary-rgb: 0, 194, 0; }
    :root[style*="--primary: #007bff"] { --primary-rgb: 0, 123, 255; }
    :root[style*="--primary: #ff7e5f"] { --primary-rgb: 255, 126, 95; }
    :root[style*="--primary: #f06292"] { --primary-rgb: 240, 98, 146; }


    body {
        font-family: 'Inter', system-ui, sans-serif;
        margin: 0;
        padding: 0.5rem;
        background: var(--background);
        color: var(--text);
        min-height: 80vh;
        line-height: 1.6;
        overflow-y: visible; /* Default changed from hidden */
        transition: background 0.5s ease, color 0.5s ease;
    }

    .gradient-text {
        background: linear-gradient(90deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }

    .feedback-item p{
      margin: 1px;
    }

    .upload-section {
        margin-bottom: 1rem;
        margin-top: 1rem;
        transition: transform 0.2s ease;
        width: 80%;
    }

    .drop-zone {
        border: 2px dashed rgba(56, 189, 248, 0.3);
        border-radius: 10px;
        padding: 3rem 0rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(56, 189, 248, 0.05);
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 32px rgba(0,0,0,0.05);
        position: relative;
        overflow: hidden;
    }

    .drop-zone:hover {
        transform: translateY(-2px) scale(1.005);
        box-shadow: 0 12px 40px rgba(59, 130, 246, 0.1);
        border-color: var(--accent);
    }

    .file-added {
        border-color: var(--success);
        background: rgba(16, 185, 129, 0.03);
    }

  .process-btn {
        width: 100%;
        padding: 1rem;
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        color: white;
        border: none;
        border-radius: 5px;
        font-size: 1rem;
        cursor: pointer;
        transition: 0.3s;
        margin-top: 1rem;
        position: relative;
        overflow: hidden;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    .process-btn:hover {
        opacity: 0.95;
        transform: scale(0.98);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2);
    } 

    .secondary-btn {
      position: relative;
      display: inline-block;
      padding: 1rem;
      font-size: 1rem;
      font-weight: 500;
      color: var(--text);
      background-color: var(--bg);
      border: none;
      border-radius: 8px;
      cursor: pointer;
      z-index: 0;
      overflow: hidden;
      transition: color 0.3s ease, background 0.3s ease;
      margin-top: 1rem;
      width: 100%;
    }

    .secondary-btn::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: linear-gradient(45deg, var(--accent), var(--primary), var(--primary), var(--primary), transparent, transparent);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      z-index: -1; 
    }

    .secondary-btn:hover{
        background-color: #38bdf8;
    }

    

    .result-box {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        padding: 1rem;
        padding-bottom: 2.5rem;
        padding-top: 3rem;
        background: var(--surface);
        border-radius: 10px;
        width: 100%;
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        position: relative; 
        border: 1px solid var(--chat-border);
    }

    .the-box {
        margin-top: 1rem;
        padding: 1rem;
        background: var(--surface);
        border-radius: 10px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.05);
        border: 1px solid var(--background);
        width: 85%;
        max-width: 800px;
        min-height: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.5);
        font-style: italic;
        margin-left: auto;
        margin-right: auto;
    }

    .feedback-item {
        padding: 0.5rem 0.5rem;
        margin: 0.8rem 0;
        border-radius: 8px;
        border-left: 2px solid var(--primary);
        position: relative;
        overflow: hidden;
    }
    .feedback-item.correct {
        border-color: var(--success);
        background: rgba(16, 184, 148, 0.10);
    }
    .feedback-item.incorrect {
        border-color: var(--error);
        background: rgba(239, 68, 68, 0.10);
    }

    .feedback-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }


    .question-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.5rem;
    }


    .student-answer {
        background: rgba(56, 189, 248, 0.08);
        padding: 0.7rem 0.7rem;
        border-radius: 4px;
        margin: 0 0;
        border-left: 0px solid var(--primary);
        position: relative;
    }

    .explanation { /* This container will hold correct answer, collapsible sections, and video button */
        background: rgba(255, 255, 255, 0);
        padding: 0.7rem 0.7rem;
        border-radius: 8px;
        color: var(--text);
        display: flex;
        flex-direction: column;
        gap: 0.5rem; /* Space between buttons */
    }
    .explanation strong, .explanation p {
        color: var(--text);
    }

    .collapsible-feedback-section {

        border: 2px dashed rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        background: rgba(255,255,255,0.03);
    }

    .collapsible-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.6rem 0.8rem;
        cursor: pointer;
        transition: background-color 0.2s ease;
        border-radius: 6px 6px 0 0; /* Rounded top corners */
    }

    .collapsible-header strong {
        font-weight: 600;
        color: var(--text);
    }
    .collapsible-icon {
        transition: transform 0.3s ease;
        color: rgba(255,255,255,0.6);
    }
    .collapsible-header.expanded .collapsible-icon {
        transform: rotate(180deg);
    }

    .collapsible-content {
        max-height: 0;
        overflow: hidden;
        display: none;
        padding: 0.8rem 0.8rem;
        transition: all 0.3s ease-in-out;
        border-top: 1px solid rgba(255,255,255,0.05);
    }

    .collapsible-content.expanded {
        display: block;
        max-height: 1000px; /* Adjust as needed, or calculate dynamically */
        opacity: 1;
    }
    .collapsible-content p {
        margin: 0 0 0 0;
        color: rgba(255,255,255,0.85);
    }
    .collapsible-content p:last-child {
        margin-bottom: 0;
    }


    .status-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }
    .correct-icon { color: var(--success); }
    .incorrect-icon { color: var(--error); }

    .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--neon);
        box-shadow: 0 0 10px var(--neon);
        animation: pulse 1s ease-in-out infinite, neon-pulse 3s infinite;
    }

    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.2); }
    }

    /* DINO GAME SPECIFIC STYLES - MODIFIED */
    #dinoOverlayGameContainer {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(15, 23, 42, 0.98); /* Slightly more opaque for better focus */
        z-index: 10000;
        flex-direction: column; /* Changed to column for new elements */
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding: 20px; /* Add some padding for internal elements */
    }

    #dinoOverlayGameContainer::before {
        content: attr(data-score);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Inter', sans-serif;
        font-size: 10vw;
        color: rgba(255, 255, 255, 0.03);
        pointer-events: none;
        z-index: 10001;
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.01);
        will-change: content;
    }

    #dinoOverlayCanvas {
        background: #0f172a;
        border: 2px solid var(--primary);
        border-radius: 5px;
        box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
    }

    /* New Styles for Dino Overlay Enhancements */
    #closeDinoOverlayBtn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(255,255,255,0.1);
        color: var(--text);
        border: none;
        border-radius: 50%;
        width: 35px;
        height: 35px;
        font-size: 20px;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        z-index: 10001; /* Above other overlay content */
    }
    #closeDinoOverlayBtn:hover {
        background: rgba(255,255,255,0.2);
        transform: scale(1.1);
    }

    #dinoTabGameContainer {
        width: 100%;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #0f172a;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
        margin-bottom: 1rem;
    }

    #dinoCanvasTab {
        border: 2px solid var(--primary);
        border-radius: 5px;
    }
    /* END DINO GAME SPECIFIC STYLES */

     /* Skeleton Loader Styles */
    .skeleton-result-box {
        background: transparent; /* Skeleton has its own items */
        padding-top: 1rem; /* Adjust padding for skeleton */
    }
    .skeleton-feedback-item {
        background: var(--surface);
        border-left-color: rgba(255,255,255,0.1);
        opacity: 0.7;
        margin-bottom: 1rem;
    }
    .skeleton-line {
        background-color: rgba(255,255,255,0.1);
        border-radius: 4px;
        margin: 0.5rem 0;
        animation: skeleton-pulse 1.5s infinite ease-in-out;
    }
    .skeleton-line.short { width: 40%; height: 0.8em; }
    .skeleton-line.medium { width: 60%; height: 0.8em; }
    .skeleton-line.long { width: 90%; height: 0.8em; }
    .skeleton-line.skeleton-header-line { width: 50%; height: 1.5em; margin: 0 auto 1.5rem auto; }

    .skeleton-icon {
        width: 24px; height: 24px;
        background-color: rgba(255,255,255,0.1);
        border-radius: 50%;
        margin-right: 1rem;
        animation: skeleton-pulse 1.5s infinite ease-in-out;
    }
    .skeleton-q-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }
    .skeleton-text-block .skeleton-line { margin: 0.3rem 0;}
    .skeleton-answer-box {
        background: rgba(255,255,255,0.05);
        padding: 0.7rem;
        border-radius: 4px;
        margin-top: 0.5rem;
    }

    @keyframes skeleton-pulse {
        0% { background-color: rgba(255,255,255,0.1); }
        50% { background-color: rgba(255,255,255,0.15); }
        100% { background-color: rgba(255,255,255,0.1); }
    }
    /* End Skeleton Loader Styles */


    .container {
        max-width: 100%;
        border-radius: 20px;
        background: var(--container-bg);
        box-shadow: 0 0 50px rgba(108, 92, 231, 0.1);
        border: 1px solid rgba(56, 189, 248, 0.15);
        overflow: hidden;
        position: relative;
        display: flex;
        height: 98vh; /* Default for desktop */
        padding: 1.5rem 0.5rem;
    }

    .container-left{
        width: 30%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .container-right{
        width: 70%;
        height: 100%;
        display: flex;
        flex-direction: row;
        border-left: #304a6e dashed 2px;
    }

    .main-content-wrapper {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
    }


    .container::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: repeating-linear-gradient(
            0deg,
            rgba(255,255,255,0.01),
            rgba(255,255,255,0.01) 1px,
            transparent 1px,
            transparent 2px
        );
        animation: grain 8s steps(10) infinite;
        pointer-events: none;
        opacity: 0.5;
    }
    @keyframes grain {
      0%, 100% { transform: translate(0,0) }
      10% { transform: translate(-5%,-10%) }
      20% { transform: translate(-15%,5%) }
      30% { transform: translate(7%,-25%) }
      40% { transform: translate(-5%,25%) }
      50% { transform: translate(-15%,10%) }
      60% { transform: translate(15%,0%) }
      70% { transform: translate(0%,15%) }
      80% { transform: translate(3%,35%) }
      90% { transform: translate(-10%,10%) }
    }


    .header h1 {
        font-size: 3rem;
        background: linear-gradient(45deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-shadow: 0 0 30px rgba(56, 189, 248, 0.3);
        position: relative;
        display: inline-block;
        font-family: 'Inter', sans-serif;
    }

    .header h1::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 4px;
        background: linear-gradient(90deg, var(--primary), var(--accent));
        border-radius: 2px;
    }

    .drop-zone::before {
        content: '';
        position: absolute;
        inset: -3px;
        background: linear-gradient(45deg,
        var(--primary),
        var(--accent),
        var(--neon));
        z-index: -1;
        filter: blur(20px);
        opacity: 0.2;
    }

    .process-btn::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(45deg,
        transparent 25%,
        rgba(255,255,255,0.3) 50%,
        transparent 75%);
        animation: shine 3s infinite;
    }

    @keyframes shine {
        0% { transform: translateX(-100%) rotate(45deg); }
        100% { transform: translateX(100%) rotate(45deg); }
    }

    @keyframes neon-pulse {
        0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px var(--neon));}
        50% { opacity: 0.8; filter: drop_shadow(0 0 15px var(--neon));}
    }

    ::-webkit-scrollbar {
        width: 8px;
        background: rgba(0,0,0,0.1);
    }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(var(--primary), var(--accent));
        border-radius: 4px;
    }

    img, video, canvas { max-width: 100%; height: auto; }

    .blob-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: -1;
    }
    .blob {
        position: absolute;
        filter: blur(90px);
        opacity: 0.1;
        animation: blob-float 20s infinite ease-in-out;
    }
    @keyframes blob-float {
        0%, 100% { transform: translate(0,0) scale(1); }
        25% { transform: translate(100px, -500px) scale(1.2); }
        50% { transform: translate(-80px, 80px) scale(0.8); }
        75% { transform: translate(-500px, 500px) scale(1.1); }
    }

    h2, h3, p, .file-info {
        color: rgba(255, 255, 255, 0.9);
    }
    .result-box h2 { margin-bottom: 0.5rem; text-align: center; }



    .eye-box{
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 0px;
    }
    .eye-container {
      width: 85px;
      height: 100px;
      background-color: #00143100;
      border:0px solid rgba(56, 189, 248, 0.3);
      border-radius: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
    }
    .eye-move { transition: transform 0.1s linear; }
    .eye-blink {
      width: 60px;
      height: 40px;
      background-color: white;
      border: 1px solid rgba(56, 189, 248, 0.3);
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: blink 3s infinite;
      overflow: hidden;
      transition: transform 0.2s ease, border-radius 0.2s ease; /* For happy eye */
    }
    @keyframes blink { 0%, 8%, 100% { transform: scaleY(1); } 4% { transform: scaleY(0.1); } }

    /* For "Happy Eye" on upload */
    .eye-blink.eye-happy {
        animation: blink-happy 3s infinite;
    }

    @keyframes blink-happy {
        0%, 8%, 100% { transform: scaleY(1); border-radius: 4px; } /* Normal open */
        3% { transform: scaleY(0.1) translateY(2px); border-radius: 4px 4px 50% 50%;} /* Squinted smile part of blink */
        4% { transform: scaleY(0.1) translateY(2px); border-radius: 4px 4px 50% 50%;} /* Hold squint smile */
        5% { transform: scaleY(0.7); border-radius: 4px; } /* Opening up */
    }

    .eye-blink.eye-happy .pupil {
        transform: scale(1.1);
    }

    .eye-inner {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.1s linear;
    }
    .pupil {
      width: 20px;
      height: 20px;
      background-color: var(--accent);
      border-radius: 4px;
      transition: transform 0.5s ease, background-color 0.3s ease, width 0.2s ease, height 0.2s ease;
    }

    /* For feedback-based color change */
    .pupil.pupil-correct {
        background-color: var(--success);
    }

    .pupil.pupil-incorrect {
        background-color: var(--error);
    }
    /* For pupil dilation on reading details */
    .pupil.pupil-dilated {
        transform: scale(1.35); /* Dilated pupil */
    }


    .tools{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: none;
        font-size: 1rem;
        padding: 0.5rem 1.5rem;
        background-color: var(--tab-inactive-bg);
        color: #ffffff;
        border-radius: 0;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    #chatInputArea, #testInputArea, #dictionaryInputArea, #calculatorInputArea {
        display: flex;
        flex-grow: 1;
        gap: 1px;
        align-items: center;
        margin: 0 10px;
    }
    #chatInputArea.hidden, #testInputArea.hidden, #dictionaryInputArea.hidden, #calculatorInputArea.hidden {
        display: none;
    }

    #chatInput, #sendChatBtn,
    #testInput, #testSearchBtn,
    #dictionaryWordInput, #dictionarySearchBtn {
        flex-grow: 1;
        padding: 8px 8px;
        border: none;
        border-radius: 6px;
        background-color: rgba(255, 255, 255, 0);
        color: var(--text);
        font-size: 0.9rem;
        outline: none;
        transition: all 0.3s ease;
        font-family: 'Inter', sans-serif;
    }


    #sendChatBtn, #testSearchBtn, #dictionarySearchBtn {
        flex-grow: 0;
        flex-shrink: 0;
        padding: 8px 18px;
        background: linear-gradient(45deg, var(--primary), var(--accent));
        color: white;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.9rem;
        font-weight: 500;
        transition: all 0.3s ease;
    }
    #sendChatBtn:hover, #testSearchBtn:hover, #dictionarySearchBtn:hover {
        opacity: 0.95;
        transform: scale(0.98);
    }
    #sendChatBtn:disabled, #testSearchBtn:disabled, #dictionarySearchBtn:disabled { opacity: 0.7; cursor: not-allowed; }

    .chat-message {
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        position: relative;
        width: 85%;
        max-width: 800px;
        margin-top: 0.8rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 0.8rem;
        color: rgba(255, 255, 255, 0.9);
        word-wrap: break-word;
        font-size: 0.95rem;
    }
    .user-message {
        background: rgba(56, 189, 248, 0.1);
        border: 1px solid rgba(56, 189, 248, 0.25);
        border-left: 3px solid var(--primary);
    }
    .ai-message {
        background: var(--chat-bg);
        border: 1px solid var(--chat-border);
        border-right: 3px solid var(--accent);
    }
    .chat-message strong { color: rgba(255, 255, 255, 1); font-weight: 600;}

    .system-message-item {
        width: 85%;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding: 1rem 1.2rem;
        border-radius: 10px;
        background: var(--surface);
        color: var(--text);
        border-left: 3px solid var(--primary);
        box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        font-size: 0.95rem;
    }
    .system-message-item.error {
        color: var(--error);
        background: rgba(239, 68, 68, 0.1);
        border-left-color: var(--error);
    }
    .system-message-item strong { color: inherit; font-weight: 600; }

    .hamburger {
        font-size: 1.5rem;
        color: var(--text);
        cursor: pointer;
        padding: 10px;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .hamburger:hover { color: var(--primary); }

    .menu-modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(16, 23, 42, 0.85);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        align-items: center;
        justify-content: center;
    }
    .menu-modal.active { display: flex; }

    .menu-modal-content {
        background: var(--container-bg);
        margin: auto;
        padding: 30px;
        border: 1px solid var(--chat-border);
        border-radius: 15px;
        width: 80%;
        max-width: 500px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        position: relative;
        color: var(--text);
        text-align: center;
    }
    .menu-modal-content h2 {
        color: var(--primary);
        margin-top: 0;
        margin-bottom: 25px;
        font-size: 2rem;
        font-family: 'Inter', sans-serif;
    }
    .close-modal-btn {
        color: var(--text);
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 2rem;
        font-weight: bold;
        background: none;
        border: none;
        cursor: pointer;
        transition: color 0.3s ease;
    }
    .close-modal-btn:hover,
    .close-modal-btn:focus { color: var(--error); text-decoration: none; }

    .menu-options { list-style: none; padding: 0; margin: 0; }
    .menu-options li {
        padding: 15px 20px;
        margin: 10px 0;
        background: var(--surface);
        border-radius: 8px;
        border-left: 4px solid transparent;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
        text-align: left;
    }
    .menu-options li:hover {
        background: rgba(255, 255, 255, 0.12);
        border-left-color: var(--accent);
        transform: translateX(5px);
        color: var(--primary);
    }

    .save-feedback-icon, .unsave-feedback-icon {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.5rem;
        cursor: pointer;
        transition: color 0.3s ease, transform 0.2s ease;
        z-index: 10;
    }
    .save-feedback-icon { color: var(--primary); }
    .save-feedback-icon.saved, .save-feedback-icon.fa-solid { color: var(--accent); }
    .save-feedback-icon:hover, .unsave-feedback-icon:hover { transform: scale(1.1); }
    .unsave-feedback-icon { color: var(--error); }

    #tab-customize-appearance .customization-options {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 25px;
        text-align: left;
        padding: 0px;
        background: rgba(var(--surface), 0.7);
        border-radius: 10px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .customization-group {
        padding: 15px;
        background: var(--surface);
        border-radius: 8px;
        border: 1px solid var(--chat-border);
    }
    .customization-group > label {
        display: block;
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--primary);
    }
    .customization-group select {
        width: 100%;
        padding: 10px 12px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--accent);
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-family: inherit;
        font-size: 0.9rem;
        outline: none;
        transition: border-color 0.3s ease;
    }
    .customization-group select:focus {
        border-color: var(--primary);
    }

    .toggle-option {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
    }
    .toggle-option:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .toggle-option > span {
        font-size: 0.95rem;
        color: rgba(255, 255, 255, 0.9);
    }
    .toggle-option .switch {
        position: relative;
        display: inline-block;
        width: 44px;
        height: 24px;
    }
    .toggle-option .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }
    .toggle-option .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.2);
        transition: .4s;
        border-radius: 24px;
    }
    .toggle-option .slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    .toggle-option input:checked + .slider {
        background-color: var(--primary);
    }
    .toggle-option input:focus + .slider {
        box-shadow: 0 0 1px var(--primary);
    }
    .toggle-option input:checked + .slider:before {
        transform: translateX(20px);
    }


    #tab-customize-appearance .modal-actions {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 15px;
        margin-top: 20px;
        padding: 0 20px 20px 20px;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    #tab-customize-appearance .modal-actions .process-btn {
        width: auto;
        padding: 0.8rem 1.5rem;
        margin-top: 0;
    }

    #tab-customize-appearance .modal-actions .secondary-btn {
        width: auto;
        padding: 0.8rem 1.5rem;
        margin-top: 0;
    }

    body.theme-default {}

    body.theme-cyberpunk {
        --primary: #00f3ff;
        --accent: #ff00ff;
        --success: #00ff00;
        --error: #ff3300;
        --background: linear-gradient(135deg, #0a0f1a 0%, #1a0f1e 100%);
        --text: #e0e0e0;
        --surface: rgba(200, 220, 255, 0.07);
        --container-bg: rgba(10, 15, 30, 0.7);
        --neon: #00f3ff;
        --chat-bg: rgba(200, 220, 255, 0.05);
        --chat-border: rgba(0, 243, 255, 0.25);
        --tab-inactive-bg: rgba(200, 220, 255, 0.03);
        --tab-active-bg: rgba(0, 243, 255, 0.1);
        --tab-hover-bg: rgba(200, 220, 255, 0.05);
        --tab-border: rgba(0, 243, 255, 0.15);
        --calculator-bg: rgba(10, 15, 30, 0.85);
        --calculator-display-bg: rgba(0,0,0,0.5);
        --calculator-display-text: var(--primary);
        --calculator-button-bg: rgba(200, 220, 255, 0.07);
        --calculator-button-text: var(--text);
        --calculator-button-hover-bg: rgba(0, 243, 255, 0.15);
        --calculator-operator-button-bg: rgba(var(--primary-rgb), 0.4);
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: #000;
    }
    body.theme-cyberpunk .header h1 {
        background: linear-gradient(45deg, var(--primary), var(--accent));
        -webkit-background-clip: text; background-clip: text; color: transparent;
        text-shadow: 0 0 20px var(--primary), 0 0 30px var(--accent);
    }
    body.theme-cyberpunk .process-btn {
        background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
        box-shadow: 0 0 15px var(--primary), 0 0 20px var(--accent);
    }
    body.theme-cyberpunk .pupil { background-color: var(--accent); }
    body.theme-cyberpunk .calculator-container { border: 1px solid var(--neon); box-shadow: 0 0 15px var(--neon); }
    body.theme-cyberpunk .calculator-display { border: 1px solid var(--accent); text-shadow: 0 0 5px var(--primary); }
    body.theme-cyberpunk .calculator-button { border: 1px solid rgba(var(--primary-rgb), 0.3); text-shadow: 0 0 3px currentColor; }
    body.theme-cyberpunk .calculator-button.operator { border-color: var(--primary); }
    body.theme-cyberpunk .calculator-button.equals { border-color: var(--accent); box-shadow: 0 0 8px var(--accent); }


    body.theme-deepspace {
        --primary: #4A90E2;
        --accent: #9013FE;
        --success: #7ED321;
        --error: #D0021B;
        --background: linear-gradient(180deg, #000428 0%, #00000c 100%);
        --text: #cccccc;
        --surface: rgba(74, 144, 226, 0.1);
        --container-bg: rgba(5, 10, 30, 0.65);
        --neon: #4A90E2;
        --chat-bg: rgba(74, 144, 226, 0.08);
        --chat-border: rgba(74, 144, 226, 0.2);
        --tab-inactive-bg: rgba(74, 144, 226, 0.04);
        --tab-active-bg: rgba(74, 144, 226, 0.12);
        --tab-hover-bg: rgba(74, 144, 226, 0.07);
        --tab-border: rgba(74, 144, 226, 0.1);
        --calculator-bg: rgba(5, 10, 30, 0.8);
        --calculator-display-bg: rgba(0,0,0,0.3);
        --calculator-display-text: #e0e0e0;
        --calculator-button-bg: rgba(74, 144, 226, 0.08);
        --calculator-button-text: #cccccc;
        --calculator-button-hover-bg: rgba(74, 144, 226, 0.15);
        --calculator-operator-button-bg: rgba(var(--primary-rgb), 0.35);
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: white;
    }
    body.theme-deepspace .blob { opacity: 0.15; filter: blur(120px); }
    body.theme-deepspace .header h1 { text-shadow: 0 0 15px rgba(74, 144, 226, 0.5); }
    body.theme-deepspace .pupil { background-color: #7ED321; }
    body.theme-deepspace .calculator-container { border: 1px solid rgba(var(--primary-rgb),0.3); box-shadow: 0 0 20px rgba(var(--accent-rgb, 144,19,254),0.2); }
    body.theme-deepspace .calculator-display { border: 1px solid rgba(var(--accent-rgb, 144,19,254),0.4); }
    body.theme-deepspace .calculator-button { border: 1px solid rgba(var(--chat-border-rgb, 74,144,226), 0.2); }


    body.theme-matrix {
        --primary: #00c200;
        --accent: #008f00;
        --success: #00ff00;
        --error: #cc0000;
        --background: #020202;
        --text: #00dd00;
        --surface: rgba(0, 255, 0, 0.05);
        --container-bg: rgba(0, 10, 0, 0.75);
        --neon: #00ff00;
        --chat-bg: rgba(0, 255, 0, 0.04);
        --chat-border: rgba(0, 200, 0, 0.3);
        --tab-inactive-bg: rgba(0, 255, 0, 0.02);
        --tab-active-bg: rgba(0, 255, 0, 0.08);
        --tab-hover-bg: rgba(0, 255, 0, 0.04);
        --tab-border: rgba(0, 200, 0, 0.2);
        --calculator-bg: rgba(0, 5, 0, 0.9);
        --calculator-display-bg: rgba(0,0,0,0.7);
        --calculator-display-text: var(--primary);
        --calculator-button-bg: rgba(0, 255, 0, 0.05);
        --calculator-button-text: var(--text);
        --calculator-button-hover-bg: rgba(0, 255, 0, 0.1);
        --calculator-operator-button-bg: rgba(0, 255, 0, 0.15);
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: #000;
    }
    body.theme-matrix, body.theme-matrix input, body.theme-matrix select, body.theme-matrix textarea, body.theme-matrix button, body.theme-matrix .nav-link,
    body.theme-matrix .tab-link, body.theme-matrix .request-section input[type="text"], body.theme-matrix .request-section button,
    body.theme-matrix .message-area, body.theme-matrix .module-title, body.theme-matrix .module-content p,
    body.theme-matrix .module-content li, body.theme-matrix .module-content strong, body.theme-matrix .module-content em,
    body.theme-matrix .module-content pre, body.theme-matrix .module-content th, body.theme-matrix .module-content td,
    body.theme-matrix .action-btn,
    body.theme-matrix .dictionary-container input, body.theme-matrix .dictionary-container button,
    body.theme-matrix .dictionary-container h2, body.theme-matrix .dictionary-container .result,
    body.theme-matrix .dictionary-container .word-title, body.theme-matrix .dictionary-container .part-of-speech,
    body.theme-matrix .calculator-display, body.theme-matrix .calculator-button {
        font-family: 'Share Tech Mono', monospace !important;
        color: var(--text) !important;
    }
    body.theme-matrix ::placeholder { color: rgba(0, 221, 0, 0.6) !important; }
    body.theme-matrix .header h1 {
        font-family: 'Share Tech Mono', monospace !important;
        color: var(--primary) !important; background: none !important; -webkit-background-clip: unset !important; background-clip: unset !important;
        text-shadow: 0 0 10px var(--primary), 0 0 5px var(--primary) !important;
    }
    body.theme-matrix .header h1::after { background: var(--primary) !important; }
    body.theme-matrix .process-btn { background: var(--primary) !important; background-image:none !important; color: #000 !important; }
    body.theme-matrix .process-btn:hover { background: var(--accent) !important; opacity:1 !important; }
    body.theme-matrix .nav-link:hover { color: var(--primary) !important; }
    body.theme-matrix .nav-link:hover::after { background: var(--primary) !important; }
    body.theme-matrix .pupil { background-color: #000 !important; border: 1px solid var(--primary) !important; }
    body.theme-matrix .drop-zone { border-color: rgba(0, 255, 0, 0.3) !important; background: rgba(0,255,0,0.03) !important; }
    body.theme-matrix .drop-zone:hover { border-color: var(--primary) !important; }
    body.theme-matrix .feedback-item { border-left-color: var(--primary) !important; }
    body.theme-matrix .feedback-item.correct { border-color: var(--success) !important; background-color: rgba(0, 255, 0, 0.08) !important; }
    body.theme-matrix .feedback-item.incorrect { border-color: var(--error) !important; background-color: rgba(204, 0, 0, 0.08) !important; }
    body.theme-matrix h2, body.theme-matrix h3, body.theme-matrix p, body.theme-matrix .file-info,
    body.theme-matrix .menu-options li, body.theme-matrix .close-modal-btn,
    body.theme-matrix #clock,
    body.theme-matrix .hamburger i, body.theme-matrix .save-feedback-icon, body.theme-matrix .unsave-feedback-icon,
    body.theme-matrix .menu-modal-content-imitation h2, body.theme-matrix .menu-modal-content-imitation p {
        color: var(--text) !important;
    }
    body.theme-matrix .user-message { border-left-color: var(--primary) !important; background: rgba(0,200,0,0.1) !important; }
    body.theme-matrix .ai-message { border-right-color: var(--accent) !important; background: rgba(0,143,0,0.1) !important; }
    body.theme-matrix input, body.theme-matrix select, body.theme-matrix textarea,
    body.theme-matrix .request-section input[type="text"],
    body.theme-matrix .dictionary-container input[type="text"],
    body.theme-matrix .calculator-display {
        background-color: rgba(0,0,0,0.5) !important;
        border-color: rgba(0,255,0,0.3) !important;
    }
    body.theme-matrix input:focus, body.theme-matrix select:focus, body.theme-matrix textarea:focus,
    body.theme-matrix .request-section input[type="text"]:focus,
    body.theme-matrix .dictionary-container input[type="text"]:focus,
    body.theme-matrix .calculator-display:focus {
        border-color: var(--primary) !important; box-shadow: 0 0 0 2px rgba(0,255,0, 0.3) !important;
    }
    body.theme-matrix .request-section button, body.theme-matrix .dictionary-container button { background: var(--primary) !important; }
    body.theme-matrix .request-section button:hover, body.theme-matrix .dictionary-container button:hover { background-color: var(--accent) !important; }
    body.theme-matrix .message-area.info, body.theme-matrix .message-area.error { color: var(--text) !important;}
    body.theme-matrix .message-area li { color: var(--primary) !important; }
    body.theme-matrix .message-area li:hover { color: var(--accent) !important; }
    body.theme-matrix .module::before { background: var(--primary) !important; }
    body.theme-matrix .module-header { background: rgba(0,10,0,0.9) !important; border-color: rgba(0,255,0,0.2) !important; }
    body.theme-matrix .module-header:hover { border-color: var(--primary) !important; }
    body.theme-matrix .stage-2 .module-header { background: rgba(0,10,0,0.8) !important; }
    body.theme-matrix .stage-3 .module-header { background: rgba(0,10,0,0.7) !important; }
    body.theme-matrix .stage-4 .module-header { background: rgba(0,10,0,0.6) !important; }
    body.theme-matrix .module-content { background: rgba(0,255,0,0.03) !important; border-color: rgba(0,255,0,0.2) !important; }
    body.theme-matrix .module-content pre { background: rgba(0,255,0,0.1) !important; }
    body.theme-matrix .module-content th, body.theme-matrix .module-content td { border-color: rgba(0,255,0,0.2) !important; }
    body.theme-matrix .module-content th { background-color: rgba(0,255,0,0.1) !important; }
    body.theme-matrix .action-btn--explain { background: var(--primary) !important; color: #000 !important;}
    body.theme-matrix .action-btn--questions { background: var(--accent) !important; color: #000 !important;}
    body.theme-matrix .dictionary-container .error { color: var(--error) !important; }
    body.theme-matrix .dictionary-container .word-title { color: var(--primary) !important; }
    body.theme-matrix .dictionary-container .part-of-speech { color: var(--accent) !important; }
    body.theme-matrix .dictionary-container ul li { color: var(--text) !important; }
    body.theme-matrix .calculator-container { border: 1px solid var(--primary); text-shadow: 0 0 3px var(--primary); }
    body.theme-matrix .calculator-button { border: 1px solid rgba(0,255,0,0.4); }
    body.theme-matrix .calculator-button.equals { color: #000 !important; }
    body.theme-matrix .calculator-button:hover { background-color: var(--accent) !important; color: #000 !important; }

    /* --- Start of Improved Lightbeam Theme --- */
    body.theme-lightbeam {
        --primary: #007bff;    /* Bootstrap Blue */
        --accent: #6f42c1;     /* Purple */
        --success: #28a745;    /* Green */
        --error: #dc3545;      /* Red */
        --background: #eef0f2; /* Main page background - very light grey for a clean look */
        --text: #212529;       /* Dark text for excellent readability */
        --surface: #ffffff;    /* Background for cards, modals, inputs - solid white */
        --container-bg: #ffffff; /* Background for the main content .container - solid white */
        --border-color: #dee2e6; /* A general light border color (e.g., Bootstrap's $gray-300) */
        --shadow-color-soft: rgba(0, 0, 0, 0.05);
        --shadow-color-medium: rgba(0, 0, 0, 0.075);

        --neon: #007bff; /* Aligns with primary */

        --chat-bg: #f8f9fa; /* Slightly off-white for chat bubbles (Bootstrap's $gray-100) */
        --chat-border: var(--border-color);
        --tab-inactive-bg: transparent; /* Inactive tabs can be transparent or a very light gray */
        --tab-active-bg: #ffffff;       /* Active tab clearly white */
        --tab-hover-bg: #f0f0f0;      /* Hover for tabs */
        --tab-border: var(--border-color); /* Border for the tab bar container */

        /* Calculator variables using theme's text and surface */
        --calculator-bg: var(--surface);
        --calculator-display-bg: #f1f3f5; /* Light gray for display (Bootstrap's $gray-200) */
        --calculator-display-text: var(--text);
        --calculator-button-bg: #e9ecef;   /* Light gray for buttons (Bootstrap's $gray-200) */
        --calculator-button-text: var(--text);
        --calculator-button-hover-bg: #d3d9df; /* Darker gray on hover */
        --calculator-operator-button-bg: #cfe2ff; /* Light blue tint for operator buttons */
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: white; /* White text on purple is fine */
    }

    body.theme-lightbeam .container {
        background: var(--container-bg) !important; /* Solid white */
        border: 1px solid var(--border-color) !important; /* Light gray border */
        box-shadow: 0 4px 12px var(--shadow-color-medium) !important; /* Softer shadow */
    }

    body.theme-lightbeam .header h1 {
        background: linear-gradient(45deg, var(--primary), var(--accent));
        -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
    }
    body.theme-lightbeam .header h1::after { background: linear-gradient(90deg, var(--primary), var(--accent)); }
    body.theme-lightbeam .blob-container { display: none !important; }
    body.theme-lightbeam .container::before { opacity: 0.05; /* Further reduce grain opacity */ }

    /* Navbar / Tools styling for light theme (used for mobile header and .tools div) */
    body.theme-lightbeam .navbar,
    body.theme-lightbeam .mobile-header-controls { /* mobile-header-controls is often fixed with its own style */
        background: rgba(255, 255, 255, 0.85) !important; /* Semi-transparent white for glass effect */
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 2px 4px var(--shadow-color-soft) !important;
    }
    body.theme-lightbeam .main-content-wrapper .tools { /* For .tools div inside main content specifically on mobile */
        background-color: rgba(255, 255, 255, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
    }


    body.theme-lightbeam .nav-link { color: #495057 !important; } /* Medium dark gray */
    body.theme-lightbeam .nav-link:hover,
    body.theme-lightbeam .tab-link:hover,
    body.theme-lightbeam .tab-link.active { color: var(--primary) !important; }
    body.theme-lightbeam .tab-link.active { background-color: var(--tab-active-bg) !important; }
    body.theme-lightbeam .tab-link:hover { background-color: var(--tab-hover-bg) !important; }

    body.theme-lightbeam .nav-link::after { background: linear-gradient(90deg, var(--primary), var(--accent)) !important; }

    body.theme-lightbeam .eye-blink { background-color: #f0f0f0 !important; border-color: #ccc !important; }
    body.theme-lightbeam .pupil { background-color: var(--accent) !important; }
    body.theme-lightbeam .pupil.pupil-correct { background-color: var(--success) !important; }
    body.theme-lightbeam .pupil.pupil-incorrect { background-color: var(--error) !important; }

    body.theme-lightbeam .drop-zone {
        border: 2px dashed var(--primary) !important;
        background: rgba(0, 123, 255, 0.05) !important; /* Light primary tint */
        color: var(--text) !important; /* Ensure text inside is dark */
    }
    body.theme-lightbeam .drop-zone .fa-file-upload { color: var(--primary) !important; /* Icon color */ }
    body.theme-lightbeam .drop-zone:hover { border-color: var(--accent) !important; background: rgba(0, 123, 255, 0.08) !important; }


    body.theme-lightbeam .feedback-item {
        background: var(--surface) !important; /* White */
        border-left-color: var(--primary) !important;
        box-shadow: 0 1px 3px var(--shadow-color-soft) !important;
        border: 1px solid var(--border-color) !important; /* Add a full border for better definition */
        border-left-width: 3px !important; /* Keep prominent left border */
    }
    body.theme-lightbeam .feedback-item.correct {
        background: rgba(40,167,69,0.05) !important; /* Light green tint */
        border-color: var(--success) !important;
        border-left-width: 3px !important;
    }
    body.theme-lightbeam .feedback-item.incorrect {
        background: rgba(220,53,69,0.05) !important; /* Light red tint */
        border-color: var(--error) !important;
        border-left-width: 3px !important;
    }

    /* General containers for tools, modals, specific tab content */
    body.theme-lightbeam .tools, /* Desktop tools bar if not covered by .navbar */
    body.theme-lightbeam .menu-modal-content, /* Adjusted from menu-modal-content-imitation if that's the actual class */
    body.theme-lightbeam .menu-modal-content-imitation,
    body.theme-lightbeam #tab-test,
    body.theme-lightbeam #tab-dictionary .dictionary-container,
    body.theme-lightbeam #tab-calculator .calculator-container,
    body.theme-lightbeam #tab-customize-appearance .customization-options {
        background: var(--surface) !important; /* White */
        color: var(--text) !important; /* Dark text */
        border: 1px solid var(--border-color) !important; /* Light gray border */
        box-shadow: 0 2px 5px var(--shadow-color-soft) !important; /* Subtle shadow */
    }
    /* Ensure titles within these containers are appropriately colored if needed */
    body.theme-lightbeam .menu-modal-content h2,
    body.theme-lightbeam .menu-modal-content-imitation h2,
    body.theme-lightbeam #tab-dictionary .dictionary-container h2,
    body.theme-lightbeam #tab-test h2, body.theme-lightbeam #tab-test h3,
    body.theme-lightbeam #tab-customize-appearance h2 {
        color: var(--primary) !important;
    }


    body.theme-lightbeam .menu-options li { background: var(--surface) !important; border: 1px solid var(--border-color) !important; }
    body.theme-lightbeam .menu-options li:hover { background: #e9ecef !important; color: var(--primary) !important; border-left-color: var(--accent) !important; }

    /* Inputs and textareas */
    body.theme-lightbeam input, body.theme-lightbeam select, body.theme-lightbeam textarea,
    body.theme-lightbeam #chatInput, 
    body.theme-lightbeam #testInput, 
    body.theme-lightbeam #dictionaryWordInput, 
    body.theme-lightbeam #test-answer-input,
    body.theme-lightbeam .customization-group select, 
    body.theme-lightbeam .calculator-display {
        background-color: var(--surface) !important; /* White */
        border: 1px solid var(--border-color) !important; /* Light gray border */
        color: var(--text) !important; /* Dark text */
    }
    body.theme-lightbeam input::placeholder, body.theme-lightbeam textarea::placeholder,
    body.theme-lightbeam #chatInput::placeholder,
    body.theme-lightbeam #testInput::placeholder,
    body.theme-lightbeam #dictionaryWordInput::placeholder,
    body.theme-lightbeam #test-answer-input::placeholder { color: #6c757d !important; } /* Medium gray placeholder */

    body.theme-lightbeam input:focus, body.theme-lightbeam select:focus, body.theme-lightbeam textarea:focus,
    body.theme-lightbeam #chatInput:focus,
    body.theme-lightbeam #testInput:focus,
    body.theme-lightbeam #dictionaryWordInput:focus,
    body.theme-lightbeam #test-answer-input:focus,
    body.theme-lightbeam .customization-group select:focus,
    body.theme-lightbeam .calculator-display:focus {
        border-color: var(--primary) !important;
        box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25) !important;
    }

    /* General text color overrides - BE CAREFUL WITH THIS SELECTOR */
    body.theme-lightbeam h2, body.theme-lightbeam h3, body.theme-lightbeam p,
    body.theme-lightbeam .file-info,
    body.theme-lightbeam .chat-message p, 
    body.theme-lightbeam .system-message-item p,
    body.theme-lightbeam #clock,
    body.theme-lightbeam .hamburger i, body.theme-lightbeam .close-modal-btn, /* Close button hover is error */
    body.theme-lightbeam .collapsible-header strong,
    body.theme-lightbeam .collapsible-content p, 
    body.theme-lightbeam #tab-test p,
    body.theme-lightbeam .dictionary-container .result, body.theme-lightbeam .dictionary-container ul li,
    body.theme-lightbeam .toggle-option > span, 
    body.theme-lightbeam .watch-video-btn,
    body.theme-lightbeam .save-for-test-btn
    {
        color: var(--text) !important;
    }
    /* Specific overrides for elements that SHOULD NOT be var(--text) or need specific styling */
    body.theme-lightbeam .chat-message strong { color: var(--primary) !important; } 
    body.theme-lightbeam .system-message-item strong { color: var(--primary) !important; }
    body.theme-lightbeam .explanation strong, body.theme-lightbeam .explanation p { color: var(--text) !important; }
    body.theme-lightbeam .student-answer p { color: var(--text) !important; } 
    body.theme-lightbeam .save-feedback-icon { color: var(--primary) !important; }
    body.theme-lightbeam .save-feedback-icon.saved, body.theme-lightbeam .save-feedback-icon.fa-solid { color: var(--accent) !important; }
    body.theme-lightbeam .unsave-feedback-icon { color: var(--error) !important; }


    body.theme-lightbeam .chat-message.user-message { background: rgba(0, 123, 255, 0.08) !important; border-left-color: var(--primary) !important; border-color: var(--chat-border) !important; border-left-width: 3px !important;}
    body.theme-lightbeam .chat-message.ai-message { background: rgba(111, 66, 193, 0.08) !important; border-right-color: var(--accent) !important; border-color: var(--chat-border) !important; border-right-width: 3px !important;}
    body.theme-lightbeam .system-message-item { background: var(--surface) !important; border-color: var(--border-color) !important; border-left-color: var(--primary) !important; border-left-width: 3px !important; }
    body.theme-lightbeam .system-message-item.error { background: rgba(220,53,69,0.08) !important; border-left-color: var(--error) !important; }


    body.theme-lightbeam .process-btn { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%) !important; color: white !important; }
    body.theme-lightbeam .process-btn::after { display: none !important; } /* Removes shine for cleaner look */

    body.theme-lightbeam ::-webkit-scrollbar { background: #f1f1f1; /* Lighter scrollbar track */ }
    body.theme-lightbeam ::-webkit-scrollbar-thumb { background: #c1c1c1; /* Medium gray scrollbar thumb */ }
    body.theme-lightbeam ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; /* Darker on hover */ }

    body.theme-lightbeam .dictionary-container .error { color: var(--error) !important; }
    body.theme-lightbeam .dictionary-container .word-title { color: var(--primary) !important; }
    body.theme-lightbeam .dictionary-container .part-of-speech { color: var(--accent) !important; }

    body.theme-lightbeam .calculator-container { box-shadow: 0 2px 8px var(--shadow-color-medium) !important; }
    body.theme-lightbeam .calculator-button { border: 1px solid var(--border-color) !important; }
    body.theme-lightbeam .calculator-button.operator { color: var(--primary) !important; background-color: var(--calculator-operator-button-bg) !important; }
    body.theme-lightbeam .calculator-button.equals { color: var(--calculator-equals-button-text) !important; background-color: var(--calculator-equals-button-bg) !important; }
    body.theme-lightbeam .calculator-button.clear { background: rgba(var(--error-rgb), 0.15) !important; color: var(--error) !important; }

    body.theme-lightbeam .watch-video-btn {
        background: #e9ecef !important; /* Light gray background */
        color: var(--primary) !important; /* Primary color for text */
        border: 1px solid var(--border-color) !important;
    }
    body.theme-lightbeam .watch-video-btn:hover {
        background: #d3d9df !important; /* Darker gray on hover */
        color: var(--accent) !important;
    }
    body.theme-lightbeam .watch-video-btn i {
        color: var(--error); /* Default icon color */
    }
    body.theme-lightbeam .watch-video-btn:hover i {
        color: var(--accent); /* Icon color on hover */
    }

    body.theme-lightbeam .save-for-test-btn {
        background: #e9ecef !important; 
        color: var(--primary) !important; 
        border: 1px solid var(--border-color) !important;
    }
     body.theme-lightbeam .save-for-test-btn:hover {
        background: #d3d9df !important;
        color: var(--accent) !important;
    }
     body.theme-lightbeam .save-for-test-btn.saved {
        background: var(--success) !important;
        color: white !important;
        border-color: var(--success) !important;
    }
     body.theme-lightbeam .save-for-test-btn.saved i {
        color: white !important;
    }
     body.theme-lightbeam .save-for-test-btn i {
        color: var(--primary); 
    }
    /* --- End of Improved Lightbeam Theme --- */

    body.theme-on-fire {
        --primary: #ff7e5f; 
        --accent: #feb47b; 
        --success: #fdd835; 
        --error: #e53935;
        --background: linear-gradient(140deg, #1d0200 0%, #4d1800 100%); 
        --text: #f5f5f5;
        --surface: rgba(255, 152, 0, 0.08);
        --container-bg: rgba(40, 10, 0, 0.7);
        --neon: #ffc107;
        --chat-bg: rgba(255, 152, 0, 0.06);
        --chat-border: rgba(255, 126, 95, 0.3);
        --tab-inactive-bg: rgba(255, 152, 0, 0.03);
        --tab-active-bg: rgba(255, 152, 0, 0.1);
        --tab-hover-bg: rgba(255, 152, 0, 0.05);
        --tab-border: rgba(255, 126, 95, 0.2);
        /* Calculator specific vars */
        --calculator-bg: rgba(40, 10, 0, 0.85);
        --calculator-display-bg: rgba(0,0,0,0.5);
        --calculator-display-text: var(--primary);
        --calculator-button-bg: rgba(255, 152, 0, 0.1);
        --calculator-button-hover-bg: rgba(255, 152, 0, 0.2);
        --calculator-operator-button-bg: rgba(var(--primary-rgb, 255, 126, 95), 0.4);
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: #000;
    }
    
    body.theme-love-struck {
        --primary: #f06292; 
        --accent: #ba68c8; 
        --success: #4db6ac; 
        --error: #e57373;
        --background: linear-gradient(135deg, #2c0a1e 0%, #4a143c 100%); 
        --text: #fce4ec;
        --surface: rgba(248, 187, 208, 0.07);
        --container-bg: rgba(74, 20, 60, 0.75);
        --neon: #f48fb1;
        --chat-bg: rgba(248, 187, 208, 0.05);
        --chat-border: rgba(240, 98, 146, 0.3);
        --tab-inactive-bg: rgba(248, 187, 208, 0.03);
        --tab-active-bg: rgba(240, 98, 146, 0.1);
        --tab-hover-bg: rgba(248, 187, 208, 0.05);
        --tab-border: rgba(240, 98, 146, 0.2);
        /* Calculator specific vars */
        --calculator-bg: rgba(74, 20, 60, 0.85);
        --calculator-display-bg: rgba(0,0,0,0.4);
        --calculator-display-text: var(--primary);
        --calculator-button-bg: rgba(248, 187, 208, 0.1);
        --calculator-button-hover-bg: rgba(248, 187, 208, 0.2);
        --calculator-operator-button-bg: rgba(var(--primary-rgb, 240, 98, 146), 0.4);
        --calculator-operator-button-text: var(--primary);
        --calculator-equals-button-bg: var(--accent);
        --calculator-equals-button-text: white;
    }

    body.font-default { }

    body.font-orbitron, body.font-orbitron input, body.font-orbitron button, body.font-orbitron select, body.font-orbitron textarea, body.font-orbitron .nav-link, body.font-orbitron .menu-options li,
    body.font-orbitron .tab-link,
     body.font-orbitron .dictionary-container input, body.font-orbitron .dictionary-container button,
     body.font-orbitron .dictionary-container h2, body.font-orbitron .dictionary-container .result,
     body.font-orbitron .dictionary-container .word-title, body.font-orbitron .dictionary-container .part-of-speech,
     body.font-orbitron .calculator-display, body.font-orbitron .calculator-button {
        font-family: 'Orbitron', system-ui, sans-serif !important;
    }
    body.font-orbitron .header h1 { font-family: 'Orbitron', sans-serif !important; letter-spacing: 1px; }

    body.font-roboto_mono, body.font-roboto_mono input, body.font-roboto_mono button, body.font-roboto_mono select, body.font-roboto_mono textarea, body.font-roboto_mono .chat-message p, body.font-roboto_mono .nav-link, body.font-roboto_mono .menu-options li,
    body.font-roboto_mono .tab-link,
     body.font-roboto_mono .dictionary-container input, body.font-roboto_mono .dictionary-container button,
     body.font-roboto_mono .dictionary-container h2, body.font-roboto_mono .dictionary-container .result,
     body.font-roboto_mono .dictionary-container .word-title, body.font-roboto_mono .dictionary-container .part-of-speech,
     body.font-roboto_mono .calculator-display, body.font-roboto_mono .calculator-button {
        font-family: 'Roboto Mono', monospace !important;
    }
    body.font-roboto_mono .header h1 { font-family: 'Roboto Mono', monospace !important; }

    body.font-share_tech_mono, body.font_share_tech_mono input, body.font_share_tech_mono button, body.font_share_tech_mono select, body.font_share_tech_mono textarea, body.font_share_tech_mono .chat-message p, body.font_share_tech_mono .nav-link, body.font_share_tech_mono .menu-options li,
    body.font_share_tech_mono .tab-link,
     body.font_share_tech_mono .dictionary-container input, body.font_share_tech_mono .dictionary-container button,
     body.font_share_tech_mono .dictionary-container h2, body.font_share_tech_mono .dictionary-container .result,
     body.font_share_tech_mono .dictionary-container .word-title, body.font_share_tech_mono .dictionary-container .part-of-speech,
     body.font_share_tech_mono .calculator-display, body.font_share_tech_mono .calculator-button {
        font-family: 'Share Tech Mono', monospace !important;
    }
    body.font_share_tech_mono .header h1 { font-family: 'Share Tech Mono', monospace !important; }

    body.no-blobs .blob-container { display: none !important; }
    body.no-grain .container::before { display: none !important; }
    body.no-eyes .eye-box { display: none !important; }
    body.no-shine .process-btn::after {
        animation: none !important;
        display: none !important;
    }

    .watch-video-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0.8rem 1.2rem;
        background: rgba(255, 255, 255, 0.15);
        color: var(--text);
        border: 0px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        font-weight: 600;
        width:50%;
        transition: all 0.5s ease-in-out;
    }
    .watch-video-btn:hover {
        background: rgb(255, 255, 255);
        border: 0 px;
        color: var(--success);
    }
    .watch-video-btn i {
        color: var(--text);
        transition: all 0.5s ease;
    }
    .watch-video-btn:hover i {
        color: var(--success);
    }

    /* START: New 'Save for Test' button styles */
    .save-for-test-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0.8rem 1.2rem;
        background: rgba(255, 255, 255, 0.15);
        color: var(--text);
        border: 0px solid rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        font-weight: 600;
        width:50%;
        transition: all 0.5s ease-in-out;
    }
    .save-for-test-btn:hover {
        background: rgba(var(--primary-rgb), 0.3);
        transform: translateY(-1px);
    }
    .save-for-test-btn.saved {
        background: var(--success);
        border-color: var(--success);
        color: white;
        cursor: not-allowed;
    }
    .save-for-test-btn.saved i {
        color: white;
    }
    .save-for-test-btn i {
        color: var(--text);
        transition: all 0.3s ease;
    }
    .save-for-test-btn.saved:hover {
        transform: none;
    }
    /* END: New 'Save for Test' button styles */


    .video-modal {
        display: none;
        position: fixed;
        z-index: 3000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(16, 23, 42, 0.95);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        align-items: center;
        justify-content: center;
    }
    .video-modal.active {
        display: flex;
    }
    .video-modal-content {
        position: relative;
        background: var(--container-bg);
        margin: auto;
        padding: 20px;
        border: 1px solid var(--chat-border);
        border-radius: 15px;
        width: 95%;
        max-width: 800px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
        color: var(--text);
    }
    .video-player-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        margin-top: 20px;
        background: #000;
        border-radius: 8px;
    }
    .video-player-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
    .video-modal-content .close-modal-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 1.8rem;
        z-index: 3010;
    }
     .video-modal-content h2 {
        color: var(--primary);
        margin: 0;
        font-size: 1.8rem;
        text-align: center;
     }

    .tab-bar {
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 0;
        margin-bottom: 0px;
        width:70px;
        box-sizing: border-box;
        border-radius: 0 15px 15px 0;
        background-color: var(--tab-inactive-bg);
        flex-shrink: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .tab-link {
        padding: 1rem 0;
        font-size: 0.9rem;
        color: var(--text);
        background-color: transparent;
        border: none;
        border-radius: 0;
        cursor: pointer;
        transition: background-color 0.3s ease, color 0.3s ease;
        outline: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;
        min-height: 60px;
        gap: 4px;
    }
    .tab-link:hover {
        background-color: var(--tab-hover-bg);
        color: var(--primary);

    }
    .tab-link.active {
        background-color: var(--tab-active-bg);
        background: linear-gradient(90deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        position: relative;
        z-index: 1;
    }
    .tab-link.active::after {
        content: '';
        position: absolute;
        right: -2px;
        top: 0;
        bottom: 0;
        width: 2px;
        height: 100%;
        background-color: var(--primary);
    }
    .tab-link i {
        font-size: 1rem;
    }

    .tab-bar .tab-text-sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
        border: 0;
        font-size: 0.75em;
        text-align: center;
    }

    .tab-content-area {
        flex-grow: 1;
        overflow-y: auto;
        padding: 10px;
        width: auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        overflow-x: hidden;
    }
    .tab-pane {
        display: none;
        width: 100%;
        animation: fadeIn 0.5s ease-in-out;
    }
    .tab-pane.active {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    /* New animations for tab swiping */
    @keyframes slideInFromRight {
        from { transform: translateX(50%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    @keyframes slideInFromLeft {
        from { transform: translateX(-50%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
    }
    .tab-pane.slide-in-from-right {
        animation: slideInFromRight 0.4s ease-out;
    }
    .tab-pane.slide-in-from-left {
        animation: slideInFromLeft 0.4s ease-out;
    }

    #tab-saved-feedbacks, #tab-customize-appearance, #tab-oa-resources, #tab-youtube-resources, #tab-breathing-exercise,
    #tab-math-tutorials, #tab-science-sims, #tab-literature-guides, #tab-history-timelines, #tab-test, #tab-dino-game, #tab-dictionary,
    #tab-calculator, #tab-feed {
        background: rgba(var(--surface),0.5);
        border-radius: 8px;
    }
    #tab-saved-feedbacks .result-box:first-child,
    #tab-main-content .result-box:first-child, /* This includes the skeleton */
    #tab-main-content #skeletonFeedbackContainer:first-child, /* Specific for skeleton */
    #tab-main-content .chat-message:first-child,
    #tab-main-content .system-message-item:first-child,
    #tab-test > *:first-child,
    #tab-dino-game > *:first-child,
    #tab-dictionary > *:first-child,
    #tab-calculator > *:first-child,
    #tab-feed > *:first-child {
        margin-top: 0;
    }

    .menu-modal-content-imitation {
        padding: 20px;
        color: var(--text);
        text-align: left;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
    .menu-modal-content-imitation h2 {
        color: var(--primary);
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.5rem;
    }
    .menu-modal-content-imitation p {
        font-size: 0.95rem;
        line-height: 1.6;
        color: rgba(255,255,255,0.8);
    }

    .math-step-list {
        list-style: none;
        padding: 0;
        margin: 0.5rem 0;
    }

    .math-step-item {
        padding: 0.4rem 0.8rem;
        margin-bottom: 5px;
        background: rgba(255, 255, 255, 0.03);
        border-radius: 4px;
        border-left: 2px solid var(--success);
        font-family: 'Roboto Mono', monospace;
        font-size: 0.9em;
        color: var(--text);
        transition: background 0.3s ease, border-color 0.3s ease;
    }

    .math-step-item:last-child {
        margin-bottom: 0;
    }

    .math-step-item.error-step {
        background: rgba(255, 0, 0, 0.1);
        border-color: var(--error);
        color: var(--text);
        animation: pulseError 0.8s infinite alternate;
    }

    @keyframes pulseError {
        from { background: rgba(255, 0, 0, 0.1); }
        to { background: rgba(255, 0, 0, 0.2); }
    }

    .correct-solution {
        margin-top: 1rem;
        padding-top: 0.8rem;
        border-top: 1px dashed rgba(255,255,255,0.1);
    }

    .correct-solution strong {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--primary);
        font-size: 1em;
    }

    .student-answer .math-step-list {
        margin-top: 0;
        padding-left: 0;
    }

    #tab-dictionary .dictionary-container {
      background: var(--container-bg);
      padding: 1.5rem;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      max-width: 600px;
      width: 100%;
      text-align: center;
      margin: 1rem auto;
      border: 1px solid var(--chat-border);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    #tab-dictionary .dictionary-container h2 {
      font-size: 1.8rem;
      margin-bottom: 1rem;
      color: var(--primary);
    }

    #tab-dictionary input[type="text"] {
      width: 80%;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      border: 1px solid var(--chat-border);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      font-family: inherit;
      font-size: 0.9rem;
      outline: none;
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    #tab-dictionary input[type="text"]:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
    }

    #tab-dictionary button {
      padding: 0.75rem 1.5rem;
      background: linear-gradient(45deg, var(--primary), var(--accent));
      color: white;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.9rem;
      font-weight: 500;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    #tab-dictionary button:hover {
      opacity: 0.95;
      transform: scale(0.98);
    }

    #tab-dictionary .dictionary-result {
      margin-top: 1.5rem;
      text-align: left;
      color: var(--text);
    }

    #tab-dictionary .word-title {
      font-weight: bold;
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 0.5rem;
    }

    #tab-dictionary .part-of-speech {
      font-weight: 600;
      margin-top: 1rem;
      color: var(--accent);
      font-size: 1rem;
    }

    #tab-dictionary .dictionary-result ul {
      margin: 0.3rem 0 1rem 1rem;
      padding-left: 1rem;
      list-style: disc;
      color: rgba(255,255,255,0.85);
    }

    #tab-dictionary .dictionary-result li {
      margin-bottom: 0.5rem;
    }

    #tab-dictionary .dictionary-error {
      color: var(--error);
      font-weight: bold;
      margin-top: 1rem;
    }

    #tab-calculator .calculator-container {
        background: rgba(0, 0, 0, 0.00);
        padding: 0rem;
        border-radius: 12px;
        max-width: 380px;
        width: 100%;
        margin: 0rem auto;
        border: 0px solid var(--chat-border);
    }

    #tab-calculator .calculator-display {
        width: 100%;
        height: 50px;
        background: var(--calculator-display-bg);
        color: var(--calculator-display-text);
        border: 1px solid var(--chat-border);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        font-size: 2.2rem;
        text-align: right;
        margin-bottom: 1rem;
        font-family: 'Orbitron', sans-serif;
        letter-spacing: 1px;
        overflow-x: auto;
        white-space: nowrap;
    }
    #tab-calculator .calculator-buttons {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* Default 4 columns for mobile */
        gap: 0.3rem;
    }
    #tab-calculator .calculator-button {
        background: var(--calculator-button-bg);
        color: var(--calculator-button-text);
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
    }
    #tab-calculator .calculator-button:hover {
        background: var(--calculator-button-hover-bg);
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        filter:contrast(50)
    }
    #tab-calculator .calculator-button:active {
        transform: translateY(0px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    #tab-calculator .calculator-button.operator {
        background: var(--calculator-operator-button-bg);
        color: var(--calculator-operator-button-text);
    }
    #tab-calculator .calculator-button.clear {
        background: rgba(var(--error-rgb, 214, 48, 49), 0.3);
        color: var(--error);
        grid-column: span 2;
    }
    body.theme-default { --error-rgb: 214, 48, 49; }
    body.theme-cyberpunk { --error-rgb: 255, 51, 0; }
    body.theme-deepspace { --error-rgb: 208, 2, 27; }
    body.theme-matrix { --error-rgb: 204, 0, 0; }
    body.theme-lightbeam { --error-rgb: 220, 53, 69; }
    body.theme-on-fire { --error-rgb: 229, 57, 53; }
    body.theme-love-struck { --error-rgb: 229, 115, 115; }

    #tab-calculator .calculator-button.equals {
        background: var(--calculator-equals-button-bg);
        color: var(--calculator-equals-button-text);
        grid-column: span 2;
    }

    .mobile-header-controls {
        display: none; /* Hidden by default, shown only on mobile */
    }

    .mobile-header-controls .mobile-upload-toggle {
        background: none;
        border: none;
        color: var(--primary);
        font-size: 1.5rem; /* Icon size */
        cursor: pointer;
        padding: 5px; /* For better touch area */
    }

    .fab-container-mobile{
        display: none;
    }

    .close-upload-modal{
        display:none;
    }

    /* Feedback Navigation Buttons */
    #feedbackNavContainer {
        position: fixed;
        top: 40%;
        right: 15px;
        transform: translateY(-50%);
        z-index: 1040;
        display: none; /* Hidden by default, enabled by JS */
        flex-direction: column;
        gap: 15px;
    }

    #prevFeedbackBtn, #nextFeedbackBtn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        background: rgba(var(--rgb-surface, 255, 255, 255), 0.1);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text);
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s, transform 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    
    body.theme-lightbeam #prevFeedbackBtn,
    body.theme-lightbeam #nextFeedbackBtn {
        background: rgba(255, 255, 255, 0.6);
        border-color: var(--border-color);
        color: var(--text);
    }

    #prevFeedbackBtn:hover, #nextFeedbackBtn:hover {
        background-color: rgba(var(--rgb-surface, 255, 255, 255), 0.2);
        transform: scale(1.05);
    }

    /* Initial Prompt Box Styles */
    .initial-prompt-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 4rem 2rem;
        padding-bottom: 2rem;
        margin: 7rem auto;
        max-width: 500px;
        width: 90%;
        background: var(--calculator-button-bg);
        border: 2px solid transparent;
        border-radius: 15px;
        color: var(--text);
        position: relative;
        overflow: hidden;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        z-index: 1; /* For pseudo-element positioning */
        border-bottom: 1px solid transparent;
        background-image: linear-gradient(to right, transparent, var(--primary), var(--accent), transparent, transparent);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100% 1px;
    }

    .initial-prompt-box::before {
        content: '';
        position: absolute;
        inset: -2px; /* Controls the border thickness */
        z-index: -1;
        border-radius: inherit;
        background: var(--calculator-button-bg); 
        filter: blur(8px); /* Slightly more blur for a softer look */
    }

    .initial-prompt-box .prompt-icon {
        font-size: 1.5rem;
        margin-bottom: 1rem;
        background: linear-gradient(45deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        filter: drop-shadow(0 0 10px var(--primary));
    }

    .initial-prompt-box .prompt-header {
        font-size: 1.3rem;
        font-family: 'Inter', sans-serif;
        color: var(--text);
        margin: 0;
    }

    .initial-prompt-box .prompt-text {
        font-size: 0.9rem;
        color: rgba(255,255,255,0.7);
        line-height: 1.3;
        margin: 0;
    }

    /* Light Theme Compatibility */
    body.theme-lightbeam .initial-prompt-box {
        background: var(--surface); /* Solid white */
        color: var(--text);
    }
    body.theme-lightbeam .initial-prompt-box .prompt-text {
        color: #6c757d; /* Medium gray */
    }
    body.theme-lightbeam .initial-prompt-box::before {
        opacity: 1; /* Full opacity for light theme */
        filter: blur(2px);
    }

    /* START: New Test Tab Styles */
    #tab-test {
        padding: 1.5rem;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        background: var(--surface);
    }
    .test-screen {
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .test-screen.active {
        display: flex;
    }
    #tab-test h2 {
        font-family: 'Inter', sans-serif;
        color: var(--primary);
        margin-bottom: 1rem;
    }
    #tab-test p {
        color: rgba(255,255,255,0.8);
        margin-bottom: 1.5rem;
    }
    .test-config-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        max-width: 400px;
        margin-bottom: 2rem;
        padding: 1rem;
        border: 1px solid var(--chat-border);
        border-radius: 8px;
        background: rgba(0,0,0,0.1);
    }
    .test-config-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        width: 100%;
    }
    .test-config-item label {
        font-weight: 600;
        color: var(--accent);
    }
    .test-config-item select {
        width: 100%;
        padding: 10px 12px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        border: 1px solid var(--chat-border);
        font-family: inherit;
    }
    #test-start-btn {
        padding: 0.8rem 2rem;
    }
    #test-start-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background: var(--surface);
    }
    .test-inprogress-header {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 1rem;
        font-family: 'Roboto Mono', monospace;
    }
    #test-question-container {
        width: 100%;
        min-height: 150px;
        padding: 1rem;
        border: 1px solid var(--chat-border);
        border-radius: 8px;
        background: var(--surface);
        margin-bottom: 1rem;
        text-align: left;
    }
    #test-answer-input {
        width: 100%;
        height: 120px;
        padding: 1rem;
        border: 1px solid var(--chat-border);
        border-radius: 8px;
        background: rgba(0,0,0,0.1);
        color: var(--text);
        font-family: inherit;
        resize: vertical;
        margin-bottom: 1rem;
    }
    #test-submit-answer-btn {
        align-self: flex-end;
    }
    #test-results-summary {
        margin-bottom: 2rem;
    }
    #test-results-breakdown {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
        text-align: left;
    }
    .test-result-item {
        padding: 1rem;
        border-radius: 8px;
        border-left: 3px solid;
    }
    .test-result-item.correct {
        background: rgba(var(--success-rgb, 0, 184, 148), 0.1);
        border-left-color: var(--success);
    }
    .test-result-item.incorrect {
        background: rgba(var(--error-rgb, 214, 48, 49), 0.1);
        border-left-color: var(--error);
    }
    .test-result-item h4 {
        margin: 0 0 0.5rem 0;
        color: var(--primary);
    }
    .test-result-item p {
        margin: 0.2rem 0;
        color: var(--text);
    }
    .test-result-item strong {
        color: var(--accent);
    }
   

    
    .ghost-container {
      position: absolute;
      animation: flyAcross 30s linear infinite, floatY 4s ease-in-out infinite;
      transform-origin: center;
    }

    .ghost.big {
      width: 120px;
      top: 40vh;
      animation-duration: 25s, 5s;
      z-index: 2;
    }

    .ghost.small {
      width: 70px;
      top: 0.5vh;
      animation-duration: 20s, 6s;
      opacity: 1;
      z-index: 1;
    }

    /* Flying horizontally */
    @keyframes flyAcross {
      0% { left: -70px; }
      100% { left: 85vw; }
    }

    /* Smooth floating up/down + slight tilt */
    @keyframes floatY {
      0% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(1deg); }
      75% { transform: translateY(0) rotate(0deg); }
      100% { transform: translateY(0) rotate(-1deg); }
    }

    /* Legs subtle sway */
    .leg {
      animation: legSway 1.5s ease-in-out infinite;
      transform-origin: top center;
    }
    @keyframes legSway {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(1deg); }
    }

    /* Hands gentle float */
    .hand {
      animation: handFloat 3s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes handFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1px); }
    }

    /* Eyes looking around smoothly */
    .eye-left, .eye-right {
      animation: eyeMove 6s ease-in-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    @keyframes eyeMove {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(6px,3px); }
      50% { transform: translate(0, 3px); }
      75% { transform: translate(-6px, 3px); }
    }
     /*side by side*/
    .sbsbutton{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .feedback-btns{
        display: inline-flex;
        gap: 8px ;
    }

    /* --- START: New Feed Styles --- */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 20px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .feed-card {
        background: var(--surface);
        border: 1px solid var(--chat-border);
        border-radius: 12px;
        padding: 1.2rem 0.5rem;
        margin-bottom: 0.8rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        animation: fadeInUp 0.5s ease-out forwards;
        opacity: 0;
    }

    .feed-card-header {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 0.8rem;
        font-weight: 600;
        font-size: 1rem;
    }
    .feed-card-header i {
        font-size: 1.2rem;
    }
    .feed-card-header.concept { color: var(--primary); }
    .feed-card-header.video { color: var(--error); }
    .feed-card-header.joke { color: var(--success); }
    .feed-card-header.poll { color: var(--accent); }
    .feed-card-header.game { color: var(--neon); }

    .feed-card-content p {
        margin: 0;
        color: rgba(255,255,255,0.85);
        font-size: 0.95rem;
    }

    .feed-video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
    }
    .feed-video-thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.3s ease;
    }
    .feed-video-container:hover .feed-video-thumbnail {
        transform: scale(1.05);
    }

    .play-button-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: rgba(255,255,255,0.8);
        transition: background-color 0.3s, color 0.3s;
    }
    .feed-video-container:hover .play-button-overlay {
        background-color: rgba(0,0,0,0.6);
        color: #fff;
    }

    .feed-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .feed-poll-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .poll-option-btn {
        width: 100%;
        padding: 0.7rem;
        text-align: left;
        background: var(--calculator-button-bg);
        color: var(--text);
        border: 1px solid var(--chat-border);
    }
    .poll-option-btn:hover {
        background: var(--calculator-button-hover-bg);
    }
    .poll-option-btn.selected {
        background: var(--success);
        color: #fff;
        border-color: var(--success);
        font-weight: bold;
    }
    .poll-option-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    .poll-option-btn.selected:disabled {
        opacity: 1;
    }

    #load-more-feed-btn {
        display: block;
        margin: 1rem auto;
        width: auto;
        padding: 0.8rem 2rem;
        background: var(--surface);
    }
    
    #refresh-feed-btn i {
        transition: transform 0.5s ease;
    }
    #refresh-feed-btn:active i {
        transform: rotate(360deg);
    }

    body.theme-lightbeam .feed-card {
        background: var(--surface);
        border-color: var(--border-color);
        box-shadow: 0 4px 6px var(--shadow-color-soft);
    }
    body.theme-lightbeam .feed-card-content p {
        color: var(--text);
    }
    body.theme-lightbeam .poll-option-btn {
        background: #f8f9fa;
        color: var(--text);
        border-color: var(--border-color);
    }
    body.theme-lightbeam .poll-option-btn:hover {
        background: #e9ecef;
    }
     body.theme-lightbeam .poll-option-btn.selected {
        background: var(--success);
        color: #fff;
        border-color: var(--success);
    }

    .feed-card-header.meme { color: #f39c12; } /* A fun orange for memes */

.feed-meme-title {
    font-weight: 500;
    margin-bottom: 0.8rem;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.7);
}

.feed-meme-img {
    width: 100%;
    max-height: 400px; /* Prevent huge images */
    object-fit: contain; /* Ensure the whole meme is visible */
    border-radius: 8px;
    background: rgba(0,0,0,0.2); /* Fallback for transparent PNGs */
}

body.theme-lightbeam .feed-card-header.meme { color: #d35400; } /* Darker orange for light mode */
body.theme-lightbeam .feed-meme-title { color: #555; }



    /* ----- Responsive Styles ----- */
    @media (min-width: 993px) { /* PC specific layout for calculator */
        #tab-calculator .calculator-container {
            max-width: 460px; /* Wider container */
        }
        #tab-calculator .calculator-buttons {
            grid-template-columns: repeat(5, 1fr); /* 5 columns for PC */
        }
    }

    @media (max-width: 992px) {
        .container {
            flex-direction: column;
            height: auto;
            min-height: calc(100vh - 80px - 4rem);
            padding: 2rem 1.5rem;
        }
        .container-left, .container-right {
            width: 100%;
            height: auto;
            padding-left: 0;
            padding-right: 0;
            overflow-x: hidden;
        }
        .container-left { padding-bottom: 2rem; }

        .container-right {
            flex-direction: column;
            border-left: none;
            border-top: rgba(56, 189, 248, 0.2) dashed 2px;
            margin-top: 0;
            padding-top: 0;
        }

        .tab-bar {
            order: 1;
            flex-direction: row;
            width: 100%;
            height: auto;
            border-left: none;
            border-right: none;
            border-top: none;
            border-bottom: 1px solid var(--tab-border);
            border-radius: 8px 8px 0 0;
            padding: 0;
            justify-content: space-around;
            flex-shrink: 0;
            min-height: auto;
            overflow-y: hidden;
        }
        .tab-link {
            padding: 0.6rem;
            flex-grow: 1;
            flex-basis: 0;
            min-height: auto;
            flex-direction: row;
            gap: 8px;
            font-size: 1.1rem;
        }
        .tab-link:last-child {
            border-right: none;
        }
        .tab-link.active::after {
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            width: 100%;
            background-color: var(--primary);
            top: auto;
        }

        .main-content-wrapper {
            order: 2;
            width: 100%;
            height: auto;
            padding-top: 2rem;
            border-left: none;
        }

        .tools {
            width: 100%;
            padding: 0.5rem 1.5rem;
            border-radius: 0;
            box-sizing: border-box;
        }

        .tab-content-area {
            width: 100%;
            height: auto;
            padding: 0px;
        }
        
        #tab-test { padding: 1.5rem; }

        #tab-dictionary .dictionary-container { padding: 1.5rem; border-radius: 1rem; }
        #tab-dictionary input[type="text"] { width: 90%; }
        #tab-dictionary button { width: auto; }

        #tab-calculator .calculator-container {
            /* max-width: 380px; */
        }
    }

    @media (max-width: 768px) {
        body { padding: 1rem; } 
        .header { margin-top: 70px; margin-bottom: 1.5rem; padding: 0.5rem 0; }
        .header h1 { font-size: 2.2rem; }
        .container { margin-top: 1rem; padding: 1.5rem 1rem; }

        .result-box, .the-box, .chat-message, .system-message-item {
            width: 100%;
            box-sizing: border-box;
            margin-left: 0;
            margin-right: 0;
        }
        .result-box {
            padding: 2rem 0.8rem 2rem 0.8rem;
        }
        .the-box {
            padding-left: 0.8rem;
            padding-right: 0.8rem;
        }
        .chat-message {
            padding: 0.8rem 0.8rem;
        }
        .system-message-item {
            padding: 1rem 0.8rem;
        }
        .feedback-item {
            padding: 0.8rem 0.6rem;
        }
        .student-answer, .explanation {
             padding: 0.6rem 0.5rem;
        }

        .drop-zone { padding: 2.5rem 1rem; }
        .process-btn, .secondary-btn{ padding: 0.9rem; font-size: 0.95rem; }
        .eye-box { gap: 0px; transform: scale(0.9); }

        #chatInputArea, #testInputArea, #dictionaryInputArea, #calculatorInputArea { margin: 0 5px; }
        #chatInput, #sendChatBtn, #testInput, #testSearchBtn, #dictionaryWordInput, #dictionarySearchBtn { font-size: 1rem; }
        .save-feedback-icon, .unsave-feedback-icon { font-size: 1.3rem; top: 0.8rem; right: 0.8rem; }

        #tab-customize-appearance .modal-actions .process-btn { font-size: 0.9rem; padding: 0.7rem 1.2rem;}
        #tab-customize-appearance .modal-actions  .secondary-btn { font-size: 0.9rem; padding: 0.7rem 1.2rem;}

        .tab-link {
            font-size: 1.0rem;
            padding: 0.7rem;
            flex-grow: 1;
            flex-basis: 50%;
            min-width: 15px;
        }
        .tab-bar .tab-text-sr-only {
            font-size: 0.9em;
        }

        .video-modal-content {
            padding: 15px;
        }
        .video-modal-content h2 {
             font-size: 1.5rem;
        }
        .video-modal-content .close-modal-btn {
             font-size: 1.5rem;
        }
        .watch-video-btn, .save-for-test-btn {
            padding: 0.7rem 1rem;
            font-size: 0.85rem;
        }

        #tab-test { padding: 1rem; }
        
        #tab-dictionary .dictionary-container { padding: 1rem; border-radius: 0.75rem; }
        #tab-dictionary .dictionary-container h2 { font-size: 1.6rem; }
        #tab-dictionary input[type="text"] { width: 95%; padding: 0.6rem 0.8rem; }
        #tab-dictionary button { padding: 0.6rem 1.2rem; font-size: 0.85rem; }
        #tab-dictionary .word-title { font-size: 1.3rem; }
        #tab-dictionary .part-of-speech { font-size: 0.9rem; }
        #tab-dictionary .dictionary-result ul li { font-size: 0.9rem; }

        #tab-calculator .calculator-container { padding: 1rem; max-width: 320px; } /* Default mobile size */
        #tab-calculator .calculator-display { height: 55px; font-size: 1.8rem; }
        #tab-calculator .calculator-button { font-size: 1rem; padding: 0.7rem; min-height: 50px;}
        #tab-calculator .calculator-buttons { gap: 0.6rem; }

    }

    /* START OF MOBILE OVERHAUL STYLES - max-width: 480px */
    @media (max-width: 480px) {
        body {
            padding: 0;
            overflow: visible; /* Prevent body scroll for app shell */
            height:100vh;
            width: 100vw;
        }
        .header {
          display: none !important; /* Hide original PC header */
        }

        /* --- Mobile Top Header --- */
        .mobile-header-controls {
            display: flex;
            justify-content: space-between; /* MODIFIED: Space for title and icons */
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: var(--background); /* Theme-aware transparency */
            padding: 0 15px;
            box-sizing: border-box;
            z-index: 1000; /* High z-index */
            border-bottom: 2px solid transparent;
            background-image: linear-gradient(to right, var(--primary), var(--accent), transparent, transparent);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 100% 2px;
        }
        
        body.theme-lightbeam .mobile-header-controls {
            background-color: rgba(255, 255, 255, 0.75); /* Lighter for light theme */
        }
        .mobile-header-controls .mobile-title {
            font-size: 1.8rem;
            color: whitesmoke;
            font-family: 'Inter', sans-serif;
            text-align: left; /* MODIFIED: Align to the left */
            flex-grow: 0; /* MODIFIED: Don't take all space */
        }

        .mobile-header-icons { /* NEW */
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .mobile-header-icon-btn { /* NEW */
            background: none;
            border: none;
            color: whitesmoke;
            font-size: 1.3rem; /* Adjusted size */
            cursor: pointer;
            padding: 3px;
        }

        .mobile-header-icon-btn:focus{
         background-color: var(--tab-active-bg);
        background: linear-gradient(90deg, var(--primary), var(--accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        color: transparent;
        }


        /* --- FAB (Floating Action Button) --- */
        .fab-container-mobile {
            display: block;
            position: fixed;
            bottom: 90px;
            right: 30px;
            z-index: 1050;
        }
        .fab-main, .fab-secondary {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            color: white;
            font-size: 1rem;
            transition: all 0.7s cubic-bezier(0.68, -0.55, 0.27, 1.55);
        }

          .fab-main {
            position: relative;
            z-index: 2;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            backdrop-filter: blur(5px);
            border-radius: 50%; /* your corner radius — adjust as needed */
            overflow: hidden; /* clip the pseudo-element */
          }

          .fab-main::before {
            content: "";
            position: absolute;
            inset: 0;
            padding: 1.5px; /* border thickness */
            border-radius: inherit;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-mask:
              linear-gradient(#fff 0 0) content-box,
              linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            z-index: -1;
          }

        .fab-main i {
            transition: transform 0.7s ease;
        }
        .fab-secondary {
            position: absolute;
            bottom: 0;
            right: 0;
            opacity: 0;
            transform: scale(0.5) translateY(0);
            z-index: 1;
        }

        .fab-upload-btn, .fab-calculator-btn, .fab-game-btn { /* MODIFIED: Grouped secondary buttons */
            background: rgba(108, 92, 231, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(231, 231, 231, 0.4);
         }

        .fab-container-mobile.active .fab-main i {
            transform: rotate(135deg); /* Rotates + to X */
        }
        .fab-container-mobile.active .fab-upload-btn {
            transform: scale(1) translateY(-65px);
            opacity: 1;
        }
        .fab-container-mobile.active .fab-calculator-btn {
            transform: scale(1) translateY(-130px);
            opacity: 1;
        }
        .fab-container-mobile.active .fab-game-btn { /* NEW */
            transform: scale(1) translateY(-195px);
            opacity: 1;
        }
        
        #feedbackNavContainer.visible {
            display: flex;
        }


        /* --- Main App Container --- */
        .container {
            display: flex; /* Will be column */
            flex-direction: column;
            height: 100vh; /* Full viewport height */
            width: 100%;
            padding: 0;
            border-radius: 0;
            box-sizing: border-box;
            overflow: hidden;
            margin-top: 0; /* No margin, header is fixed over it */
            padding-top: 50px; /* Space for fixed header */
        }

        /* --- Upload Area Modal (`container-left`) --- */
 
        body.theme-lightbeam .container-left {
            background-color: rgba(238, 240, 242, 0.95);
        }

        .container.upload-area-visible .container-left {
            transform: translateY(0);
            opacity: 1;
            pointer-events: auto; /* Active */
        }

            .container-left {
            display: flex;
            position: fixed; /* Make it a modal overlay */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(var(--rgb-container-bg, 10, 14, 26), 0.85);
            backdrop-filter: blur(80px);
            -webkit-backdrop-filter: blur(80px);
            z-index: 1100;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
            transform: translateY(-100%);
            opacity: 0;
            transition: transform 0.4s ease-out, opacity 0.4s ease-out;
            pointer-events: none; /* Inactive by default */
        }

        .close-upload-modal {
            display: block;
            position: absolute;
            top: 60px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: rgba(255,255,255,0.1);
            color: var(--text);
            border: none;
            border-radius: 50%;
            font-size: 1.5rem;
            cursor: pointer;
            z-index: 1101;
        }

        /* --- Main Content Area (`container-right` becomes primary view wrapper) --- */
        .container-right {
            flex-grow: 1; /* Takes remaining space */
            display: flex;
            flex-direction: column;
            overflow: hidden; /* Important: child .main-content-wrapper will scroll */
            border-top: none;
            width: 100%;
            height: 100%; /* Fill space given by .container */
            padding: 0;
        }

        /* --- Scrollable Content + Sticky Tools --- */
        .main-content-wrapper {
            flex-grow: 1;
            overflow-y: auto; /* This is the main scroll area for tab content */
            padding: 0rem; /* Padding around the content */
            position: relative; /* For sticky context */
            display: flex;
            flex-direction: column;
        }
        ::-webkit-scrollbar{
          width: 2px;
        }

        /* --- Tools Bar (Chat Input, etc.) --- */
        .main-content-wrapper .tools {
            flex-shrink: 0;
            order: -1; /* Puts it at the top of the flex container */
            flex-direction: column; /* Stack input groups */
            gap: 8px;
            max-height: 200px;
            opacity: 1;
            padding: 0.5rem ;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
            margin: 0;
            margin-top: 0.5rem;
            background-color: var(--background);
        }

        .tools{
            border-bottom: 1px solid transparent;
            background-image: linear-gradient(to left, var(--primary), var(--accent), transparent, transparent, transparent, transparent, transparent);
            background-repeat: no-repeat;
            background-position: bottom left;
            background-size: 100% 1px;
        }




        body.theme-lightbeam .main-content-wrapper .tools {
             background-color: rgba(255, 255, 255, 0.7);
        }
        .main-content-wrapper .tools > div {
            width: 100%;
            min-width: unset;
            margin: 0;
        }
        #clock { display: none; }

        /* --- Tab Content Area (holds tab panes) --- */
        .tab-content-area {
            flex-grow: 1;
            padding-top: 0;
        }

        /* --- Fixed Bottom Navigation Bar --- */
        .tab-bar {
            position: fixed;
            bottom: 0px;
            left: 0;
            width: 100%;
            height: 55px; /* Standard mobile bottom nav height */
            flex-shrink: 0;
            display: flex;
            flex-direction: row;
            background-color: rgba(var(--rgb-container-bg, 10, 14, 26), 0.65);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            overflow-x: hidden; /* MODIFIED: Removed scroll */
            overflow-y: hidden;
            padding: 0px;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
        }

        body.theme-lightbeam .tab-bar {
             background-color: rgba(255, 255, 255, 0.75);
        }
        .tab-bar::-webkit-scrollbar {
            display: none;
        }

        .tab-link {
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 4px 8px; /* Compact padding */
            min-width: 45px; /* Ensure touch target */
            height: 100%;
            font-size: 0.7rem;
            gap: 2px;
            border-right: none;
            border-radius: 0;
            flex-grow: 1; /* Distribute space if fewer items, scroll if many */
            flex-basis: 0;
        }
        .tab-link i {
            font-size: 1.3rem;
        }
        .tab-link.active {
            background-color: var(--tab-hover-bg);
        }
        .tab-link.active i,
        .tab-link.active .tab-text-sr-only {
            color: var(--primary);
        }
        .tab-link.active::after {
            display: none;
        }

        .drop-zone{
            width: 100%;
        }


        /* --- General Content Styling for Mobile Panes --- */
        .result-box, .the-box, .chat-message,
        #tab-test,
        #tab-dictionary .dictionary-container, #tab-calculator .calculator-container,
        #tab-saved-feedbacks > div > h2,
        #tab-customize-appearance,
        #tab-dino-game > h2,
        .menu-modal-content-imitation {
            width: 100%;
            margin-left: auto;
            margin-right:auto;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            box-sizing: border-box;
            margin-bottom: 3rem;
        }
    
        
        .result-box, .the-box { padding-top: 0rem; padding-bottom: 1rem; font-size: 0.9rem; margin-top: 1rem; margin-bottom: 1rem; background-color:var(--surface); border-radius: 8px; max-width: 97%;
 }
        .chat-message, .system-message-item { padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: 0.9rem; width:97%; margin: 10px auto; }
        .chat-message{
          width: 97%;
          margin: 10px auto;
        }
        .feedback-item { padding: 0.6rem 0.4rem; font-size: 0.80rem; }
        .explanation, .student-answer { padding: 0.5rem 0.4rem; font-size: 0.85rem; }
        .save-feedback-icon, .unsave-feedback-icon { font-size: 1.2rem; top: 0.6rem; right: 0.6rem; }

        .upload-section {
        width: 95%;
    }



    /* mobiling    */

    h2{
        font-size: 1.2rem;
    }

    .process-btn{
      margin: 15px auto;
    }

    .secondary-btn{
        margin: 15px auto;
    }

    #sendChatBtn, #testSearchBtn, #dictionarySearchBtn{
      padding: 0.5rem 1.2rem;
      font-size: 0.85rem;
      font-weight: 300;
    }

    #chatInput, #testInput, #dictionaryWordInput{
      font-size: 0.85rem;
    }

   .watch-video-btn.incorrect {
        border-color: var(--error);
        background: rgba(239, 68, 68, 0.10);
    }

    .feed-card{
        width: 95%;
        margin: 0.8rem auto;
    }


    }/* End of @media (max-width: 480px) */
    /* END OF MOBILE OVERHAUL STYLES */

    .logo{ height: 80px; width: 100px; }

    .ghost-container {
      position: absolute;
      animation: flyAcross 30s linear infinite, floatY 4s ease-in-out infinite;
      transform-origin: center;
    }

    .ghost.big {
      width: 120px;
      top: 40vh;
      animation-duration: 25s, 5s;
      z-index: 2;
    }

    .ghost.small {
      width: 70px;
      top: 0.5vh;
      animation-duration: 20s, 6s;
      opacity: 1;
      z-index: 1;
    }

    /* Flying horizontally */
    @keyframes flyAcross {
      0% { left: -70px; }
      100% { left: 85vw; }
    }

    /* Smooth floating up/down + slight tilt */
    @keyframes floatY {
      0% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-8px) rotate(1deg); }
      75% { transform: translateY(0) rotate(0deg); }
      100% { transform: translateY(0) rotate(-1deg); }
    }

    /* Legs subtle sway */
    .leg {
      animation: legSway 1.5s ease-in-out infinite;
      transform-origin: top center;
    }
    @keyframes legSway {
      0%, 100% { transform: rotate(0deg); }
      50% { transform: rotate(1deg); }
    }

    /* Hands gentle float */
    .hand {
      animation: handFloat 3s ease-in-out infinite;
      transform-origin: center;
    }
    @keyframes handFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-1px); }
    }

    /* Eyes looking around smoothly */
    .eye-left, .eye-right {
      animation: eyeMove 6s ease-in-out infinite;
      transform-origin: center;
      transform-box: fill-box;
    }
    @keyframes eyeMove {
      0%, 100% { transform: translate(0, 0); }
      25% { transform: translate(6px,3px); }
      50% { transform: translate(0, 3px); }
      75% { transform: translate(-6px, 3px); }
    }
     /*side by side*/
    .sbsbutton{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .feedback-btns{
        display: inline-flex;
        gap: 8px ;
    }

    /* --- START: New Feed Styles --- */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translate3d(0, 20px, 0);
        }
        to {
            opacity: 1;
            transform: translate3d(0, 0, 0);
        }
    }

    .feed-card {
        background: var(--surface);
        border: 1px solid var(--chat-border);
        border-radius: 12px;
        padding: 1.2rem 0.8rem;
        margin-bottom: 0.8rem;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        animation: fadeInUp 0.5s ease-out forwards;
        opacity: 0;
    }

    .feed-card-header {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        margin-bottom: 0.8rem;
        font-weight: 600;
        font-size: 1rem;
    }
    .feed-card-header i {
        font-size: 1.2rem;
    }
    .feed-card-header.concept { color: var(--primary); }
    .feed-card-header.video { color: var(--error); }
    .feed-card-header.joke { color: var(--success); }
    .feed-card-header.poll { color: var(--accent); }
    .feed-card-header.game { color: var(--neon); }

    .feed-card-content p {
        margin: 0;
        color: rgba(255,255,255,0.85);
        font-size: 0.95rem;
    }

    .feed-video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        background-color: #000;
        border-radius: 8px;
        overflow: hidden;
        cursor: pointer;
    }
    .feed-video-thumbnail {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        transition: transform 0.3s ease;
    }
    .feed-video-container:hover .feed-video-thumbnail {
        transform: scale(1.05);
    }

    .play-button-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: rgba(255,255,255,0.8);
        transition: background-color 0.3s, color 0.3s;
    }
    .feed-video-container:hover .play-button-overlay {
        background-color: rgba(0,0,0,0.6);
        color: #fff;
    }

    .feed-video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

    .feed-poll-options {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .poll-option-btn {
        width: 100%;
        padding: 0.7rem;
        text-align: left;
        background: var(--calculator-button-bg);
        color: var(--text);
        border: 1px solid var(--chat-border);
        margin:0;
    }
    .poll-option-btn:hover {
        background: var(--calculator-button-hover-bg);
    }
    .poll-option-btn.selected {
        background: var(--success);
        color: #fff;
        border-color: var(--success);
        font-weight: bold;
    }
    .poll-option-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
    }
    .poll-option-btn.selected:disabled {
        opacity: 1;
    }

    #load-more-feed-btn {
        display: block;
        margin: 1rem auto;
        width: auto;
        padding: 0.8rem 2rem;
        background: var(--surface);
    }
    
    #refresh-feed-btn i {
        transition: transform 0.5s ease;
    }
    #refresh-feed-btn:active i {
        transform: rotate(360deg);
    }

    body.theme-lightbeam .feed-card {
        background: var(--surface);
        border-color: var(--border-color);
        box-shadow: 0 4px 6px var(--shadow-color-soft);
    }
    body.theme-lightbeam .feed-card-content p {
        color: var(--text);
    }
    body.theme-lightbeam .poll-option-btn {
        background: #f8f9fa;
        color: var(--text);
        border-color: var(--border-color);
    }
    body.theme-lightbeam .poll-option-btn:hover {
        background: #e9ecef;
    }
     body.theme-lightbeam .poll-option-btn.selected {
        background: var(--success);
        color: #fff;
        border-color: var(--success);
    }

    /* --- END: New Feed Styles --- */