/* ==========================================================================
   English Typing Tutor - Premium Compact Theme (Fits on Single Screen)
   ========================================================================== */

/* मास्टर कंटेनर स्कोप - पैडिंग और हाइट को एकदम स्लिम किया */
.ty-tutor-container {
    color: #2D3748 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    width: 100% !important;
    max-width: 800px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 8px 14px !important; /* पैडिंग कम की ताकि ऊपर-नीचे जगह बचे */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}

.ty-tutor-container * {
    box-sizing: border-box !important;
	border-top: none;
}

/* --- मुख्य टेक्स्ट बॉक्स हाइलाइटर कलर्स (एकदम क्लियर विज़िबिलिटी) --- */
.ty-tutor-container .done {
    color: #000000 !important;
    background-color: transparent !important;
}

.ty-tutor-container .todo {
    color: #FFFFFF !important;
    background-color: #EBA0D4 !important;
    border-radius: 2px !important;
    padding: 1px 2px !important;
}

.ty-tutor-container .future {
    color: #FFFFFF !important;
    background-color: transparent !important;
}

/* --- मुख्य टेक्स्ट एक्सरसाइज बॉक्स (rounded-rect) - हाइट कम की --- */
.ty-tutor-container .rounded-rect {
	font-weight: 500 !important;
    font-size: 22px !important; /* फॉन्ट थोड़ा कॉम्पैक्ट किया */
    font-family: monospace !important;
    text-align: justify !important;
    line-height: 1.6 !important;
    background-color: #669EE8 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    padding: 6px 16px !important; /* पैडिंग टाइट की */
    height: auto !important;
    min-height: 90px !important; /* कम से कम ऊंचाई घटाई */
    vertical-align: middle !important;
    display: block !important;
    margin-bottom: 0.4rem !important; /* मार्जिन कम किया */
    letter-spacing: 1.5px !important;
}

/* --- वर्चुअल कीबोर्ड एरिया बोर्ड (score2) --- */
.ty-tutor-container .rounded-board {
    width: 100% !important;
    background-color: #F7FAFC !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 8px !important; /* अंदर की खाली जगह कम की */
    margin-bottom: 0.8rem !important;
}

.ty-tutor-container table.score2 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 3px !important; /* कीकैप्स के बीच का गैप सटीक किया */
}

/* सामान्य अक्षरों वाले बटन (Keycaps) */
.ty-tutor-container .score2 td.count2 {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E0 !important;
    border-bottom: 2px solid #CBD5E0 !important; /* 3D कीकैप लुक */
    border-radius: 6px !important;
	padding: 0px 0px 1px 0px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
    /* सुपर फिक्स: कीबोर्ड के अक्षरों का आकार बड़ा किया ताकि साफ दिखे */
    font-size: 18px !important; 
    color: #2D3748 !important;
    min-width: 32px !important;
}

/* स्पेशल बटन (Shift, Space, Enter, Caps) */
.ty-tutor-container .score2 td.count3 {
    background-color: #EDF2F7 !important;
    border: 1px solid #CBD5E0 !important;
    border-bottom: 2px solid #CBD5E0 !important;
    border-radius: 6px !important;
    padding: 3px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #4A5568 !important;
}

.ty-tutor-container .score2 td span.target {
    color: #38A169 !important;       /* चमकदार गहरा हरा रंग */
    font-weight: 700 !important;      /* अक्षर को एक्स्ट्रा बोल्ड किया ताकि तुरंत दिखे */
    font-size: 18px !important;       /* केवल टारगेट अक्षर का साइज थोड़ा बड़ा किया */
    text-shadow: 0 0 1px rgba(56, 161, 105, 0.5) !important; /* हल्का सा ग्लो इफ़ेक्ट */
    background: transparent !important;
}
/* अगर यूज़र ग़लत बटन दबाए रखे तो उसकी स्टाइल */
.ty-tutor-container .score2 td span.pressed {
    color: #E53E3E !important;       /* एरर रेड */
    font-weight: 900 !important;
    background: transparent !important;
}

