body,html{height:100%;margin:0;padding:0}body{display:flex;flex-direction:column;min-height:100vh}main{flex:1;display:flex;flex-direction:column}#footer-placeholder{margin-top:auto}
.container{background:#fff;border-radius:12px;width:calc(100% - 400px);box-shadow:0 4px 8px rgba(0,0,0,.3);box-sizing:border-box;padding:10px;margin:20px auto}h3{color:#1e90ff;margin-top:0;padding-top:10px}.section-doc{background:#f8f9ff;border:1px solid #d0d3ff;border-radius:6px;padding:1rem;margin:1rem 0;font-size:.96rem;line-height:1.55;color:#2b2b2b;text-align:justify;transition:all .25s ease;white-space:pre-line;position:relative;overflow:hidden}.section-doc::before{content:"đ";display:inline-block;margin-right:.4rem;font-size:.95rem;vertical-align:middle;color:#1f7cff}.section-doc::after{content:"";position:absolute;top:0;left:0;width:4px;height:0%;background:linear-gradient(to bottom,#1f7cff,#00d4ff);border-radius:6px 0 0 6px;transition:height .3s ease}.section-doc:hover::after{height:100%}.section-doc:hover{box-shadow:0 4px 10px rgba(0,0,0,.08);transform:translateY(-1px)}.image-container{margin:15px 0}.image-container img{max-width:300px;width:100%;height:auto;border:1px solid #ccc;border-radius:5px}#fixed-timer-container{position:sticky;top:12px;z-index:500;width:fit-content;margin-left:auto;margin-top:-52px;margin-bottom:16px;display:flex;align-items:center}#progress-bar-container{display:inline-flex;align-items:center;justify-content:center;position:relative;height:36px;min-width:200px;background:#2a2d35;border-radius:18px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.3)}#progress-bar{position:absolute;top:0;left:0;height:100%;width:0;border-radius:18px;background:hsl(120,85%,38%);z-index:1;transition:width 1s linear,background-color .4s ease}#timer-text{position:relative;z-index:2;color:#fff;font-family:'DM Mono','Fira Code',ui-monospace,monospace;font-size:14px;white-space:nowrap;padding:0 16px;display:flex;align-items:center;gap:8px}#timer-text .label{font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,'DM Sans',sans-serif}#timer-text .time{font-weight:700;font-size:18px}h2{margin:0;padding:20px;text-align:left;color:var(--accent-warm);font-size:1.8rem;text-transform:uppercase;letter-spacing:3px;text-shadow:1px 1px 5px rgba(255,140,0,.4)}.question{background:#f5f5f5;border:1px solid #c2c2c2;border-radius:8px;margin-bottom:15px;padding:12px 16px;text-align:justify}p{font-weight:700;margin:0;padding-bottom:10px;text-align:justify}.sentence{display:block;width:fit-content;margin:0 auto 10px auto;text-align:center;font-size:1em;background:#fafafa;padding:5px;border:1px solid #c2c2c2;border-radius:8px;white-space:pre-wrap;box-shadow:0 2px 5px rgba(0,0,0,.1);max-width:90%}.timing-container{position:relative}.timing-list{margin:.5em 0;padding-left:25px;list-style:none}.timing-list li{padding:2px 0;margin:2px 0;line-height:1;color:#000;font-weight:400}#timing-arrow{position:absolute;left:5px;top:0;transition:top .3s ease;color:#1f7cff;font-weight:700}.timing-list li.active{color:#1f7cff;font-weight:700}.btn-container{display:flex;justify-content:center}.btn,.btn-margin{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 28px;background:#1f7cff;border:2px solid #1f7cff;border-radius:50px;color:#fff;font-weight:600;font-size:.95rem;font-family:'Inter','Inter-fallback',system-ui,sans-serif;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);width:fit-content;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.12);box-sizing:border-box}.btn-margin{margin-bottom:20px}.btn-margin:hover,.btn:hover{background:transparent;color:#1f7cff;box-shadow:0 6px 20px rgba(0,0,0,.10);transform:translateY(-1px)}.btn-show-content{background-color:#007bff;color:#fff;border:none;padding:.6em 1.2em;font-size:1rem;border-radius:6px;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.1);transition:background-color .3s ease,box-shadow .3s ease;font-weight:600;user-select:none;display:inline-block;margin-bottom:20px;text-align:center}.btn-show-content:hover{background-color:#0056b3;box-shadow:0 6px 12px rgba(0,0,0,.15)}.btn-show-content:disabled{background-color:#aaa;cursor:not-allowed;box-shadow:none}#groupId{margin-top:20px}.media-pair-container{justify-content:center;display:flex}.media-pair{display:flex;flex-direction:column;align-items:flex-start;margin:15px 0;width:fit-content}.media-pair audio,.media-pair img{width:300px}.media-pair img{margin-bottom:0;border-radius:10px}.audio-wrapper{position:relative;max-width:100%}.audio-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:2;color:#fff}.overlay-content{text-align:center}.user_response{width:100%;box-sizing:border-box;font-family:inherit;font-size:1em;padding:12px;border:1px solid #c2c2c2;border-radius:6px;resize:vertical;margin-bottom:10px;background-color:#f9f9f9;transition:border-color 1s}.user_response:focus{outline:0;border-color:#000;box-shadow:0 2px 5px rgba(0,0,0,.1)}.word_count{font-size:.85em;color:#666;text-align:right;margin-top:-10px;margin-bottom:20px}.option-crochets{display:inline-block;min-width:18px;height:18px;line-height:18px;border-radius:50%;background-color:#1f7cff;color:#fff;font-weight:700;font-size:.75em;text-align:center;margin:0;vertical-align:middle}.dropzone{border:2px solid #ccc;border-radius:12px;padding:15px 20px;background-color:#fafafa;color:#000;margin-top:5px;margin-bottom:5px;box-sizing:border-box;overflow:visible;position:relative;pointer-events:auto;user-select:auto;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}.dropzone ul{min-height:180px;transition:height .2s ease;list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:5px}li.empty{min-height:40px;border:1px dashed #aaa;border-radius:20px;margin:0;display:flex;align-items:center;box-sizing:border-box;user-select:auto;pointer-events:auto;transition:none!important}li.fixed{font-size:.85em}li.empty .o-drag-drop{margin:0!important}.brief-summary{text-align:center;font-weight:700;font-size:1em;color:#000;margin:0;user-select:none}.correct{color:green;font-weight:700}.incorrect{color:#be0000;font-weight:700}.parts-wrapper{display:inline-block;background-color:#f4f4f4;padding:10px;margin-top:10px;margin-bottom:10px;border-radius:5px}.part-line{margin:5px 0}.gray-text{color:#777;font-style:italic}.btn-container{display:flex;flex-direction:column;align-items:center}.sample-answer{color:#1eb500;font-weight:700;padding:0;margin:0}.question{counter-reset:letter}.question label{position:relative;display:flex;align-items:center;cursor:pointer;padding-left:36px;transition:color .2s ease;counter-increment:letter}.question label::before{content:counter(letter,upper-alpha);position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:2px solid #1f7cff;background:#fff;color:#1f7cff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;transition:all .25s ease}.question label::after{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;border-radius:50%;transform:translate(-50%,-50%) scale(1);pointer-events:none;opacity:0}.question input[type=checkbox],.question input[type=radio]{position:absolute;opacity:0;pointer-events:none}.question label:has(input[type=checkbox]:checked)::before,.question label:has(input[type=radio]:checked)::before{background:#1f7cff;color:#fff;transform:translateY(-50%) scale(1.15)}.question label:has(input[type=checkbox]:checked),.question label:has(input[type=radio]:checked){font-weight:700;color:#1f7cff}.question.question-horizontal{display:flex;flex-direction:column}.question.question-horizontal label{display:inline-flex;margin-right:20px}.question.question-horizontal>label{display:inline-flex;width:auto;margin-right:30px}.question.question-horizontal label::before{position:relative;left:auto;margin-right:8px;transform:translateY(0)}.question.question-horizontal label:has(input[type=radio]:checked)::before{transform:scale(1.15)}.o-drag-drop{display:inline-flex;align-items:center;justify-content:flex-start;height:auto;margin:0 5px 5px 0;padding:10px 12px 10px 44px;font-size:.85em;background:#fff;color:#000;border:1px solid #ccc;border-radius:20px;cursor:grab;user-select:auto;pointer-events:auto;box-sizing:border-box;text-align:left;vertical-align:middle;box-shadow:0 2px 4px rgba(0,0,0,.1);position:relative;transition:all .2s ease;word-break:break-word}.o-drag-drop::before{content:attr(data-letter);position:absolute;left:12px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:2px solid #1f7cff;background:#fff;color:#1f7cff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .2s ease}.o-drag-drop.dropped::before{background:#1f7cff;color:#fff}.o-drag-drop.dropped{font-weight:700;color:#1f7cff}@media (min-width:768px){form:has(.question.question-horizontal){display:grid;grid-template-columns:repeat(2,1fr);gap:20px;align-items:start}form:has(.question.question-horizontal)>:not(.question){grid-column:1/-1}.question.question-horizontal{grid-column:span 1}}@media (max-width:767px){.question.question-horizontal{display:flex;flex-direction:column}}.question.question-horizontal .options-container{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap;width:100%}.user-answer{white-space:pre-wrap;color:#00f;font-weight:700;font-size:.95rem}.user-answers{list-style:none;padding-left:0;margin-top:0;margin-bottom:.5em;font-size:.95rem}.user-answers li{font-size:.95rem;margin-bottom:.15em}.answer{white-space:pre-wrap;color:#28a745;font-weight:700;font-size:.95rem}.answer-correct{color:#28a745;font-weight:700;font-size:.95rem}.answer-incorrect{color:#dc3545;font-weight:700;font-size:.95rem}.user-answer-section{margin:10px 0;font-size:16px}.answer-label{font-weight:600;color:#333}.expected-text strong,.user-answer-section strong{font-weight:700;margin-right:3px}.parts-wrapper{background:#f9f9f9;border-radius:6px;padding:12px 20px;margin-bottom:2em}.part-line{font-size:1rem;color:#444}.part-score{font-weight:700}.part-section{margin-bottom:2em}.instruction{padding:10px}.part-title{margin:0;font-weight:600;font-size:1.3rem;color:#06c}.question-text{font-weight:700;font-size:1rem;color:#444}.question-info{font-style:italic;font-size:.9rem;color:#666}.question-block{background:#f9f9f9;border-radius:6px;padding-top:15px;padding-right:20px;padding-bottom:10px;padding-left:20px;box-shadow:inset 0 0 6px rgba(0,0,0,.05);margin-bottom:10px}.expected-label,.special-mention{color:#17a2b8;font-weight:700;font-size:.95rem;margin-top:.3em;margin-bottom:0;padding-bottom:0}.expected-text{color:#17a2b8;font-weight:700;font-size:.95rem;margin-top:0;margin-right:3px;padding-bottom:0}.section-pricing p{margin:12px 0}.accord-container{background:#fff;border:1px solid #e2e8f8;border-radius:20px;margin:20px auto;max-width:900px;overflow:hidden;padding:14px 18px}details.accord-container{padding:0}details.accord-container>summary.accord-header{padding:14px 18px}details.accord-container>.accord-content{padding:0 18px}details.accord-container[open]>.accord-content{padding:0 18px 14px 18px}.accord-container:hover{}.accord-header{margin:0;padding:0;border-radius:0;cursor:pointer;user-select:none;display:flex;align-items:center;transition:color .4s;font-weight:700;font-size:1.5rem;color:#1e90ff;text-align:left;width:100%;box-sizing:border-box;list-style:none}.accord-header::-webkit-details-marker{display:none}.accord-header::marker{display:none;content:''}.accord-content{display:block;max-height:0;overflow:hidden;padding:0;font-size:1rem;color:#444;background-color:#fff;transition:max-height .4s ease,padding .4s ease}.accord-container[open]>.accord-content{max-height:5000px}.accord-container[open]>.accord-header .arrow{transform:rotate(90deg)}.accord-header .arrow{transition:transform .35s ease;font-weight:900;color:inherit;user-select:none;margin-right:10px}.accord-header .arrow{font-weight:900;color:inherit;transition:transform .6s ease;user-select:none;margin-right:10px}.results-header{padding-bottom:16px;font-weight:700;font-size:1.6rem;color:#2a7fda;margin-bottom:12px;position:relative;display:block}.results-header::after{display:none}.accord-container:hover .results-header::after{}.section-score-line{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:1.05rem;opacity:0;transform:translateY(10px);animation:fadeInUp .5s ease forwards}.section-score-line:nth-of-type(1){animation-delay:.15s}.section-score-line:nth-of-type(2){animation-delay:.25s}.section-score-line:nth-of-type(3){animation-delay:.35s}.section-score-line:nth-of-type(4){animation-delay:.45s}.section-name{font-weight:600;color:#4a5578;transition:color .22s cubic-bezier(.4,0,.2,1)}.section-score-line:hover .section-name{color:#1f7cff}.section-score-value{color:#1f7cff;font-weight:700;font-family:'DM Mono','Fira Code',ui-monospace,monospace;font-size:1.05rem}.score-card{background:#fff;border:2px solid var(--accent-warm);border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 4px 8px rgba(0,0,0,.2);text-align:center;font-size:1.2em;color:#222}.score-bar{height:8px;background:#f4f7ff;border-radius:14px;overflow:hidden;margin:6px 0 10px;font-weight:700;font-size:13px;position:relative;border:1px solid #e2e8f8}.score-fill{height:100%;line-height:8px;width:0;border-radius:14px;transition:width 1.2s ease-out;box-shadow:0 2px 8px rgba(0,0,0,.18)}.gray-text{color:#888;font-style:italic;font-size:.95rem;margin:8px 0;opacity:0;animation:fadeIn .5s ease .4s forwards}@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fillUp{from{transform:scaleX(0)}to{transform:scaleX(1)}}@media (max-width:900px){h2{font-size:1.5rem}.container{padding:10px;margin:20px 10px;width:calc(100% - 20px)}.section-doc{margin:5px;padding:5px}.accord-container{max-width:400px;margin:20px auto;border-radius:16px;box-sizing:border-box;padding:12px 14px}details.accord-container{padding:0}details.accord-container>summary.accord-header{padding:12px 14px}details.accord-container>.accord-content{padding:0 14px}details.accord-container[open]>.accord-content{padding:0 14px 12px 14px}.results-header .overall-score{font-size:17px;margin-bottom:10px}.results-header .score-value{font-size:28px}.results-header .cefr-level{font-size:18px;margin:16px 0}.results-header .disclaimer{font-size:13px;margin-top:20px}.results-header{font-size:1.4rem;padding-bottom:16px;margin-bottom:12px}.section-score-line{font-size:1rem;margin:12px 0}.gray-text{font-size:.95rem;margin:10px 0}.accord-header{font-size:1.4rem;padding:0}.accord-content{font-size:.95rem;padding:0}.accord-header .arrow{margin-right:6px}}@media (max-width:600px){.accord-container{max-width:100%;margin:20px auto;border-radius:12px;box-sizing:border-box;padding:10px 12px}details.accord-container{padding:0}details.accord-container>summary.accord-header{padding:10px 12px}details.accord-container>.accord-content{padding:0 12px}details.accord-container[open]>.accord-content{padding:0 12px 10px 12px}.results-header .overall-score{font-size:15px;margin-bottom:8px}.results-header .score-value{font-size:24px}.results-header .cefr-level{font-size:16px;margin:12px 0}.results-header .disclaimer{font-size:12px;margin-top:16px}.results-header{font-size:1.2rem;padding-bottom:12px;margin-bottom:8px}.section-score-line{flex-direction:column;align-items:flex-start;gap:6px;font-size:.9rem;margin:10px 0}.gray-text{font-size:.85rem;margin:8px 0}.accord-header{font-size:1.2rem;padding:0}.accord-content{font-size:.9rem;padding:0}.accord-header .arrow{margin-right:4px}}.question.question-with-image{display:flex;flex-direction:column;align-items:center;text-align:center}.question.question-with-image .question-media-options{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;margin:0 auto;max-width:500px}.question.question-with-image .image-side{display:flex;justify-content:center;align-items:center;overflow:hidden;border-radius:10px;width:100%;max-width:420px}.question.question-with-image .image-side img{width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:10px}.question.question-with-image .options-side{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:15px;flex-wrap:nowrap;width:100%;max-width:420px;margin-bottom:10px}.question.question-with-image .options-side label.option{margin:0;font-size:1.05em;white-space:nowrap}@media (max-width:700px){.question.question-with-image .image-side{max-width:90%}.question.question-with-image .image-side img{max-height:180px}.question.question-with-image .options-side{gap:10px}}.cecrl-container{max-width:650px;margin:0 auto;padding:20px;font-family:Inter,sans-serif}.cecrl-accordion{margin-bottom:10px;border:1px solid rgba(227,232,238,.8);border-radius:14px;background:linear-gradient(180deg,#fff 0,#f7faff 100%);overflow:hidden;transition:all .35s ease;box-shadow:0 2px 8px rgba(0,0,0,.05)}.cecrl-accordion:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);transform:translateY(-1px)}.cecrl-accordion-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;cursor:pointer;font-weight:600;font-size:1.05rem;color:#2c3e50;transition:background .4s ease,color .4s ease,box-shadow .3s ease;background:linear-gradient(135deg,#f7faff 0,#edf3ff 100%)}.cecrl-accordion-header:hover{box-shadow:inset 0 0 8px rgba(42,127,218,.08)}.cecrl-accordion.active-level .cecrl-accordion-header{background:linear-gradient(135deg,#c7e0ff 0,#5ea6ff 100%);color:#0d325a;box-shadow:inset 0 0 8px rgba(255,255,255,.15)}.cecrl-accordion.active-level .cecrl-accordion-header:hover{background:linear-gradient(135deg,#d2ebff 0,#6af 100%);box-shadow:inset 0 0 10px rgba(255,255,255,.25),0 2px 6px rgba(0,0,0,.08);color:#0d325a;transition:all .25s ease}.cecrl-accordion-content{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;padding:0 24px;background:#fff;color:#2c3e50;line-height:1.6}.cecrl-accordion.open .cecrl-accordion-content{max-height:500px;padding:16px 24px}.cecrl-accordion.active-level{border-color:#2a7fda;box-shadow:0 0 14px rgba(42,127,218,.25);transform:translateY(-3px)}.cecrl-accordion-toggle{font-size:1.3rem;transition:transform .4s ease;color:inherit}.cecrl-accordion.open .cecrl-accordion-toggle{transform:rotate(180deg)}.cecrl-accordion-content{max-height:0;overflow:hidden;padding:0 24px;background:linear-gradient(180deg,#fff 0,#f9fbff 100%);transition:max-height .45s ease,padding .3s ease,background .4s ease;line-height:1.7}.cecrl-accordion.open .cecrl-accordion-content{max-height:600px;padding:18px 24px;background:linear-gradient(180deg,#fdfdff 0,#f2f7ff 100%)}.cecrl-level-badge{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#dcecff 0,#b7daff 100%);color:#163a5f;padding:4px 10px;border-radius:16px;font-size:.8rem;font-weight:600;margin-left:12px;box-shadow:0 1px 2px rgba(0,85,170,.1);letter-spacing:.4px;text-transform:uppercase;transition:transform .2s ease,box-shadow .2s ease}.cecrl-level-badge:hover{transform:scale(1.03);box-shadow:0 2px 4px rgba(0,85,170,.15)}.cecrl-range{color:#7f8c8d;font-size:.9rem;font-weight:400;margin-left:10px;opacity:.9;transition:color .3s ease}.active-level .cecrl-range{color:#fff;opacity:1}.cefr-level{font-size:1.2rem;font-weight:600;margin-bottom:6px;color:#2c3e50}.level-label{font-weight:700;color:#2a7fda;text-transform:uppercase;letter-spacing:.5px;background-color:rgba(42,127,218,.1);padding:4px 10px;border-radius:6px;display:inline-block}.level-mention{font-size:1.1rem;color:#555;font-weight:500;text-align:center}.cecrl-level-badge-mini{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#dce6f5;color:#2c3e50;font-weight:700;font-size:.85rem;margin-right:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);text-transform:uppercase;transition:all .25s ease}.cecrl-accordion.active-level .cecrl-level-badge-mini:hover{transform:scale(1.1);box-shadow:0 4px 10px rgba(42,127,218,.4)}.cecrl-level-badge-text{margin-right:10px;background:rgba(42,127,218,.1);color:#2a7fda;font-weight:600;padding:3px 8px;border-radius:8px;font-size:.8rem;text-transform:uppercase}.overall-score{font-size:1.5rem;font-weight:600;margin-bottom:12px;color:#2c3e50}.score-value{font-size:1.8rem;font-weight:700;color:#3498db;background-color:rgba(52,152,219,.1);padding:6px 12px;border-radius:6px;display:inline-block;margin-left:8px}.error{font-size:1.1rem;color:#e74c3c;font-weight:500;margin:10px 0}.color-legend{text-align:center;margin:20px auto;padding:20px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:8px;max-width:800px}.color-legend-title{margin:0 0 15px 0;font-weight:700;font-size:1.1em;color:#333;text-align:center}.color-legend-items{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap}.color-legend-item{display:flex;align-items:center;gap:10px}.color-legend-circle{width:24px;height:24px;border-radius:50%;border:2px solid}.color-legend-circle.correct{background-color:#28a745;border-color:#28a745}.color-legend-circle.incorrect{background-color:#dc3545;border-color:#dc3545}.color-legend-circle.expected{background-color:#17a2b8;border-color:#17a2b8}.color-legend-label{font-weight:600}.color-legend-label.correct{color:#28a745}.color-legend-label.incorrect{color:#dc3545}.color-legend-label.expected{color:#17a2b8}.text-center{text-align:center}
/* ââ AI Examiner Feedback block ââ */
.toeic-ai-feedback-details{margin-top:10px;border-radius:8px;border:1px solid #b45309;overflow:hidden;transition:box-shadow .3s ease}
.toeic-ai-feedback-details:hover{box-shadow:0 4px 12px rgba(180,83,9,.15)}
.toeic-ai-feedback-summary{cursor:pointer;background:linear-gradient(135deg,#fef3c7 0,#fde68a 100%);color:#92400e;font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;padding:7px 12px;list-style:none;user-select:none;display:flex;align-items:center;gap:6px;transition:background .3s ease}
.toeic-ai-feedback-summary::-webkit-details-marker{display:none}
.toeic-ai-feedback-details[open] .toeic-ai-feedback-summary{background:linear-gradient(135deg,#fde68a 0,#fbbf24 100%)}
.toeic-ai-feedback-box{background:#fffbeb;padding:10px 14px;font-size:.82rem;line-height:1.55;color:#1a2340;border-top:1px solid #fde68a}
.toeic-ai-feedback-box table{width:100%;border-collapse:collapse;font-size:.8rem;margin-bottom:8px}
.toeic-ai-feedback-box td{padding:3px 6px;vertical-align:top}
.toeic-ai-feedback-box td:first-child{font-weight:600}
.toeic-ai-feedback-box ul{margin:0;padding-left:1.2em}
.toeic-ai-feedback-box li{margin-bottom:2px}
/* ââ Results page: tighten paragraph spacing ââ */
.sw-results p{margin:0;padding:2px 0;font-weight:400}
.sw-results p.question{padding:8px 12px;margin-bottom:6px}
.sw-results p.instructions{padding:2px 0;margin:0}
.sw-results .accord-content p+p{margin-top:1px}
.sample-answer-block{margin-top:6px;padding-left:10px}
.sample-answer-label{font-weight:700;font-size:.85rem;color:#065f46;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.answer-block{color:#059669;font-weight:600;font-size:.95rem;line-height:1.65}
.answer-line{margin:0 0 6px 0;padding:0;color:#059669;font-weight:600;white-space:normal;display:block}
.answer-line:last-child{margin-bottom:0}
.user-answer-block{margin-bottom:6px;padding-left:10px}
.user-answer-label{font-weight:700;font-size:.85rem;color:#1a3a6b;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px}
.user-answer-lines{color:#1f7cff;font-weight:600;font-size:.95rem;line-height:1.65}
.user-answer-line{margin:0 0 6px 0;padding:0;color:#1f7cff;font-weight:600;white-space:normal;display:block}
.user-answer-line:last-child{margin-bottom:0}
/* Sous-questions des Parts 5-6 (Respond to questions / Respond with info) :
apparaissent entre les blocs Sample answer et User answer sur la page de
correction. Mises en gras avec un espacement vertical réparti pour les
distinguer clairement sans surcharger visuellement. */
.narrator-q{font-weight:700;font-size:.95rem;color:#1a2340;margin:14px 0;line-height:1.45}
@media print{
.sample-answer-block{padding-left:10px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.answer-line{margin-bottom:5px;color:#059669 !important;font-weight:600 !important;display:block !important}
.user-answer-block{padding-left:10px;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.user-answer-line{margin-bottom:5px;color:#1f7cff !important;font-weight:600 !important;display:block !important}
}
/* ââ Section banners (Speaking / Writing) ââ */
/* Le banner est enveloppé dans .accord-container pour hériter de max-width et marges */
.sw-section-banner{display:flex;align-items:center;gap:12px;font-size:.95rem;font-weight:700;width:100%}
.sw-section-banner--speaking{color:#1e3a8a}
.sw-section-banner--writing{color:#065f46}
.sw-section-banner__title{font-size:1.05rem;font-weight:700}
.sw-section-banner__note{font-size:.82rem;font-weight:400;color:#6b7280;font-style:italic}
.sw-section-banner__score{margin-left:auto;font-size:1.4rem;font-weight:700;color:#059669;background:#d1fae5;border-radius:8px;padding:2px 14px;border:1.5px solid #6ee7b7}
/* Le wrapper accord-container contenant un banner : garde border-radius/max-width, surcharge couleurs */
.accord-container--banner{padding:14px 20px;cursor:default;box-shadow:0 2px 4px rgba(0,0,0,.06);margin-bottom:6px;margin-top:20px}
.accord-container--banner:hover{box-shadow:0 2px 4px rgba(0,0,0,.06);transform:none}
.accord-container--banner.accord-container--speaking{background:#f0f4ff;border:1.5px solid #c7d7ff}
.accord-container--banner.accord-container--writing{background:#f0fdf4;border:1.5px solid #a7f3d0}
/* ââ Canvas WebGL (vagues de fond) ââ */
canvas.webgl{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:-1}
/* ââ SĂ©lecteur de test (cercles numĂ©rotĂ©s) ââ */
.test-selector{display:flex;gap:6px;margin:8px 0 20px;align-items:center;flex-wrap:wrap}
.test-selector__item{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:.78rem;font-weight:700;text-decoration:none;background:#e2e8f8;color:#4a5578;border:2px solid #c0cce8;transition:background .2s,color .2s,border-color .2s,transform .15s,box-shadow .2s}
.test-selector__item:hover{background:#1a2340;color:#fff;border-color:#1a2340}
.test-selector__item--active{background:#1a2340;color:#fff;border-color:#1a2340;cursor:default;pointer-events:none}
.test-selector__label{font-size:.78rem;color:#6b7280;margin-left:4px}
/* ââ Section scores : 2 large tiles (Speaking / Writing) ââ
Inspired by the TOEFL iBT score-tiles layout, adapted for TOEIC SW.
*/
.toeic-score-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:8px auto 0;max-width:min(900px,100%);box-sizing:border-box;padding:0 18px}
.toeic-score-tile{background:linear-gradient(180deg,#fff 0%,#f8faff 100%);border:1.5px solid #e2e8f8;border-radius:20px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);transition:box-shadow .22s cubic-bezier(.4,0,.2,1),border-color .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:10px;min-height:160px;opacity:0;transform:translateY(12px);animation:fadeInUp .55s cubic-bezier(.4,0,.2,1) forwards}
.toeic-score-tile:nth-child(1){animation-delay:.08s}
.toeic-score-tile:nth-child(2){animation-delay:.22s}
.toeic-score-tile:nth-child(3){animation-delay:.36s}
.toeic-score-tile:nth-child(4){animation-delay:.50s}
.toeic-score-tile:hover{box-shadow:0 4px 16px rgba(0,0,0,.10),0 2px 6px rgba(0,0,0,.06);border-color:#c2d9ff;transform:translateY(-2px)}
.toeic-score-tile__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.toeic-score-tile__icon{font-size:2.1rem;line-height:1;flex-shrink:0;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#e8f1ff;color:#1f7cff}
.toeic-score-tile__name{font-size:1.05rem;font-weight:700;color:#1a2340;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.toeic-score-tile__score{font-family:'DM Mono','Fira Code',ui-monospace,monospace;font-size:1.55rem;font-weight:800;color:#1f7cff;line-height:1;white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.toeic-score-tile__score-unit{font-size:.7em;color:#8892b0;font-weight:600}
.toeic-score-tile__score--unscored{font-family:'Inter','Inter-fallback',system-ui,sans-serif;font-size:.85rem;font-weight:500;font-style:italic;color:#8892b0;white-space:normal;flex:0 1 auto;text-align:right;overflow-wrap:anywhere}
.toeic-score-tile__sub{font-size:.82rem;color:#8892b0;margin:-4px 0 0 64px;font-weight:400}
.toeic-score-tile__cefr{font-size:.78rem;font-weight:700;color:#4a5578;margin:-2px 0 0 64px;text-transform:uppercase;letter-spacing:.05em}
.toeic-score-tile__cefr-badge{display:inline-block;background:#e8f1ff;color:#1260d4;padding:2px 8px;border-radius:999px;font-weight:800;margin-left:4px;letter-spacing:.03em}
.toeic-score-tile .score-bar{margin:0;height:25px;background:#f8faff;border:1px solid #e2e8f8;border-radius:999px;overflow:hidden;color:transparent}
.toeic-score-tile .score-fill{height:100%;border-radius:999px;transition:width 1.2s cubic-bezier(.4,0,.2,1);line-height:25px;font-size:0;box-shadow:none;color:transparent}
.toeic-score-tile__empty{font-size:.82rem;color:#8892b0;font-style:italic;margin:0}
.toeic-score-tile__cefr-desc{font-size:.8rem;line-height:1.5;color:#4a5578;margin:4px 0 0 64px;opacity:.9;text-align:justify}
.cecrl-inline-block{border-top:1px solid rgba(0,0,0,0.08);padding-top:12px;margin-top:4px;width:100%}
.cecrl-inline-block__title{font-size:.95rem;font-weight:700;margin:0 0 6px;letter-spacing:.01em}
.cecrl-inline-block__desc{font-size:.88rem;line-height:1.55;margin:0;opacity:.9;text-align:justify}
@media (max-width:720px){
.toeic-score-tiles{grid-template-columns:1fr;gap:12px;padding:0 12px}
.toeic-score-tile{min-height:0;padding:14px 16px}
.toeic-score-tile__icon{width:44px;height:44px;font-size:1.7rem}
.toeic-score-tile__score{font-size:1.35rem}
.toeic-score-tile__score--unscored{flex-basis:100%;text-align:left;margin-left:56px;font-size:.8rem;line-height:1.4}
.toeic-score-tile__sub{margin-left:56px}
.toeic-score-tile__cefr{margin-left:56px}
.toeic-score-tile__cefr-desc{margin-left:56px}
}
@media print{
.toeic-score-tiles{grid-template-columns:repeat(2,1fr)}
.toeic-score-tile{break-inside:avoid;page-break-inside:avoid}
}
/* ââ Mobile gutter alignment on the results page ââ
On phones the .toeic-score-tiles wrapper uses padding:0 12px (rule above
in the @media (max-width:720px) block) so the two score cards keep a
small 12 px breathing space from the screen edges. Without a matching
rule, the elements rendered AFTER the score cards (.results-header
banners "đ€ Speaking" / "âïž Writing" and the .accord-container details)
went edge-to-edge on small screens, breaking the visual alignment with
the cards. We harmonise here so every block keeps the same 12 px gutter.
Note on cascade: this rule must come AFTER the existing
@media (max-width:600px) block that sets .accord-container{max-width:100%},
otherwise the 100 % rule wins on phones and our gutter is lost. Same
reason for the !important on .results-header: its inline style sets
padding:0 18px, which can only be overridden with !important. */
@media (max-width:720px){
.sw-results .results-header{
padding:0 12px !important;
}
.sw-results .accord-container{
max-width:calc(100% - 24px);
}
}
/* =====================================================================
Accordéons de résultats (fond dégradé bleu retiré 08/2026)
+ Bandeau de moyenne : fond bleu plein, texte blanc.
Le sélecteur :has(.accord-content) ne cible QUE les vrais accordéons
cliquables, jamais les wrappers de vignettes/score qui partagent la
classe .accord-container.
===================================================================== */
/* Teinte bleue des accordĂ©ons RETIRĂE (dĂ©cision Boris 08/2026) :
rendu neutre, les styles de base s'appliquent. Seule la couleur du
titre est conservée. */
.accord-container:has(.accord-content) > .accord-header{
color:#1260d4;
}
/* Bandeau de moyenne globale */
.score-hero-card{
background:#1f7cff;
}
.score-hero-card,
.score-hero-card *{
color:#fff;
opacity:1;
}