:root {
    --iw-navy: #163b57;
    --iw-navy-dark: #0d2a40;
    --iw-teal: #0f8b8d;
    --iw-teal-soft: #e8f7f6;
    --iw-ink: #17212b;
    --iw-muted: #637381;
    --iw-line: #dce5eb;
    --iw-surface: #ffffff;
    --iw-bg: #f5f8fa;
    --iw-danger: #a33b3b;
    --iw-success: #21734d;
}

.iw-page {
    background: var(--iw-bg);
    color: var(--iw-ink);
    min-height: 70vh;
    padding: 28px 0 64px;
}

.iw-container { max-width: 1180px; }

.iw-breadcrumb {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: .86rem;
    gap: 8px;
    margin-bottom: 18px;
}

.iw-breadcrumb a,
.iw-practice-bar a,
.iw-result-header a { color: var(--iw-teal); text-decoration: none; }

.iw-library-header {
    align-items: center;
    background: linear-gradient(125deg, var(--iw-navy-dark), var(--iw-navy));
    border-radius: 18px;
    color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 26px 30px;
}

.iw-kicker {
    color: #6ed5d0;
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.iw-library-header h1,
.iw-practice-bar h1,
.iw-result-header h1 { font-weight: 760; letter-spacing: -.025em; margin: 0; }
.iw-library-header h1 { font-size: clamp(2rem, 5vw, 3rem); }
.iw-library-header p { color: #dbe7ef; margin: 8px 0 0; max-width: none; width: 100%; }
.iw-library-copy { min-width: 0; width: 100%; }

.iw-filter-search input,
.iw-answer-panel textarea {
    background: #fff;
    border: 1px solid #cdd9e0;
    border-radius: 8px;
    color: var(--iw-ink);
    font: inherit;
    outline: none;
}

.iw-filter-search input { height: 42px; padding: 0 42px 0 11px; }
.iw-filter-search input:focus,
.iw-answer-panel textarea:focus { border-color: var(--iw-teal); box-shadow: 0 0 0 3px rgba(15,139,141,.12); }

.iw-library-layout {
    align-items: start;
    display: grid;
    gap: 20px;
    grid-template-columns: 250px minmax(0, 1fr);
}

.iw-filter-sidebar { min-width: 0; }

.iw-filter-panel {
    background: var(--iw-surface);
    border: 1px solid var(--iw-line);
    border-radius: 12px;
    overflow: hidden;
}

.iw-filter-panel summary {
    cursor: pointer;
    list-style: none;
}

.iw-filter-panel summary::-webkit-details-marker { display: none; }
.iw-filter-mobile-toggle { display: none; }
.iw-filter-body { padding: 16px; }

.iw-filter-heading {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.iw-filter-heading span,
.iw-filter-search > label {
    color: var(--iw-muted);
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.iw-filter-heading h2 { font-size: 1.15rem; margin: 2px 0 0; }
.iw-filter-heading a { color: var(--iw-teal); font-size: .78rem; font-weight: 750; text-decoration: none; }

.iw-filter-search { margin-bottom: 15px; }
.iw-filter-search > label { margin-bottom: 5px; }
.iw-filter-search > div { position: relative; }
.iw-filter-search input { width: 100%; }
.iw-filter-search button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--iw-teal);
    display: flex;
    height: 40px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 1px;
    top: 1px;
    width: 40px;
}

.iw-filter-group { border-top: 1px solid var(--iw-line); }
.iw-filter-group > summary {
    align-items: center;
    color: var(--iw-navy);
    display: flex;
    font-size: .84rem;
    font-weight: 800;
    justify-content: space-between;
    padding: 13px 2px;
}

.iw-filter-group > summary > i { font-size: .72rem; transition: transform .2s ease; }
.iw-filter-group[open] > summary > i { transform: rotate(180deg); }
.iw-filter-options { display: grid; gap: 3px; max-height: 270px; overflow-y: auto; padding: 0 0 12px; }
.iw-filter-options > a,
.iw-filter-tree-node a {
    align-items: center;
    border-radius: 7px;
    color: #4d5c68;
    display: flex;
    font-size: .82rem;
    gap: 7px;
    justify-content: space-between;
    line-height: 1.35;
    padding: 8px 9px;
    text-decoration: none;
}

.iw-filter-options a:hover { background: #f2f7f8; color: var(--iw-navy); }
.iw-filter-options a.active { background: var(--iw-teal-soft); color: #087375; font-weight: 750; }
.iw-filter-options a span { min-width: 0; overflow-wrap: anywhere; }

.iw-filter-tree-node { border-left: 1px solid #d5e2e7; margin-left: 9px; }
.iw-filter-tree-node > summary {
    align-items: center;
    color: var(--iw-navy);
    display: grid;
    font-size: .82rem;
    font-weight: 750;
    gap: 5px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 9px 7px 9px 10px;
}

.iw-filter-tree-node > summary small {
    background: #edf3f5;
    border-radius: 999px;
    color: var(--iw-muted);
    font-size: .68rem;
    min-width: 24px;
    padding: 2px 6px;
    text-align: center;
}

.iw-filter-tree-node > summary > i { font-size: .68rem; transition: transform .2s ease; }
.iw-filter-tree-node[open] > summary > i { transform: rotate(90deg); }
.iw-filter-tree-node > div { display: grid; gap: 2px; padding: 0 0 6px 12px; }

.iw-library-results { min-width: 0; }
.iw-active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -3px 0 13px; }
.iw-active-filters a {
    align-items: center;
    background: var(--iw-teal-soft);
    border-radius: 999px;
    color: #087375;
    display: inline-flex;
    font-size: .76rem;
    font-weight: 700;
    gap: 4px;
    max-width: 100%;
    padding: 5px 9px;
    text-decoration: none;
}

.iw-task-summary > div.is-filter-match {
    background: linear-gradient(90deg, var(--iw-teal-soft), transparent);
    box-shadow: inset 3px 0 var(--iw-teal);
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
}

.iw-btn {
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: .88rem;
    font-weight: 750;
    gap: 6px;
    justify-content: center;
    min-height: 42px;
    padding: 9px 14px;
    text-decoration: none;
}

.iw-btn-primary { background: var(--iw-teal); color: #fff; }
.iw-btn-primary:hover { background: #08777a; color: #fff; }
.iw-btn-secondary { background: #fff; border-color: #b8c9d3; color: var(--iw-navy); }
.iw-btn-secondary:hover { background: #f1f6f8; color: var(--iw-navy-dark); }
.iw-btn-ghost { color: var(--iw-muted); }
.iw-btn:disabled { cursor: wait; opacity: .65; }

.iw-library-summary { align-items: center; display: flex; justify-content: space-between; margin-bottom: 12px; }
.iw-library-summary h2 { font-size: 1.2rem; margin: 0; }
.iw-library-summary span { color: var(--iw-muted); font-size: .88rem; }

.iw-test-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iw-test-card {
    background: var(--iw-surface);
    border: 1px solid var(--iw-line);
    border-radius: 14px;
    box-shadow: 0 7px 22px rgba(23, 52, 72, .05);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.iw-card-topline { color: var(--iw-muted); display: flex; font-size: .77rem; font-weight: 700; justify-content: space-between; text-transform: uppercase; }
.iw-test-card > h2 { font-size: 1.18rem; margin: 10px 0 6px; }
.iw-card-description { color: var(--iw-muted); font-size: .9rem; margin: 0 0 12px; }
.iw-task-summary { border-bottom: 1px solid var(--iw-line); border-top: 1px solid var(--iw-line); display: grid; gap: 0; margin-top: auto; }
.iw-task-summary > div { display: grid; grid-template-columns: 65px 1fr; padding: 11px 0; }
.iw-task-summary > div + div { border-top: 1px dashed var(--iw-line); }
.iw-task-summary strong { color: var(--iw-navy); font-size: .86rem; grid-row: span 2; }
.iw-task-summary span { font-size: .86rem; font-weight: 650; }
.iw-task-summary small { color: var(--iw-muted); }
.iw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; }
.iw-card-actions .iw-btn { flex: 1 1 auto; }

.iw-guidance { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 22px; }
.iw-guidance div { background: #edf4f7; border-radius: 10px; display: grid; gap: 3px; padding: 14px; }
.iw-guidance strong { color: var(--iw-navy); }
.iw-guidance span { color: var(--iw-muted); font-size: .85rem; }
.iw-empty { background: #fff; border: 1px dashed #b9cad4; border-radius: 14px; padding: 60px 20px; text-align: center; }
.iw-empty i { color: var(--iw-teal); font-size: 2.5rem; }
.iw-empty h2 { font-size: 1.25rem; margin: 12px 0 4px; }
.iw-empty p { color: var(--iw-muted); margin: 0; }

.iw-practice { padding-top: 18px; }
.iw-practice-bar,
.iw-result-header {
    align-items: center;
    background: var(--iw-surface);
    border: 1px solid var(--iw-line);
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    padding: 17px 20px;
}

.iw-practice-bar h1,
.iw-result-header h1 { font-size: clamp(1.35rem, 3vw, 1.9rem); margin-top: 5px; }
.iw-practice-bar > div > span,
.iw-result-header > div > p { color: var(--iw-muted); font-size: .9rem; margin: 3px 0 0; }
.iw-timer { background: var(--iw-navy); border-radius: 10px; color: #fff; min-width: 130px; padding: 9px 14px; text-align: center; }
.iw-timer span { color: #cbdce7; display: block; font-size: .7rem; text-transform: uppercase; }
.iw-timer strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.iw-timer.is-expired { background: #963f3f; }

.iw-task-jump { display: flex; gap: 8px; margin: 0 0 14px; position: sticky; top: 8px; z-index: 4; }
.iw-task-jump a { background: var(--iw-navy); border-radius: 8px; color: #fff; font-size: .85rem; font-weight: 700; padding: 8px 14px; text-decoration: none; }
.iw-practice-grid { align-items: start; display: grid; gap: 14px; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.iw-prompt-panel,
.iw-answer-panel,
.iw-review-card {
    background: var(--iw-surface);
    border: 1px solid var(--iw-line);
    border-radius: 12px;
    padding: 18px;
}

.iw-panel-heading { align-items: center; border-bottom: 1px solid var(--iw-line); display: flex; justify-content: space-between; margin-bottom: 14px; padding-bottom: 10px; }
.iw-panel-heading span { color: var(--iw-teal); font-size: .75rem; font-weight: 750; text-transform: uppercase; }
.iw-prompt-instructions { background: #f0f6f8; border-left: 3px solid var(--iw-teal); margin-bottom: 14px; padding: 10px 12px; }
.iw-prompt-instructions p:last-child,
.iw-prompt-text p:last-child { margin-bottom: 0; }
.iw-prompt-text { font-size: .96rem; line-height: 1.7; }
.iw-plain-content { white-space: pre-wrap; }
.iw-prompt-image { margin: 14px 0; text-align: center; }
.iw-prompt-image img { background: #fff; border: 1px solid var(--iw-line); border-radius: 8px; height: auto; max-height: 520px; max-width: 100%; object-fit: contain; }
.iw-prompt-image figcaption { color: var(--iw-muted); font-size: .75rem; margin-top: 5px; }
.iw-answer-heading { align-items: end; display: flex; justify-content: space-between; margin-bottom: 9px; }
.iw-answer-heading label { font-size: 1rem; font-weight: 750; }
.iw-answer-heading span { color: var(--iw-muted); font-size: .8rem; }
.iw-answer-panel textarea { line-height: 1.65; min-height: 430px; padding: 14px; resize: vertical; width: 100%; }
.iw-word-note { color: var(--iw-muted); font-size: .78rem; margin: 7px 0 0; }
.iw-word-note.is-under { color: #9a5f13; font-weight: 650; }
.iw-submit-row,
.iw-full-submit,
.iw-ai-request { align-items: center; display: flex; gap: 14px; justify-content: space-between; }
.iw-submit-row { border-top: 1px solid var(--iw-line); margin-top: 13px; padding-top: 13px; }
.iw-submit-row > span,
.iw-full-submit span,
.iw-ai-request span { color: var(--iw-muted); font-size: .82rem; }
.iw-validation { color: var(--iw-danger); display: block; font-size: .82rem; margin: 6px 0; }
.iw-full-task { scroll-margin-top: 65px; }
.iw-full-task + .iw-full-task { border-top: 3px solid #dbe5eb; margin-top: 24px; padding-top: 24px; }
.iw-full-task-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 10px; }
.iw-full-task-heading span { color: var(--iw-teal); font-size: .78rem; font-weight: 800; text-transform: uppercase; }
.iw-full-task-heading h2 { font-size: 1.2rem; margin: 2px 0 0; }
.iw-full-task-heading > strong { color: var(--iw-muted); font-size: .85rem; }
.iw-full-submit { background: var(--iw-navy); border-radius: 12px; color: #fff; margin-top: 20px; padding: 18px; }
.iw-full-submit div { display: grid; gap: 3px; }
.iw-full-submit span { color: #d6e5ee; }

.iw-result-container { max-width: 1080px; }
.iw-result-stats { display: flex; flex-wrap: wrap; gap: 7px; justify-content: end; }
.iw-result-stats span { background: #edf4f7; border-radius: 8px; color: var(--iw-muted); display: grid; font-size: .72rem; min-width: 90px; padding: 8px 10px; text-align: center; }
.iw-result-stats strong { color: var(--iw-navy); font-size: .9rem; }
.iw-alert { align-items: center; border: 1px solid; border-radius: 10px; display: flex; gap: 10px; justify-content: space-between; margin: 12px 0; padding: 11px 14px; }
.iw-alert a { font-weight: 750; white-space: nowrap; }
.iw-alert-success { background: #edf8f2; border-color: #bce0cd; color: var(--iw-success); }
.iw-alert-error { background: #fff1f1; border-color: #edc7c7; color: var(--iw-danger); }
.iw-alert-info { background: #eef6fa; border-color: #c6dce7; color: var(--iw-navy); }
.iw-review-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.iw-review-card h2,
.iw-review-card h3 { font-size: 1rem; margin: 0 0 12px; }
.iw-submitted-answer { background: transparent; font-family: inherit; font-size: .92rem; line-height: 1.7; margin: 0; min-height: 160px; overflow-wrap: anywhere; white-space: pre-wrap; }

.iw-ai-section { background: #fff; border: 1px solid var(--iw-line); border-radius: 14px; margin-top: 16px; padding: 20px; }
.iw-ai-section-nested { background: #f8fafb; margin-top: 14px; }
.iw-section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 14px; }
.iw-section-heading span:first-child { color: var(--iw-teal); font-size: .72rem; font-weight: 800; text-transform: uppercase; }
.iw-section-heading h2,
.iw-section-heading h3 { font-size: 1.2rem; margin: 2px 0 0; }
.iw-status { border-radius: 999px; font-size: .74rem; font-weight: 750; padding: 5px 9px; }
.iw-status-ready { background: #e7f6ed; color: var(--iw-success); }
.iw-status-working { background: #fff3d6; color: #8b600c; }
.iw-ai-request { background: var(--iw-teal-soft); border-radius: 10px; padding: 14px; }
.iw-ai-request > div { display: grid; gap: 3px; }
.iw-ai-placeholder { align-items: center; color: var(--iw-muted); display: flex; gap: 10px; justify-content: center; padding: 25px; }
.iw-ai-placeholder p { margin: 0; }
.iw-spinner { animation: iw-spin .8s linear infinite; border: 3px solid #c6dbdd; border-radius: 50%; border-top-color: var(--iw-teal); height: 24px; width: 24px; }
@keyframes iw-spin { to { transform: rotate(360deg); } }

.iw-feedback-header { align-items: center; background: var(--iw-navy); border-radius: 10px; color: #fff; display: flex; justify-content: space-between; padding: 14px 18px; }
.iw-feedback-header > div { align-items: center; display: flex; gap: 12px; }
.iw-feedback-header span { color: #cfe1ea; font-size: .8rem; }
.iw-feedback-header strong { color: #70ded6; font-size: 2rem; }
.iw-feedback-header p { color: #d8e6ed; font-size: .76rem; margin: 0; max-width: 420px; }
.iw-score-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 12px; }
.iw-score-grid article,
.iw-feedback-summary,
.iw-feedback-columns section,
.iw-feedback-detail { background: #f6f9fa; border: 1px solid var(--iw-line); border-radius: 10px; padding: 14px; }
.iw-score-grid article > div { align-items: start; display: flex; justify-content: space-between; }
.iw-score-grid h3,
.iw-feedback-summary h3,
.iw-feedback-columns h3,
.iw-feedback-detail h3 { font-size: .92rem; margin: 0 0 6px; }
.iw-score-grid article > div strong { background: var(--iw-teal-soft); border-radius: 7px; color: #087375; padding: 3px 7px; }
.iw-score-grid p,
.iw-feedback-summary p,
.iw-feedback-columns li,
.iw-feedback-detail p { color: #42515c; font-size: .84rem; line-height: 1.55; margin-bottom: 0; }
.iw-feedback-summary { margin-top: 10px; }
.iw-feedback-columns { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.iw-feedback-columns ul,
.iw-feedback-columns ol { margin: 7px 0 0; padding-left: 20px; }
.iw-feedback-detail { margin-top: 10px; }
.iw-feedback-detail > article { border-top: 1px dashed #cdd9e0; margin-top: 9px; padding-top: 9px; }
.iw-feedback-detail p + p { margin-top: 4px; }
.iw-feedback-detail p span { color: var(--iw-navy); font-weight: 750; }

/* Shared Writing feedback architecture: IELTS copy and VSTEP use the same visual language. */
.iw-ai-feedback.writing-ai-feedback {
    --writing-result-title: var(--iw-navy);
    --writing-result-primary: var(--iw-teal);
    --writing-result-text: #46576d;
    --writing-task-color: #4f8ff7;
    --writing-organization-color: #22b8a7;
    --writing-vocabulary-color: #f0a63a;
    --writing-grammar-color: #8a7cf4;
    display: grid;
    gap: 16px;
}

.iw-ai-feedback .writing-ai-score-overview,
.iw-ai-feedback .writing-ai-criteria-feedback,
.iw-ai-feedback .writing-ai-additional-feedback {
    background: #fff;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(37, 84, 166, .08);
    overflow: hidden;
    padding: 20px;
}

.iw-ai-feedback .writing-ai-score-overview {
    background: radial-gradient(circle at 8% 0%, rgba(79, 143, 247, .13), transparent 34%), radial-gradient(circle at 95% 100%, rgba(138, 124, 244, .11), transparent 32%), #fff;
    border-color: #cfe0f6;
}

.iw-ai-feedback .writing-ai-score-header {
    align-items: flex-start;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.iw-ai-feedback .writing-ai-block-kicker {
    color: #50709f;
    display: block;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.iw-ai-feedback .writing-ai-score-header h3,
.iw-ai-feedback .writing-ai-block-heading h3 {
    color: var(--writing-result-title);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.25;
    margin: 0;
}

.iw-ai-feedback .writing-ai-task-score {
    align-items: center;
    background: #eef6ff;
    border: 1px solid #cfe2fb;
    border-radius: 999px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    padding: 7px 12px 7px 14px;
}

.iw-ai-feedback .writing-ai-task-score span { color: #4d6484; font-size: 12px; font-weight: 800; }
.iw-ai-feedback .writing-ai-task-score strong { color: #2454a6; font-size: 20px; line-height: 1; }

.iw-ai-feedback .writing-ai-score-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.iw-ai-feedback .writing-ai-score-item {
    --writing-score-color: var(--writing-task-color);
    align-items: center;
    background: #f5f9ff;
    border: 1px solid #d8e7fb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
    min-width: 0;
    padding: 14px 8px 12px;
    text-align: center;
}

.iw-ai-feedback .writing-ai-score-item.is-organization { --writing-score-color: var(--writing-organization-color); background: #effbf8; border-color: #ccefe8; }
.iw-ai-feedback .writing-ai-score-item.is-vocabulary { --writing-score-color: var(--writing-vocabulary-color); background: #fff9ed; border-color: #f6e2b6; }
.iw-ai-feedback .writing-ai-score-item.is-grammar { --writing-score-color: var(--writing-grammar-color); background: #f6f4ff; border-color: #e0dcfb; }

.iw-ai-feedback .writing-ai-score-ring {
    align-items: center;
    background: conic-gradient(var(--writing-score-color) 0 var(--writing-score-angle), rgba(148, 163, 184, .18) var(--writing-score-angle) 360deg);
    border-radius: 50%;
    display: inline-flex;
    height: 76px;
    justify-content: center;
    position: relative;
    width: 76px;
}

.iw-ai-feedback .writing-ai-score-ring::before { background: rgba(255, 255, 255, .96); border-radius: 50%; content: ""; inset: 6px; position: absolute; }
.iw-ai-feedback .writing-ai-score-ring span { color: var(--writing-result-title); font-size: 23px; font-weight: 950; letter-spacing: -.03em; line-height: 1; position: relative; z-index: 1; }
.iw-ai-feedback .writing-ai-score-item h4 { color: #30445f; font-size: 13px; font-weight: 900; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.iw-feedback-disclaimer { color: var(--iw-muted); font-size: .76rem; margin: 13px 0 0; text-align: right; }

.iw-ai-feedback .writing-ai-block-heading { border-bottom: 1px solid #e8eef5; margin-bottom: 4px; padding-bottom: 14px; }
.iw-ai-feedback .writing-ai-criterion-row { --writing-criterion-color: var(--writing-task-color); align-items: flex-start; display: grid; gap: 13px; grid-template-columns: 8px minmax(0, 1fr); padding: 17px 2px; }
.iw-ai-feedback .writing-ai-criterion-row + .writing-ai-criterion-row { border-top: 1px solid #edf1f6; }
.iw-ai-feedback .writing-ai-criterion-row.is-organization { --writing-criterion-color: var(--writing-organization-color); }
.iw-ai-feedback .writing-ai-criterion-row.is-vocabulary { --writing-criterion-color: var(--writing-vocabulary-color); }
.iw-ai-feedback .writing-ai-criterion-row.is-grammar { --writing-criterion-color: var(--writing-grammar-color); }
.iw-ai-feedback .writing-ai-criterion-marker { background: var(--writing-criterion-color); border-radius: 999px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--writing-criterion-color) 16%, transparent); height: 8px; margin-top: 7px; width: 8px; }
.iw-ai-feedback .writing-ai-criterion-row h4,
.iw-ai-feedback .writing-ai-summary-panel h4,
.iw-ai-feedback .writing-ai-mistakes h4 { color: #253a58; font-size: 15px; font-weight: 900; margin: 0 0 6px; }
.iw-ai-feedback .writing-ai-criterion-row p,
.iw-ai-feedback .writing-ai-summary-panel p,
.iw-ai-feedback .writing-ai-mistakes p { color: #46576d; line-height: 1.65; margin: 0; }
.iw-ai-feedback .writing-ai-criterion-detail { border-left: 3px solid #dbe6f3; margin-top: 11px; padding-left: 12px; }
.iw-ai-feedback .writing-ai-criterion-detail.is-limiter { border-left-color: #f2c276; }
.iw-ai-feedback .writing-ai-criterion-detail.is-direction { border-left-color: #78cdbf; }
.iw-ai-feedback .writing-ai-criterion-detail h5 { color: #60738c; font-size: 11px; font-weight: 900; letter-spacing: .05em; margin: 0 0 3px; text-transform: uppercase; }

.iw-ai-feedback .writing-ai-additional-feedback { display: grid; gap: 14px; }
.iw-ai-feedback .writing-ai-additional-feedback > .writing-ai-block-heading { margin-bottom: 0; }
.iw-ai-feedback .writing-ai-summary-panel,
.iw-ai-feedback .writing-ai-mistakes { background: #f8fbff; border: 1px solid #e1eaf5; border-radius: 10px; padding: 15px 16px; }
.iw-ai-feedback .writing-ai-mistake-item { background: #fff; border: 1px solid #e7edf5; border-radius: 8px; margin-top: 10px; padding: 12px 14px; }
.iw-ai-feedback .writing-ai-mistake-item h5 { color: #263b58; font-size: 14px; font-weight: 900; margin: 0 0 8px; }
.iw-ai-feedback .writing-ai-mistake-item p + p { margin-top: 6px; }
.iw-ai-feedback .writing-ai-severity { background: #fff3d7; border: 1px solid #f4d492; border-radius: 999px; color: #8b5a08; display: inline-flex; font-size: 10px; font-weight: 900; letter-spacing: .05em; margin-bottom: 7px; padding: 3px 8px; text-transform: uppercase; }
.iw-ai-feedback .writing-ai-severity.is-critical { background: #fff0f0; border-color: #f3c6c6; color: #a33c3c; }

.iw-ai-feedback .writing-feedback-next-steps { background: linear-gradient(135deg, #ecf7ff 0%, #f4f1ff 100%); border: 1px solid #cddff6; border-left: 4px solid var(--writing-result-primary); border-radius: 10px; padding: 16px 18px; }
.iw-ai-feedback .writing-feedback-next-steps-label { color: var(--writing-result-primary); display: block; font-size: 12px; font-weight: 900; letter-spacing: .08em; margin-bottom: 4px; text-transform: uppercase; }
.iw-ai-feedback .writing-feedback-next-steps h3 { color: var(--writing-result-title); font-size: 18px; font-weight: 900; margin: 0 0 10px; }
.iw-ai-feedback .writing-feedback-learning-focus ul { display: grid; gap: 8px; margin: 0; padding-left: 22px; }
.iw-ai-feedback .writing-feedback-learning-focus li { color: var(--writing-result-text); line-height: 1.55; padding-left: 3px; }
.iw-ai-feedback .writing-learning-intro { color: #405775; line-height: 1.6; margin: 0 0 10px; }
.iw-full-result-task { background: #fff; border: 1px solid var(--iw-line); border-radius: 14px; margin-top: 16px; padding: 18px; }

@media (max-width: 900px) {
    .iw-library-header { align-items: start; flex-direction: column; gap: 18px; }
    .iw-test-grid,
    .iw-practice-grid,
    .iw-review-grid { grid-template-columns: 1fr; }
    .iw-guidance { grid-template-columns: 1fr; }
    .iw-answer-panel textarea { min-height: 340px; }
    .iw-ai-feedback .writing-ai-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 901px) {
    .iw-library-header h1 { white-space: nowrap; }
}

@media (min-width: 992px) {
    .iw-filter-sidebar { position: sticky; top: 16px; }
    .iw-filter-panel > .iw-filter-body { display: block !important; }
}

@media (max-width: 991px) {
    .iw-library-layout { grid-template-columns: 1fr; }
    .iw-filter-mobile-toggle {
        align-items: center;
        display: flex;
        font-size: .88rem;
        font-weight: 800;
        gap: 9px;
        justify-content: space-between;
        padding: 13px 15px;
    }
    .iw-filter-mobile-toggle span { align-items: center; display: flex; gap: 7px; }
    .iw-filter-mobile-toggle strong {
        background: var(--iw-teal);
        border-radius: 999px;
        color: #fff;
        font-size: .7rem;
        margin-left: auto;
        min-width: 22px;
        padding: 2px 6px;
        text-align: center;
    }
    .iw-filter-mobile-toggle > i { font-size: .72rem; transition: transform .2s ease; }
    .iw-filter-panel[open] > .iw-filter-mobile-toggle > i { transform: rotate(180deg); }
    .iw-filter-body { border-top: 1px solid var(--iw-line); }
}

@media (max-width: 640px) {
    .iw-page { padding-top: 14px; }
    .iw-library-header { border-radius: 12px; padding: 20px; }
    .iw-practice-bar,
    .iw-result-header { align-items: stretch; flex-direction: column; gap: 12px; }
    .iw-timer { align-self: stretch; }
    .iw-submit-row,
    .iw-full-submit,
    .iw-ai-request,
    .iw-feedback-header { align-items: stretch; flex-direction: column; }
    .iw-full-task-heading { align-items: start; flex-direction: column; gap: 5px; }
    .iw-result-stats { justify-content: start; }
    .iw-score-grid,
    .iw-feedback-columns { grid-template-columns: 1fr; }
    .iw-alert { align-items: start; flex-direction: column; }
    .iw-ai-feedback .writing-ai-score-overview,
    .iw-ai-feedback .writing-ai-criteria-feedback,
    .iw-ai-feedback .writing-ai-additional-feedback { border-radius: 12px; padding: 16px; }
    .iw-ai-feedback .writing-ai-score-header { align-items: stretch; display: grid; gap: 10px; }
    .iw-ai-feedback .writing-ai-task-score { justify-content: space-between; width: 100%; }
    .iw-ai-feedback .writing-ai-score-grid { gap: 9px; }
    .iw-ai-feedback .writing-ai-score-ring { height: 64px; width: 64px; }
    .iw-ai-feedback .writing-ai-score-ring span { font-size: 20px; }
    .iw-feedback-disclaimer { text-align: left; }
}