@font-face {
 font-family: Font1;
 src: url("fonts/Kruti-Dev-010.eot")
}
@font-face
{
font-family: Font1;
src: url('fonts/Kruti-Dev-010.ttf ');
}

#fontface1{font-family : Font1; padding : 10px; margin : 0 auto; text-align : center; font-size : 30px;}

.ty-tutor-container .hindi
{
	font-size: 2.0vw;
	font-family:"Font1";
	font-weight:bold
}

/* मास्टर कंटेनर स्कोप - पैडिंग और हाइट को एकदम स्लिम किया */
.ty-tutor-container {
    color: #2D3748 !important;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
    width: 100% !important;
    max-width: 900px !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 .todo {
    color: #FFFFFF !important;
    background-color: #EBA0D4 !important;
    border-radius: 2px !important;
    padding: 1px 2px !important;       /* पैडिंग को हल्का सा बढ़ाकर 3px किया */
    
    /* सुपर फ़िक्स: मात्रा छोटी होने पर भी हाइलाइटर को सिकुड़ने से रोकेगा */
    min-width: 18px !important;        /* न्यूनतम चौड़ाई फिक्स की */
    text-align: center !important;     /* अक्षर हमेशा इस गुलाबी बक्से के बीच में रहे */
    vertical-align: middle !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: 32px !important; /* फॉन्ट थोड़ा कॉम्पैक्ट किया */
    font-family: "Font1" !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: 4px !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: 2px 2px 3px 2px !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-weight: 500 !important;
    /* सुपर फिक्स: कीबोर्ड के अक्षरों का आकार बड़ा किया ताकि साफ दिखे */
    font-size: 16px !important; 
    color: #2D3748 !important;
    min-width: 32px !important;
	line-height: 1.0 !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:has(span.target),
.ty-tutor-container td.count2:has(span.target),
.ty-tutor-container td.count3:has(span.target) {
    background-color: #e0f5e6 !important; /* आँखों को सुकून देने वाला लाइट मिंट ग्रीन */
    border: 1px solid #9AE6B4 !important;  /* बॉर्डर को भी हल्का और सॉफ्ट ग्रीन किया */
}

/* २. अक्षर विज़िबिलिटी: हल्के बैकग्राउंड पर अक्षरों को डार्क ग्रे रखना ताकि वे साफ़ पढ़ने में आएं */
.ty-tutor-container .score2 td:has(span.target) span,
.ty-tutor-container td.count2:has(span.target) span,
.ty-tutor-container td.count3:has(span.target) span {
    color: #2D3748 !important;            /* कड़क डार्क चारकोल ग्रे रंग अक्षरों के लिए */
    font-weight: 700 !important;          /* अक्षर को बोल्ड और स्पष्ट रखना */
    background: transparent !important;
    text-shadow: none !important;
}

/* ३. स्पेशल फिक्स: टारगेट स्पैन का फोंट साइज १८ पिक्सल पर लॉक रखना */
.ty-tutor-container .score2 td span.target {
    font-size: 16px !important;           /* केवल टारगेट अक्षर का साइज बड़ा रहेगा */
    color: #22543D !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;
} */

/* ==========================================================================
   Thanks Page SVG Heatmap Text Font Configuration Layout - Hindi Update
   ========================================================================== */
.ty-thanks-scope svg .hm-text {
    /* Fix: Bumped size from 9px to 13px so complex Hindi matras are clearly visible */
    font-size: 13px !important; 
    
    /* Fix: Replaced monospace with your custom server-side Krutidev font name */
    font-family: Font1 !important;
    
    font-weight: 700 !important;
    fill: #2D3748;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}

/* ==========================================================================
   Thanks Page Heatmap - Bypass Krutidev for SHIFT and SPACE Buttons Only
   ========================================================================== */

/* सुपर फ़िक्स: यह नियम ढूँढकर स्पेशल बटनों के टेक्स्ट को कृतिदेव से आज़ाद कर देगा */
.ty-thanks-scope svg .hm-key-special + text,
.ty-thanks-scope svg text:has(+:contains("SHIFT")),
.ty-thanks-scope svg text:has(+:contains("SPACE")) {
    /* फिक्स: वापस पुराना इंग्लिश फॉन्ट लॉक किया ताकि SHIFT और SPACE साफ अक्षरों में दिखे */
    font-family: monospace, system-ui, sans-serif !important;
    font-size: 5px !important; /* पुराना छोटा सुडौल इंग्लिश साइज */
    font-weight: 300 !important;
}

/* वैकल्पिक सुरक्षा परत: सीधे एसवीजी के आख़िरी तीन बड़े बटनों के टेक्स्ट को इंग्लिश में लॉक करना */
.ty-thanks-scope svg text[x*="SHIFT"], 
.ty-thanks-scope svg text:last-of-type,
.ty-thanks-scope svg .hm-text:nth-last-child(-n+4) {
    /* अगर ब्राउज़र ऊपर वाला नियम मिस करे, तो यह बैकअप नियम इंग्लिश फॉन्ट सुनिश्चित करेगा */
    font-family: monospace, Arial, sans-serif !important;
}



.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;
}
/* ==========================================================================
   वर्चुअल कीबोर्ड एरिया बाउंड्री लॉक - सिर्फ बटनों पर ब्लर इफ़ेक्ट
   ========================================================================== */
.ty-tutor-container .score2, 
table.score2 {
    position: relative !important; /* कीबोर्ड टेबल को मुख्य आधार बनाना */
}

/* ओवरले सिर्फ टेबल की चौड़ाई और ऊँचाई के अंदर ही सीमित रहेगा */
.keyboard-alt-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(247, 250, 252, 0.82) !important; /* सॉफ्ट पारदर्शी लुक */
    backdrop-filter: blur(5px) !important;                   /* बटनों को धुंधला करने के लिए */
    -webkit-backdrop-filter: blur(5px) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;        /* बटनों के बिल्कुल वर्टिकल सेंटर में */
    justify-content: center !important;       /* हॉरिजॉन्टल सेंटर में */
    border-radius: 4px !important;
}

/* कीबोर्ड के केंद्र में तैरने वाला सुंदर प्रोफ़ेशनल व्हाइट कार्ड */
.keyboard-alt-overlay .alt-popup-card {
    background: #FFFFFF !important;
    padding: 15px 30px !important;
    border-radius: 6px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
    max-width: 90% !important;
}

.keyboard-alt-overlay .alt-popup-instruction {
    margin: 0 0 8px 0 !important;
    font-size: 13px !important;
    color: #718096 !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

.keyboard-alt-overlay .alt-popup-combination {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2D3748 !important;
}

.keyboard-alt-overlay .popup-alt-badge {
    background: #EDF2F7 !important;
    border: 1px solid #CBD5E0 !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1) !important;
}

.keyboard-alt-overlay .popup-code-badge {
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    background-color: #EBA0D4 !important; /* आपका सिग्नेचर पिंक शेड */
    padding: 1px 10px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    letter-spacing: 1px !important;
}

/* ==========================================================================
   मास्टर एक्स्ट्रा डिब बाईपास - डबल बॉर्डर को मलाई की तरह साफ करने का फिक्स
   ========================================================================== */
#tutorIndexSection, 
#tutorEngineSection {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   अल्टीमेट बॉर्डर किलर - इंडेक्स ग्रिड की भीतरी डबल बॉर्डर को साफ़ करने का फिक्स
   ========================================================================== */
#tutorIndexSection .ty-index-scope {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin-top: 15px !important;
}

/* सबसे ऊपर वाले पहले हेडर के मार्जिन को सेट करना ताकि स्पेसिंग कड़क दिखे */
#tutorIndexSection .ty-index-scope:first-child {
    margin-top: 5px !important;
}

