/* LumorowLMS — IELTS Writing Task 1 Frontend Styles */

.llmsb-iwt1-block { border: 2px solid var(--llmsb-primary); border-radius: 12px; overflow: hidden; background: #fff; }

/* Pre-reveal */
.llmsb-iwt1-pre { padding: 40px 24px; text-align: center; }
.llmsb-iwt1-pre-header { margin-bottom: 20px; }
.llmsb-iwt1-pre-header h2 { font-size: 1.5rem; font-weight: 800; color: var(--llmsb-dark); margin: 0 0 8px; }
.llmsb-iwt1-pre-inst { font-size: 1rem; color: var(--llmsb-mid); margin: 6px 0; }
.llmsb-iwt1-begin-btn {
    margin-top: 20px; background: var(--llmsb-primary); color: #fff; border: none; border-radius: 10px;
    padding: 14px 48px; font-size: 1.1rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.llmsb-iwt1-begin-btn:hover { filter: brightness(.9); transform: translateY(-1px); }

/* Blurred task */
.llmsb-iwt1-task.blurred { filter: blur(10px); pointer-events: none; user-select: none; }

/* Timer bar */
.llmsb-iwt1-timer-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 24px; background: #f1f5f9; border-bottom: 1px solid var(--llmsb-border);
}
.llmsb-iwt1-timer-label { font-size: .85rem; color: var(--llmsb-muted); font-weight: 600; }
.llmsb-iwt1-timer-count {
    font-size: 1.2rem; font-weight: 800; color: var(--llmsb-dark);
    font-family: 'Courier New', monospace;
}
.llmsb-iwt1-timer-bar.warn .llmsb-iwt1-timer-count { color: var(--llmsb-wrong); animation: llmsbIwt1Blink .8s infinite; }
.llmsb-iwt1-timer-bar.expired { background: #fee2e2; }
@keyframes llmsbIwt1Blink { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Task prompt */
.llmsb-iwt1-prompt {
    padding: 20px 24px; background: #f8f8f6; border-bottom: 1px solid var(--llmsb-border);
    line-height: 1.7;
}
.llmsb-iwt1-desc { font-size: 1rem; color: var(--llmsb-dark); margin: 0 0 10px; }
.llmsb-iwt1-inst-text { font-size: .95rem; color: var(--llmsb-mid); margin: 0; }

/* Visuals */
.llmsb-iwt1-visuals {
    padding: 20px 24px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
    background: #fff;
}
.llmsb-iwt1-img { max-width: 100%; max-height: 450px; border-radius: 8px; border: 1px solid var(--llmsb-border); }
/* Side by side for dual images */
.llmsb-iwt1-visuals:has(.llmsb-iwt1-img + .llmsb-iwt1-img) { }
.llmsb-iwt1-visuals .llmsb-iwt1-img + .llmsb-iwt1-img { }

/* Editor area */
.llmsb-iwt1-editor-area { padding: 0 24px 16px; }
.llmsb-iwt1-editor-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; font-size: .85rem; color: var(--llmsb-muted);
}
.llmsb-iwt1-wc strong { color: var(--llmsb-primary); font-size: 1rem; }
.llmsb-iwt1-wc-target { font-size: .8rem; }

.llmsb-iwt1-textarea {
    width: 100%; min-height: 280px; padding: 16px; border: 2px solid var(--llmsb-border);
    border-radius: 8px; font-size: .95rem; font-family: inherit; line-height: 1.7;
    color: var(--llmsb-dark); resize: vertical;
    /* Block spellcheck and grammar */
    -webkit-text-decoration-skip: none;
}
.llmsb-iwt1-textarea:focus { outline: none; border-color: var(--llmsb-primary); box-shadow: 0 0 0 3px rgba(247,114,5,.1); }
.llmsb-iwt1-textarea:disabled { background: #f9fafb; cursor: default; }

/* Submit */
.llmsb-iwt1-submit-row { padding: 0 24px 20px; text-align: center; }
.llmsb-iwt1-submit-btn {
    background: var(--llmsb-primary); color: #fff; border: none; border-radius: 10px;
    padding: 12px 40px; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.llmsb-iwt1-submit-btn:disabled { opacity: .35; cursor: default; }
.llmsb-iwt1-submit-btn:hover:not(:disabled) { filter: brightness(.9); }

/* Continue to Task 2 button */
.llmsb-iwt1-continue-btn {
    display: block; margin: 20px auto 0;
    background: var(--llmsb-primary); color: #fff; border: none; border-radius: 10px;
    padding: 14px 48px; font-size: 1.05rem; font-weight: 700; font-family: inherit; cursor: pointer;
    transition: background .15s, transform .1s;
}
.llmsb-iwt1-continue-btn:hover { filter: brightness(.9); transform: translateY(-1px); }

/* Submitted confirmation */
.llmsb-iwt1-submitted.hidden { display: none; }
.llmsb-iwt1-submitted {
    padding: 40px 24px; text-align: center;
}
.llmsb-iwt1-submitted h3 { font-size: 1.3rem; color: var(--llmsb-correct); margin: 0 0 12px; }
.llmsb-iwt1-submitted-stats { font-size: .95rem; color: var(--llmsb-mid); line-height: 1.6; }

/* Feedback */
.llmsb-iwt1-feedback.hidden { display: none; }
.llmsb-iwt1-feedback {
    padding: 20px 24px; background: #eff6ff; border-top: 2px solid var(--llmsb-primary);
}
.llmsb-iwt1-feedback h4 { font-size: 1rem; font-weight: 700; color: var(--llmsb-primary); margin: 0 0 12px; }
.llmsb-iwt1-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.llmsb-iwt1-score-item {
    display: flex; justify-content: space-between; padding: 8px 12px; background: #fff;
    border-radius: 6px; border: 1px solid var(--llmsb-border); font-size: .85rem;
}
.llmsb-iwt1-score-item label { color: var(--llmsb-muted); font-weight: 600; }
.llmsb-iwt1-score-item span { font-weight: 700; color: var(--llmsb-primary); font-size: 1rem; }

@media (max-width: 600px) {
    .llmsb-iwt1-textarea { min-height: 200px; }
    .llmsb-iwt1-scores { grid-template-columns: 1fr; }
}