/* English Typing Speed Test - Optimized CSS */
.etst-container{font-family:Arial,sans-serif;max-width:1000px;margin:20px auto;padding:20px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.1);border-radius:5px;box-sizing:border-box;width:100%}
.etst-title{text-align:center;margin-bottom:20px;padding:15px;border-bottom:2px solid #FFD700;background:linear-gradient(to right,#228B22,#FFD700);color:#fff;border-radius:5px;box-sizing:border-box}
.etst-card{background:#fff;border-radius:5px;padding:20px;margin-bottom:20px;border:1px solid #e0e0e0;box-sizing:border-box}
.etst-text-select-wrapper{display:flex;align-items:center;gap:10px;margin-bottom:20px;width:100%}
.etst-select-label-btn{background:#c62828;color:#fff;padding:0 20px;border:none;border-radius:40px;font-weight:700;width:160px;height:50px;line-height:50px;font-size:16px;border:2px solid #8B0000;cursor:default;text-align:center;white-space:nowrap;flex-shrink:0;box-sizing:border-box}
.etst-text-dropdown{background:#1E3D58;color:#fff;border:2px solid #FFD700;font-weight:700;height:50px;padding:0 25px;border-radius:40px;width:100%;flex:1;font-size:18px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 20px center;background-size:20px}
.etst-text-dropdown option{background:#1E3D58;color:#fff;padding:15px 20px;font-size:18px;line-height:2.2;min-height:50px}
.etst-btn-preview-text{background:#FF8C00;color:#fff;white-space:nowrap;height:50px;border:none;border-radius:40px;padding:0 25px;font-weight:700;cursor:pointer;border:2px solid #CD853F;font-size:16px;flex-shrink:0;width:160px;box-sizing:border-box}
.etst-controls-row{display:flex;align-items:center;gap:20px;margin:15px 0 20px;width:100%}
.etst-highlight-toggle-container{flex:1;display:flex;justify-content:flex-start}
.etst-highlight-toggle{display:flex;align-items:center;gap:20px;background:#1E3D58;padding:0 25px;border-radius:40px;color:#fff;font-weight:700;height:50px;border:2px solid #FFD700;width:100%;max-width:350px;box-sizing:border-box}
.etst-highlight-label{color:#fff;font-weight:700;font-size:16px;white-space:nowrap}
.etst-toggle-switch{position:relative;display:inline-block;width:70px;height:30px;flex-shrink:0}
.etst-toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.etst-toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#e74c3c;transition:.4s;border-radius:34px;display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.etst-toggle-slider:before{position:absolute;content:"";height:22px;width:22px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}
.etst-toggle-state{font-size:12px;font-weight:700;color:#fff;z-index:1}
.etst-toggle-state.etst-on{margin-left:8px}
.etst-toggle-state.etst-off{margin-right:8px}
.etst-toggle-slider.etst-on{background-color:#2ecc71}
.etst-toggle-slider.etst-on:before{transform:translateX(40px)}
.etst-time-selector-container{flex:1;display:flex;justify-content:flex-end}
.etst-time-selector{display:flex;align-items:center;gap:15px;background:#8e44ad;padding:0 25px;border-radius:40px;color:#fff;font-weight:700;height:50px;border:2px solid #FFD700;width:100%;max-width:350px;box-sizing:border-box}
.etst-time-dropdown{background:#fff;color:#333;border:none;padding:0 20px;border-radius:30px;font-weight:700;cursor:pointer;width:180px;height:36px;font-size:16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.etst-submit-container{display:flex;justify-content:center;margin-top:40px}
.etst-btn-submit{background:#2196F3;color:#fff;font-size:18px;padding:0 40px;height:50px;border:none;border-radius:40px;cursor:pointer;font-weight:700;border:2px solid #1976D2;min-width:200px}
.etst-test-header{margin-bottom:20px;padding:15px;background:linear-gradient(145deg,#fff,#f5f7fa);border-radius:16px;border:1px solid #e9ecef;width:100%;box-sizing:border-box}
.etst-stats-container{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;width:100%}
.etst-stat-box{flex:1;min-width:150px;padding:10px;border-radius:14px;text-align:center;box-sizing:border-box}
.etst-ref-stat{background:linear-gradient(145deg,#1B4D3E,#2E7D32);border:2px solid #FFD700}
.etst-ref-stat .etst-stat-label{color:#FFD700;font-size:14px;font-weight:700;margin-bottom:8px}
.etst-ref-stat-inner-container{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.etst-ref-mini-stat-box{background:rgba(255,255,255,.1);padding:5px;border-radius:8px;min-width:60px}
.etst-ref-mini-label{color:#FFD700;font-size:11px;margin-bottom:3px}
.etst-ref-mini-value{color:#fff;font-size:20px;font-weight:700;background:linear-gradient(145deg,#2A5F3A,#1E4E2E);padding:3px 8px;border-radius:8px;border:2px solid #FFD700}
.etst-timer-stat{background:linear-gradient(145deg,#8B0000,#B22222);border:2px solid #FFD700}
.etst-timer-stat .etst-stat-label{color:#FFD700;font-size:14px;font-weight:700;margin-bottom:8px}
.etst-timer-stat .etst-stat-value{background:rgba(255,255,255,.95);color:#8B0000;border:3px solid #FFD700;font-size:26px;font-weight:700;padding:8px;border-radius:10px;display:inline-block;min-width:100px}
.etst-user-stat{background:linear-gradient(145deg,#FF8C00,#FFA500);border:2px solid #1E3D58}
.etst-user-stat .etst-stat-label{color:#1E3D58;font-size:14px;font-weight:700;margin-bottom:8px}
.etst-user-stat-inner-container{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.etst-user-mini-stat-box{background:rgba(255,255,255,.2);padding:5px;border-radius:8px;min-width:60px}
.etst-user-mini-label{color:#1E3D58;font-size:11px;margin-bottom:3px}
.etst-user-mini-value{color:#1E3D58;font-size:20px;font-weight:700;background:#FFE5D9;padding:3px 8px;border-radius:8px;border:2px solid #1E3D58}
.etst-text-container{height:350px;overflow-y:auto;border:1px solid #ddd;border-radius:5px;background:#f9f9f9;margin-bottom:15px}
.etst-reference-text{padding:20px;line-height:2.2;font-size:22px;background:#fff;word-wrap:break-word}
.etst-word{display:inline;padding:2px 4px;border-radius:3px}
.etst-word-correct{background-color:#E8F5E9!important;color:#2E7D32!important}
.etst-word-incorrect{background-color:#FFEBEE!important;color:#c62828!important}
.etst-current-word{background-color:#FFF9C4!important;box-shadow:0 0 0 2px #FFD700!important}
.etst-countdown-message{font-size:24px;text-align:center;color:#2E7D32;padding:20px;background:#E8F5E9;margin:20px 0;border-radius:5px}
.etst-countdown{font-size:48px;font-weight:700;text-align:center;color:#c62828;padding:20px;background:#FFF9C4;margin:20px 0;border-radius:5px}
.etst-main-content{margin-top:20px}

/* ==== TYPING AREA - BLUE BORDER (CHANGED) ==== */
.etst-typing-area-container{border:2px solid #1E90FF;border-radius:5px;padding:15px;background:#E8F5E9}

.etst-typing-label{font-weight:700;color:#228B22;margin-bottom:10px;font-size:16px}
.etst-user-input{width:100%;min-height:80px;max-height:80px;padding:12px;border:1px solid #81C784;border-radius:5px;resize:none;font-size:20px;font-family:Arial,sans-serif;box-sizing:border-box}
.etst-typing-hint{text-align:center;color:#666;font-size:14px;margin-top:10px}
.etst-report{background:#f9f9f9;padding:20px;border-radius:5px;border:1px solid #e0e0e0}
.etst-report-title{text-align:center;color:#2E7D32;border-bottom:2px solid #2E7D32;padding-bottom:10px;margin-bottom:20px}
.etst-report-table{width:100%;border-collapse:collapse;margin:20px 0}
.etst-report-table th,.etst-report-table td{border:1px solid #ddd;padding:12px;text-align:left}
.etst-report-table th{background-color:#f2f2f2;font-weight:700}
.etst-highlight-number{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:#fff;padding:8px 16px;border-radius:8px;font-weight:700;font-size:20px;display:inline-block}
.etst-highlight-yellow{background:linear-gradient(135deg,#FFD700 0,#FFA500 100%);color:#000;padding:8px 16px;border-radius:8px;font-weight:700;font-size:18px;display:inline-block}
.etst-report-buttons{display:flex;gap:15px;justify-content:center;margin:20px 0;flex-wrap:wrap}
.etst-btn-retest{background:#FF9800;color:#fff;min-width:120px;padding:12px 25px;border:none;border-radius:40px;font-weight:700;cursor:pointer;border:2px solid #F57C00;height:50px}
.etst-btn-preview{background:#9C27B0;color:#fff;min-width:120px;padding:12px 25px;border:none;border-radius:40px;font-weight:700;cursor:pointer;border:2px solid #7B1FA2;height:50px}
.etst-fulltext-modal,.etst-preview-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);z-index:1000}
.etst-fulltext-content,.etst-preview-content{background:#fff;margin:50px auto;padding:30px;border-radius:10px;width:90%;max-width:800px;max-height:80vh;overflow-y:auto;position:relative}
.etst-fulltext-close,.etst-preview-close{position:absolute;top:15px;right:20px;font-size:30px;cursor:pointer;color:#666}
.etst-fulltext-stats{margin:15px 0;display:flex;gap:20px;background:#f0f0f0;padding:10px;border-radius:5px}
.etst-fulltext-stat{background:#3498db;color:#fff;padding:5px 15px;border-radius:20px}
.etst-fulltext-body{font-size:18px;line-height:1.8;padding:20px;background:#f9f9f9;border:1px solid #ddd;border-radius:5px;white-space:pre-wrap}
.etst-preview-section{margin-bottom:25px}
.etst-preview-section h3{margin-bottom:10px;color:#333}
.etst-preview-text{font-size:18px;line-height:1.8;padding:15px;background:#f5f5f5;border:1px solid #ddd;border-radius:5px;white-space:pre-wrap;max-height:200px;overflow-y:auto}

/* Responsive */
@media (max-width:768px){.etst-text-select-wrapper{flex-wrap:wrap;gap:10px}.etst-select-label-btn,.etst-text-dropdown,.etst-btn-preview-text{width:100%}.etst-controls-row{flex-direction:column;gap:15px}.etst-highlight-toggle-container,.etst-time-selector-container{width:100%;justify-content:center}.etst-highlight-toggle,.etst-time-selector{max-width:100%}.etst-stats-container{flex-direction:column}.etst-stat-box{width:100%;min-width:100%}}
@media (max-width:480px){.etst-container{padding:10px}.etst-card{padding:15px}.etst-select-label-btn,.etst-btn-preview-text{height:45px;line-height:45px;font-size:14px}.etst-text-dropdown{height:45px;font-size:16px}.etst-highlight-toggle,.etst-time-selector{padding:0 15px;height:45px}.etst-time-dropdown{width:130px;font-size:14px}.etst-btn-submit{height:45px;font-size:16px}.etst-reference-text{font-size:18px;padding:15px}.etst-user-input{font-size:18px}.etst-timer-stat .etst-stat-value{font-size:24px;min-width:100px}.etst-report-buttons{flex-direction:column}.etst-btn-retest,.etst-btn-preview{width:100%}}
@media (max-width:360px){.etst-time-selector{flex-direction:column;height:auto;padding:12px;gap:10px}.etst-time-dropdown{width:100%}.etst-highlight-toggle{flex-wrap:wrap;justify-content:center;height:auto;padding:12px;gap:10px}.etst-reference-text{font-size:16px;line-height:2}}