/* --- Global Styles & Variables --- */
:root {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --success-color: #10b981;
    --error-color: #ef4444;
    --light-gray: #f7f7fb;
    --text-dark: #111827;
    --text-medium: #374151;
    --text-light: #6b7280;
    --border-color: #d1d5db;
    --card-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    --font-family: 'Roboto', 'Abhaya Libre', system-ui, -apple-system, Segoe UI, sans-serif;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    background-color: var(--light-gray);
    margin: 0;
    color: var(--text-medium);
    transition: background-image 0.5s ease-in-out;
}


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

button, input, select {
    font-family: 'Roboto', 'Abhaya Libre', system-ui, sans-serif;
}

input::placeholder {
    font-family: 'Roboto', 'Abhaya Libre', system-ui, sans-serif;
}

/* --- Login Page Styles (Updated) --- */
.wrap-login {
    max-width: 420px;
    margin: 36px auto;
    padding: 24px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.5s ease-out;
}

.wrap-login h1 { margin: 0 0 8px; text-align: center; color: var(--primary-color); }
.wrap-login p { margin: 0 0 24px; text-align: center; color: var(--text-light); }
.wrap-login label { display: block; margin: 12px 0 6px; font-size: 14px; font-weight: 600; }
.wrap-login input, .wrap-login select { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 10px; font-size: 15px; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s; }
.wrap-login input:focus, .wrap-login select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
.wrap-login button { display: flex; justify-content: center; align-items: center; width: 100%; padding: 14px; margin-top: 20px; background: var(--primary-color); color: #fff; border: 0; border-radius: 10px; font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color 0.2s, transform 0.1s; }
.wrap-login button:hover { background: var(--primary-hover); }
.wrap-login button:active { transform: scale(0.98); }
.wrap-login button:disabled { background-color: #9ca3af; cursor: not-allowed; }
.info-text { text-align: center; color: var(--text-light); font-weight: 500; margin-top: 25px; border-top: 1px solid #e5e7eb; padding-top: 20px; }
.btn-secondary { display: block; padding: 13px; margin-top: 10px; background: #f0f0f8; color: var(--primary-color); border: 1px solid var(--border-color); border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: background-color 0.2s; }
.btn-secondary:hover { background: #e5e7eb; }
.msg { display: none; margin-top: 16px; padding: 12px; border-radius: 8px; color: var(--error-color); background: #fee2e2; border: 1px solid #fca5a5; text-align: center; }

/* --- Dashboard Styles --- */
.wrap-dash { max-width: 800px; margin: 14px auto; padding: 12px; }
.tabs { display: flex; background-color: #e5e7eb; border-radius: 10px; padding: 4px; margin-bottom: 20px; }
.tab-button { flex: 1; padding: 12px 10px; border: none; background-color: transparent; border-radius: 8px; cursor: pointer; font-size: 15px; font-weight: 700; color: var(--text-light); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.tab-button.active { background-color: #fff; color: var(--primary-color); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); }
.tab-content { display: none; }
.tab-content.active { display: block; }

.card, .top-card { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 20px; box-shadow: var(--card-shadow); position: relative; }
.greet { font-weight: 600; color: var(--primary-color); font-size: 1.125rem; margin-bottom: 4px; }
.name { font-weight: 800; color: var(--text-dark); font-size: clamp(1.375rem, 3vw + 0.5rem, 1.75rem); }
.trial-status { font-weight: bold; margin-bottom: 8px; font-size: 0.9375rem; }
.trial-status.permanent { color: #10b981; }
.trial-status.expired { color: #ef4444; }
.trial-status { color: #db2777; }
.meta { color: var(--text-light); font-size: 0.875rem; margin-top: 4px; }
.badge-info { margin-top: 1rem; font-size: 1rem; font-weight: 600; }
.streak-info { margin-top: 0.5rem; font-size: 1rem; font-weight: 600; color: #f97316; }
.next-badge-info { margin-top: 0.25rem; font-size: 0.875rem; color: var(--primary-color); }
.progress-text { color: var(--primary-color); margin-top: 0.75rem; font-weight: 600; }
#progressBarContainer { background: #e5e7eb; border-radius: 12px; height: 16px; margin-top: 6px; overflow: hidden; }
#progressBarFill { height: 100%; width: 0; background: var(--primary-color); border-radius: 12px; transition: width 0.5s ease-in-out; }


/* --- VIP Section --- */
#vip-section { margin-top: 16px; }
.vip-prompt { color: var(--primary-color); font-size: 14px; font-weight: 600; margin: 0 0 8px; text-align: center; display: flex; justify-content: center; align-items: center; }
.btn-vip { width: 100%; padding: 12px 16px; border-radius: 10px; border: 0; color: #fff; cursor: pointer; font-weight: 600; transition: background-color 0.2s; }
.btn-vip-active { background: var(--success-color); }
.btn-vip-active:hover { background: #059669; }
.btn-vip-disabled { background: #e5e7eb; color: #9ca3af; cursor: not-allowed; }
.info-icon { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-left: 8px; border-radius: 50%; background-color: #e0e7ff; color: var(--primary-color); font-style: normal; font-weight: 700; font-size: 14px; vertical-align: bottom; }

/* --- Popup Styles --- */
.popup-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 8px 40px rgba(0,0,0,.2); z-index: 100; width: 320px; text-align: center; }
.popup-container p, .popup-container h3, .popup-container ul { margin: 0; padding: 0; }
.popup-container button { margin-top: 20px; padding: 10px 24px; background: var(--primary-color); color: #fff; border: 0; border-radius: 10px; cursor: pointer; font-weight: 600; }
.popup-container.success { border-top: 5px solid var(--success-color); }
.popup-container.error { border-top: 5px solid var(--error-color); }
.popup-container.success h3 { font-size: 24px; color: var(--success-color); }
.popup-container.success h3::before { content: '🎉'; display: block; font-size: 48px; margin-bottom: 10px; }

/* --- Utility & Footer --- */
.footer { color: #9ca3af; text-align: center; padding: 20px; font-size: 14px; }
.spinner { border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: #fff; width: 20px; height: 20px; animation: spin 1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Logout & Student Count Styles --- */
.btn-logout { position: absolute; top: 16px; right: 16px; background-color: #fee2e2; color: #b91c1c; border: none; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.btn-logout:hover { background-color: #fecaca; color: #991b1b; }
.student-count { position: absolute; top: 45px; right: 16px; display: flex; align-items: center; gap: 4px; background-color: #dcfce7; color: #166534; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 8px; }
.student-count .material-symbols-outlined { font-size: 16px; }

/* --- Trophies/Achievements Styles --- */
.leaderboard-desc { text-align: center; color: var(--text-light); margin-bottom: 24px; }
.achievements-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.achievement-item { display: flex; align-items: center; gap: 16px; padding: 16px; background-color: var(--light-gray); border-radius: 12px; border: 2px solid #e5e7eb; transition: all 0.2s; position: relative; }
.achievement-item.unlocked { border-color: #f97316; background-color: #fff7ed; }
.achievement-item .icon { font-size: 36px; color: #9ca3af; }
.achievement-item.unlocked .icon { color: #f97316; }
.achievement-item .details h4 { margin: 0 0 4px 0; color: var(--text-medium); }
.achievement-item.unlocked .details h4 { color: var(--text-dark); }
.achievement-item .details p { margin: 0; font-size: 0.875rem; color: var(--text-light); }

/* --- Referral Styles --- */
.referral-list { list-style: none; padding: 0; margin: 0; }
.referral-list li { background-color: var(--light-gray); padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; font-size: 0.9rem; }
.referral-list li strong { color: var(--primary-color); }



/* --- Animation Keyframes --- */
@keyframes tileFadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tile:hover {
  transform: translateY(-5px); /* Slightly increased hover effect */
  box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

/* --- Game Center & Game View Styles --- */
.game-header {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--primary-color);
    padding: 10px;
    background-color: #f0f0f8;
    border-radius: 10px;
    margin-bottom: 20px;
}

.game-question-box {
    font-size: 2.5rem;
    font-weight: bold;
    text-align: center;
    padding: 40px 20px;
    background-color: #f7f7fb;
    border-radius: 12px;
    margin-bottom: 20px;
    color: #374151;
}

.game-answers-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.game-answer-btn {
    padding: 20px;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 10px;
    border: 2px solid var(--border-color);
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.game-answer-btn:hover {
    background-color: #f0f0f8;
}
.game-answer-btn:active {
    transform: scale(0.95);
}

/* --- Memory Match Game Styles --- */
#memoryMatchGame {
    perspective: 1000px; /* For the 3D flip effect */
}

.mm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.mm-card {
    width: 100%;
    height: 100px;
    background-color: transparent;
    cursor: pointer;
}

.mm-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.mm-card.flipped .mm-card-inner {
    transform: rotateY(180deg);
}

.mm-card-front, .mm-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
}

.mm-card-front {
    background-color: var(--primary-color);
    color: white;
    font-size: 2.5rem;
}

.mm-card-back {
    background-color: #f0f0f8;
    color: var(--text-dark);
    transform: rotateY(180deg);
}

/* --- Integer Racer Game Styles (FULLY CORRECTED & ENHANCED) --- */
.ir-problem-box {
    text-align: center; font-size: 1.8rem; font-weight: bold;
    margin-bottom: 10px; padding: 10px; background-color: #eef2ff;
    color: var(--primary-color); border-radius: 8px;
}

#ir-game-area {
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: #555; /* Moved road color here */
    border-left: 5px solid yellow; /* Changed to solid for a better look */
    border-right: 5px solid yellow;
}

/* REMOVED #ir-road as it is no longer needed, #ir-game-area acts as the road */

/* --- ADDED: Dashed lane lines --- */
#ir-game-area::before,
#ir-game-area::after {
    content: '';
    position: absolute;
    top: 0;
    width: 5px;
    height: 100%;
    background-image: linear-gradient(white 50%, transparent 50%);
    background-size: 100% 40px;
}
#ir-game-area::before {
    left: 33.33%;
}
#ir-game-area::after {
    left: 66.66%;
}
/* --- END OF LANE LINES --- */


/* --- UPDATED: Car with new image and centering --- */
#ir-car {
    position: absolute;
    bottom: 10px;
    width: 60px;  /* Adjust size as needed */
    height: 60px; /* Adjust size as needed */
    background-image: url('https://e7.pngegg.com/pngimages/819/197/png-clipart-2d-car-game-free-racing-formula-one-auto-racing-race-car-racing-car.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: left 0.2s ease-in-out;
    /* This transform centers the car horizontally */
    transform: translateX(-50%);
}

.ir-gate {
    position: absolute; width: 33.33%; top: -80px; text-align: center;
    animation: moveDown 8s linear;
    z-index: 5; /* Ensure gates are above lane lines */
}

.ir-gate-box {
    background-color: #10b981; color: white; padding: 20px 10px;
    border-radius: 10px; font-size: 2rem; font-weight: bold;
    margin: 0 10%; border: 3px solid #059669;
}

/* Find this existing rule and update the padding */
.ir-game-over {
    text-align: center; 
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 20px; /* CHANGED from 30px */
    border-radius: 15px; 
    z-index: 10;
    position: absolute;  /* මව් div එකට සාපේක්ෂව ස්ථානගත කරන්න */
    top: 50%;            /* උඩ සිට 50%ක් පහළට ගේන්න */
    left: 50%;           /* වමේ සිට 50%ක් දකුණට ගේන්න */
    transform: translate(-50%, -50%);
}
.ir-game-over h3 {
    font-size: 2rem; margin: 0 0 10px 0; color: var(--primary-color);
}
.ir-game-over p { font-size: 1.2rem; margin-bottom: 20px; }

#ir-controls {
    display: none; margin-top: 10px; display: flex; justify-content: space-between;
}
.ir-control-btn { width: 48%; padding: 15px; font-size: 2rem; font-weight: bold; }

/* Add this NEW rule */
.ir-game-over button {
    display: block;
    margin: 0 auto; /* This centers the button */
    width: 60%;     /* Adjust this width as you like */
}

@media (max-width: 500px) { #ir-controls { display: flex; } }

@keyframes moveDown { from { top: -80px; } to { top: 450px; } } /* Adjusted 'to' value slightly */

/* --- Styles for Pending Student List --- */
.pending-student-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px !important; /* Overrides default li padding */
}

.pending-student-info {
    line-height: 1.5;
}

.approve-button {
    background-color: var(--success-color) !important;
    color: white !important;
    padding: 8px 8px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0; /* Prevents the button from shrinking */
    width: auto !important; /* Overrides default button width */
    margin: 0 !important; /* Overrides default button margin */
    font-size: 14px !important;
}
.approve-button:hover {
    background-color: #059669 !important;
}

/* --- Quiz Modal Styles --- */
.quiz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.quiz-modal-content {
    background: white;
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
}

/* --- Refresh Button Style --- */
.btn-refresh {
    position: absolute;
    top: 16px;
    right: 85px; /* Positioned next to the logout button */
    background-color: #e0e7ff;
    color: var(--primary-color);
    border: none;
    width: 32px;  /* Make it a square */
    height: 32px; /* Make it a square */
    font-size: 20px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.btn-refresh:hover {
    background-color: #c7d2fe;
}

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

/* --- PWA Install Banner Style --- */

@keyframes slideDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.install-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Make sure it's on top of everything */
    
    background-color: var(--primary-color);
    color: white;
    
    padding: 12px;
    border: none;
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    animation: slideDown 0.5s ease-out;
}

.install-banner:hover {
    background-color: var(--primary-hover);
}

.install-banner .material-symbols-outlined {
    margin-right: 10px;
}



/* 2. Quiz බොත්තමට විශේෂ වර්ණයක් ලබා දීම */
.btn-quiz {
    /* Quiz බොත්තම සඳහා වෙන් වූ පන්තිය */
    background-color: #10b981 !important; /* හරිත වර්ණය (Emerald Green) */
    color: white !important;
    border: none !important;
    font-weight: bold;
    padding: 10px 12px;
    transition: background-color 0.3s;
}

.btn-quiz:hover {
    background-color: #059669 !important; /* Hover effect සඳහා තද කොළ පැහැයක් */
}

/* 3. Quiz Modal බොත්තම් සඳහා සාමාන්‍ය style වැඩිදියුණු කිරීම */
.quiz-modal-content .game-answer-btn {
    margin-bottom: 8px; /* Quiz විකල්ප අතර ඉඩ */
    transition: background-color 0.3s, border 0.3s;
}

.quiz-modal-content .quiz-btn.correct {
    background-color: #34d399 !important; /* නිවැරදි පිළිතුර: ලා කොළ */
    color: #1f2937;
    border: 2px solid #059669;
}

.quiz-modal-content .quiz-btn.incorrect {
    background-color: #fca5a5 !important; /* වැරදි පිළිතුර: ලා රතු */
    border: 2px solid #ef4444;
}



/* --- QUIZ MODAL DESIGN IMPROVEMENTS --- */

/* Quiz Modal Content හි ප්‍රධාන ව්‍යුහය */
.quiz-modal-content {
    background-color: white;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    animation: fadeIn 0.3s ease-out;
}

/* ප්‍රශ්න පෙට්ටියේ පෙනුම (Question Box) */
.game-question-box {
    background-color: #f3f4f6; /* ලා අළු පසුබිම */
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
    color: #1f2937;
    min-height: 80px;
    display: flex;
    align-items: center; /* මැදට align කිරීමට */
}

/* Quiz පිළිතුරු බොත්තම් සඳහා සාමාන්‍ය විලාසය */
.quiz-modal-content .quiz-btn {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 2px solid #d1d5db;
    background-color: #ffffff;
    color: #1f2937;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: normal; /* දිගු පෙළ නව පේළියකට යැවීමට */
}

.quiz-modal-content .quiz-btn:hover:not(:disabled) {
    background-color: #eff6ff;
    border-color: #3b82f6;
}

/* ඊළඟට යාමේ/Finish බොත්තම (Next/Finish Button) */
#btnNextQuestion, #btnFinishQuiz {
    display: block; /* block-level button එකක් කිරීමට */
    width: 100%;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 8px;
    margin-top: 20px;
}

/* --- FEEDBACK STYLES (නිවැරදි/වැරදි පිළිතුරු) --- */

.quiz-modal-content .quiz-btn.correct {
    background-color: #d1fae5 !important; /* නිවැරදි: ලා කොළ */
    border-color: #059669; /* තද කොළ දාරය */
    color: #065f46;
    pointer-events: none; /* තේරූ පසු නැවත එබීම වැලැක්වීමට */
}

.quiz-modal-content .quiz-btn.incorrect {
    background-color: #fee2e2 !important; /* වැරදි: ලා රතු */
    border-color: #ef4444; /* රතු දාරය */
    color: #991b1b;
    pointer-events: none; 
}

/* --- RESULT SCREEN (Final Results) --- */
#quiz-results {
    padding-top: 15px;
}

#quiz-final-score {
    font-size: 2.5rem;
    color: #4f46e5; /* ප්‍රධාන නිල් වර්ණය */
    display: block;
    margin: 10px 0;
}

#quiz-stars-earned-text {
    color: #10b981; /* තරුවලට කොළ වර්ණය */
}

/* --- AI TEACHER FLOATING BUTTON AND MODAL STYLES --- */

/* 1. Floating Button (AI Teacher) */
.floating-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #4f46e5; /* Primary Purple */
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 1000; /* Always on top */
    transition: background-color 0.3s ease;
}

.floating-btn:hover {
    background-color: #4338ca;
}

/* 2. Modal Overlay (Background Dimmer) */
.ai-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

/* 3. Modal Content (The Chat Box) */
.ai-modal-content {
    background-color: white;
    width: 95%;
    max-width: 450px;
    height: 80%;
    max-height: 600px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.ai-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #e5e7eb;
    background-color: #4f46e5;
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.ai-header button {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    width: auto;
    padding: 0;
    margin: 0;
}

/* 4. Chat Window and Message Styles */
.ai-chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    background-color: #f9fafb;
}

.ai-message {
    background-color: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    margin-bottom: 10px;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* 5. Input Area and Buttons */
.ai-input-area {
    padding: 15px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#selectImageBtn, #checkHomeworkBtn {
    padding: 12px;
    font-size: 16px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- QUIZ MODAL SPECIFIC STYLES (for clean display) --- */

/* Ensure the main modal overlay is correct (if not already defined in style.css) */
.quiz-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1002;
}

/* Quiz Modal Content */
.quiz-modal-content {
    background-color: white;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 550px;
    max-height: 90vh;
    overflow-y: auto;
}

/* Question box - clear and distinct */
.game-question-box {
    background-color: #f0f9ff; /* Light Blue Background */
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 15px;
    margin: 15px 0;
    font-size: 1.15rem;
    font-weight: bold;
    text-align: left;
    color: #1f2937;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Quiz Answer Buttons */
.quiz-modal-content .quiz-btn {
    width: 100%;
    text-align: left;
    padding: 12px 15px;
    margin-bottom: 10px;
    border: 2px solid #e5e7eb;
    background-color: #ffffff;
    color: #1f2937;
    font-size: 1rem;
    border-radius: 8px;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: normal;
}

/* Feedback/Explanation Box */
.ai-chat-window p.ai-message {
    background-color: #eef2ff;
    border-left: 4px solid #4f46e5;
    padding: 12px;
}

/* Correct/Incorrect feedback colours */
.quiz-btn.correct {
    background-color: #d1fae5 !important; /* Green */
    border-color: #059669 !important;
}

.quiz-btn.incorrect {
    background-color: #fee2e2 !important; /* Red */
    border-color: #ef4444 !important;
}

/* style.css - For disabled button visual effect */

.btn-disabled-overlay {
    position: relative;
    opacity: 0.6; /* Visually dim the button */
    cursor: not-allowed;
    pointer-events: none; /* Block all click/touch events */
}

/* Ensure the floating button z-index is high enough */
.floating-btn {
    z-index: 1000;
}

.review-list button { 
        width: auto; 
        padding: 8px 15px; 
        margin: 0; 
        font-size: 14px;
        /* Default for Approve */
        background-color: #10b981; 
        color: white; /* Added color for clarity */
        border: none;
        border-radius: 6px;
    }
    .review-list button:hover { 
        background-color: #059669; 
    }
    
    /* 💡 CRITICAL FIX: Style for the Reject Button specifically */
    .reject-button-red {
        background-color: #d9534f !important; /* Red color */
    }
    .reject-button-red:hover {
        background-color: #c9302c !important; /* Darker Red on hover */
    }

    /* --- NEW STYLES: Detective Game Input & Button --- */

/* පිළිතුරු ඇතුළත් කරන Input Field එකේ පෙනුම */
#detectiveAnswer {
    width: 100%;
    padding: 15px 12px; /* වැඩිපුර Padding එකක් ලබා දීම */
    margin-top: 5px;
    border: 3px solid #bfdbfe; /* ලා නිල් පැහැති Border එකක් */
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 500;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

#detectiveAnswer:focus {
    outline: none;
    border-color: var(--primary-color); /* Focus වන විට Primary color එක පෙන්වයි */
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

/* --- NEW STYLES: Detective Game Input & Button --- */

/* පිළිතුරු ඇතුළත් කරන Input Field එකේ පෙනුම */
#detectiveAnswer {
    width: 100%;
    padding: 15px 12px; /* වැඩිපුර Padding එකක් ලබා දීම */
    margin-top: 5px;
    border: 3px solid #bfdbfe; /* ලා නිල් පැහැති Border එකක් */
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 500;
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

#detectiveAnswer:focus {
    outline: none;
    border-color: var(--primary-color); /* Focus වන විට Primary color එක පෙන්වයි */
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

/* Submit බොත්තම සඳහා විලාසය */
#btnSubmitPuzzle {
    width: 100%;
    padding: 18px; /* Button එක විශාල කරයි */
    margin-top: 20px !important;
    background-color: #f97316; /* තැඹිලි වර්ණය (Orange/Amber) */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px #e56d15; /* 3D effect එකක් ලබා දෙයි */
}

#btnSubmitPuzzle:hover {
    background-color: #e56d15;
}

#btnSubmitPuzzle:active {
    transform: translateY(2px);
    box-shadow: 0 2px #e56d15;
}

/* --- NEW STYLES: AI DETECTIVE GAME (The Number Mystery) --- */

/* ප්‍රධාන කථා පෙට්ටියේ පසුබිම සහ පෙනුම */
#detectiveGameContent .card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

/* කථා කොටස (Narrative Segment) */
#detectiveGameContent .card:first-child {
    background-color: #f9fafb; /* Lightest Gray */
    border-left: 5px solid var(--primary-color); /* Primary Color Bar */
    padding: 25px;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-dark);
}

#detectiveGameContent h3 {
    color: var(--primary-color);
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-top: 0;
    font-size: 1.3rem;
}

/* ප්‍රහේලිකා කොටස (Puzzle Box) */
#detectiveGameContent h4 {
    color: #f97316; /* Orange/Amber */
    font-size: 1.1rem;
    margin-top: 0;
}

/* ප්‍රශ්නයේ පෙළ (Question Text) */
#detectiveGameContent p:not(.error-msg) {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
}

/* --- Input Field (Answer Box) --- */

#detectiveAnswer {
    width: 100%;
    padding: 15px 12px;
    margin-top: 5px;
    border: 3px solid #bfdbfe; /* Light Blue Border */
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600; /* Bold font for numbers */
    transition: border-color 0.3s, box-shadow 0.3s;
    box-sizing: border-box;
}

#detectiveAnswer:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
}

/* --- Submit Button (Style copied from previous fix for consistency) --- */

#btnSubmitPuzzle {
    width: 100%;
    padding: 18px;
    margin-top: 20px !important;
    background-color: #f97316; /* Orange/Amber */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px #e56d15;
    transition: background-color 0.2s, transform 0.1s;
}

#btnSubmitPuzzle:hover {
    background-color: #e56d15;
}

#btnSubmitPuzzle:active {
    transform: translateY(2px);
    box-shadow: 0 2px #e56d15;
}

/* --- Feedback Messages --- */

#detectiveFeedback {
    padding: 10px;
    border-radius: 6px;
    background-color: #fffbeb;
    border-left: 4px solid #f59e0b;
}

#detectiveFeedback strong {
    color: #f97316; /* Highlight the status (Correct/Wrong) */
}
/* --- NEW STYLES: MATH DUEL INITIATION UI --- */

/* Math Duel Div (index.js හි loadMathDuelUI මඟින් Load කරන ප්‍රධාන Div එක) */
#mathDuelDiv .card {
    background: #f8f8ff; /* Very Light Lavender Background */
    border: 1px solid #e0e7ff;
    padding: 30px 20px;
}