.ty-tutor-container .score2 td.silent {
    color: #2D3748 !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid #EDF2F7 !important;
    border-left: 1px solid #EDF2F7 !important;
    border-right: 1px solid #E2E8F0 !important;
    border-bottom: 3px solid #CBD5E0 !important; 
}

/* --- स्टैटिस्टिक्स हेडर ग्रिड (score1) --- */
.ty-tutor-container table.score1 {
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 5px !important;
    width: 100% !important;
    margin-bottom: 0.1rem !important;
}

.ty-tutor-container .score1 td.rounded-box {
    background-color: #669EE8 !important;
    border-radius: 6px !important;
    text-align: center !important;
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 6px 2px !important;
    height: 28px !important;
    vertical-align: middle !important;
}

.ty-tutor-container .score1 td.circle {
    border-radius: 10px !important;
    background-color: #F7FAFC !important;
    border: 1px solid #E2E8F0 !important;
    color: #1A202C !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    vertical-align: middle !important;
    height: 38px !important;
}

/* --- गाइड हैंड्स एरिया - साइज कंट्रोल ताकि स्क्रीन से बाहर न जाए --- */
.ty-tutor-container table.hand {
    width: 100% !important;
    max-width: 604px !important;
    margin: 0 auto !important;
    border-collapse: separate !important;
}

.ty-tutor-container .hand td {
    text-align: center !important;
    vertical-align: middle !important;
}

.ty-tutor-container .hand img {
    max-width: 140px !important; /* फिक्स: हाथों की चौड़ाई थोड़ी कम की ताकि वर्टिकल स्पेस बचे */
    height: auto !important;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.05)) !important;
}

/* ==========================================================================
   Thanks Page - 100% Consistent Dashboard UI Theme (Strict Fix)
   ========================================================================== */

body.thanks-page-body {
    background-color: #F7FAFC !important;
    margin: 0 !important;
}

/* थैंक्स पेज का मुख्य स्कोप कंटेनर */
.ty-thanks-scope {
    color: #2D3748 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    width: 100% !important;
    max-width: 900px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
    margin: 20px auto !important;
}

.ty-thanks-scope * {
    box-sizing: border-box !important;
}

.ty-thanks-scope h2 {
    color: #1A202C !important;
    font-size: 22px !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    font-weight: 700 !important;
}

.ty-thanks-scope .success-message {
    font-size: 18px !important;
    line-height: 1.5 !important;
    background-color: #F0F4F8 !important;
    border-left: 4px solid #3182CE !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    margin-bottom: 20px !important;
    text-align: justify !important;
}

/* --- सुपर फिक्स: कंसिस्टेंट सेक्शन कार्ड डिज़ाईन --- */
.ty-thanks-scope .thanks-section-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.01) !important;
    position: relative !important;
}

/* सुपर फिक्स: सभी हेडिंग्स अब एक सुंदर रॉयल ब्लू टाइटल बार के अंदर लॉक हैं */
.ty-thanks-scope .section-title-bar {
    background-color: #3182CE !important; /* आपके ट्यूटर का रॉयल ब्लू थीम कलर */
    color: #FFFFFF !important;             /* फिक्स: चमकदार सफ़ेद टेक्स्ट */
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 16px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    border-bottom: 1px solid #2B6CB0 !important;
}

/* कार्ड के अंदर की खाली जगह */
.ty-thanks-scope .card-inner-padding {
    padding: 16px !important;
}

/* समरी और हिस्ट्री की टेबल्स का अंदरूनी ढांचा */
.ty-thanks-scope .summary-table, 
.ty-thanks-scope .history-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    border: none !important; /* कार्ड केंटेनर के अंदर होने के कारण बॉर्डर क्लीन किया */
}

/* जूमला ब्लीड-थ्रू रोकने के लिए सेल्स की कड़क डिज़ाईन */
.ty-thanks-scope .summary-table td, 
.ty-thanks-scope .history-table td {
    padding: 12px 16px !important;
    font-size: 17px !important;
	font-weight:500 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    background-color: #FFFFFF !important;
}

