/* ============================================================
   library.css - 词库管理页面专用样式
   对应文件: library.html
   ============================================================ */

/* ---------- 编辑器容器 ---------- */
.word-editor,
.grammar-editor,
.quiz-editor {
    display: none;
}

.word-editor.active,
.grammar-editor.active,
.quiz-editor.active {
    display: block;
}

/* ---------- 追加区域 ---------- */
.append-area {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.append-area h4 {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.append-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.append-area .hint {
    margin-top: 5px;
}

/* ---------- 滚动到底部按钮 ---------- */
.btn-scroll-bottom {
    margin-left: auto;
}

/* ---------- 状态颜色类 ---------- */
.status-success {
    color: var(--color-accent);
}

.status-error {
    color: var(--color-danger);
}

.status-warning {
    color: var(--color-warning);
}

.status-info {
    color: var(--color-info);
}

/* ---------- 编辑器文本域高度 ---------- */
#grammar-content,
#quiz-content,
#lib-content {
    min-height: 200px;
}

/* ---------- 词库管理页面特有的响应式 ---------- */
@media (max-width: 480px) {
    .append-buttons .btn {
        flex: 1;
        min-width: 60px;
        text-align: center;
    }
}