/* ═══════════════════════════════════════════════════════════════
 * IELTS Writing — Student-Facing Frontend CSS
 * v2.1.44 — Elegant UX overhaul (May 2026)
 * ═══════════════════════════════════════════════════════════════ */

.wpcode-shortcode-wrapper, .wpcode-block, .wp-block-shortcode {
    margin: 0 !important;
    padding: 0 !important;
}

.ls-ielts-writing-wrap + p:empty,
.lsqz-ielts-writing-container + p:empty,
.lsqz-pte-container + p:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lsqz-pte-container {
    max-width: 920px;
    width: 100%;
    margin: var(--quiz-head-gap, 24px) auto var(--quiz-bottom-gap, 32px);
    padding: 0 clamp(12px, 3vw, 20px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
}

.lsqz-pte-container *,
.lsqz-pte-container *::before,
.lsqz-pte-container *::after {
    box-sizing: border-box;
}

.lsqz-pte-container .card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;                /* v3.2.4 — was clamp(18,3vw,26) */
    margin-bottom: 10px;           /* v3.2.4 — was 18px (tighter inter-card gap) */
    box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
}

/* ── HERO HEADER ────────────────────────────────────────────── */
/* v2.1.46 — CSS Variables for easy customization
 * To override colors in your theme, add CSS like:
 *
 *   .lsqz-pte-container.lsqz-type-task1 {
 *     --lsqz-hero-bg-from: #1e3a8a;   // Start color (navy)
 *     --lsqz-hero-bg-mid:  #1e40af;   // Middle color
 *     --lsqz-hero-bg-to:   #3b0764;   // End color (purple)
 *     --lsqz-hero-title-color: #ffffff;
 *     --lsqz-hero-meta-color: #cbd5e1;
 *     --lsqz-hero-badge-bg: rgba(255,255,255,0.15);
 *     --lsqz-hero-badge-color: #e2e8f0;
 *   }
 */
.lsqz-pte-container {
    --lsqz-hero-bg-from: #0f172a;
    --lsqz-hero-bg-mid: #1e293b;
    --lsqz-hero-bg-to: #312e81;
    --lsqz-hero-title-color: #ffffff;
    --lsqz-hero-meta-color: #cbd5e1;
    --lsqz-hero-badge-bg: rgba(99, 102, 241, 0.25);
    --lsqz-hero-badge-color: #c7d2fe;
    --lsqz-hero-type-bg: rgba(255, 255, 255, 0.12);
    --lsqz-hero-type-color: #e2e8f0;
    --lsqz-hero-timer-bg: rgba(255, 255, 255, 0.1);
    --lsqz-hero-timer-color: #ffffff;
}

.lsqz-pte-container .lsqz-hero {
    background: linear-gradient(135deg,
        var(--lsqz-hero-bg-from) 0%,
        var(--lsqz-hero-bg-mid) 50%,
        var(--lsqz-hero-bg-to) 100%) !important;
    border-radius: 20px;
    padding: 0;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15,23,42,.12);
}

.lsqz-pte-container .lsqz-hero::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 80%; height: 200%;
    background: radial-gradient(ellipse, rgba(99,102,241,.18) 0%, transparent 60%);
    pointer-events: none;
}

.lsqz-pte-container .lsqz-hero::after {
    content: '';
    position: absolute;
    bottom: -30%; left: -10%;
    width: 60%; height: 160%;
    background: radial-gradient(ellipse, rgba(56,189,248,.1) 0%, transparent 60%);
    pointer-events: none;
}

.lsqz-pte-container .lsqz-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 28px clamp(20px, 4vw, 36px);
    color: #fff;
    flex-wrap: wrap;
}

.lsqz-pte-container .lsqz-hero .lsqz-pte-header-left {
    flex: 1;
    min-width: 240px;
}

.lsqz-pte-container .lsqz-hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.lsqz-pte-container .lsqz-quiz-badge {
    display: inline-block !important;
    background: var(--lsqz-hero-badge-bg) !important;
    color: var(--lsqz-hero-badge-color) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(199,210,254,.18) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.lsqz-pte-container .lsqz-hero .lsqz-pte-type-badge {
    display: inline-block !important;
    background: var(--lsqz-hero-type-bg) !important;
    color: var(--lsqz-hero-type-color) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
    padding: 5px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(226,232,240,.18) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

/* v2.1.46 — Stronger specificity + !important to override theme CSS */
.lsqz-pte-container .lsqz-hero h2,
.lsqz-pte-container .lsqz-hero .lsqz-pte-header-left h2 {
    font-size: clamp(20px, 3vw, 26px) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    color: var(--lsqz-hero-title-color) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    font-family: inherit !important;
}

.lsqz-pte-container .lsqz-hero-meta {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    font-size: 13px !important;
    color: var(--lsqz-hero-meta-color) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lsqz-pte-container .lsqz-hero-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 500 !important;
    color: var(--lsqz-hero-meta-color) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.lsqz-pte-container .lsqz-hero-meta-item svg {
    opacity: .7;
    stroke: currentColor;
    flex-shrink: 0;
}

.lsqz-pte-container .lsqz-hero .lsqz-pte-timer {
    background: var(--lsqz-hero-timer-bg) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: var(--lsqz-hero-timer-color) !important;
    backdrop-filter: blur(8px);
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 10px 16px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    transition: all .3s ease;
    line-height: 1 !important;
    margin: 0 !important;
}

.lsqz-hero .lsqz-pte-timer.lsqz-timer-warning {
    background: rgba(251,146,60,.25);
    border-color: rgba(251,146,60,.4);
    color: #fed7aa;
    animation: lsqz-pulse-warn 2s ease-in-out infinite;
}

.lsqz-hero .lsqz-pte-timer.lsqz-timer-danger {
    background: rgba(239,68,68,.3);
    border-color: rgba(239,68,68,.5);
    color: #fecaca;
    animation: lsqz-pulse-danger 1s ease-in-out infinite;
}

@keyframes lsqz-pulse-warn {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251,146,60,.4); }
    50% { box-shadow: 0 0 0 8px rgba(251,146,60,0); }
}

@keyframes lsqz-pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(239,68,68,0); transform: scale(1.02); }
}