#mathDuelDiv h2 {
    color: var(--primary-color); /* Primary Purple/Blue */
    font-size: 1.8rem;
    margin-bottom: 5px;
}

#mathDuelDiv p {
    font-size: 1rem;
    color: var(--text-medium);
}

/* Stars Cost Display - Highlight කිරීම */
#mathDuelDiv p strong {
    color: #f97316; /* Orange/Amber for Stars */
    font-size: 1.1rem;
}

/* Input Fields (WhatsApp Number) */
#mathDuelDiv input[type="tel"],
#mathDuelDiv select {
    width: 100%;
    padding: 12px;
    margin-top: 5px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

#mathDuelDiv input[type="tel"]:focus,
#mathDuelDiv select:focus {
    border-color: var(--success-color); /* Focus වන විට Green color */
    outline: none;
}

/* Label Styles */
#mathDuelDiv label {
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 5px;
    text-align: left;
}

/* Initiate Duel Button Style */
#btnInitiateDuel {
    width: 100%;
    padding: 18px;
    margin-top: 25px !important;
    background-color: #ef4444; /* Strong Red color for action */
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 5px #b91c1c; /* Deep shadow for 3D effect */
    transition: background-color 0.2s, transform 0.1s;
}

#btnInitiateDuel:hover {
    background-color: #dc2626;
}