.ty-thanks-scope .summary-table tr:last-child td, 
.ty-thanks-scope .history-table tr:last-child td {
    border-bottom: none !important;
}

.ty-thanks-scope .summary-table td.data-val {
    font-weight: 700 !important;
    color: #1A202C !important;
    text-align: right !important;
    font-size: 15px !important;
}

.ty-thanks-scope .history-table tr.header-row {
    background-color: #F1F5F9 !important; /* हल्का और सुखद न्यूट्रल बैकग्राउंड */
}

.ty-thanks-scope .history-table tr.header-row td {
    color: #4A5568 !important;             /* फिक्स: गहरे स्लेटी रंग का साफ़ टेक्स्ट */
    font-weight: 700 !important;
    font-size: 11px !important;
    padding: 12px 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background-color: #97cff7 !important;  /* जूमला ओवरराइड को रोकने के लिए सीधे TD पर लॉक */
    
    text-align: center !important;
}


.ty-thanks-scope tr:nth-child(even) td {
    background-color: #F8FAFC !important;
}

/* ==========================================================================
   Thanks Page - 3D Virtual Keyboard Heatmap Theme (Fully Responsive)
   ========================================================================== */

.ty-thanks-scope .heatmap-svg-holder {
    width: 100% !important;
    height: auto !important;
    margin: 10px auto 0 auto !important;
    max-width: 780px !important;
}

/* SVG के अंदर के कीकैप्स की कोर स्टाइलिंग */
.ty-thanks-scope svg .hm-key {
    fill: #FFFFFF;
    stroke: #E2E8F0;
    stroke-width: 1;
    rx: 4px;
    ry: 4px;
    transition: fill 0.3s ease !important;
}

.ty-thanks-scope svg .hm-key-special {
    fill: #F1F5F9;
    stroke: #E2E8F0;
    stroke-width: 1;
    rx: 4px;
    ry: 4px;
}