/* ── INSTRUCTION ────────────────────────────────────────────── */
.lsqz-pte-instruction {
    font-size: 14px;
    color: #475569;
    margin-bottom: 18px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    padding: 14px 18px;
    border-left: 4px solid #16a34a;
    border-radius: 10px;
    line-height: 1.6;
}

/* ── PROMPT BLOCK ───────────────────────────────────────────── */
.lsqz-pte-prompt {
    font-size: 15px;
    line-height: 1.75;
    /* v3.2.4.2 — REMOVED white-space: pre-wrap (was causing HTML indentation to render as visible whitespace ~50px around toggle button).
       The pre-wrap property remains on .lsqz-prompt-text child where it actually belongs (for prompt text line-break formatting). */
    position: relative;
    /* v3.2.4 — Compact prompt padding (14px vertical, 16px horizontal).
       Maintains !important to beat .lsqz-pte-container .card's 16px base. */
    padding: 14px 16px !important;
}

.lsqz-prompt-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4f46e5;
    background: #eef2ff;
    padding: 5px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* ── MEDIA CARD ─────────────────────────────────────────────── */
.lsqz-media-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px;                /* v3.2.4 — was 14px (compact) */
    margin-bottom: 10px;           /* v3.2.4 — was 18px (tighter gap to next card) */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    position: relative;
}

.lsqz-media-img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    cursor: zoom-in;
    transition: transform .2s ease, filter .2s ease;
    display: block;
    margin: 0 auto;
}

.lsqz-media-img:hover { filter: brightness(.97); }

.lsqz-media-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* ── LIGHTBOX ───────────────────────────────────────────────── */
.lsqz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lsqz-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(4px);
    cursor: zoom-out;
}

.lsqz-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 95vw;
    max-height: 95vh;
}

.lsqz-lightbox-content img {
    max-width: 95vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,.5);
}

.lsqz-lightbox-close-btn {
    position: absolute;
    top: -12px; right: -12px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #fff;
    border: none;
    color: #0f172a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    transition: transform .15s ease;
}

.lsqz-lightbox-close-btn:hover {
    transform: scale(1.1);
    background: #f8fafc;
}

/* ── FORM HEADER ────────────────────────────────────────────── */
.lsqz-form-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}

.lsqz-form-title {
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.lsqz-form-subtitle {
    font-size: 12px;
    color: #64748b;
}

/* ── FORM FIELDS ────────────────────────────────────────────── */
.lsqz-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.lsqz-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #334155;
}

.lsqz-req {
    color: #dc2626;
    font-weight: 700;
}

.lsqz-input, .lsqz-textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 16px;
    box-sizing: border-box;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    color: #1e293b;
}

.lsqz-input:focus, .lsqz-textarea:focus {
    border-color: #6366f1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99,102,241,.1);
}

.lsqz-input::placeholder, .lsqz-textarea::placeholder {
    color: #94a3b8;
}

.lsqz-textarea {
    resize: vertical;
    line-height: 1.7;
    min-height: 200px;
    /* v2.1.51 — font-size removed (was hardcoded 15px which prevented Quiz Font Settings from working)
       Now inherits 16px from .lsqz-input,.lsqz-textarea rule above, OR custom v2.1.49 setting */
}

/* ── ANSWER AREA ────────────────────────────────────────────── */
.lsqz-answer-area {
    margin-top: 0;
}

.lsqz-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.lsqz-answer-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

/* ── TOOLBAR ────────────────────────────────────────────────── */
.lsqz-toolbar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.lsqz-tool-btn {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 12px;
    cursor: pointer;
    color: #475569;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-weight: 500;
}

.lsqz-tool-btn:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.lsqz-tool-btn:active {
    transform: scale(.96);
}

/* ── COUNTER CARD ───────────────────────────────────────────── */
.lsqz-counter-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
}

