body{background-color:#f0f4f8;font-family:'Inter',sans-serif;color:#2d3748;min-height:100vh}
.navbar-custom{background-color:#ffffff;border-bottom:1px solid #e2e8f0}
.progress-wrapper{background:#f7fafc;padding:6px 14px;border-radius:12px;border:1px solid #e2e8f0}
.progress-track{width:180px;height:8px;background:#e2e8f0;border-radius:4px}
.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#38b2ac);border-radius:4px;transition:width .4s ease}
.progress-marker{position:absolute;top:-11px;font-size:1.1rem;transform:translateX(-50%);cursor:help;transition:transform .2s}
.progress-marker:hover{transform:translateX(-50%) scale(1.2);z-index:2}
.group-selector{width:auto;background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;font-weight:600;color:#4a5568;cursor:pointer}
.main-container{background-color:transparent;margin-top:20px}
.domain-card{background:#ffffff;border-radius:16px;border:1px solid #edf2f7;box-shadow:0 4px 6px -1px rgba(0,0,0,.05);padding:24px;height:100%;transition:transform .2s ease,box-shadow .2s ease}
.domain-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}
.domain-icon{font-size:2.5rem;margin-bottom:16px;display:inline-block;padding:12px;border-radius:12px}
.theme-math .domain-icon{background-color:#ebf4ff;color:#4c51bf}
.theme-lang .domain-icon{background-color:#e6fffa;color:#285e61}
.theme-study .domain-icon{background-color:#fffaf0;color:#c05621}
.domain-title{font-weight:700;color:#1a202c;margin-bottom:8px;font-size:1.25rem}
.domain-desc{font-size:.9rem;color:#718096;margin-bottom:20px;min-height:40px}
.level-badge,.score-badge{font-size:.85rem;font-weight:700;padding:6px 12px;border-radius:20px}
.level-math{background-color:#ebf4ff;color:#4c51bf;border:1px solid #c3dafe}
.level-lang{background-color:#e6fffa;color:#285e61;border:1px solid #b2f5ea}
.level-study{background-color:#fffaf0;color:#c05621;border:1px solid #feebc8}
.score-badge{background-color:#f7fafc;color:#718096;border:1px solid #e2e8f0}
.subject-item{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:10px 14px;margin-bottom:8px;transition:all .15s ease;display:flex;flex-direction:column}
.subject-item:hover{background-color:#edf2f7}
.btn-action{border:none;border-radius:6px;padding:6px 10px;font-size:1.1rem;transition:transform .1s}
.btn-action:hover{transform:scale(1.1)}
.btn-theory{background-color:#feebc8;color:#dd6b20}
.btn-theory:hover{background-color:#fbd38d}
.btn-practice{background-color:#c6f6d5;color:#2f855a}
.btn-practice:hover{background-color:#9ae6b4}
.btn-test{background-color:#ebf4ff;color:#4c51bf}
.btn-test:hover{background-color:#c3dafe}
.subject-progress-track{height:6px;background-color:#e2e8f0;border-radius:4px;overflow:hidden}
.subject-progress-fill{height:100%;border-radius:4px;transition:width .5s ease-in-out}
.subject-progress-text{font-size:.75rem;font-weight:700;color:#a0aec0;min-width:30px;text-align:right}
.theme-math .subject-progress-fill{background-color:#4c51bf}
.theme-lang .subject-progress-fill{background-color:#285e61}
.theme-study .subject-progress-fill{background-color:#c05621}




body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.navbar-custom { background-color: #ffffff; border-bottom: 2px solid #e2e8f0; }
.progress-track { height: 8px; background: #e2e8f0; border-radius: 4px; width: 150px; display: inline-block; }
.progress-fill { height: 100%; background: #0d6efd; border-radius: 4px; }
.progress-marker { position: absolute; top: -8px; font-size: 18px; transform: translateX(-50%); }
.transition { transition: all 0.3s ease; }
.transition:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important; }

.tip-box { background: #fff3cd; border-left: 5px solid #ffc107; padding: 15px; border-radius: 4px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.interactive-reveal { background: #e9ecef; padding: 15px; border-radius: 8px; cursor: pointer; text-align: center; transition: background-color 0.3s ease; border: 2px dashed #adb5bd; }
.interactive-reveal:hover { background: #dee2e6; }
.reveal-content { display: none; margin-top: 15px; padding-top: 15px; border-top: 1px solid #ced4da; font-weight: bold; color: #198754; font-size: 1.2rem; }
.grid-visual { display: grid; gap: 2px; margin: 15px 0; }
.grid-cell { background: #e9ecef; border: 1px solid #ced4da; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 4px; }
.grid-cell.active { background: #0d6efd; color: white; border-color: #0a58ca; }
.grid-cell.active-alt { background: #198754; color: white; border-color: #146c43; }
.ratio-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; border: 1px solid #dee2e6; }
.ratio-table th, .ratio-table td { padding: 12px; text-align: center; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
.ratio-table th { background: #f8f9fa; font-weight: bold; }
.ratio-table .arrow-row td { border-bottom: none; color: #0d6efd; font-size: 0.9rem; padding: 5px; }