:root {
    --bg: #f5f7fb;
    --surface: #ffffff;
    --text: #172033;
    --muted: #687386;
    --line: #e4e9f1;
    --primary: #3157d5;
    --primary-dark: #2446b5;
    --strength: #e8f7ed;
    --weakness: #fff0ee;
    --opportunity: #eaf3ff;
    --threat: #fff7df;
    --shadow: 0 10px 35px rgba(23,32,51,.07);
    --radius: 18px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; }

.app-header {
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand-mark, .brand-badge {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: var(--primary);
    color: white;
    font-weight: 800;
}
.brand small { display: block; color: var(--muted); font-size: 11px; font-weight: 500; }

nav { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.user-pill { background: #eef1f7; padding: 8px 12px; border-radius: 999px; }

.app-main { max-width: 1180px; margin: 0 auto; padding: 42px 24px 80px; }

.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:30px; }
.page-heading.compact { margin-bottom: 24px; }
.page-heading h1 { font-size: 36px; line-height:1.15; margin: 5px 0 8px; letter-spacing:-.03em; }
.page-heading p { color: var(--muted); max-width: 750px; margin:0; }

.eyebrow, .quadrant-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary);
}

.btn {
    appearance:none; border:0; border-radius:10px;
    padding:11px 17px; font-weight:700; cursor:pointer;
    font-size:14px; display:inline-block;
}
.btn-primary { background:var(--primary); color:white; }
.btn-primary:hover { background:var(--primary-dark); }
.btn-secondary { background:#e9edf5; color:var(--text); }
.btn-large { padding:14px 22px; font-size:16px; }
.btn-block { width:100%; }
.btn-link { border:0; background:none; color:var(--primary); padding:8px 0; font-weight:700; cursor:pointer; }

.card, .tutor-card, .swot-entry-card, .summary-quadrant, .metric-card {
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}

.card { padding:24px; }
.card-grid, .faculty-preview { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

.info-banner {
    background:#eef3ff; border:1px solid #dce5ff;
    padding:16px 18px; border-radius:14px; margin:20px 0 30px;
}

.empty-state { background:white; border:1px dashed #ccd4e0; border-radius:18px; padding:36px; text-align:center; }

.status { display:inline-block; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:800; text-transform:uppercase; }
.status-draft { background:#eef1f5; }
.status-submitted { background:#e8f0ff; color:#274bb8; }
.status-validated { background:#fff3d7; color:#805600; }
.status-completed { background:#e5f7eb; color:#20713c; }

.matrix-explainer {
    display:grid; grid-template-columns:110px 1fr 1fr;
    gap:8px; margin:25px 0 35px;
}
.matrix-head, .matrix-side { display:grid; place-items:center; font-size:11px; letter-spacing:.1em; font-weight:800; color:var(--muted); }
.matrix-cell { border-radius:14px; padding:18px; display:flex; flex-direction:column; min-height:95px; }
.matrix-cell span { color:#596375; font-size:14px; margin-top:5px; }
.matrix-cell.strength { background:var(--strength); }
.matrix-cell.weakness { background:var(--weakness); }
.matrix-cell.opportunity { background:var(--opportunity); }
.matrix-cell.threat { background:var(--threat); }

.tutor-grid, .swot-form-grid, .swot-summary-grid {
    display:grid; grid-template-columns:repeat(2,1fr); gap:20px;
}

.tutor-card { padding:25px; }
.tutor-card h2 { margin:6px 0 8px; }
.tutor-card li { margin-bottom:5px; }
.example { padding:11px 13px; border-radius:10px; margin-top:10px; font-size:14px; }
.example.good { background:#edf8f0; }
.example.bad { background:#fff1ef; }
.example small { display:block; margin-left:18px; color:var(--muted); }
.strength-border { border-top:5px solid #61ad77; }
.weakness-border { border-top:5px solid #df8177; }
.opportunity-border { border-top:5px solid #669ee7; }
.threat-border { border-top:5px solid #d8af3e; }
.center-actions { text-align:center; margin:32px 0; }

.swot-entry-card { padding:22px; box-shadow:none; }
.swot-entry-card.strength { background:#fbfffc; }
.swot-entry-card.weakness { background:#fffdfc; }
.swot-entry-card.opportunity { background:#fbfdff; }
.swot-entry-card.threat { background:#fffefa; }

.swot-entry-head { display:flex; justify-content:space-between; gap:12px; }
.swot-entry-head h2 { margin:3px 0; font-size:25px; }
.swot-entry-head p { margin:0 0 16px; color:var(--muted); font-size:14px; }
.entry-counter { font-size:12px; color:var(--muted); white-space:nowrap; }

.entry-row { display:grid; grid-template-columns:24px 1fr 24px; gap:8px; align-items:start; margin-bottom:10px; }
.entry-number { width:23px; height:23px; display:grid; place-items:center; background:#eef1f6; border-radius:50%; font-size:11px; font-weight:800; margin-top:9px; }
.entry-row textarea {
    width:100%; resize:vertical; min-height:58px;
    border:1px solid #d8deea; border-radius:10px; padding:11px 12px;
    font:inherit; background:white;
}
.entry-row textarea:focus { outline:2px solid #cdd8ff; border-color:var(--primary); }
.remove-entry { border:0; background:none; cursor:pointer; font-size:22px; color:#9a5560; margin-top:6px; }

.sticky-actions {
    position:sticky; bottom:18px; margin-top:25px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
    border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow);
    padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:20px;
}
.sticky-actions p { margin:0; font-size:13px; }

.summary-quadrant { padding:24px; box-shadow:none; }
.summary-quadrant.strength { background:var(--strength); }
.summary-quadrant.weakness { background:var(--weakness); }
.summary-quadrant.opportunity { background:var(--opportunity); }
.summary-quadrant.threat { background:var(--threat); }
.summary-quadrant h2 { margin:4px 0 10px; }
.summary-quadrant li { margin-bottom:8px; }

.phase-chip { background:#ecefff; color:#324caa; border-radius:999px; padding:9px 12px; font-size:12px; font-weight:700; }

.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:28px; }
.metric-card { padding:20px; }
.metric-card span, .metric-card small { display:block; color:var(--muted); }
.metric-card strong { display:block; font-size:34px; margin:3px 0; }
.faculty-preview { margin-bottom:32px; }

.table-wrap { overflow:auto; background:white; border:1px solid var(--line); border-radius:15px; }
table { width:100%; border-collapse:collapse; }
th, td { padding:13px 15px; text-align:left; border-bottom:1px solid var(--line); font-size:14px; }
th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }

.auth-shell { min-height:70vh; display:grid; place-items:center; }
.auth-card {
    width:min(430px, 100%); padding:34px; background:white; border:1px solid var(--line);
    border-radius:20px; box-shadow:var(--shadow);
}
.auth-card .brand-badge { margin-bottom:18px; }
.auth-card h1 { margin:0 0 5px; }
.auth-card label { display:block; font-weight:700; margin:17px 0 6px; }
.auth-card input { width:100%; border:1px solid #d8deea; border-radius:10px; padding:12px; font:inherit; }
.auth-card .btn { margin-top:20px; }
.muted { color:var(--muted); }

.message { padding:13px 15px; border-radius:10px; margin-bottom:20px; }
.message.success { background:#e6f7eb; }
.message.error { background:#fff0ee; color:#8d342b; }

footer { text-align:center; color:#8b95a6; font-size:12px; padding:25px; }

@media (max-width: 800px) {
    .header-inner, .page-heading, .sticky-actions { flex-direction:column; align-items:stretch; }
    nav { flex-wrap:wrap; }
    .tutor-grid, .swot-form-grid, .swot-summary-grid, .card-grid, .faculty-preview { grid-template-columns:1fr; }
    .metric-grid { grid-template-columns:repeat(2,1fr); }
    .matrix-explainer { grid-template-columns:75px 1fr 1fr; }
    .app-main { padding:28px 14px 70px; }
    .page-heading h1 { font-size:30px; }
}

.privacy-note { margin-top:18px; font-size:12px; color:var(--muted); }


/* AI Phase */
.small-text { font-size: 12px; }

.ai-explainer { max-width: 850px; margin: 0 auto; }
.check-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px; }
.check-grid div { background:#f7f8fb; border-radius:12px; padding:15px; }
.check-grid strong { display:block; font-size:22px; color:var(--primary); }
.check-grid span { font-size:13px; color:var(--muted); }

.legend-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.validation-list { display:grid; gap:16px; }
.validation-card {
    background:white;
    border:1px solid var(--line);
    border-left:5px solid #9aa5b4;
    border-radius:16px;
    padding:22px;
    box-shadow:0 5px 20px rgba(23,32,51,.04);
}
.validation-card.valid { border-left-color:#60aa77; }
.validation-card.flagged { border-left-color:#df8b52; }
.validation-card.unclear { border-left-color:#8d83cc; }

.validation-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:14px; }
.validation-pill { font-size:11px; font-weight:800; text-transform:uppercase; padding:5px 9px; border-radius:999px; }
.validation-pill.valid { background:#e7f7ec; color:#277143; }
.validation-pill.flagged { background:#fff0e4; color:#9a4d18; }
.validation-pill.unclear { background:#f0edff; color:#584da3; }

.theme-chip, .result-theme {
    display:inline-block;
    background:#eef1f7;
    color:#596375;
    padding:5px 9px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
}
.result-theme { margin-left:6px; padding:3px 7px; }

.mini-label { font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--muted); }
.original-entry blockquote, .theory-card blockquote {
    margin:7px 0 0;
    padding:12px 15px;
    border-left:3px solid #cbd3e2;
    background:#f7f8fb;
    border-radius:0 10px 10px 0;
}
.ai-feedback { background:#f8faff; border:1px solid #e1e8ff; border-radius:12px; padding:15px; margin:15px 0; }
.ai-feedback p { margin:6px 0; }

.final-entry-grid { display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.final-entry-grid label { display:block; font-size:12px; font-weight:800; margin:0 0 6px; }
.final-entry-grid .action-label { margin-top:12px; }
.final-entry-grid textarea, .final-entry-grid select {
    width:100%; border:1px solid #d8deea; border-radius:10px; padding:10px 11px;
    background:white; font:inherit;
}

.section-title { margin-top:38px; }
.recommendation-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.theory-card { background:white; border:1px solid var(--line); border-radius:16px; padding:20px; }
.theory-card h3 { margin:4px 0 10px; }
.try-box { background:#eef3ff; border-radius:10px; padding:12px; margin-top:12px; }

.development-list { display:grid; gap:16px; }
.development-card {
    display:grid; grid-template-columns:54px 1fr; gap:18px;
    background:white; border:1px solid var(--line); border-radius:18px; padding:22px;
}
.priority-number {
    width:46px; height:46px; border-radius:50%; background:var(--primary);
    color:white; display:grid; place-items:center; font-size:20px; font-weight:800;
}
.development-card h2 { margin:3px 0 12px; }
.development-evidence { background:#f7f8fb; padding:12px 14px; border-radius:10px; }
.development-evidence p { margin:4px 0 0; }
.action-grid { display:grid; grid-template-columns:2fr 1.4fr 1fr; gap:14px; margin-top:14px; }
.action-grid > div { border-top:1px solid var(--line); padding-top:11px; }
.action-grid p { margin:4px 0; }

.faculty-metrics { grid-template-columns:repeat(6,1fr); }
.theme-ranking { list-style:none; margin:0; padding:0; }
.theme-ranking li { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid rgba(0,0,0,.06); }
.theory-ranking { display:grid; gap:8px; }
.theory-ranking div { display:flex; justify-content:space-between; gap:20px; padding:10px 0; border-bottom:1px solid var(--line); }

@media (max-width: 900px) {
    .check-grid { grid-template-columns:repeat(2,1fr); }
    .final-entry-grid, .recommendation-grid, .action-grid { grid-template-columns:1fr; }
    .faculty-metrics { grid-template-columns:repeat(2,1fr); }
}


/* =====================================================
   STEP 4 - AI REVIEW
   ===================================================== */

.review-page {
    max-width: 1000px;
    margin: 0 auto;
}

.review-header {
    margin-bottom: 24px;
}

.review-header h1 {
    font-size: 38px;
    line-height: 1.15;
    margin: 6px 0 10px;
}

.review-header p {
    max-width: 760px;
    color: var(--muted);
    font-size: 16px;
}


/* INSTRUCTION FLOW */

.review-instructions {
    display: flex;
    align-items: center;
    gap: 14px;

    background: white;
    border: 1px solid var(--line);
    border-radius: 16px;

    padding: 18px 20px;
    margin-bottom: 28px;
}

.instruction-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
}

.instruction-step > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #edf1ff;
    color: var(--primary);

    font-weight: 800;
}

.instruction-step strong {
    display: block;
    font-size: 13px;
}

.instruction-step small {
    display: block;
    color: var(--muted);
    margin-top: 2px;
}

.instruction-arrow {
    color: #a5adbb;
    font-size: 20px;
}


/* REVIEW CARD */

.review-items {
    display: grid;
    gap: 24px;
}

.review-card {
    background: white;

    border: 1px solid var(--line);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 30px rgba(23, 32, 51, .06);
}

.review-card.good {
    border-top: 5px solid #63ab78;
}

.review-card.attention {
    border-top: 5px solid #df9655;
}

.review-card.unclear {
    border-top: 5px solid #8f83c9;
}


/* CARD HEADER */

.review-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 16px 22px;

    border-bottom: 1px solid var(--line);
}

.quadrant-badge {
    display: inline-block;

    padding: 5px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.quadrant-badge.strength {
    background: var(--strength);
    color: #347046;
}

.quadrant-badge.weakness {
    background: var(--weakness);
    color: #9b4a43;
}

.quadrant-badge.opportunity {
    background: var(--opportunity);
    color: #376ba5;
}

.quadrant-badge.threat {
    background: var(--threat);
    color: #82681d;
}

.item-number {
    margin-left: 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}


/* STATUS */

.review-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
}

.review-status.good {
    background: #e8f7ed;
    color: #287044;
}

.review-status.attention {
    background: #fff0e2;
    color: #99501c;
}

.review-status.unclear {
    background: #efedff;
    color: #5b4e9f;
}

.status-icon {
    width: 18px;
    height: 18px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .7);
}


/* SECTIONS */

.review-section,
.ai-review-box,
.final-decision-box {
    padding: 22px;
}

.section-label,
.mini-label {
    display: block;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .11em;

    color: var(--muted);

    margin-bottom: 7px;
}


/* STUDENT ANSWER */

.original-section {
    background: #fbfcfe;
}

.student-statement {
    font-size: 20px;
    font-weight: 600;

    color: #182136;

    margin: 6px 0 8px;
}

.category-helper {
    color: var(--muted);
}


/* AI BOX */

.ai-review-box {
    margin: 0 22px 22px;

    padding: 18px;

    background: #f7f9ff;

    border: 1px solid #dfe6fb;
    border-radius: 14px;
}

.ai-review-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;
}

.ai-review-heading > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-icon {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    background: var(--primary);
    color: white;

    border-radius: 9px;

    font-size: 11px;
    font-weight: 800;
}

.theme-chip {
    padding: 5px 9px;

    border-radius: 999px;

    background: white;
    border: 1px solid #dfe4ee;

    color: #596375;

    font-size: 11px;
    font-weight: 700;
}


/* CLASSIFICATION */

.classification-result {
    display: flex;
    align-items: center;

    gap: 10px;

    background: #edf8f0;

    border-radius: 10px;

    padding: 11px 13px;

    margin-bottom: 12px;
}

.classification-result > span {
    font-weight: 900;
    color: #31734a;
}

.classification-result strong,
.classification-result small {
    display: block;
}

.classification-result small {
    color: var(--muted);
}


.classification-change {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}

.classification-change > div {
    padding: 11px 13px;

    background: white;

    border: 1px solid #dde3ef;
    border-radius: 10px;

    text-align: center;
}

.classification-change small,
.classification-change strong {
    display: block;
}

.change-arrow {
    font-size: 22px;
    color: var(--primary);
}


/* FEEDBACK */

.feedback-text {
    margin-top: 12px;
}

.feedback-text p {
    margin: 4px 0 0;

    line-height: 1.6;
}


.reflection-box {
    display: flex;

    gap: 10px;

    margin-top: 14px;

    padding: 12px 13px;

    background: #fff8df;

    border-radius: 10px;
}

.reflection-icon {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: grid;
    place-items: center;

    background: #eac858;

    border-radius: 50%;

    font-weight: 900;
}

.reflection-box strong {
    display: block;
}

.reflection-box p {
    margin: 3px 0 0;
}


/* FINAL DECISION */

.final-decision-box {
    border-top: 1px solid var(--line);

    background: white;
}

.final-decision-heading {
    display: flex;

    gap: 10px;

    margin-bottom: 18px;
}

.final-decision-heading strong,
.final-decision-heading small {
    display: block;
}

.final-decision-heading small {
    color: var(--muted);
}

.decision-number {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #e8f7ed;
    color: #287044;

    font-weight: 900;
}


/* FORM */

.final-field {
    margin-top: 18px;
}

.final-field > label {
    display: block;

    font-size: 13px;
    font-weight: 800;

    margin-bottom: 3px;
}

.final-field > small {
    display: block;

    color: var(--muted);

    margin-bottom: 7px;
}

.final-field textarea,
.final-field select {
    width: 100%;

    border: 1px solid #ccd4e0;

    border-radius: 10px;

    background: white;

    padding: 11px 12px;

    font: inherit;
}

.final-field textarea {
    min-height: 82px;
    resize: vertical;
}

.final-field textarea:focus,
.final-field select:focus {
    outline: 2px solid #d6dfff;

    border-color: var(--primary);
}


/* CATEGORY */

.category-choice-row {
    display: flex;
    gap: 10px;
}

.category-choice-row select {
    flex: 1;
}

.use-suggestion-button {
    border: 1px solid #b9c7ef;

    background: #eef3ff;
    color: #3157b9;

    border-radius: 10px;

    padding: 8px 13px;

    font-weight: 700;

    cursor: pointer;
}

.use-suggestion-button.selected {
    background: #e5f7eb;
    border-color: #acd5b8;
    color: #287044;
}


/* DECISION RADIO CARDS */

.decision-options {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;
}

.decision-option {
    display: flex;

    gap: 9px;

    padding: 12px;

    border: 1px solid #dfe4ed;
    border-radius: 11px;

    cursor: pointer;

    background: #fafbfc;
}

.decision-option:hover {
    border-color: #acbce8;

    background: #f6f8ff;
}

.decision-option input {
    margin-top: 4px;
}

.decision-option strong,
.decision-option small {
    display: block;
}

.decision-option strong {
    font-size: 12px;
}

.decision-option small {
    margin-top: 3px;

    color: var(--muted);

    line-height: 1.4;
}


/* SUBMIT */

.review-submit-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;

    padding: 20px 22px;

    background: #182136;
    color: white;

    border-radius: 16px;
}

.review-submit-box p {
    margin: 4px 0 0;

    color: #cbd3e2;
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .review-instructions {
        flex-direction: column;
        align-items: stretch;
    }

    .instruction-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

    .decision-options {
        grid-template-columns: 1fr;
    }

    .category-choice-row {
        flex-direction: column;
    }

    .review-submit-box {
        flex-direction: column;
        align-items: stretch;
    }

    .classification-change {
        grid-template-columns: 1fr;
    }

    .change-arrow {
        transform: rotate(90deg);
        text-align: center;
    }

}




/* ======================================================
   COMPACT SWOT REVIEW
   ====================================================== */

.swot-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}


/* QUADRANT */

.review-quadrant {
    background: white;

    border: 1px solid var(--line);
    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 8px 28px rgba(23, 32, 51, .05);
}


.review-quadrant.strength {
    border-top: 5px solid #61ad77;
}

.review-quadrant.weakness {
    border-top: 5px solid #df8177;
}

.review-quadrant.opportunity {
    border-top: 5px solid #669ee7;
}

.review-quadrant.threat {
    border-top: 5px solid #d8af3e;
}


/* HEADER */

.review-quadrant-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 14px;

    padding: 20px 20px 15px;

    border-bottom: 1px solid var(--line);
}

.review-quadrant-header h2 {
    margin: 3px 0 2px;
    font-size: 24px;
}

.review-quadrant-header p {
    margin: 0;

    color: var(--muted);
    font-size: 13px;
}

.quadrant-count {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eef1f6;

    font-size: 12px;
    font-weight: 800;
}


/* ITEM LIST */

.review-item-list {
    padding: 14px;

    display: grid;
    gap: 12px;

    min-height: 80px;
}


/* INDIVIDUAL ITEM */

.compact-review-item {
    background: #fafbfc;

    border: 1px solid #e0e5ee;
    border-radius: 13px;

    padding: 13px;
}

.compact-review-item.good {
    border-left: 4px solid #61ad77;
}

.compact-review-item.attention {
    border-left: 4px solid #df9655;
}

.compact-review-item.unclear {
    border-left: 4px solid #9186cc;
}


/* STATUS */

.compact-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 8px;

    margin-bottom: 8px;
}

.compact-status {
    display: inline-flex;
    align-items: center;

    gap: 5px;

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
}

.compact-status.good {
    background: #e8f7ed;
    color: #287044;
}

.compact-status.attention {
    background: #fff0e2;
    color: #99501c;
}

.compact-status.unclear {
    background: #efedff;
    color: #5b4e9f;
}


/* TEXT */

.review-textarea {
    width: 100%;

    min-height: 58px;

    resize: vertical;

    border: 1px solid #ccd4e0;
    border-radius: 9px;

    background: white;

    padding: 10px 11px;

    font: inherit;

    font-size: 14px;
}

.review-textarea:focus {
    outline: 2px solid #d6dfff;
    border-color: var(--primary);
}


/* AI FEEDBACK */

.compact-ai-feedback {
    margin-top: 9px;

    padding: 10px 11px;

    background: #f5f7ff;

    border: 1px solid #e1e6fa;
    border-radius: 10px;

    font-size: 12px;
}

.compact-ai-title {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 5px;
}

.mini-ai-badge {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: var(--primary);
    color: white;

    font-size: 9px;
    font-weight: 800;
}

.compact-ai-feedback p {
    margin: 4px 0;

    line-height: 1.5;
}


/* REFLECTION */

.compact-reflection {
    margin-top: 8px;

    padding: 8px 9px;

    border-radius: 8px;

    background: #fff7dc;

    line-height: 1.45;
}


/* MOVE */

.move-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 10px;

    margin-top: 9px;

    padding-top: 9px;

    border-top: 1px solid #dde4f3;
}

.move-item-button {
    flex: 0 0 auto;

    border: 1px solid #aec0ed;
    border-radius: 8px;

    background: #edf2ff;
    color: #3157b9;

    padding: 6px 9px;

    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.move-item-button:hover {
    background: #e2e9ff;
}


/* SMALL ACTIONS */

.compact-item-actions {
    display: flex;

    gap: 7px;

    margin-top: 9px;
}

.compact-item-actions button {
    border: 0;

    background: transparent;
    color: var(--muted);

    padding: 3px;

    font-size: 10px;
    font-weight: 700;

    cursor: pointer;
}

.compact-item-actions button:hover {
    color: var(--primary);
}

.compact-item-actions button.selected {
    color: #287044;
}


/* BOTTOM */

.review-bottom-note {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-top: 25px;

    padding: 18px 20px;

    border-radius: 15px;

    background: #182136;
    color: white;
}

.review-bottom-note p {
    margin: 3px 0 0;

    color: #ccd4e0;
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 800px) {

    .swot-review-grid {
        grid-template-columns: 1fr;
    }

    .move-suggestion {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-bottom-note {
        flex-direction: column;
        align-items: stretch;
    }

}