.lsqz-counter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.lsqz-counter-label-group {
    display: flex;
    flex-direction: column;
}

.lsqz-counter-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #64748b;
}

.lsqz-counter-status {
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    margin-top: 2px;
    transition: color .3s ease;
}

.lsqz-counter-status.zone-good { color: #16a34a; }
.lsqz-counter-status.zone-warn { color: #f59e0b; }
.lsqz-counter-status.zone-over { color: #6366f1; }
.lsqz-counter-status.zone-low { color: #94a3b8; }

.lsqz-counter-num-group {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.lsqz-counter-num {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color .2s ease;
}

.lsqz-counter-num.zone-good { color: #16a34a; }
.lsqz-counter-num.zone-warn { color: #f59e0b; }
.lsqz-counter-num.zone-over { color: #6366f1; }

.lsqz-counter-range {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 500;
}

.lsqz-counter-progress {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
    position: relative;
}

.lsqz-counter-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%);
    border-radius: 999px;
    transition: width .4s cubic-bezier(0.4, 0, 0.2, 1), background .3s ease;
}

.lsqz-counter-progress-fill.zone-good {
    background: linear-gradient(90deg, #16a34a 0%, #4ade80 100%);
}

.lsqz-counter-progress-fill.zone-warn {
    background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.lsqz-counter-progress-fill.zone-over {
    background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
}

.lsqz-counter-hints {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
}

/* ── AUTO-SAVE ──────────────────────────────────────────────── */
.lsqz-autosave {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 5px 10px;
    background: #f0fdf4;
    color: #15803d;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    transition: opacity .3s ease;
}

.lsqz-autosave.lsqz-fade { opacity: .6; }

/* ── BUTTONS ────────────────────────────────────────────────── */
.lsqz-pte-container .lsqz-btn,
.lsqz-pte-container button.lsqz-btn {
    background: #0f172a;
    color: #ffffff !important;
    padding: 13px 24px;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: all .15s ease;
    width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    text-decoration: none !important;
    font-size: 15px !important;
    font-family: inherit !important;
    letter-spacing: 0.01em;
    line-height: 1.2 !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.lsqz-pte-container .lsqz-btn:hover,
.lsqz-pte-container button.lsqz-btn:hover {
    background: #1e293b;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15,23,42,.2);
}

.lsqz-pte-container .lsqz-btn:active { transform: translateY(0); }

.lsqz-pte-container .lsqz-btn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* v2.1.46 — Force green submit override */
.lsqz-pte-container .lsqz-btn-submit,
.lsqz-pte-container button.lsqz-btn-submit,
.lsqz-pte-container .lsqz-submit-main-btn.lsqz-btn-submit {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 15px 28px !important;
    box-shadow: 0 4px 12px rgba(22,163,74,.25) !important;
    border: none !important;
    text-shadow: none !important;
}

.lsqz-pte-container .lsqz-btn-submit:hover,
.lsqz-pte-container button.lsqz-btn-submit:hover {
    background: linear-gradient(135deg, #15803d 0%, #14532d 100%) !important;
    box-shadow: 0 6px 20px rgba(22,163,74,.35) !important;
    color: #ffffff !important;
}

/* v2.1.46 — Force indigo override (theme may inject green) */
.lsqz-pte-container .lsqz-btn-start,
.lsqz-pte-container button.lsqz-btn-start,
.lsqz-pte-container .lsqz-start-btn.lsqz-btn-start {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    padding: 14px 32px !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.3) !important;
    border: none !important;
    text-shadow: none !important;
}

.lsqz-pte-container .lsqz-btn-start:hover,
.lsqz-pte-container button.lsqz-btn-start:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    color: #ffffff !important;
}

.lsqz-btn.outline {
    background: transparent;
    color: #0f172a;
    border: 2px solid #0f172a;
    margin-top: 10px;
}

.lsqz-btn.cta {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

/* ── ACTIONS ────────────────────────────────────────────────── */
.lsqz-actions { margin-top: 22px; }

.lsqz-submit-hint {
    text-align: center;
    font-size: 12px;
    color: #64748b;
    margin: 10px 0 0;
    font-style: italic;
}

/* ── STATUS & ALERTS ────────────────────────────────────────── */
.lsqz-status { margin-top: 16px; }

.lsqz-alert {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.lsqz-alert.error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.lsqz-alert.success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #14532d;
    border: 1px solid #86efac;
}

.lsqz-loading {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #3730a3;
    padding: 18px 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: 600;
    border: 1px solid #c7d2fe;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lsqz-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid rgba(99,102,241,.3);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: lsqz-spin .8s linear infinite;
}

@keyframes lsqz-spin {
    to { transform: rotate(360deg); }
}

/* ── RESULT STYLES ──────────────────────────────────────────── */
.lsqz-result-header {
    text-align: center;
    margin-bottom: 30px;
}

.lsqz-overall-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 8px 20px rgba(22,101,52,.25);
}

.lsqz-overall-circle .val {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.lsqz-overall-circle .lbl {
    font-size: 10px;
    text-transform: uppercase;
    opacity: .8;
    margin-top: 2px;
    letter-spacing: 0.06em;
}

.lsqz-score-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.lsqz-score-label {
    width: 100px;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.lsqz-score-bar {
    flex-grow: 1;
    height: 10px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.lsqz-score-bar span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #4ade80);
    border-radius: 999px;
    transition: width .6s ease;
}

.lsqz-score-num {
    width: 32px;
    text-align: right;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
}

.lsqz-feedback-box, .lsqz-recommendation {
    margin-top: 24px;
    border-top: 1px solid #f1f5f9;
    padding-top: 18px;
}

.lsqz-feedback-box h4, .lsqz-recommendation h4 {
    margin: 0 0 10px;
    font-size: 13px;
    color: #4f46e5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.lsqz-paywall {
    text-align: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 28px;
    border-radius: 14px;
    border: 1px solid #86efac;
}

.lsqz-paywall p {
    margin: 0 0 16px;
    font-weight: 600;
    color: #14532d;
}

.lsqz-remaining {
    text-align: center;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 12px;
}

/* ── BLUR & GATE ────────────────────────────────────────────── */
.lsqz-blur-wrapper { position: relative; }

.lsqz-blur-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,.65);
    border-radius: 14px;
    backdrop-filter: blur(3px);
    padding: 20px;
}

.lsqz-is-blurred {
    filter: blur(5px);
    pointer-events: none;
    user-select: none;
}

/* v2.1.46 — Note: .lsqz-start-gate styles moved to v2.1.45 section below
 * (no longer a modal — now an expandable card pattern from PTE) */
.lsqz-password-gate {
    background: #fff;
    border-radius: 16px;
    padding: 32px clamp(20px, 4vw, 36px);
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
}

.lsqz-password-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.lsqz-password-gate p {
    margin: 0 0 16px;
    font-weight: 600;
    color: #1e293b;
    font-size: 15px;
}

.lsqz-password-row {
    display: flex;
    gap: 8px;
}

.lsqz-password-row .lsqz-input { flex: 1; }

.lsqz-password-row .lsqz-btn {
    width: auto;
    padding: 11px 22px;
}

/* ── PREP PHASE ─────────────────────────────────────────────── */
.lsqz-prep-phase {
    margin-bottom: 16px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
    border: 1.5px solid #fde047;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(253,224,71,.15);
}

.lsqz-prep-banner {
    display: flex;
    align-items: center;
    gap: 14px;
}

.lsqz-prep-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(217,119,6,.15);
    color: #d97706;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lsqz-prep-text { flex: 1; }

.lsqz-prep-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #92400e;
    margin-bottom: 2px;
}

.lsqz-prep-countdown-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.lsqz-prep-countdown {
    font-size: 30px;
    font-weight: 800;
    color: #92400e;
    line-height: 1;
    letter-spacing: -0.02em;
}

.lsqz-prep-unit {
    font-size: 12px;
    color: #92400e;
    opacity: .75;
    font-weight: 500;
}

.lsqz-prep-hint {
    font-size: 13px;
    color: #78350f;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(217,119,6,.3);
}

/* ═══════════════════════════════════════════════════════════════
 * MOBILE RESPONSIVENESS
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lsqz-pte-container { padding: 0 10px; }
    .lsqz-pte-container .card {
        padding: 14px;             /* v3.2.4 — was 18px (mobile compact) */
        border-radius: 12px;
        margin-bottom: 8px;         /* v3.2.4 — was 14px (tighter mobile gap) */
    }
    /* v3.2.4 — Mobile media card adjustment */
    .lsqz-media-card {
        padding: 10px;
        margin-bottom: 8px;
    }
    /* v3.2.4 — Mobile task prompt padding (overrides !important via higher specificity) */
    .lsqz-pte-container .lsqz-pte-prompt {
        padding: 12px 14px !important;
    }
    /* v3.2.4.1 — Mobile: prompt toggle no padding, tighter gap to text */
    .lsqz-prompt-toggle {
        padding: 0;
        margin: 0 0 4px;
    }
    .lsqz-prompt-text {
        padding-top: 6px;
    }
    .lsqz-hero { border-radius: 16px; }
    .lsqz-hero-inner { padding: 24px 22px; }
    .lsqz-hero h2 { font-size: 20px; }
    .lsqz-hero-meta { gap: 12px; font-size: 12px; }
    .lsqz-hero .lsqz-pte-timer { font-size: 15px; padding: 9px 14px; }
    .lsqz-score-label { width: 80px; font-size: 12px; }
    .lsqz-score-num { width: 28px; font-size: 13px; }
    .lsqz-overall-circle { width: 76px; height: 76px; }
    .lsqz-overall-circle .val { font-size: 26px; }
}

@media (max-width: 540px) {
    .lsqz-pte-container .card {
        padding: 12px;             /* v3.2.4 — was 16px 14px (standard mobile compact) */
        border-radius: 12px;
        margin-bottom: 8px;         /* v3.2.4 — added for tighter mobile gap */
    }
    /* v3.2.4 — Standard mobile media card */
    .lsqz-media-card {
        padding: 10px;
        margin-bottom: 8px;
    }
    /* v3.2.4 — Standard mobile task prompt padding */
    .lsqz-pte-container .lsqz-pte-prompt {
        padding: 12px !important;
    }
    /* v3.2.4.1 — Standard mobile: prompt toggle no padding, tight gap */
    .lsqz-prompt-toggle {
        padding: 0;
        margin: 0 0 4px;
    }
    .lsqz-prompt-text {
        padding-top: 6px;
    }
    .lsqz-hero { border-radius: 14px; }
    .lsqz-hero-inner {
        flex-direction: column;
        gap: 14px;
        padding: 22px 18px;
    }
    .lsqz-hero h2 { font-size: 19px; }
    .lsqz-hero-meta { gap: 10px; font-size: 11px; flex-wrap: wrap; }
    .lsqz-hero .lsqz-pte-timer {
        align-self: flex-start;
        font-size: 14px;
        padding: 8px 12px;
    }
    .lsqz-answer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .lsqz-toolbar { width: 100%; gap: 5px; }
    .lsqz-tool-btn {
        font-size: 11px;
        padding: 6px 9px;
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
    .lsqz-form-grid { grid-template-columns: 1fr; }
    .lsqz-password-row { flex-direction: column; }
    .lsqz-password-row .lsqz-btn { width: 100%; }
    .lsqz-score-label { width: 75px; font-size: 11px; }
    .lsqz-score-num { width: 26px; font-size: 12px; }
    .lsqz-overall-circle { width: 70px; height: 70px; }
    .lsqz-overall-circle .val { font-size: 22px; }
    .lsqz-counter-card { padding: 12px 14px; }
    .lsqz-counter-num { font-size: 22px; }
    .lsqz-prep-banner { gap: 12px; }
    .lsqz-prep-icon { width: 38px; height: 38px; }
    .lsqz-prep-countdown { font-size: 26px; }
    .lsqz-btn { padding: 12px 20px; font-size: 14px; }
    .lsqz-btn-submit { padding: 14px 22px; font-size: 15px; }
}

@media (max-width: 380px) {
    .lsqz-pte-container { padding: 0 8px; }
    .lsqz-pte-container .card {
        padding: 10px;              /* v3.2.4 — was 14px 12px (compact tier) */
        margin-bottom: 6px;          /* v3.2.4 — added (very tight gaps on small screens) */
    }
    /* v3.2.4 — Compact tier media card */
    .lsqz-media-card {
        padding: 8px;
        margin-bottom: 6px;
    }
    /* v3.2.4 — Compact tier task prompt */
    .lsqz-pte-container .lsqz-pte-prompt {
        padding: 10px !important;
    }
    /* v3.2.4 — Compact tier label (smaller padding for tight screens) */
    .lsqz-prompt-toggle-label {
        padding: 4px 10px;
    }
    /* v3.2.4.1 — Compact tier: prompt toggle no padding, very tight gap */
    .lsqz-prompt-toggle {
        padding: 0;
        margin: 0 0 3px;
    }
    .lsqz-prompt-text {
        padding-top: 5px;
    }
    .lsqz-hero-inner { padding: 20px 16px; }
    .lsqz-hero h2 { font-size: 18px; line-height: 1.3; }
    .lsqz-tool-btn {
        font-size: 10px;
        padding: 5px 7px;
        gap: 3px;
    }
    .lsqz-tool-btn svg { width: 11px; height: 11px; }
    .lsqz-counter-num { font-size: 20px; }
    .lsqz-counter-top { gap: 8px; }
    .lsqz-overall-circle { width: 64px; height: 64px; }
    .lsqz-overall-circle .val { font-size: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
 * v2.1.45 — PTE-ADAPTED FLOW CLASSES
 * Expandable card, prompt toggle, identity panel, toast, locked
 * ═══════════════════════════════════════════════════════════════ */

/* ── EXPANDABLE WRAPPER ─────────────────────────────────────── */
.lsqz-expandable-wrapper {
    transition: all .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lsqz-state-collapsed .lsqz-expandable-content {
    display: none;
}

.lsqz-state-expanded .lsqz-expandable-content {
    display: block;
    animation: lsqz-fade-slide-in .5s ease-out;
}

@keyframes lsqz-fade-slide-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── START GATE (Collapsed state) ───────────────────────────── */
.lsqz-start-gate {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: 16px;
    padding: 36px clamp(20px, 4vw, 40px);
    text-align: center;
    box-shadow: 0 4px 12px rgba(99,102,241,.08);
    margin-bottom: 18px;
}

.lsqz-start-prompt {
    max-width: 480px;
    margin: 0 auto;
}

.lsqz-start-prompt .lsqz-start-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 6px 16px rgba(99,102,241,.3);
}

.lsqz-pte-container .lsqz-start-title,
.lsqz-pte-container .lsqz-start-prompt h3.lsqz-start-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 0 0 10px !important;
    padding: 0 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-shadow: none !important;
    text-transform: none !important;
}

.lsqz-pte-container .lsqz-start-desc {
    font-size: 14px !important;
    color: #475569 !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    line-height: 1.65 !important;
    background: transparent !important;
}

.lsqz-pte-container .lsqz-start-desc strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

.lsqz-pte-container .lsqz-start-btn {
    max-width: 280px;
    margin: 0 auto;
    width: auto;
}

/* Password gate variant inside start-gate */
.lsqz-start-gate .lsqz-password-gate {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 380px;
    margin: 0 auto;
    width: auto;
}

/* ── PROMPT TOGGLE (Collapsible) ────────────────────────────── */
/* v2.1.51 — Compact toggle button
 * v2.1.53 — Reduced bottom margin
 * v2.1.54 — Full-width clickable area, icon right-aligned (standard UX pattern) */
.lsqz-prompt-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 0;                    /* v3.2.4.1 — was 6px 8px (button padding redundant; label has own padding) */
    margin: 0 0 4px;               /* v3.2.4.1 — was 0 -8px 10px (negative margin removed since no padding, gap to text reduced 10→4) */
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background .15s ease, transform .15s ease;
}

.lsqz-prompt-toggle:hover {
    background: #f8f7fe;
}

.lsqz-prompt-toggle:hover .lsqz-prompt-toggle-icon {
    background: rgba(41, 77, 140, 0.20);   /* v3.2.4 — was #c7d2fe (light purple). Navy tint at 20% on hover. */
    transform: scale(1.05);
}

.lsqz-prompt-toggle:active {
    transform: scale(0.99);
    background: rgba(41, 77, 140, 0.05);   /* v3.2.4 — was #eef2ff. Very subtle navy tint on press. */
}

.lsqz-prompt-toggle:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.lsqz-prompt-toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #ffffff !important;     /* v3.2.4 — was #4f46e5 (purple). Defensive !important against parent button styles. */
    background: #294D8C !important; /* v3.2.4 — was #eef2ff. Brand navy solid, matches sidebar/UI accent. */
    padding: 6px 14px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

.lsqz-prompt-toggle-icon {
    font-size: 18px;
    font-weight: 700;
    color: #294D8C;                          /* v3.2.4 — was #6366f1 (purple). Navy matches label. */
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(41, 77, 140, 0.10);    /* v3.2.4 — was #eef2ff. Navy tint at 10% for subtle harmony. */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform .25s ease, background .15s ease;
    flex-shrink: 0;
}

/* v3.1.0 — caret-based toggle (replaces minus character) */
.lsqz-prompt-toggle[aria-expanded="true"]  .lsqz-caret-up   { display: inline; }
.lsqz-prompt-toggle[aria-expanded="true"]  .lsqz-caret-down { display: none;   }
.lsqz-prompt-toggle[aria-expanded="false"] .lsqz-caret-up   { display: none;   }
.lsqz-prompt-toggle[aria-expanded="false"] .lsqz-caret-down { display: inline; }

.lsqz-prompt-toggle-icon .lsqz-caret-up,
.lsqz-prompt-toggle-icon .lsqz-caret-down {
    font-size: 13px;
    color: #294D8C;                /* v3.2.4 — was #6366f1 (purple). Navy matches new theme. */
    line-height: 1;
    transition: transform 0.2s ease;
}

/* v2.1.51 — Separator line between toggle and text */
.lsqz-pte-prompt {
    position: relative;
}

/* v2.1.53 — Compact prompt text below toggle (12px instead of 14px) */
.lsqz-prompt-text {
    font-size: 15px;
    line-height: 1.75;
    color: #1e293b;
    white-space: pre-wrap;
    padding-top: 6px;              /* v3.2.4.1 — was 10px (aggressive whitespace reduction) */
    border-top: 1px solid #f1f5f9;
}

/* v2.1.53 — Tame paragraph spacing inside prompt text (WordPress wpautop
   often adds heavy margin: 1em on <p> which creates excessive whitespace) */
.lsqz-prompt-text p {
    margin: 0 0 12px;
    line-height: 1.75;
}

.lsqz-prompt-text p:first-child {
    margin-top: 0;
}

.lsqz-prompt-text p:last-child {
    margin-bottom: 0;
}

/* ── IDENTITY PANEL (Hidden until Stage 1 complete) ────────── */
.lsqz-identity-panel {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 2px dashed #c7d2fe;
}

.lsqz-identity-intro {
    font-size: 14px;
    color: #15803d;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 0 0 18px;
    font-weight: 600;
    line-height: 1.5;
}

.lsqz-confirm-submit-btn {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.3) !important;
}

.lsqz-confirm-submit-btn:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    box-shadow: 0 6px 20px rgba(99,102,241,.4) !important;
}

/* ── LOCKED ANSWER ──────────────────────────────────────────── */
.lsqz-textarea.lsqz-locked {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    border-color: #cbd5e1;
    cursor: default;
    opacity: 0.95;
    position: relative;
}

.lsqz-textarea.lsqz-locked:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(148,163,184,.2);
    border-color: #94a3b8;
}

.lsqz-pte-timer.lsqz-timer-locked {
    background: rgba(148,163,184,.25) !important;
    border-color: rgba(148,163,184,.4) !important;
    color: #cbd5e1 !important;
    animation: none !important;
}

/* ── TOAST NOTIFICATION ─────────────────────────────────────── */
.lsqz-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #0f172a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    z-index: 99998;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    max-width: 90vw;
    pointer-events: none;
}

.lsqz-toast.lsqz-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.lsqz-toast.lsqz-toast-error {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.lsqz-toast.lsqz-toast-success {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
}

.lsqz-toast span:first-child {
    font-weight: 700;
    font-size: 16px;
}

/* ── MOBILE TWEAKS FOR NEW FLOW ─────────────────────────────── */
@media (max-width: 540px) {
    .lsqz-start-gate {
        padding: 28px 18px;
        border-radius: 14px;
    }
    .lsqz-start-prompt .lsqz-start-icon {
        width: 56px;
        height: 56px;
    }
    .lsqz-start-title {
        font-size: 19px;
    }
    .lsqz-start-desc {
        font-size: 13px;
    }
    .lsqz-start-btn {
        max-width: 100%;
        width: 100%;
    }
    .lsqz-identity-panel {
        margin-top: 18px;
        padding-top: 18px;
    }
    .lsqz-identity-intro {
        font-size: 13px;
        padding: 10px 12px;
    }
    .lsqz-prompt-toggle-label {
        font-size: 10px;
    }
    .lsqz-prompt-toggle-icon {
        width: 24px;
        height: 24px;
        font-size: 18px;
    }
    .lsqz-toast {
        bottom: 20px;
        font-size: 13px;
        padding: 10px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════════
 * END v2.1.45 ADDITIONS
 * ═══════════════════════════════════════════════════════════════ */

/* =============================================================================
   v3.2.4 — Inline Ready Check states (Skenario A — no overlay)
   ============================================================================= */

/* v3.2.4 — Action group: just the primary button (cancel is now below status text) */
.lsqz-start-action-group {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

/* v3.2.4 — Cancel button (ghost style, below status text, READY state only) */
/* Uses higher specificity to override .lsqz-pte-container .lsqz-btn defaults */
.lsqz-pte-container .lsqz-btn.lsqz-btn-cancel,
.lsqz-pte-container button.lsqz-btn.lsqz-btn-cancel {
    background: transparent !important;
    color: #64748b !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer;
    box-shadow: none !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: #cbd5e1;
    transition: color .15s ease, text-decoration-color .15s ease;
    min-height: auto;
    width: auto;
    display: inline-flex !important;
}

.lsqz-pte-container .lsqz-btn.lsqz-btn-cancel:hover,
.lsqz-pte-container button.lsqz-btn.lsqz-btn-cancel:hover {
    background: transparent !important;
    color: #475569 !important;
    text-decoration-color: #94a3b8;
    transform: none !important;
    box-shadow: none !important;
}

.lsqz-pte-container .lsqz-btn.lsqz-btn-cancel:active {
    transform: scale(0.98) !important;
}

/* Start button — Downloading state visual hint */
.lsqz-btn-start.is-downloading {
    opacity: 0.75;
    cursor: not-allowed;
}

/* Start button — Ready state (after image loaded) */
.lsqz-btn-start.is-ready {
    background: #294D8C;
    box-shadow: 0 4px 14px rgba(41, 77, 140, 0.25);
}

/* Inline spinner inside button (replaces icon during download) */
.lsqz-spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lsqz-spin-inline .8s linear infinite;
    vertical-align: -2px;
    margin-right: 6px;
}

@keyframes lsqz-spin-inline {
    to { transform: rotate(360deg); }
}

/* Status text below action group */
.lsqz-start-status {
    font-size: 14px;
    color: #64748b;
    text-align: center;
    margin-top: 8px;
    font-weight: 500;
    min-height: 20px;
}

.lsqz-start-status.is-ready {
    color: #16a34a;
}

.lsqz-start-status.is-error {
    color: #dc2626;
}

/* v3.2.4.2 — Cancel button wrapper (controls placement below status text) */
.lsqz-start-cancel-wrap {
    text-align: center;
    margin-top: 6px;
}

/* =============================================================================
   v3.2.4 — Hotfix (Task 37.2): CORRECTED CSS specificity for hide class

   The previous .lsqz-rck-hidden { display:none !important; } had specificity
   0-1-0 which lost to .lsqz-pte-container .lsqz-btn (0-2-0). We now use
   compound selectors to match or exceed the conflicting rules.
   ============================================================================= */

/* Higher-specificity hide rule — beats .lsqz-pte-container .lsqz-btn */
.lsqz-pte-container .lsqz-rck-hidden,
.lsqz-pte-container .lsqz-btn.lsqz-rck-hidden,
.lsqz-pte-container .lsqz-start-status.lsqz-rck-hidden {
    display: none !important;
}

/* =============================================================================
   v3.2.4.3 — DEFENSIVE WHITESPACE KILL

   After multiple iterations, the whitespace issue around the TASK QUESTION
   label persists. Source unknown (could be theme CSS, plugin CSS, or runtime
   styles). This block uses HIGHEST SPECIFICITY (#id + !important) to force
   override any conflicting rule.

   Targets:
   - #ielts-w-prompt-block (the parent card) — tight padding
   - Direct children — no margins
   - .lsqz-prompt-toggle — no padding, tight margin to text
   - .lsqz-prompt-text — tight padding-top
   ============================================================================= */

/* Force tight padding on the parent prompt card */
.lsqz-pte-container #ielts-w-prompt-block {
    padding: 10px 14px !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Kill all margins on DIRECT CHILDREN of the prompt card */
.lsqz-pte-container #ielts-w-prompt-block > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Toggle button: zero padding, tight bottom margin (gap to text) */
.lsqz-pte-container #ielts-w-prompt-block > #ielts-w-prompt-toggle,
.lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-toggle {
    padding: 0 !important;
    margin: 0 0 4px !important;
    min-height: auto !important;
    height: auto !important;
}

/* Toggle button children (label + icon): no extra margins */
.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-toggle > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Prompt text: tight top padding (border-top divider preserved) */
.lsqz-pte-container #ielts-w-prompt-block > #ielts-w-prompt-text,
.lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-text {
    padding-top: 6px !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Prompt text inner paragraphs: tighter spacing */
.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-text p {
    margin: 0 0 8px !important;
}

.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-text p:last-child {
    margin-bottom: 0 !important;
}

/* Mobile breakpoints — same aggressive override */
@media (max-width: 540px) {
    .lsqz-pte-container #ielts-w-prompt-block {
        padding: 8px 12px !important;
        margin-bottom: 8px !important;
    }
    .lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-toggle {
        margin: 0 0 4px !important;
    }
    .lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-text {
        padding-top: 6px !important;
    }
}

@media (max-width: 380px) {
    .lsqz-pte-container #ielts-w-prompt-block {
        padding: 6px 10px !important;
        margin-bottom: 6px !important;
    }
    .lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-toggle {
        margin: 0 0 3px !important;
    }
    .lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-text {
        padding-top: 5px !important;
    }
}

/* =============================================================================
   v3.2.4.4 — KILL INHERITED min-height ON PROMPT BLOCK

   DevTools confirmed: card has ~140px unexplained whitespace inside.
   No height/min-height in our plugin CSS. Must be inherited from theme/parent.

   Solution: Explicitly reset height/min-height with highest specificity to
   force card to size based on its actual content only.
   ============================================================================= */

/* Force prompt card to natural content size */
.lsqz-pte-container #ielts-w-prompt-block,
.lsqz-pte-container .lsqz-pte-prompt {
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
}

/* Reset min-height on ALL descendants (catch-all for nested theme rules) */
.lsqz-pte-container #ielts-w-prompt-block *,
.lsqz-pte-container .lsqz-pte-prompt * {
    min-height: 0 !important;
}

/* Special case: keep tap target for the toggle button (a11y minimum) */
.lsqz-pte-container #ielts-w-prompt-block #ielts-w-prompt-toggle,
.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-toggle {
    min-height: 28px !important;  /* Just enough for label chip (28px = label + tap area) */
    height: auto !important;
}

/* =============================================================================
   v3.2.4.5 — KILL ANONYMOUS TEXT NODE WHITESPACE

   DevTools Console proved: card has 431px height despite content only being
   28px (button) + 208px (text) + 16px (padding) = 252px

   Diff: 431 - 252 - 4 (button margin-bottom) = 167px UNEXPLAINED

   Cause: HTML whitespace text nodes between elements render as anonymous
   inline boxes with line-height (1.75 × 15px = ~26px each). Multiple
   whitespace nodes from PHP indentation create cumulative ~60px per node.

   Fix: font-size:0 on parent collapses these. Restore font-size on
   actual content children explicitly.
   ============================================================================= */

/* Parent: zero font-size to collapse whitespace text nodes */
.lsqz-pte-container #ielts-w-prompt-block {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Restore font-size on actual content children */
.lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-toggle,
.lsqz-pte-container #ielts-w-prompt-block > #ielts-w-prompt-toggle {
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.lsqz-pte-container #ielts-w-prompt-block > .lsqz-prompt-text,
.lsqz-pte-container #ielts-w-prompt-block > #ielts-w-prompt-text {
    font-size: 15px !important;
    line-height: 1.75 !important;
}

/* Restore font-size on label chip (descendants of button) */
.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-toggle-label {
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.lsqz-pte-container #ielts-w-prompt-block .lsqz-prompt-toggle-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

.lsqz-pte-container #ielts-w-prompt-block .lsqz-caret-up,
.lsqz-pte-container #ielts-w-prompt-block .lsqz-caret-down {
    font-size: 13px !important;
    line-height: 1 !important;
}