/* ==========================================================================
   लोकल परिणाम बॉक्स लोडर - सिर्फ मुख्य डिब्बे के अंदर सीमित फिक्स
   ========================================================================== */

/* १. आपके मुख्य परिणाम बक्से को पोजीशन रिलेटिव देना ताकि लोडर इससे बाहर न भागे */
.ty-thanks-scope {
    position: relative !important;
    min-height: 250px !important; /* लोडर चलने के दौरान बक्से की न्यूनतम ऊंचाई */
}

/* २. लोडर को पूरे ब्राउज़र के बजाय सिर्फ इसी बक्से के आकार में लॉक करना */
.tutor-loader-local {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #FFFFFF !important; /* परिणाम बक्से का सफ़ेद बैकग्राउंड */
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
	padding-top: 80px;
    border-radius: 16px !important; /* आपके मुख्य बक्से जैसी राउंडेड रेडियस */
}

.tutor-spinner {
    width: 45px !important;
    height: 45px !important;
    border: 4px solid #E2E8F0 !important;
    border-top: 4px solid #319795 !important; /* प्रीमियम डार्क-चैती रंग */
    border-radius: 50% !important;
    animation: spinK 1s linear infinite !important;
}

.tutor-loader-text {
    margin-top: 15px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #2D3748 !important;
    letter-spacing: 0.5px !important;
    user-select: none !important;
}

@keyframes spinK {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   ISOLATED LINKS WRAPPER BUTTONS - आपका पुराना कड़क हरा (Green) थीम बहाल!
   ========================================================================== */
.links-wrapper {
    display: flex !important;
    gap: 15px !important;
    justify-content: center !important;
    margin-top: 25px !important;
    padding: 10px !important;
}

/* आधार बटन नियम - जूमला का अंडरलाइन कचरा हमेशा के लिए साफ़ */
.links-wrapper a.ty-tutor-btn {
    display: inline-block !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important; /* अंडरलाइन को ज़बरदस्ती रोकेगा */
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   जादू: आपके ट्यूटर का पुराना असली चमकीला हरा (Green) कलर थीम लॉक!
   ========================================================================== */
.links-wrapper a.ty-tutor-btn-secondary {
    background-color: #1EAE4D !important; /* आपका पुराना ओरिजिनल वर्किंग हरा रंग */
    color: #FFFFFF !important;
    border: 1px solid #157F37 !important;
}

/* होवर करने पर कड़क डार्क ग्रीन इफ़ेक्ट */
.links-wrapper a.ty-tutor-btn-secondary:hover {
    background-color: #157F37 !important; /* थोड़ा गहरा आकर्षक हरा रंग */
    color: #FFFFFF !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}