.ty-thanks-scope svg .hm-text {
    font-size: 9px !important;
    font-family: monospace !important;
    font-weight: 700 !important;
    fill: #2D3748;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.ty-thanks-scope svg .hm-text-count {
    font-size: 7px !important;
    font-family: system-ui, sans-serif !important;
    font-weight: 700 !important;
    fill: #FFFFFF;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

.ty-thanks-scope svg .hm-count-bg {
    fill: #E53E3E;
    rx: 3px;
    ry: 3px;
}


/* मेडल विजेट */
.ty-badge-widget {
    background: linear-gradient(135deg, #F8FAFC 0%, #EDF2F7 100%) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.ty-badge-widget .badge-medal-art { font-size: 36px !important; }
.ty-badge-widget .badge-text-info h4 { margin: 0 0 4px 0 !important; font-size: 15px !important; font-weight: 700 !important; color: #1A202C !important; }
.ty-badge-widget .badge-text-info p { margin: 0 !important; font-size: 15px !important; color: #4A5568 !important; }

/* ==========================================================================
   Thanks Page Buttons - Premium Emerald Green 3D Clickable Theme Fix
   ========================================================================== */

/* बटनों का मुख्य रैपर - साइज और सेंटर अलाइनमेंट बिल्कुल वही परफेक्ट स्लिम है */
.ty-thanks-scope .links-wrapper { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 12px !important;            
    margin: 24px auto 10px auto !important; 
    width: 100% !important;
    max-width: 680px !important;     
    align-items: stretch !important; 
    justify-content: center !important;
}

/* तीनों बटनों का एक जैसा असली कड़क 3D एमराल्ड ग्रीन कीकैप डिज़ाइन */
.ty-thanks-scope .btn-link { 
    flex: 1 !important;              
    display: flex !important;        
    align-items: center !important;  
    justify-content: center !important; 
    text-align: center !important;   
    padding: 8px 10px !important;    
    font-size: 12px !important;      
    font-weight: 700 !important;     
    text-decoration: none !important; 
    border-radius: 6px !important;    
    cursor: pointer !important;
    font-family: Arial, Helvetica, sans-serif !important;
    white-space: nowrap !important;  
    transition: all 0.1s ease-in-out !important;
    
    /* फिक्स: चारकोल हटाकर एक शानदार लाइव एमराल्ड ग्रीन रंग लागू किया */
    background-color: #38A169 !important; /* चमकीला और कड़क हरा रंग */
    color: #FFFFFF !important;             /* चमकदार सफ़ेद टेक्स्ट */
    border-top: 1px solid #68D391 !important;   /* हल्का टॉप बॉर्डर ताकि 3D उभरा हुआ दिखे */
    border-left: 1px solid #68D391 !important;
    border-right: 1px solid #22543D !important;
    border-bottom: 2px solid #22543D !important; /* कड़क मैकेनिकल 3D बॉटम कीकैप शैडो */
    box-shadow: 0 4px 6px rgba(56, 161, 105, 0.15) !important;
}

/* माउस ले जाने पर होवर इफ़ेक्ट (Hover State) */
.ty-thanks-scope .btn-primary:hover,
.ty-thanks-scope .btn-secondary:hover {
    background-color: #2F855A !important; /* माउस ले जाने पर थोड़ा गहरा क्लासिक फॉरेस्ट ग्रीन */
    color: #FFFFFF !important;
    border-bottom-width: 1px !important;
    transform: translateY(1px) !important; 
}

/* क्लिक करने पर असली कीबोर्ड बटन की तरह दबने का इफ़ेक्ट (Active State) */
.ty-thanks-scope .btn-primary:active,
.ty-thanks-scope .btn-secondary:active {
    border-bottom-width: 1px !important;
    transform: translateY(3px) !important; /* पूरा बटन नीचे की तरफ दब जाएगा */
    box-shadow: none !important;
}

/* ==========================================================================
   MOBILE OVERRIDE - मोबाइल OTG छात्रों के लिए
   ========================================================================== */
@media (max-width: 600px) {
    .ty-thanks-scope .links-wrapper { 
        flex-direction: column !important; 
        gap: 10px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    .ty-thanks-scope .btn-link {
        white-space: normal !important; 
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
}




/* क्लियर हिस्ट्री बटन (फिक्स: नीले टाइटल बार के ऊपर चमकदार सफेद किया) */
.ty-thanks-scope .clear-btn {
    font-size: 11px !important;
    color: #FFFFFF !important;             /* फिक्स: अब नीले बैकग्राउंड पर साफ़ चमकेगा */
    background: none !important;
    border: none !important;
    text-decoration: underline !important;
    cursor: pointer !important;
    padding: 0 !important;
    position: absolute !important;
    right: 16px !important;
    top: 13px !important;                  /* वर्टिकल अलाइनमेंट बिल्कुल सेंटर में */
    z-index: 10 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: color 0.15s ease-in-out !important;
}

/* क्लियर हिस्ट्री बटन पर माउस ले जाने पर इफ़ेक्ट (Hover Effect) */
.ty-thanks-scope .clear-btn:hover {
    color: #FED7D7 !important;             /* हल्का गुलाबी/लाल शेड ताकि यूज़र को पता चले कि ये बटन है */
}


/* मोबाइल व्यू होल्डर */
.ty-thanks-scope .history-cards-view { display: none !important; flex-direction: column !important; gap: 8px !important; width: 100% !important; padding: 12px !important; }

/* ऐड्स निषेध लेयर */
.ty-thanks-scope .thanks-section-card ins, .ty-thanks-scope .thanks-section-card iframe,
.ty-thanks-scope .links-wrapper ins, .ty-thanks-scope .links-wrapper iframe {
    display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important;
}

@media (max-width: 600px) {
    .ty-thanks-scope .history-table { display: none !important; }
   .ty-thanks-scope .history-cards-view { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 8px !important;
        width: 100% !important;
        padding: 0 12px 12px 12px !important; /* पैडिंग को थोड़ा एडजस्ट किया */
        max-height: 280px !important; 
        overflow-y: auto !important; 
    }
    .ty-thanks-scope .student-progress-card { background: #F8FAFC !important; border: 1px solid #E2E8F0 !important; border-radius: 8px !important; padding: 10px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
    .ty-thanks-scope .card-top-row { display: flex !important; justify-content: space-between !important; font-size: 11px !important; color: #718096 !important; border-bottom: 1px solid #EDF2F7 !important; padding-bottom: 2px !important; }
    .ty-thanks-scope .card-data-row { display: flex !important; justify-content: space-between !important; align-items: center !important; }
    .ty-thanks-scope .badge-wpm { color: #3182CE !important; font-size: 13px !important; font-weight: 800; font-family: monospace !important; }
    .ty-thanks-scope .badge-wpm span { font-size: 9px !important; color: #718096 !important; }
    .ty-thanks-scope .badge-cpm { font-size: 12px !important; color: #4A5568 !important; font-family: monospace !important; }
    .ty-thanks-scope .badge-acc { background-color: #C6F6D5 !important; color: #22543D !important; font-weight: 700 !important; font-size: 11px !important; padding: 1px 5px !important; border-radius: 4px !important; font-family: monospace !important; }
     .ty-thanks-scope .clear-btn {
        position: relative !important;   /* फिक्स: एब्सोल्यूट हटाकर रिलेटिव किया ताकि टकराव ख़त्म हो */
        top: 0 !important;
        right: 0 !important;
        display: block !important;
        width: 100% !important;
        text-align: right !important;    /* मोबाइल पर दाईं तरफ साफ दिखेगा */
        padding: 10px 14px 4px 0 !important; /* नीली पट्टी के ठीक नीचे हल्की दूरी */
        color: #E53E3E !important;       /* फिक्स: सफ़ेद हटाकर साफ़ डेंजर रेड किया ताकि व्हाइट बैकग्राउंड पर चमके */
        background: #FFFFFF !important;
        float: none !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }
	 .ty-thanks-scope .links-wrapper { 
        flex-direction: column !important; 
        align-items: fill !important;
        gap: 12px !important;
    }
    .ty-thanks-scope .btn-link {
        white-space: normal !important; /* मोबाइल पर जगह कम होने से टूटने की अनुमति है */
        padding: 12px 10px !important;
    }
	 .ty-thanks-scope .clear-btn {
        top: 13px !important;
    }
}


/* ==========================================================================
   Typing Lessons Index - Standard Clean System Font Grid (No Imports)
   ========================================================================== */

.ty-index-scope {
    width: 100% !important;
    max-width: 960px !important;
    background: #FFFFFF !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #E2E8F0 !important;
    box-sizing: border-box !important;
    margin: 30px auto !important;
    /* फ़िक्स: कोई बाहरी इम्पोर्ट नहीं, केवल कंप्यूटर का अपना साफ़ डिफ़ॉल्ट फॉन्ट */
    font-family: Arial, Helvetica, sans-serif !important;
}

.ty-index-scope * {
    box-sizing: border-box !important;
}

/* हेडर रोज़ पट्टी */
.ty-index-scope .section-header {
    background-color: #3182CE !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-size: 16px !important;
    padding: 12px !important;
    text-align: center !important;
    border-radius: 8px 8px 0 0 !important;
    margin-top: 15px !important;
}
.ty-index-scope .section-header:first-of-type {
    margin-top: 0 !important;
}

/* ==========================================================================
   Index Page Grid - FIXED 3 Columns Vertical Flow With Perfect Uniform Borders
   ========================================================================== */

.ty-index-scope .lessons-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* कड़क 3 कॉलम लॉक */
    grid-auto-flow: column !important;
    grid-template-rows: repeat(12, auto) !important; /* आपकी मूल 12 रोज़ */
    
    /* फिक्स: चारों तरफ की बाहरी बाउंड्री की एकदम साफ़ एक जैसी बॉर्डर लाइन */
    border: 1px solid #E2E8F0 !important;
    border-radius: 0 0 8px 8px !important;
    overflow: hidden !important;
    background-color: #FFFFFF !important;
}

.ty-index-scope .section-header + .lessons-grid {
    grid-template-rows: auto !important;
    grid-auto-flow: row !important;
}

/* प्रत्येक लिंक ग्रिड आइटम का डिज़ाईन - आपके ओरिजिनल कोड के अनुसार */
.ty-index-scope .grid-item {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    
    /* फिक्स: अंदरूनी विभाजन की सभी वर्टिकल और हॉरिजॉन्टल लाइनों को 100% एक समान किया */
    border-bottom: 1px solid #eaeff4 !important;
    border-right: 1px solid #eaeff4 !important;
    background-color: #FFFFFF !important;
    min-height: 46px !important;
}

/* फिक्स: तीसरे (आख़िरी) कॉलम के दाईं तरफ का फालतू बॉर्डर साफ़ किया ताकि बाहरी बाउंड्री न कटे */
.ty-index-scope .lessons-grid > :nth-child(3n) {
    border-right: none !important;
}

.ty-index-scope .grid-item:hover {
    background-color: #F8FAFC !important;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVE OVERRIDE
   ========================================================================== */
@media (max-width: 900px) {
    .ty-index-scope .lessons-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-flow: row !important;
        grid-template-rows: auto !important;
        border-right: 1px solid #E2E8F0 !important;
    }
    .ty-index-scope .grid-item {
        border-right: 1px solid #eaeff4 !important;
    }
}

@media (max-width: 600px) {
    .ty-index-scope .lessons-grid {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        grid-template-rows: auto !important;
    }
    .ty-index-scope .grid-item {
        border-right: none !important;
        
    }
}


.ty-index-scope .lessons-grid .grid-item:nth-child(3n) {
    border-right: none !important;
}

/* नंबर वाले बक्से */
.ty-index-scope .grid-item .idx-num {
    width: 45px !important;
    min-width: 45px !important;
    height: 100% !important;
    padding: 12px 0 !important;
    font-weight: 700 !important;
    color: #718096 !important;
    text-align: center !important;
    background-color: #F8FAFC !important;
    border-right: 1px solid #eaeff4 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* इंडेक्स लिंक्स स्टाइल */
.ty-index-scope .grid-item a {
    color: #2B6CB0 !important;
    text-decoration: none !important;
    padding-left: 12px !important;
    transition: color 0.15s ease !important;
}
.ty-index-scope .grid-item a:hover {
    color: #3182CE !important;
    text-decoration: underline !important;
}

/* फुटर टिप बॉक्स पट्टी */
.ty-index-scope .footer-tip-box {
    background-color: #EDF2F7 !important;
    padding: 15px !important;
    text-align: center !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
}
.ty-index-scope .footer-tip-box a {
    color: #2C5282 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* ==========================================================================
   Index Grid Fix - 3 Column Zebra Striping & Mobile Sync (Final Layer)
   ========================================================================== */

/* सुपर फ़िक्स: 3 कॉलम के वर्टिकल फ्लो के हिसाब से जेब्रा स्ट्रिपिंग को ट्यून किया 
   ताकि नंबर वाले बक्से का अलाइनमेंट और रंग किसी भी डिब्बे में अलग न भागे */
.ty-index-scope .grid-item:nth-child(even) {
    background-color: #FAFBFC !important; /* हल्का साफ़ न्यूट्रल शेड */
}

/* फ़िक्स: नंबर बक्से के बैकग्राउंड को पूरी ग्रिड में एक समान स्थिर किया ताकि वह कभी गायब न दिखे */
.ty-index-scope .grid-item .idx-num {
    background-color: #F1F5F9 !important; /* थोड़ा गहरा ग्रे ताकि सफ़ेद और ग्रे दोनों डिब्बों में एकदम साफ़ उभरे */
}

/* ==========================================================================
   मोबाइल व्यू - आपका ओरिजिनल रिस्पॉन्सिव कोड 3 कॉलम के लिए पूरी तरह सिंक
   ========================================================================== */
@media (max-width: 768px) {
    .ty-index-scope {
        padding: 12px !important;
    }
    .ty-index-scope .lessons-grid {
        grid-template-columns: 1fr !important;
        grid-auto-flow: row !important;
        grid-template-rows: auto !important;
    }
    .ty-index-scope .grid-item {
        border-right: none !important;
        /* मोबाइल पर सिंगल कॉलम में पैडिंग को प्रोग्रेस कंचे के हिसाब से सेट रखा */
        padding-right: 46px !important; 
    }
    /* मोबाइल पर नंबर बक्से को अपनी डिफ़ॉल्ट चौड़ाई में लॉक रखा */
    .ty-index-scope .grid-item .idx-num {
        height: auto !important;
    }
}


/* ==========================================================================
   Anti-Auto-Ads Protection Layer (Strict Ad Exclusion inside Tutor)
   ========================================================================== */

/* इन दोनों मुख्य कंटेनर्स के अंदर गूगल एडसेंस को कोई भी नया एलिमेंट बनाने से रोकना */
.ty-tutor-container,
.ty-index-scope {
    position: relative !important;
}

/* अगर गूगल ऑटो-ऐड्स जबरदस्ती इसके अंदर कोई विज्ञापन (ins या iframe) घुसा भी दे, तो उसे पूरी तरह छुपा दें */
.ty-tutor-container ins,
.ty-tutor-container iframe,
.ty-tutor-container .google-auto-placed,
.ty-index-scope ins,
.ty-index-scope iframe,
.ty-index-scope .google-auto-placed {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

/* कीबोर्ड, प्रॉम्प्ट बॉक्स और टेबल के बीच में किसी भी आक्रामक एड-स्पेस को बनने से रोकना */
.ty-tutor-container table,
.ty-tutor-container div,
.ty-index-scope div,
.ty-index-scope table {
    clear: none !important; /* एडसेंस के 'clear: both' वाले ब्रेक को रोकने के लिए */
}


/* ==========================================================================
   Dual Ad Protection - AdSense & Ezoic Smart Block Layer
   ========================================================================== */

/* यदि गूगल या इजोइक जबरदस्ती टेबल या बटनों के ठीक अंदर विज्ञापन इन्सर्ट करें, तो वह पूरी तरह छिप जाएगा */
.ty-thanks-scope .summary-table ins,
.ty-thanks-scope .summary-table iframe,
.ty-thanks-scope .summary-table [class*="ezoic"],
.ty-thanks-scope .summary-table [id*="ezoic"],
.ty-thanks-scope .links-wrapper ins,
.ty-thanks-scope .links-wrapper iframe,
.ty-thanks-scope .links-wrapper [class*="ezoic"],
.ty-thanks-scope .links-wrapper [id*="ezoic"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   Tutor Scoreboard - 7th Field Side-by-Side Circle Badge Layout
   ========================================================================== */

.ty-tutor-container table.score1 {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 4px !important;
    margin-bottom: 12px !important;
}

.ty-tutor-container table.score1 td.rounded-box,
.ty-tutor-container table.score1 td.circle {
    width: 14.28% !important;
}

/* सुपर फिक्स: बटन को ऊपर-नीचे से हटाकर साइड-बाय-साइड (Row) में सेट किया */
.ty-tutor-container .live-change-btn {
    display: flex !important;
    flex-direction: row !important;    /* फिक्स: तत्व अब एक सीध में अगल-बगल रहेंगे */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;               /* सर्कल और टेक्स्ट के बीच का परफेक्ट गैप */
    width: 100% !important;
    height: 100% !important;
    min-height: 38px !important;     
    background-color: #4A5568 !important; /* आपका पसंद किया हुआ प्रीमियम चारकोल ग्रे */
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: Arial, Helvetica, sans-serif !important;
    border: none !important;          
    box-shadow: none !important;       
    border-radius: 10px !important;
    padding: 0 4px !important;
    transition: background-color 0.1s ease-in-out !important;
}

.ty-tutor-container .num-circle-badge {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* फिक्स: सर्कल का आकार थोड़ा बड़ा और आकर्षक किया */
    width: 22px !important;            
    height: 22px !important;
    border-radius: 50% !important;     /* परफेक्ट राउंड शेप */
    
    /* फिक्स: नया हाई-कॉन्ट्रास्ट कलर थीम जो बटन के अंदर सबसे अलग चमकेगा */
    background-color: #63B3ED !important; /* चमकदार और फ्रेश स्काई ब्लू बैकग्राउंड */
    color: #1A202C !important;            /* अंदर का नंबर एकदम गाढ़ा डार्क ताकि दूर से साफ़ पढ़े */
    
    font-size: 12px !important;           /* नंबर का आकार भी थोड़ा बड़ा किया */
    font-weight: 800 !important;          /* एक्स्ट्रा बोल्ड नंबर्स */
    line-height: 1 !important;
    flex-shrink: 0 !important;            /* मोबाइल पर पिचकने से रोकने के लिए */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important; /* हल्का सा उभार देने के लिए परछाई */
    transition: all 0.1s ease-in-out !important;
}

.ty-tutor-container .change-text-label {
    font-size: 11px !important;        
    font-weight: 700 !important;
    color: #FFFFFF !important;         
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* माउस ले जाने पर होवर इफ़ेक्ट (Hover State Optimization) */
.ty-tutor-container .live-change-btn:hover {
    background-color: #2D3748 !important; /* बटन थोड़ा और गहरा डार्क होगा */
}

.ty-tutor-container .live-change-btn:hover .num-circle-badge {
    background-color: #90CDF4 !important; /* होवर करने पर सर्कल और चमकदार लाइट ब्लू हो जाएगा */
    transform: scale(1.05) !important;    /* हल्का सा पॉप-अप एनीमेशन */
}

/* ==========================================================================
   MOBILE RESPONSIVE GRID (OTG मोबाइल छात्रों के लिए सुरक्षा परत)
   ========================================================================== */
@media (max-width: 600px) {
    .ty-tutor-container table.score1 tr {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .ty-tutor-container table.score1 tr td {
        flex: 1 1 30% !important;
        width: auto !important;
    }
    .ty-tutor-container table.score1 tr td:last-child {
        flex: 1 1 100% !important;
        margin-top: 4px !important;
        border-radius: 4px !important;
        overflow: hidden !important;
    }
}
/* ==========================================================================
   Index Page - Pure Large Green Circle Counter Theme (No Inline CSS)
   ========================================================================== */

/* ग्रिड आइटम की सेटिंग्स ताकि बैज वर्टिकली सेंटर में लॉक रहे */
.ty-index-scope .lessons-grid .grid-item {
    position: relative !important;
    padding-right: 50px !important; /* बड़े सर्कल के लिए दाईं तरफ स्पेस बढ़ाया */
}

/* सुपर फिक्स: बैज को पूरी तरह से बड़ा और 100% परफेक्ट गोल सर्कल फ्रेम में बदला */
.ty-index-scope .practice-count-badge {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important; /* बिल्कुल वर्टिकल सेंटर में लॉक */
    
    /* फिक्स: सर्कल का आकार थोड़ा बड़ा किया ताकि साफ दिखे */
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important; /* जादू: यह बैज को हमेशा 100% एकदम गोल कंचे जैसा रखेगा */
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    font-size: 12px !important;    /* नंबर का फॉन्ट आकार भी थोड़ा बड़ा किया */
    font-weight: 800 !important;   /* एक्स्ट्रा बोल्ड नंबर्स */
    line-height: 1 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12) !important; /* सुंदर सा उभार देने के लिए परछाई */
    pointer-events: none;
    transition: all 0.1s ease-in-out !important;
}