#btnInitiateDuel:active {
    transform: translateY(2px);
    box-shadow: 0 3px #b91c1c;
}

/* Status Message */
#duelStatusMsg {
    text-align: center;
    font-weight: 700;
    padding: 10px;
}

/* --- NEW/MODIFIED STYLES: Duel Quiz Input --- */

#duelAnswerInput {
    /* Existing Styles Overridden */
    width: 100%; 
    padding: 15px; 
    font-size: 1.2rem;
    font-weight: 600;
    
    /* NEW: Clean, Modern Look */
    border: 3px solid var(--border-color); /* Light gray border */
    border-radius: 10px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* Slight inner shadow */
    box-sizing: border-box; /* Ensure padding is included in width */
    transition: border-color 0.2s;
}

#duelAnswerInput:focus {
    border-color: var(--primary-color); /* Focus වන විට Primary color */
    outline: none;
    box-shadow: 0 0 0 1px var(--primary-color);
}

/* --- NEW/MODIFIED STYLES: Submit Answer Button --- */

#btnSubmitDuelAnswer {
    /* Existing Styles Overridden */
    width: 100%; 
    padding: 15px; 
    margin-top: 10px;
    font-size: 1.1rem;
    font-weight: 700;
    
    /* NEW: Strong Primary Look */
    background-color: var(--primary-color) !important; /* Primary Blue/Purple */
    color: white !important;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--primary-hover); /* 3D effect (Darker primary color) */
    transition: background-color 0.1s, transform 0.1s, box-shadow 0.1s;
}

