/* ----------------------------------------------------------------------
   English Writing Edit Tool — clean two-column theme
   (design language matches the original root index.html)
---------------------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --indigo: #667eea;
    --indigo-dark: #5568d3;
    --purple: #764ba2;
    --green: #10b981;
    --green-dark: #059669;
    --red: #ef4444;
    --red-dark: #dc2626;
    --orange: #f97316;
    --orange-dark: #ea580c;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, 'PingFang SC', sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    color: #333;
}

.container { max-width: 1400px; margin: 0 auto; }

.header { text-align: center; color: #fff; margin-bottom: 20px; }
.header h1 { font-size: 28px; margin-bottom: 5px; }
.header p { font-size: 15px; opacity: .92; }

.content { display: flex; gap: 20px; align-items: flex-start; }

.column {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 25px;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.column-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--indigo);
}

/* ---------------- Buttons ---------------- */
.button-group { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }

.btn {
    flex: 1;
    min-width: 140px;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; box-shadow: none; }

.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover:not(:disabled) {
    background: var(--indigo-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-secondary { background: #eef1ff; color: var(--indigo-dark); border: 2px solid #dfe4ff; }
.btn-secondary:hover:not(:disabled) { background: #e3e8ff; transform: translateY(-2px); }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-2px); }

.token-row { margin: -4px 0 18px; }
.token-row input {
    width: 100%;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
}
.token-row input:focus {
    outline: none;
    border-color: var(--indigo);
    box-shadow: 0 0 0 3px rgba(102,126,234,0.1);
}

/* ---------------- Image stage + canvas ---------------- */
.image-stage {
    position: relative;
    width: 100%;
    /* Never let the flex column squash the photo: a squashed photo no longer
       matches the canvas the circles are drawn on, and every mark lands off. */
    flex: 0 0 auto;
    margin-bottom: 18px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    line-height: 0;
}
.image-stage img { width: 100%; height: auto; display: block; }
#circleCanvas {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
}

/* ---------------- Status bar ---------------- */
.status-bar {
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.status-bar.loading { background: #f0f4ff; color: var(--indigo-dark); }
.status-bar.error   { background: #fee2e2; color: var(--red-dark); }
.status-bar.success { background: #dcfce7; color: var(--green-dark); }

/* ---------------- Transcript ---------------- */
.transcript-title { font-size: 14px; font-weight: 700; color: #555; margin-bottom: 8px; }
.text-display {
    background: #f8f9fa;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 15px;
    min-height: 140px;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
}
.text-display .hl {
    background: #fef08a;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 700;
    color: #991b1b;
    box-shadow: 0 0 0 2px #fbbf24 inset;
}
.text-display .hl.flash { animation: flash 1s ease 2; }
@keyframes flash { 0%,100% { background: #fef08a; } 50% { background: var(--orange); } }

/* ---------------- Score ---------------- */
.score-row { margin-bottom: 18px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.score-pill {
    display: inline-block;
    background: #fff3cd; color: #b45309;
    font-weight: 700; padding: 5px 14px;
    border-radius: 999px; font-size: 14px;
}
.misread-pill {
    display: inline-block;
    background: #e0e7ff; color: #4338ca;
    font-weight: 700; padding: 5px 14px;
    border-radius: 999px; font-size: 14px;
}
.misread-pill[hidden] { display: none; }
.progress-bar {
    width: 100%; height: 10px;
    background: #e9ecef; border-radius: 999px; overflow: hidden;
}
.progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--green), #6ee7b7);
    transition: width 0.4s ease;
}

/* ---------------- Error cards ---------------- */
.cards { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.empty-hint {
    text-align: center; color: #999; font-size: 15px;
    line-height: 1.8; padding: 36px 10px;
}

.card {
    background: #fff;
    border: 1px solid #f1d4dc;
    border-left: 6px solid var(--red);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s, border-color 0.3s, background 0.3s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-2px); }
.card.solved { border-color: #bbf7d0; border-left-color: var(--green); background: #f0fdf4; }
.card.misread { border-color: #dbeafe; border-left-color: #6366f1; background: #f5f7ff; opacity: 0.92; }
.card.active { box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.35); }

.card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card-type {
    font-size: 12px; font-weight: 700;
    background: #fee2e2; color: var(--red-dark);
    padding: 3px 10px; border-radius: 999px;
}
.card.solved .card-type { background: #dcfce7; color: var(--green-dark); }
.card-num { font-size: 13px; color: #aaa; margin-left: auto; }

.card-words { font-size: 16px; margin-bottom: 8px; }
.card-words .wrong { color: var(--red); font-weight: 700; text-decoration: line-through wavy var(--red); }
.card-words .arrow { margin: 0 8px; color: var(--indigo); font-weight: bold; }
.card-words .correct { color: var(--green-dark); font-weight: 700; }
.card.hide-answer .card-words .correct,
.card.hide-answer .card-words .arrow { display: none; }

.card-hint {
    font-size: 13px; color: #666;
    background: #fff3cd; border-left: 4px solid #ffc107;
    border-radius: 6px; padding: 8px 10px; margin-bottom: 12px;
}

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-mark {
    flex: 0 0 auto; min-width: 0;
    background: var(--orange); color: #fff; padding: 9px 14px; font-size: 14px;
}
.btn-mark:hover:not(:disabled) { background: var(--orange-dark); transform: translateY(-2px); }
.btn-mark.is-on { background: var(--red); }

.fix-row { display: flex; gap: 8px; width: 100%; margin-top: 6px; }
.fix-input {
    flex: 1; min-width: 0;
    border: 2px solid #e9ecef; border-radius: 8px;
    padding: 9px 12px; font-size: 15px; font-family: inherit;
    transition: border-color 0.2s;
}
.fix-input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
.fix-input.wrong { border-color: var(--red); animation: shake 0.4s; }
.fix-input.right { border-color: var(--green); background: #f0fdf4; }
@keyframes shake { 0%,100% { transform: translateX(0);} 25% { transform: translateX(-6px);} 75% { transform: translateX(6px);} }
.btn-check { flex: 0 0 auto; min-width: 0; background: var(--green); color: #fff; padding: 9px 14px; font-size: 14px; }
.btn-check:hover:not(:disabled) { background: var(--green-dark); transform: translateY(-2px); }

/* "the AI misread my handwriting" escape hatch */
.misread-row {
    display: flex; align-items: flex-start; gap: 8px;
    width: 100%; margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
    font-size: 13px; color: #555; cursor: pointer; line-height: 1.45;
}
.misread-row input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; cursor: pointer; accent-color: var(--indigo); }
.misread-row:hover { color: var(--indigo-dark); }
.card.misread .misread-row { color: #4338ca; font-weight: 600; }

.card-feedback { font-size: 14px; font-weight: 700; margin-top: 10px; min-height: 18px; }
.card-feedback.good { color: var(--green-dark); }
.card-feedback.bad  { color: var(--red); }
.card-feedback.note { color: #4338ca; }
.solved-badge { font-size: 22px; }

/* ---------------- Done banner ---------------- */
.done-banner {
    text-align: center; padding: 20px;
    background: linear-gradient(135deg, #fef9c3, #bbf7d0);
    border-radius: 12px;
    font-size: 17px; font-weight: 700; color: var(--green-dark);
}

/* ---------------- Photo → Quizlet cards ---------------- */
.mode-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 14px;
}
.mode-label { font-size: 13px; font-weight: 700; color: #555; }
.mode-pill { cursor: pointer; }
.mode-pill input { position: absolute; opacity: 0; pointer-events: none; }
.mode-pill span {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    border: 2px solid #dfe4ff; background: #eef1ff; color: var(--indigo-dark);
    font-size: 13px; font-weight: 700; transition: all 0.18s;
}
.mode-pill input:checked + span { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.mode-pill input:focus-visible + span { box-shadow: 0 0 0 3px rgba(102,126,234,0.35); }

.thumbs {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px; min-height: 96px;
    flex: 0 0 auto;
}
.thumbs .empty-hint { flex: 1; padding: 22px 10px; }
.thumb {
    position: relative; width: 104px; height: 132px;
    border-radius: 8px; overflow: hidden; background: #f1f3f9;
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-num {
    position: absolute; left: 6px; bottom: 6px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 12px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
}
.thumb-x {
    position: absolute; top: 4px; right: 4px;
    width: 24px; height: 24px; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.55); color: #fff; font-size: 13px;
    cursor: pointer; line-height: 1; padding: 0;
}
.thumb-x:hover { background: var(--red); }

.set-title {
    width: 100%; border: 2px solid #e9ecef; border-radius: 8px;
    padding: 9px 12px; font-size: 15px; font-weight: 700;
    font-family: inherit; margin-bottom: 10px;
}
.set-title:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
.phon-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.phon-toggle input { cursor: pointer; accent-color: var(--indigo); }

.flashcard { border-left-color: var(--indigo); border-color: #e2e6ff; }
.flashcard.card-invalid { border-left-color: var(--orange); background: #fffaf3; }
.flashcard .card-head { margin-bottom: 8px; }
.card-type.kind-word { background: #e0e7ff; color: #3730a3; }
.card-type.kind-idiom { background: #fce7f3; color: #9d174d; }
.card-meta { font-size: 12px; color: #888; font-style: italic; }
.card-drop {
    border: none; background: none; color: #c4c4c4; cursor: pointer;
    font-size: 14px; padding: 2px 4px; line-height: 1;
}
.card-drop:hover { color: var(--red); }
.flashcard .fix-input { width: 100%; margin-bottom: 7px; }
.flashcard .term-input { font-weight: 700; }
.flashcard .def-input { resize: vertical; line-height: 1.5; font-size: 14px; }

.import-box {
    width: 100%; height: 190px; margin-bottom: 14px;
    border: 2px solid #e9ecef; border-radius: 10px; padding: 12px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 12.5px; line-height: 1.65; white-space: pre; overflow: auto;
    background: #f8f9fa; color: #333;
}
.import-box:focus { outline: none; border-color: var(--indigo); }

/* ---------------- Congratulations pop-up ---------------- */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(35, 30, 70, 0.55);
    opacity: 0; transition: opacity 0.25s ease;
}
.modal-backdrop.show { opacity: 1; }
.modal-backdrop[hidden] { display: none; }

.modal-card {
    background: #fff; border-radius: 20px;
    padding: 30px 28px 26px; text-align: center;
    width: min(430px, 100%);
    max-height: 90vh; overflow-y: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
    transform: scale(0.88) translateY(12px);
    transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-backdrop.show .modal-card { transform: none; }

.modal-emoji { font-size: 58px; line-height: 1; animation: pop 0.6s ease both 0.1s; }
@keyframes pop { from { transform: scale(0.2) rotate(-18deg); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card h2 { font-size: 26px; color: var(--indigo-dark); margin: 8px 0 4px; }
.modal-sub { font-size: 15px; color: #555; margin-bottom: 18px; }

.modal-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.modal-stats .stat {
    flex: 1; background: #f6f7ff; border-radius: 12px; padding: 12px 6px;
}
.modal-stats .stat b { display: block; font-size: 22px; color: var(--indigo-dark); }
.modal-stats .stat small { font-size: 11.5px; color: #777; font-weight: 600; }

.modal-card .btn + .btn { margin-top: 9px; }

/* Exported-picture overlay */
.export-card { width: min(620px, 100%); }
.export-preview {
    background: #f4f5fb; border: 2px solid #e9ecef; border-radius: 12px;
    padding: 8px; margin-bottom: 14px;
    max-height: 52vh; overflow-y: auto;
}
.export-preview img { width: 100%; display: block; border-radius: 6px; }
#exportDownload { text-decoration: none; }

.btn-export { flex: 0 0 auto; min-width: 0; padding: 5px 13px; font-size: 13px; }
.btn-export[hidden] { display: none; }

.modal-bonus {
    background: linear-gradient(135deg, #fef9c3, #bbf7d0);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 18px;
    font-size: 14px; font-weight: 700; color: #166534; line-height: 1.5;
}
.modal-card .btn { width: 100%; }

/* ---------------- Layout: independent column scrolling ----------------
   On a landscape tablet or a desktop the two columns each get their own
   scrollbar, so scrolling to the last error card no longer drags the photo
   off the top of the screen. Below 880px the columns stack and the page
   scrolls normally. */
@media (min-width: 881px) {
    html, body { height: 100%; }
    body { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding: 16px 20px; }
    .container { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; }
    .header { margin-bottom: 14px; flex: 0 0 auto; }
    .content { flex: 1; min-height: 0; align-items: stretch; }
    .column { height: 100%; min-height: 0; overscroll-behavior: contain; }
    /* Photo and transcript scroll together, on their own. */
    .left-column { overflow-y: auto; }
    /* Title and progress stay put; only the card list scrolls. */
    .right-column { overflow: hidden; }
    .right-column .column-title,
    .right-column .score-row { flex: 0 0 auto; }
    .right-column .cards { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
}

@media (max-width: 880px) {
    .content { flex-direction: column; }
    .header h1 { font-size: 24px; }
}