/* 修改病句练习 /tool/bingju-fix 样式 */

.es-main, .bf-main { margin-bottom: 24px; }

/* ============ 顶部工具栏 ============ */
.bf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.bf-toolbar-left,
.bf-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bf-toolbar-title { font-size: 15px; font-weight: 800; }
.bf-star-count {
    font-size: 13px;
    font-weight: 700;
    color: #ea580c;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(234,88,12,.1);
}

/* 类型 mini 按钮 */
.bf-type-mini { display: flex; gap: 3px; flex-wrap: wrap; }
.bf-mini-btn {
    padding: 5px 10px;
    border: 1px solid var(--c-border);
    border-radius: 99px;
    background: var(--c-surface-soft);
    font-family: inherit;
    font-size: 11.5px;
    color: var(--c-text);
    cursor: pointer;
    transition: all .14s ease;
    white-space: nowrap;
}
.bf-mini-btn:hover { border-color: #ea580c; color: #ea580c; }
.bf-mini-btn.active {
    background: #ea580c;
    color: #fff;
    border-color: #ea580c;
}

.bf-refresh-btn {
    padding: 6px 12px;
    border: 1px solid #ea580c;
    border-radius: 99px;
    background: transparent;
    color: #ea580c;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all .14s ease;
    white-space: nowrap;
}
.bf-refresh-btn:hover { background: rgba(234,88,12,.08); }
.bf-refresh-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============ 加载 ============ */
.bf-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--c-text-muted);
}
.loading-spinner {
    width: 36px; height: 36px; margin: 0 auto 12px;
    border: 3px solid var(--c-border);
    border-top-color: #ea580c;
    border-radius: 50%;
    animation: bfSpin .8s linear infinite;
}
@keyframes bfSpin { to { transform: rotate(360deg); } }

/* ============ 题目卡片 ============ */
.bf-card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 22px;
}

.bf-step-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-sub);
    margin-bottom: 10px;
}

/* 错误句子展示 */
.bf-wrong-sentence {
    font-size: 20px;
    font-weight: 800;
    color: var(--c-text);
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(239,68,68,.08), rgba(239,68,68,.02));
    border: 2px dashed rgba(239,68,68,.4);
    border-radius: 14px;
    line-height: 1.7;
    letter-spacing: .5px;
    margin-bottom: 12px;
    position: relative;
}
.bf-wrong-sentence::before {
    content: '⚠️ 这里有问题';
    position: absolute;
    top: -11px;
    left: 14px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 99px;
}

/* 类型选择 */
.bf-type-hint {
    font-size: 12.5px;
    color: var(--c-text-muted);
    margin-bottom: 12px;
}
.bf-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.bf-type-option {
    padding: 8px 14px;
    border: 1.5px solid var(--c-border);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: var(--c-text);
    cursor: pointer;
    transition: all .14s ease;
    font-weight: 600;
}
.bf-type-option:hover {
    border-color: #ea580c;
    transform: translateY(-1px);
}
.bf-type-option.is-picked {
    background: rgba(234,88,12,.08);
    border-color: #ea580c;
    color: #ea580c;
}
.bf-type-option.is-correct {
    background: rgba(22,163,74,.1);
    border-color: #16a34a;
    color: #16a34a;
}
.bf-type-option.is-wrong {
    background: rgba(239,68,68,.08);
    border-color: #ef4444;
    color: #ef4444;
}

/* 类型已选 */
.bf-type-picked {
    padding: 8px 14px;
    background: rgba(234,88,12,.08);
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bf-picked-badge { font-weight: 700; color: #ea580c; font-size: 12px; }
.bf-picked-text { font-weight: 700; }

/* 修改输入区 */
.bf-fix-box {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--c-border);
}
.bf-fix-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-sub);
    margin-bottom: 10px;
}
.bf-fix-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    font-family: inherit;
    line-height: 1.9;
    color: var(--c-text);
    background: #fff;
    border: 1.5px solid var(--c-border);
    border-radius: 12px;
    outline: none;
    resize: vertical;
    transition: border-color .16s ease;
    box-sizing: border-box;
}
.bf-fix-textarea:focus {
    border-color: #ea580c;
    box-shadow: 0 0 0 3px rgba(234,88,12,.12);
}
.bf-fix-textarea::placeholder { color: var(--c-text-muted); font-size: 15px; }

.bf-fix-hint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.bf-hint-toggle {
    padding: 5px 12px;
    border: 1px solid #f59e0b;
    border-radius: 99px;
    background: transparent;
    color: #f59e0b;
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all .14s ease;
}
.bf-hint-toggle:hover { background: rgba(245,158,11,.08); }
.bf-hint-text {
    font-size: 12.5px;
    color: #f59e0b;
    background: rgba(245,158,11,.08);
    padding: 5px 12px;
    border-radius: 8px;
}

.bf-fix-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-end;
}

.bf-btn {
    height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .15s ease;
    border: 1.5px solid transparent;
}
.bf-btn--primary {
    background: linear-gradient(135deg, #ea580c, #f97316);
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(234,88,12,.3);
}
.bf-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(234,88,12,.4); }
.bf-btn--ghost {
    background: transparent;
    color: var(--c-text-sub);
    border-color: var(--c-border);
}
.bf-btn--ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bf-btn--block { width: 100%; margin-top: 12px; }
.bf-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============ AI 批改结果 ============ */
.bf-result-box {
    padding: 18px;
    margin-top: 18px;
    border-top: 1px dashed var(--c-border);
}
.bf-result-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.bf-emoji { font-size: 28px; }
.bf-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--c-text);
}
.bf-teacher-comment {
    font-size: 14px;
    line-height: 1.9;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(139,92,246,.08), rgba(139,92,246,.02));
    border-radius: 10px;
    color: var(--c-text);
    margin-bottom: 14px;
    font-style: italic;
}
.bf-result-section { margin-bottom: 12px; }
.bf-section-title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--c-text-sub);
    margin-bottom: 6px;
}
.bf-highlight-list,
.bf-suggest-list { list-style: none; padding: 0; margin: 0; }
.bf-highlight-list li,
.bf-suggest-list li {
    font-size: 13px;
    line-height: 1.7;
    padding: 5px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}
.bf-highlight-list li { background: rgba(22,163,74,.1); color: var(--c-text-sub); }
.bf-suggest-list li { background: rgba(245,158,11,.1); color: var(--c-text-sub); }
.bf-kid-explain {
    font-size: 14px;
    line-height: 1.9;
    padding: 10px 14px;
    background: rgba(59,130,246,.08);
    border-radius: 10px;
    color: var(--c-text);
}
.bf-better-sentence {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.9;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(139,92,246,.1);
    border: 1px solid rgba(139,92,246,.3);
    color: var(--c-text);
}

/* ============ 进度 ============ */
.bf-progress {
    margin-top: 14px;
    text-align: center;
}
.bf-progress-label {
    font-size: 12.5px;
    color: var(--c-text-muted);
}
.bf-progress-label b { color: #ea580c; }

/* ============ 响应式 ============ */
@media (max-width: 640px) {
    .bf-toolbar { padding: 8px 10px; }
    .bf-wrong-sentence { font-size: 17px; padding: 16px; }
    .bf-type-options { gap: 6px; }
    .bf-type-option { padding: 6px 10px; font-size: 12px; }
    .bf-fix-textarea { font-size: 15px; }
}

/* ============ 黑夜模式 ============ */
[data-theme="dark"] .bf-type-option { background: var(--c-surface-soft); }
[data-theme="dark"] .bf-fix-textarea { background: var(--c-surface-soft); color: var(--c-text); }