#btnSubmitDuelAnswer:hover {
    background-color: var(--primary-hover) !important;
}

#btnSubmitDuelAnswer:active {
    transform: translateY(2px); /* Click Effect */
    box-shadow: 0 2px 0 var(--primary-hover);
}

/* Problem Image Modal Styling */
.image-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.image-modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-modal-content img {
    max-width: 100%;
    height: auto;
    margin-top: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    object-fit: contain; 
}

.image-modal-content button {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: var(--primary-color); /* Firebase config එකේ නැති වුවත්, ඔබගේ primary color එකට මෙය යොදන්න */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Add this to style.css */

.btn-share {
    /* Share Button Styling */
    display: inline-block;
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    /* WhatsApp Green: #25D366 */
    background-color: #25D366 !important;
    color: white !important;
    border: none;
    margin-top: 5px; /* Spacing between other buttons/inputs */
}

.btn-share:hover {
    background-color: #1DA851 !important;
}

/* --- Lesson Tiles Layout (FINAL CORRECTED VERSION) --- */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 8px;
    padding: 5px 0;
}

.tile {
    /* Critical Fix: Main layout as column for buttons underneath */
    display: flex;
    flex-direction: column; 
    align-items: stretch;
    
    background: linear-gradient(135deg, #dbfdf2 0%, #fff7ed 100%);
    border-radius: 18px;
    border: 4px solid #f9e2e5;
    background-color: rgba(255, 255, 255, 0.65);
    padding: 8px;
    margin: 8px 0;
    /* 💡 MODIFIED: Using the new, stronger global shadow */
    box-shadow: var(--card-shadow); 
    
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    position: relative;
    opacity: 1.8; 
    animation: tileFadeInUp 0.5s ease-out forwards;

}

.tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.1);
}

/* 3. Icon + Title/Desc Wrapper (Horizontal Layout) */
.tile-content-wrapper {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 10px;
}

/* 4. Icon Styling */
.tile .lesson-icon {
    flex-shrink: 0; 
    margin-right: 15px;
    font-size: 32px;
    color: var(--primary-color);
    background-color: #f0f0f8;
    padding: 10px;
    border-radius: 12px;
}

/* 5. Title/Description Area */
.tile .title-desc-area {
    flex-grow: 1;
    display: block;
    min-width: 0; 
}

.tile .title {
    font-weight: 900;
    color: var(--text-dark);
    font-size: 1.3rem;
    margin: 0 0 4px 0;
}

/* 6. Description Wrapping Fix (CRITICAL) */
.tile .desc {
    display: block;
    width: 100%;
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis; 
    
    word-wrap: break-word; 
    white-space: normal; 
    
    line-height: 1.4;
    font-size: 0.85rem;
    color: #4b5563;
    margin-top: 3px;
}

/* 7. Buttons Container (Full Width, Column Layout) */
.tile .tile-buttons {
    display: flex;
    flex-direction: column; 
    gap: 8px; 
    margin-top: 5px; 
    width: 100%;
}

/* 8. Common Button/Input Styles (Full Width & Aesthetics) */
.tile .btn-watch,
.tile .btn-locked,
.tile .btn-share {
    /* Base button for lessons */
    width: 100%;
    box-sizing: border-box;
    padding: 10px 15px;
    text-align: center;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.2s;
    border: none; /* Ensure no extra borders mess up the layout */
}

/* Default Watch Button (View Video / Unlock) */
.tile .btn-watch {
    background: var(--primary-color);
    color: #fff;
}
.tile .btn-watch:hover {
    background: var(--primary-hover);
}

/* Locked Button */
.tile .btn-locked {
    background: #e5e7eb; 
    color: var(--text-light); 
    cursor: not-allowed; 
}

/* Specific Button Colors */
.tile .btn-quiz { background-color: var(--success-color) !important; color: white !important; }
.tile .btn-problem-image { background-color: #f97316 !important; color: white !important; }
.tile .btn-share { background-color: #25D366 !important; color: white !important; }


/* 9. Unlock Input & Button Layout (Row-level inside the column container) */
.tile .tile-buttons div {
    display: flex; 
    gap: 8px;
    align-items: center;
}

.tile .tile-buttons input.unlock-code {
    flex-grow: 1;
    margin: 0;
    padding: 10px 12px;
    height: auto; 
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.tile .tile-buttons button.btn-watch {
    flex-shrink: 0;
    width: auto; 
    padding: 10px 15px;
}

/* --- Mobile Responsive Final Overrides --- */
@media (max-width: 500px) {
    .wrap-dash { padding: 4px; }
    .tile { padding: 12px; }
    
    .tile .lesson-icon {
        font-size: 28px;
        padding: 8px;
    }

    .tile .title { 
        font-size: 1.2rem; 
    }
}

/* style.css හි .tile නීතියට හෝ අවසානයට එකතු කරන්න */

/*.tile {
    /* ... (පවතින නීති) ... */
    
    /*border: 2px solid #e5e7eb; /* ලා අළු පැහැති දාරය */
    /* border-radius සහ box-shadow නීති කලින් තිබූ පරිදිම පවතිනු ඇත */
/*}

/* --- 💡 LESSON DURATION BADGE STYLING 💡 --- */

.tile .lesson-duration-badge {
    position: absolute;
    top: 16px; /* Title/Icon එකට ගැලපෙන උසකට සකස් කරයි */
    right: 16px; 
    
    /* පසුබිම් වර්ණය: ලා නිල්/ප්‍රාථමික වර්ණයට ගැලපෙන ලා වර්ණයක් */
    background-color: #e0f2fe; /* Light sky blue */
    color: #0d9488; /* Darker teal/success color for text */
    
    padding: 4px 8px;
    border-radius: 6px; 
    font-size: 0.8rem;
    font-weight: 700;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px; /* Icon සහ Text අතර පරතරය */
    
    /* Box shadow/Border එකක් අවශ්‍ය නම්, මෙහිදී එකතු කරන්න */
    border: 1px solid #bae6fd; 
}

/* --- 💡 NEW ICON + DURATION WRAPPER STYLES (Vertical Stack) 💡 --- */

/* 1. Icon සහ Duration Text අඩංගු ප්‍රධාන wrapper එක */
.tile .icon-duration-wrapper {
    display: flex;
    flex-direction: column; /* Icon එක යටින් Duration Text එක පෙන්වීමට */
    align-items: center; /* සියල්ල මැදට align කිරීමට */
    flex-shrink: 0; /* Wrapper එක shrink වීම නවත්වයි */
    margin-right: 15px; /* Text Area එකට space දීම */
    text-align: center;
}

/* 2. Duration Text එකේ Styles (පෙර තිබූ Badge එකට සමාන පෙනුම) */
.tile .lesson-duration-text {
    /* Background එක සහ Text Color එක යොදමු */
    background-color: #e0f2fe; /* Light sky blue */
    color: #0d9488; 
    
    padding: 2px 4px; /* කුඩා padding එකක් */
    border-radius: 4px;
    font-size: 0.75rem; /* කුඩා font size */
    font-weight: 700;
    
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 5px; /* Icon එකට යටින් පරතරය */
    border: 1px solid #bae6fd;
}

/* 3. පැරණි Absolute Badge එක (Lesson Duration Badge) ඉවත් කිරීම */
/* පැරණි duration badge එකේ නම lesson-duration-badge. එය තිබේ නම්, එය සඟවමු */
.tile .lesson-duration-badge {
    display: none !important; 
}

/* --- 💡 LESSON TILES LAYOUT FIXES (FINAL HEIGHT STABILIZATION) 💡 --- */

.tile {
    /* Critical Fix: Stack vertically & ensure space can be pushed down */
    display: flex;
    flex-direction: column; 
    align-items: stretch;
    min-height: 350px; /* 💡 NEW FIX: අවම උසක් ලබා දීම (දළ වශයෙන් Buttons ගැලපීමට) */
    position: relative; /* Button Layout එක පාලනයට අවශ්‍ය විය හැක */

    /* අනෙකුත් නීති නොවෙනස්ව පවතී */
}

/* 💡 CRITICAL FIX: Buttons වලට ඉහළින් ඇති සියලුම අන්තර්ගතය වෙන් කිරීම */
.tile-content-wrapper {
    /* Icon සහ Text එක අඩංගු මෙය Tile එකේ මුල් කොටසයි */
    display: flex;
    align-items: flex-start;
    width: 100%;
    /* margin-bottom ඉවත් කරමු */
}

/* 💡 CRITICAL FIX: Buttons Container එක සෑම විටම පහළට තල්ලු කිරීම */
.tile .tile-buttons {
    /* Margin-top: auto මඟින් ඉතිරි සියලුම සිරස් ඉඩ ලබාගෙන buttons පහළටම තල්ලු කරයි */
    margin-top: auto; 
    
    display: flex;
    flex-direction: column; 
    gap: 8px; 
    padding-top: 8px; /* Description එකට යටින් ඉඩක් */
    width: 100%;
}
/* style.css හි .tile නීතියට අදාළව, පහත අගය වෙනස් කරන්න */

.tile {
    /* ... (අනෙකුත් නීති) ... */
    
    /* 💡 MODIFIED FIX: අවම උස අගය අඩු කිරීම */
    min-height: 240px; /* පෙර තිබූ 350px වෙනුවට 280px වැනි අගයක් යොදමු */
    
    /* ... (අනෙකුත් නීති) ... */
}
/* --- 💡 CSS FIXES: ICON SHADOW AND CURRENT TILE GLOW 💡 --- */

/* 1. Icon Shadow Effect */
.tile .lesson-icon {
    /* ... (පවතින නීති) ... */
    
    /* 💡 NEW: Subtle Shadow */
    box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3); 
    transition: box-shadow 0.3s;
}

.tile:hover .lesson-icon {
    box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4);
}

/* 2. Current Lesson එකට GLOW Effect එකක් දීම (Animation) */
/* ඔබගේ CSS හි pulse keyframes දැනටමත් තිබේ. අපි අලුත් glow animation එකක් හදමු. */
@keyframes softGlow {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
    50% { box-shadow: 0 0 10px 3px rgba(79, 70, 229, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
}

.tile.tile-current {
    /* 💡 CRITICAL: Border සහ Box-shadow එක දැනටමත් තියෙනවා */
    border-color: var(--primary-color);
    border-width: 3px;
    
    /* 💡 NEW: Apply Glow Effect */
    animation: softGlow 2.5s infinite ease-in-out; 
}

/* --- 💡 COMPLETED TILE FADE EFFECT 💡 --- */

.tile.tile-completed {
    /* 💡 Status Border එක එලෙසම තබා, Tile එකේ පෙනුම අඩු කරයි */
    opacity: 0.7; /* 30% ක විනිවිදභාවය */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Shadow එක අඩු කරයි */
}

/* Hover කළ විට නැවත පෙන්වයි */
.tile.tile-completed:hover {
    opacity: 1.0; 
    transform: none; /* Hover animation ඉවත් කරයි */
    box-shadow: var(--card-shadow); 
}

/* style.css වෙත: Title එක අසල කුඩා නිවැරදි කිරීමේ Icon එකක් */
.tile .title-status-icon {
    font-size: 1rem;
    margin-left: 8px;
    vertical-align: middle;
}
.tile-completed .title-status-icon {
    color: var(--success-color);
}
.tile-current .title-status-icon {
    color: #f97316; /* Orange dot for focus */
}

/* Style එකේ පවතින .btn-watch:active සහ අනෙකුත් බොත්තම් වලට එකතු කරන්න */

.tile .btn-watch:active,
.tile .btn-locked:active,
.tile .btn-share:active {
    transform: scale(0.95); /* 2% කින් කුඩා කරයි */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Shadow එක අඩු කරයි */
    transition: transform 0.02s ease-out; /* ක්ෂණික ප්‍රතිචාරය */
}
/* style.css හි .lesson-icon වෙත වෙනස් කරන්න */
.tile .lesson-icon {
    /* ... (පවතින නීති) ... */
    
    /* 💡 NEW: Gradient Background */
    background: linear-gradient(135deg, #f0f0f8, var(--light-gray)); 
    color: var(--primary-color);
    /* Icon එකේ වර්ණය තව ටිකක් විචිත්‍ර කරන්න */
    text-shadow: 0 0 2px rgba(79, 70, 229, 0.2); 
}

/* body නීතියට පසුබිම් රටාව එකතු කරන්න */
body {
    /* ... (පවතින නීති) ... */
    /* 💡 NEW: Subtle Geometric Background Pattern */
    /*background-image: url('https://img.freepik.com/premium-photo/abstract-background-with-colorful-hexagonxa_676239-11867.jpg'); /* ඔබගේ Storage URL යොදන්න */
    /*background-size: 300px; /* රටාව කුඩා ලෙස පෙනීමට */
    /*background-repeat: repeat;
    /*background-color: #eef2ff; /* Pattern එක නොපෙනේ නම් backup color */
}

/* Login Wrap එකට දමන Shadow එක තව ටිකක් ආකර්ශණීය කරමු */
.wrap-login {
    /* ... (පවතින නීති) ... */
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3); /* Shadow එක වැඩි කරයි */
    backdrop-filter: blur(8px); /* Blur value එක ගැලපීම */
}

/* --- Sales Portal Specific Styles --- */

.sales-leads-container {
    max-width: 900px;
    margin: 20px auto;
    padding: 10px;
}

#salesLeadsTiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.sale-lead-tile {
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    border: 3px solid #f0f0f8;
}

/* Alert Statuses */
.sale-lead-tile.urgent {
    border-color: #dc2626; /* Red border for critical leads */
    background-color: #fffbeb;
}
.sale-lead-tile.active {
    border-color: #22c55e; /* Green border for active leads */
}

.lead-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.lead-name {
    font-size: 1.25rem;
    color: var(--text-dark);
    margin: 0;
}

.lead-type {
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    color: white;
}
.lead-type.trial { background-color: #0ea5e9; }
.lead-type.permanent { background-color: #f97316; }

.lead-details p {
    margin: 5px 0;
    font-size: 0.9rem;
}

.lead-details strong {
    color: var(--text-medium);
}

.activity-status span {
    font-weight: 700;
}
.activity-status .urgent { color: #dc2626; }
.activity-status .active { color: #10b981; }


.btn-call-to-action {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-call-to-action:hover {
    background-color: #059669;
}

/* style.css හි Sales Portal Styles වලට එකතු කරන්න */

/* 💡 NEW Alert Status Color: Expiry Alert (Primary Color) */
.sale-lead-tile.expiry {
    border-color: var(--primary-hover); /* Darker primary border */
    background-color: #eef2ff; /* Very light purple background */
}

/* Activity Status Text Color for Expiry */
.activity-status.expiry { 
    color: var(--primary-color); 
    font-weight: 800;
}

/* Button Color Change for Expiry Leads (Optional, but helps agent focus) */
/* This is handled by inline style in JS, but keeping the principle clear */

/* style.css හි ඇති වැදගත් Centering Styles */

.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); 
    display: flex; /* CRITICAL for Centering */
    justify-content: center; /* Center horizontally */
    align-items: center;   /* Center vertically */
    z-index: 900; 
}

.quiz-modal-content {
    /* 💡 මෙම style එක මඟින් Modal box එකේ පෙනුම සහ ධාරිතාව පාලනය වේ */
    background: white;
    padding: 25px; 
    border-radius: 12px; 
    /* ... (rest of the content styling) ... */
}

/* ඔබේ CSS ගොනුවේ අනෙකුත් .sale-lead-tile.urgent වැනි 
  style ඇති තැනටම මෙයත් එකතු කරන්න.
*/

/* 1. "Day One" (Welcome) Tile Style */
.sale-lead-tile.day_one {
    border-left: 5px solid #059669; /* තද කොළ පාට Border එක */
    background-color: #f0fdf4;     /* ඉතා ලා කොළ Background එක */
}

/* 2. "Active" (Praise) Tile Style */
.sale-lead-tile.active {
    border-left: 5px solid #0ea5e9; /* නිල් පාට Border එක */
    background-color: #f0f9ff;     /* ඉතා ලා නිල් Background එක */
}

/* 3. අලුත් Status වලට අදාළ "Activity Status" Tag එකේ පාට (අවශ්‍ය නම්) */
.activity-status.day_one {
    background-color: #059669;
    color: white;
}

.activity-status.active {
    background-color: #0ea5e9;
    color: white;
}
/* Tile එක ඇතුළත details අතර පරතරය (spacing) අඩු කිරීමට */
.lead-details p {
    margin-top: 8px;     /* මෙතන 6px, 8px වගේ කුඩා අගයක් දාන්න */
    margin-bottom: 8px;  /* මෙතන 6px, 8px වගේ කුඩා අගයක් දාන්න */
    
    /* නැතහොත්, ඔබට අවශ්‍ය නම් පරතරය තවත් අඩු කිරීමට 
       margin: 4px 0; ලෙස යොදන්න. 
    */
}

/* --- 💡 Checkout Modal Input Styles (Corrected Version) --- */

/* Modal එකේ "Customer Name", "Address" වගේ labels වලට style එක */
#checkoutModal label {
    display: block;
    margin-top: 12px;  /* උඩින් ඉඩක් */
    margin-bottom: 6px; /* Input එකට උඩින් ඉඩක් */
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}

/* 💡 [FIX] 
   Modal එකේ තියෙන සියලුම text fields (inputs සහ textarea) 
   'input:not([type])' මගින් type="text" නැති input (Customer Name වගේ) අල්ලගන්නවා
*/
#checkoutModal input[type="text"],
#checkoutModal input:not([type]), 
#checkoutModal input[type="tel"],
#checkoutModal textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: var(--font-family); /* 💡 Abhaya Libre font එක */
    border: 2px solid var(--border-color); /* ඝනකම, පැහැදිලි border එකක් */
    border-radius: 8px; /* ලස්සනට round කරපු කොන් */
    box-sizing: border-box; /* 💡 Padding එක පළලට බලපාන්නේ නැති වෙන්න */
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* User කෙනෙක් field එකක් click (focus) කරාම */
#checkoutModal input[type="text"]:focus,
#checkoutModal input:not([type]):focus,
#checkoutModal input[type="tel"]:focus,
#checkoutModal textarea:focus {
    outline: none;
    border-color: var(--primary-color); /* 💡 ප්‍රධාන පාටින් highlight වීම */
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); /* 💡 Glow effect එක */
}

/* Address එක type කරන box එක */
#checkoutModal textarea {
    resize: vertical; /* උස විතරක් වෙනස් කරන්න පුළුවන් */
    min-height: 90px;
}

/* Modal එකේ තියෙන ඉර (Horizontal Rule) */
#checkoutModal hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 15px 0;
}