* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Noto Serif SC', 'Times New Roman', '宋体', serif;
}

body {
    background-color: #FDF5E6;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem 2rem;
    font-size: 14px;
}

.container {
    max-width: 800px;
    width: 100%;
    transition: all 0.3s ease;
}

.container.toolbox-active {
    max-width: 1480px;
}

.lesson-export-status {
    min-height: 1.4em;
    margin-top: 0.75rem;
    color: #6D5946;
    font-size: 0.85rem;
    line-height: 1.7;
}

.export-settings {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #E9D9CB;
    font-size: 0.85rem;
    line-height: 1.8;
}

.export-settings h3 { margin-bottom: 0.5rem; }
.export-settings-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.6rem 0; }

/* ---------- 开始页面 ---------- */
.landing-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    background: #fffdfa;
    border-radius: 24px;
    padding: 3rem 2rem;
    box-shadow: 0 8px 20px rgba(245, 235, 217, 0.5);
    border: 1px solid #F5EBD9;
}
.landing-top-links {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 1rem;
    color: #8B6F5C;
}
.landing-top-links a {
    color: #5A3E2B;
    text-decoration: none;
    border-bottom: 1px dotted #FFB6A0;
    cursor: pointer;
}
.landing-top-links a:hover {
    color: #FFB6A0;
}
.landing-brand {
    font-size: 1.2rem;
    letter-spacing: 2px;
    color: #8B6F5C;
    margin-bottom: 1rem;
}
.landing-title {
    font-size: 4.5rem;
    font-weight: 700;
    font-family: 'Noto Serif SC', '方正粗金陵', serif;
    color: #5A3E2B;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(255, 182, 160, 0.3);
    transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.landing-title:hover {
    transform: translateY(-6px);
    text-shadow: 4px 6px 8px rgba(255, 182, 160, 0.5);
}
.landing-sub {
    font-size: 1.2rem;
    font-family: 'KaiTi', '楷体', serif;
    color: #8B6F5C;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #FFB6A0;
    display: inline-block;
    padding-bottom: 0.3rem;
}
.landing-btn {
    background: #FFB6A0;
    border: none;
    color: #5A3E2B;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 1rem 3rem;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 4px 0 #E5B8A0;
    transition: 0.1s;
    border: 1px solid #FFD8C0;
    margin-top: 1rem;
}
.landing-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #E5B8A0;
}
.landing-btn:hover {
    animation: float 1.2s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* ---------- 使用指南页面 ---------- */
.guide-page {
    background: #fffdfa;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 8px 20px rgba(245, 235, 217, 0.5);
    border: 1px solid #F5EBD9;
    max-height: 80vh;
    overflow-y: auto;
}
.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 2rem;
    border-bottom: 2px solid #FFB6A0;
    position: sticky;
    top: 0;
    background: #fffdfa;
    z-index: 10;
    border-radius: 24px 24px 0 0;
}
.guide-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #5A3E2B;
}
.guide-content {
    color: #5A3E2B;
    line-height: 1.8;
    font-size: 1rem;
    padding: 0 2rem 2rem 2rem;
}
.guide-content h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: #1F2937;
    border-left: 4px solid #FFB6A0;
    padding-left: 0.8rem;
}
.guide-content h3:first-of-type {
    margin-top: 0;
}
.guide-content p {
    margin: 0.5rem 0;
}
.guide-content ul, .guide-content ol {
    margin: 0.5rem 0 0.5rem 1.5rem;
}
.guide-content li {
    margin: 0.3rem 0;
}
.guide-content strong {
    color: #1F2937;
}
.guide-content blockquote {
    background: #FEFAF5;
    border-left: 4px solid #FFB6A0;
    padding: 0.8rem 1.2rem;
    margin: 1rem 0;
    border-radius: 0 8px 8px 0;
}
.back-to-home-btn {
    background: #FFB6A0;
    border: none;
    color: #5A3E2B;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 2px 0 #E5B8A0;
    transition: 0.1s;
    border: 1px solid #FFD8C0;
}
.back-to-home-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #E5B8A0;
}

/* ---------- 操作步骤提示模态框 ---------- */
.steps-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(90, 62, 43, 0.35);
    z-index: 5000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.steps-modal-card {
    background: #fffdfa;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    box-shadow: 0 12px 40px rgba(90, 62, 43, 0.25);
    border: 1px solid #F5EBD9;
    overflow: hidden;
    animation: slideUp 0.3s ease;
}
@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.steps-modal-header {
    text-align: center;
    padding: 1.2rem 1rem 0.8rem;
    border-bottom: 2px solid #FFB6A0;
}
.steps-modal-header h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #5A3E2B;
    margin: 0;
}
.steps-modal-body {
    padding: 1rem 1.2rem;
}
.steps-modal-item {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
    align-items: flex-start;
}
.steps-modal-item:last-child {
    margin-bottom: 0;
}
.steps-modal-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #FFB6A0;
    color: #5A3E2B;
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps-modal-item.steps-modal-tip .steps-modal-number {
    background: #FFF0E6;
    border: 2px solid #FFD8C0;
}
.steps-modal-text strong {
    display: block;
    color: #5A3E2B;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.steps-modal-desc {
    color: #8B6F5C;
    font-size: 0.82rem;
    line-height: 1.5;
}
.steps-modal-footer {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem 1.2rem;
}
.steps-modal-btn {
    background: #FFB6A0;
    border: none;
    color: #5A3E2B;
    font-weight: 700;
    font-size: 1rem;
    padding: 0.6rem 2rem;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 3px 0 #E5B8A0;
    transition: 0.1s;
    border: 1px solid #FFD8C0;
}
.steps-modal-btn:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #E5B8A0;
}
.steps-modal-btn-outline {
    background: transparent;
    color: #8B6F5C;
    box-shadow: none;
    border: 2px solid #E5B8A0;
    font-weight: 600;
}
.steps-modal-btn-outline:hover {
    background: #FFE8D6;
}

/* ---------- 备课模式选择模态框 ---------- */
/* 模式选择模态框样式 */
.mode-selection-card {
    max-width: 800px;
    width: 90%;
    background: #FFFDF7;
    border-radius: 32px;
    box-shadow: 0 20px 35px rgba(90, 62, 43, 0.2);
    border: 1px solid #FFE2CE;
    overflow: hidden;
}

.mode-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.8rem;
    background: #FFF5EE;
    border-bottom: 1px solid #FFE2CE;
}

.mode-header h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #5A3E2B;
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #8B6F5C;
    line-height: 1;
    padding: 0 0.3rem;
}

.modal-close-btn:hover {
    color: #5A3E2B;
}

.mode-body {
    padding: 2rem 1.8rem;
}

.mode-cards {
    display: flex;
    gap: 1.8rem;
    justify-content: center;
    flex-wrap: wrap;
}

.mode-card {
    flex: 1;
    min-width: 240px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 1.8rem 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid #FFE2CE;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.mode-card:hover {
    transform: translateY(-6px);
    border-color: #FFB6A0;
    box-shadow: 0 12px 20px rgba(255, 182, 160, 0.2);
    background: #FFFEFC;
}

.mode-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.mode-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #5A3E2B;
    margin-bottom: 0.8rem;
}

.mode-desc {
    font-size: 0.9rem;
    color: #8B6F5C;
    line-height: 1.5;
}

.mode-footer {
    padding: 1rem 1.8rem 1.8rem;
    text-align: center;
}

.steps-modal-btn-outline {
    background: transparent;
    border: 2px solid #FFB6A0;
    color: #5A3E2B;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.5rem 1.5rem;
    border-radius: 40px;
    cursor: pointer;
    transition: 0.15s;
}

.steps-modal-btn-outline:hover {
    background: #FFF0E6;
}

/* ---------- 完整教学设计步骤提示模态框 ---------- */
/* 操作步骤提示模态框 - 横向卡片 + 内部滚动 */
.steps-guide-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(90, 62, 43, 0.5);
    backdrop-filter: blur(4px);
    z-index: 5100;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
}
.steps-guide-modal-overlay.show {
    visibility: visible;
    opacity: 1;
}
/* 横向卡片（宽 > 高），最大宽度1000px，最大高度80vh */
.steps-guide-card {
    background: #FFFDF7;
    max-width: 1000px;
    width: 90%;
    max-height: 80vh;
    border-radius: 32px;
    box-shadow: 0 25px 45px rgba(90, 62, 43, 0.25);
    border: 1px solid #FFE2CE;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96);
    transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}
.steps-guide-modal-overlay.show .steps-guide-card {
    transform: scale(1);
}
/* 表头固定不滚动 */
.steps-guide-header {
    flex-shrink: 0;
    padding: 1rem 1.8rem;
    background: #FFF5EE;
    border-bottom: 1px solid #FFE2CE;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.steps-guide-header h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #5A3E2B;
    margin: 0;
}
.guide-modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    cursor: pointer;
    color: #8B6F5C;
    line-height: 1;
}
.guide-modal-close:hover {
    color: #5A3E2B;
}
/* 内容区域可滚动 */
.steps-guide-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    scrollbar-width: thin;
}
.steps-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.steps-guide-number {
    width: 36px;
    height: 36px;
    background: #FFF0E6;
    border-radius: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #FFB6A0;
    border: 1px solid #FFD8C0;
    flex-shrink: 0;
}
.steps-guide-text {
    flex: 1;
    color: #3E2A1F;
    font-size: 1rem;
    line-height: 1.45;
}
.steps-guide-text strong {
    font-size: 1rem;
    color: #C96F4A;
}
.steps-guide-desc {
    font-size: 0.9rem;
    color: #8B6F5C;
    margin-top: 6px;
    line-height: 1.5;
}
.steps-guide-tip {
    background: #FFF8F0;
    border-radius: 16px;
    padding: 0.8rem 1rem;
    margin-top: 0.5rem;
}
/* 底部按钮固定 */
.steps-guide-footer {
    flex-shrink: 0;
    padding: 1rem 2rem;
    text-align: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-top: 1px solid #FFE2CE;
    background: #FFFDF7;
}
.steps-guide-btn {
    background: #FFB6A0;
    border: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 40px;
    color: #5A3E2B;
    cursor: pointer;
    transition: 0.15s;
}
.steps-guide-btn:hover {
    background: #FFA07A;
    transform: translateY(-2px);
}
.steps-guide-btn-outline {
    background: transparent;
    border: 2px solid #FFB6A0;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.6rem 1.8rem;
    border-radius: 40px;
    color: #5A3E2B;
    cursor: pointer;
    transition: 0.15s;
}
.steps-guide-btn-outline:hover {
    background: #FFF0E6;
}
/* 响应式：小屏时适当缩小 */
@media (max-width: 640px) {
    .steps-guide-card {
        max-width: 95%;
        max-height: 85vh;
    }
    .steps-guide-body {
        padding: 1rem 1.2rem;
    }
    .steps-guide-desc {
        font-size: 0.85rem;
    }
    .steps-guide-header h3 {
        font-size: 1.2rem;
    }
}

/* ========== 单点教学设计面板样式 ========== */
.single-design-panel {
    background: #FFFDF7;
    border-radius: 20px;
    padding: 1rem 1.2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin-top: 0.8rem;
    border: 2px solid #FFE2CE;
}

.single-top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #FFB6A0;
}

.single-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #5A3E2B;
    text-align: center;
}

.single-select {
    padding: 0.4rem 0.7rem;
    border: 2px solid #E5B8A0;
    border-radius: 10px;
    background: #FFFFFF;
    font-size: 0.9rem;
    color: #5A3E2B;
    outline: none;
    transition: 0.15s;
    cursor: pointer;
}

.single-select:focus {
    border-color: #FFB6A0;
    box-shadow: 0 0 0 3px rgba(255,182,160,0.2);
}

/* placeholder 样式 */
.single-select:invalid,
.single-select option[value=""]:disabled {
    color: #B8A28E;
}

.single-select:disabled {
    background: #FEFAF5;
    color: #B8A28E;
    cursor: not-allowed;
}

.btn-outline.small {
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 16px;
}

.btn-solid.small {
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    border-radius: 16px;
}

/* ---------- 主界面标题 ---------- */
.main-interface .title-wrapper {
    text-align: center;
    margin-top: 0;
    margin-bottom: 2rem;
}
.main-interface .main-title {
    font-size: 3.5rem;
    font-weight: 600;
    font-family: 'Noto Serif SC', '方正粗金陵', '华文楷体', serif;
    color: #5A3E2B;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(255, 182, 160, 0.3);
    position: relative;
    display: inline-block;
}
.main-interface .main-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: #FFB6A0;
    margin: 8px auto 0;
    border-radius: 2px;
}
.main-interface .sub-head {
    color: #8B6F5C;
    font-size: 0.9rem;
    margin-top: 8px;
    font-style: italic;
}

/* 顶部按钮栏 */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}
.top-bar-left {
    display: flex;
    gap: 0.8rem;
}

/* 布局容器 */
.layout-area {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}

/* 初始三列卡片布局 */
.cards-row {
    display: flex;
    gap: 1.2rem;
    transition: all 0.3s ease;
    width: 100%;
}
.card {
    flex: 1 1 0;
    background: #fffdfa;
    border-radius: 8px;
    padding: 1rem 0.8rem;
    box-shadow: 0 2px 4px rgba(245, 235, 217, 0.3);
    border: 1px solid #F5EBD9;
    transition: all 0.3s ease;
}
.card:nth-child(2) {
    flex: 1.6 1 0;
}
.card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.8rem;
    border-bottom: 2px dotted #FAD5C0;
    padding-bottom: 6px;
}

/* 卡片一：上下结构 */
.vertical-field {
    margin-bottom: 0.9rem;
}
.vertical-field:last-child {
    margin-bottom: 0;
}
.field-label {
    font-weight: 500;
    color: #8B6F5C;
    margin-bottom: 0.2rem;
    font-size: 1rem;
}
.field-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 2px solid #E5B8A0;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 1rem;
    color: #5A3E2B;
    cursor: pointer;
    outline: none;
    transition: 0.15s;
}
.field-select:focus {
    border-color: #FFB6A0;
}

/* 卡片二：复选框组 */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #5A3E2B;
}
.checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #FFB6A0;
    margin: 0;
    cursor: pointer;
}
.checkbox-item label {
    font-size: 0.88rem;
    cursor: pointer;
}
.checkbox-item.extra-focus {
    color: #8B6F5C;
    font-style: italic;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    border: 1px dashed #E5D5C5;
}
.checkbox-item.extra-focus label {
    font-size: 0.85rem;
}
.hint-text {
    color: #8B6F5C;
    font-size: 0.8rem;
    margin-top: 0.3rem;
    font-style: italic;
}

/* 其他教学侧重文本框 */
.other-focus {
    margin-top: 0.5rem;
}
.other-focus label {
    display: block;
    font-weight: 500;
    color: #5A3E2B;
    margin-bottom: 0.15rem;
    font-size: 0.88rem;
}
.other-focus textarea {
    width: 100%;
    height: 40px;
    padding: 0.35rem 0.5rem;
    border: 2px solid #FFE8D6;
    border-radius: 6px;
    background: #FEFAF5;
    font-size: 0.88rem;
    resize: vertical;
    color: #5A3E2B;
}
.other-focus textarea:focus {
    outline: none;
    border-color: #FFB6A0;
}
.keyword-library-link {
    display: inline-block;
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: #8B6F5C;
    text-decoration: underline;
    cursor: pointer;
}
.keyword-library-link:hover {
    color: #FFB6A0;
}

/* 教学侧重分区样式 */
.focus-section {
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px dashed #FAD5C0;
}
.focus-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}
.focus-section-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #8B6F5C;
    margin-bottom: 0.3rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.focus-section-title::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 12px;
    background: #FFB6A0;
    border-radius: 2px;
}
.focus-basic-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
}
.focus-basic-grid .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #5A3E2B;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.focus-basic-grid .checkbox-item.recommended {
    background: #FFF0E6;
    border-color: #FFD8C0;
}
.focus-basic-grid .checkbox-item input {
    width: 12px;
    height: 12px;
    accent-color: #FFB6A0;
    cursor: pointer;
}
/* 本课教学侧重区 - 已勾选推荐项样式 */
.focus-section .checkbox-item.checked-recommended {
    padding: 0.15rem 0.4rem;
    background: #FFF0E6;
    border-radius: 12px;
    border: 1px solid #FFD8C0;
}
/* 本课侧重横排布局（复用基础选项风格） */
#focusCheckboxGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
}
#focusCheckboxGrid .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #5A3E2B;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 16px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
#focusCheckboxGrid .checkbox-item.recommended {
    background: #FFF0E6;
    border-color: #FFD8C0;
}
#focusCheckboxGrid .checkbox-item.extra-focus {
    color: #8B6F5C;
    font-style: italic;
    border: 1px dashed #E5D5C5;
    background: transparent;
}
#focusCheckboxGrid .checkbox-item.optional {
    background: #FFF0E6;
    border-color: #FFD8C0;
}
#focusCheckboxGrid .checkbox-item input {
    width: 12px;
    height: 12px;
    accent-color: #FFB6A0;
    cursor: pointer;
}
#focusCheckboxGrid .checkbox-item span {
    font-size: 0.85rem;
    cursor: pointer;
}
/* 单元重点横排布局（与本课侧重风格统一） */
#unitFocusGroup {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
}
#unitFocusGroup .checkbox-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    color: #5A3E2B;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 16px;
    border: 1px solid #FFD8C0;
    background: #FFF0E6;
    transition: all 0.2s ease;
}
#unitFocusGroup .checkbox-item input {
    width: 12px;
    height: 12px;
    accent-color: #FFB6A0;
    cursor: pointer;
}
#unitFocusGroup .checkbox-item span {
    font-size: 0.85rem;
    cursor: pointer;
}

/* 重点字词行动态样式 */
.key-words-row {
    margin-top: 0.3rem;
    padding: 0.25rem 0.4rem;
    background: #FFF9F0;
    border-radius: 6px;
    border: 1px solid #FFE8D6;
}
.key-words-row .checkbox-item {
    color: #5A3E2B;
    font-size: 0.85rem;
}
.key-words-row .checkbox-item input {
    width: 12px;
    height: 12px;
    accent-color: #FFB6A0;
}

/* 词库浮层样式 */
.keyword-library-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(90, 62, 43, 0.3);
    z-index: 4000;
    justify-content: center;
    align-items: center;
}
.keyword-library-modal.show {
    display: flex;
}
.keyword-library-content {
    background: #fffdfa;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    box-shadow: 0 8px 30px rgba(90, 62, 43, 0.3);
    border: 1px solid #F5EBD9;
    overflow: hidden;
}
.keyword-library-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem;
    border-bottom: 2px solid #FFB6A0;
    font-weight: 600;
    color: #5A3E2B;
    font-size: 1rem;
}
.keyword-library-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #8B6F5C;
    cursor: pointer;
    line-height: 1;
}
.keyword-library-close:hover {
    color: #5A3E2B;
}
.keyword-library-body {
    padding: 0.8rem 1rem;
    max-height: 50vh;
    overflow-y: auto;
}
.keyword-category {
    margin-bottom: 0.8rem;
}
.keyword-category-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #8B6F5C;
    margin-bottom: 0.4rem;
}
.keyword-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.keyword-tag {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: #FFF0E6;
    border: 1px solid #FFD8C0;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #5A3E2B;
    cursor: pointer;
    transition: all 0.15s;
}
.keyword-tag:hover {
    background: #FFD8C0;
    border-color: #FFB6A0;
}
.keyword-tag.selected {
    background: #FFB6A0;
    border-color: #E5A090;
    color: #fff;
    font-weight: 600;
}
.keyword-library-footer {
    padding: 0.6rem 1rem;
    border-top: 1px solid #F5EBD9;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

/* 卡片三：您的教学想法文本域 */
.textarea-field {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 2px solid #FFE8D6;
    border-radius: 6px;
    background: #FEFAF5;
    font-size: 1rem;
    resize: vertical;
    min-height: 200px;
    color: #5A3E2B;
}
.textarea-field:focus {
    outline: none;
    border-color: #FFB6A0;
}

/* 底部生成按钮 */
.action-bar {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}
.btn-generate-prompt {
    background: #FFB6A0;
    border: none;
    color: #5A3E2B;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 0.7rem 2rem;
    border-radius: 24px;
    cursor: pointer;
    box-shadow: 0 3px 0 #E5B8A0;
    transition: 0.1s;
    border: 1px solid #FFD8C0;
    min-width: 180px;
}
.btn-generate-prompt:hover {
    animation: float 1.2s ease-in-out infinite;
}
.btn-generate-prompt:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #E5B8A0;
}
.btn-generate-prompt.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* compact 布局 */
.layout-compact .cards-row {
    width: 30%;
    flex-direction: column;
    gap: 0.7rem;
    transform: translateX(0);
    opacity: 0.95;
}
.layout-compact .card {
    width: 100%;
    padding: 0.8rem 0.7rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: default;
}
.layout-compact .card .card-title {
    font-size: 0.92rem;
    margin-bottom: 0.3rem;
    border-bottom: none;
}
.layout-compact .card .vertical-field,
.layout-compact .card .checkbox-group,
.layout-compact .card .other-focus,
.layout-compact .card .textarea-field,
.layout-compact .card .hint-text,
.layout-compact .card .focus-section {
    display: none !important;
}
.card-summary {
    display: none;
    color: #5A3E2B;
    font-size: 0.82rem;
    line-height: 1.4;
    padding-left: 0.2rem;
}
.layout-compact .card:nth-child(1) .card-summary {
    display: block;
}
.card-summary .summary-item {
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card.active-card {
    border-left: 3px solid #FFB6A0;
    background-color: #FDF1E0;
}

/* 右侧面板 — 初始完全隐藏 */
.right-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 100%;
    background: #fffdfa;
    border-radius: 8px;
    padding: 1rem 0.8rem;
    box-shadow: 0 2px 4px rgba(245, 235, 217, 0.3);
    border: 1px solid #F5EBD9;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.layout-compact .right-panel {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}
.panel-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
    margin: 0;
}
/* 可编辑提示语文本框 */
.editable-prompt {
    width: 100%;
    min-height: 200px;
    max-height: 70vh;
    overflow-y: auto;
    flex: 1;
    padding: 0.6rem 0.8rem;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    background: #FFFFFF;
    font-family: 'Noto Serif SC', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #111827;
    resize: vertical;
    margin-bottom: 0.8rem;
    box-sizing: border-box;
}
.editable-prompt:focus {
    outline: none;
    border-color: #FFB6A0;
}
.editable-prompt[readonly] {
    background: #FAFAF8;
    color: #333;
    cursor: default;
    border-color: #E8E0D5;
}
.editable-prompt[readonly]:focus {
    border-color: #E8E0D5;
}
.editable-prompt.editing {
    background: #FFF9F0;
    border: 2px solid #FFB6A0;
}

/* 左侧紧凑模式侧重展示 */
.compact-focus-view {
    display: none;
}
.layout-compact .card .compact-focus-view {
    display: block;
}
.compact-group {
    margin-bottom: 0.5rem;
}
.compact-group:last-child {
    margin-bottom: 0;
}
.compact-group-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: #8B6F5C;
    margin-bottom: 0.25rem;
    padding-left: 2px;
}
.compact-group-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 9px;
    background: #FFB6A0;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: middle;
}
.compact-group-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.compact-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: #FFF0E6;
    border: 1px solid #FFD8C0;
    border-radius: 10px;
    font-size: 0.72rem;
    color: #5A3E2B;
    line-height: 1.3;
}
.compact-tag-other {
    border-style: dashed;
    color: #8B6F5C;
    background: #FEFAF5;
}

/* 左侧紧凑模式教学想法只读展示 */
.compact-idea-view {
    display: none;
}
.layout-compact .card .compact-idea-view {
    display: block;
    font-size: 0.72rem;
    color: #5A3E2B;
    line-height: 1.4;
    max-height: 60px;
    overflow-y: auto;
    padding: 0.2rem 0;
}

/* 右侧面板按钮组 */
.right-panel-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    margin-top: -0.2rem;
    flex-wrap: wrap;
}
.right-panel-buttons-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.btn-outline {
    background: transparent;
    border: 2px solid #FFB6A0;
    color: #5A3E2B;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.1s;
    white-space: nowrap;
}
.btn-outline:hover {
    background: #FFE8D6;
}
.btn-solid {
    background: #FFB6A0;
    border: none;
    color: #5A3E2B;
    font-weight: 600;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 2px 0 #E5B8A0;
    transition: 0.1s;
    border: 1px solid #FFD8C0;
    white-space: nowrap;
}
.btn-solid:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #E5B8A0;
}
.btn-solid.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* 保存提示 */
.save-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #5A3E2B;
    color: #FDF5E6;
    padding: 0.4rem 1rem;
    border-radius: 40px;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2000;
}
.save-toast.show {
    opacity: 1;
}

/* 教学设计面板（内联在 mainInterface 中） */
.teaching-panel {
    background: #fffdfa;
    border-radius: 8px;
    padding: 1.2rem;
    box-shadow: 0 2px 4px rgba(245, 235, 217, 0.3);
    border: 1px solid #F5EBD9;
    width: 100%;
}
.teaching-panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1F2937;
    border-bottom: 2px solid #FFB6A0;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
}
.teaching-content {
    min-height: 250px;
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.7;
    white-space: pre-wrap;
    padding: 0.5rem;
    border: 1px solid #F5EBD9;
    border-radius: 6px;
    background: #FFFFFF;
    margin-bottom: 1.2rem;
}
.teaching-content[contenteditable="true"] {
    border: 2px solid #FFB6A0;
    background: #FFF9F0;
    outline: none;
}
.teaching-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1rem;
    align-items: center;
}
.left-group {
    display: flex;
    gap: 1rem;
    margin-right: auto;
}

/* 教学片段页面按钮放大 */
.teaching-footer .btn-outline,
.teaching-footer .btn-solid {
    font-size: 16px;
    padding: 10px 20px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Toast 提示（复制成功） */
.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: #5A3E2B;
    color: #FDF5E6;
    padding: 0.6rem 1.2rem;
    border-radius: 40px;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 2000;
}
.toast.show {
    opacity: 1;
}

.hidden {
    display: none !important;
}

/* 加载动画 */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(90, 62, 43, 0.3);
    border-top-color: #5A3E2B;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* === Model Selector === */
.model-selector {
    display: flex;
    align-items: center;
}
.model-selector select {
    padding: 0.3rem 0.6rem;
    border: 2px solid #E5B8A0;
    border-radius: 8px;
    background: #FFFFFF;
    font-size: 0.85rem;
    color: #5A3E2B;
    cursor: pointer;
    outline: none;
    max-width: 320px;
}
.model-selector select:focus {
    border-color: #FFB6A0;
}

/* === Tip Modal (model selection) === */
.tip-modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(90, 62, 43, 0.4);
    backdrop-filter: blur(3px);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease;
}
.tip-modal-overlay.hidden {
    display: none !important;
}
.tip-modal-card {
    background: #FFFDF7;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(90, 62, 43, 0.2);
    border: 1px solid #FFE2CE;
    max-width: 480px;
    width: 90%;
    overflow: hidden;
}
.tip-modal-card.small {
    max-width: 400px;
}
.tip-modal-header {
    background: linear-gradient(135deg, #FFE2CE, #FFF5EE);
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #5A3E2B;
    text-align: center;
}
.tip-modal-body {
    padding: 1.2rem;
    color: #5A3E2B;
    font-size: 0.9rem;
    line-height: 1.7;
}
.tip-modal-body p {
    margin: 0 0 0.6rem 0;
}
.tip-modal-body p:last-child {
    margin-bottom: 0;
}
.tip-modal-body ul {
    margin: 0.4rem 0 0.6rem 1rem;
    padding: 0;
    list-style: none;
}
.tip-modal-body ul li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
}
.tip-modal-body ul li::before {
    content: '•';
    position: absolute;
    left: -0.5rem;
    color: #C96F4A;
}
.tip-modal-footer {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    padding: 0.8rem 1.2rem 1.2rem;
}

/* === Streaming status indicator === */
.stream-status {
    display: inline-block;
    margin-left: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #8B6F5C;
    transition: opacity 0.3s;
}
.stream-status.streaming-active {
    color: #c0392b;
}
.stream-status.streaming-active::after {
    content: '';
    animation: dots 1.5s infinite;
}
@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

/* ========================================
   手机端适配 (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    /* 容器宽度 */
    .container {
        padding: 0.8rem;
    }

    /* 开始页面 */
    .landing-title {
        font-size: 2.5rem;
    }
    .landing-sub {
        font-size: 1rem;
    }
    .landing-btn {
        font-size: 1.2rem;
        padding: 0.6rem 1.5rem;
    }

    /* 使用指南页面 */
    .guide-header {
        padding: 1rem 1.2rem;
    }
    .guide-header h2 {
        font-size: 1.2rem;
    }
    .guide-content {
        padding: 0 1.2rem 1.2rem;
    }

    /* 主界面 */
    .main-interface .main-title {
        font-size: 2.2rem;
    }
    .main-interface .sub-head {
        font-size: 0.8rem;
    }

    /* 三栏卡片 → 垂直排列 */
    .cards-row {
        flex-direction: column;
        gap: 0.8rem;
    }
    .card {
        width: 100%;
    }

    /* 教学侧重复选框网格调整 */
    .focus-basic-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    #focusCheckboxGrid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem 0.5rem;
    }
    #unitFocusGroup {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.3rem 0.5rem;
    }

    /* 右侧提示语面板 */
    .right-panel {
        width: 100%;
        transform: translateX(0);
        position: relative;
        margin-top: 1rem;
        height: auto;
    }
    .layout-compact .right-panel {
        width: 100%;
    }
    /* 提示语文本框手机端增大 */
    .editable-prompt {
        min-height: 160px;
        font-size: 15px;
    }
    /* 提示语面板按钮组手机端优化 */
    .right-panel-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .right-panel-buttons-right {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    .right-panel-buttons .btn-outline,
    .right-panel-buttons .btn-solid {
        font-size: 0.85rem;
        padding: 6px 10px;
        min-height: 36px;
    }

    /* 紧凑模式在手机上隐藏左侧卡片 */
    .layout-compact .cards-row {
        display: none;
    }
    .layout-compact .right-panel {
        width: 100%;
        margin-top: 0;
    }

    /* 备课工作台：窄屏下三栏改上下堆叠 */
    .wb-layout {
        grid-template-columns: 1fr;
    }
    .wb-steps {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 0.3rem;
    }
    .wb-step-item {
        flex: none;
    }
    .wb-main, .wb-refs {
        position: static;
        max-height: none;
    }

    /* 按钮大小（触摸友好） */
    button, .btn-outline, .btn-solid, .steps-guide-btn, .steps-guide-btn-outline, .steps-modal-btn, .steps-modal-btn-outline, .back-to-home-btn {
        min-height: 44px;
        font-size: 1rem;
    }
    .btn-outline.small, .btn-solid.small {
        min-height: 32px;
        font-size: 0.75rem;
    }

    /* 模态框 */
    .steps-guide-card, .mode-selection-card, .tip-modal-card {
        width: 95%;
        max-height: 90vh;
    }
    .steps-guide-body {
        padding: 1rem;
    }
    .mode-cards {
        flex-direction: column;
        gap: 1rem;
    }
    .mode-card {
        width: 100%;
    }

    /* 教学想法卡片输入框高度增加 */
    .textarea-field {
        min-height: 120px;
    }

    /* 顶部栏调整 */
    .top-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .model-selector {
        width: 100%;
        order: -1;
    }
    .model-selector select {
        width: 100%;
        font-size: 16px;
    }

    /* 提示语面板按钮换行 */
    /* (已移至右侧面板区域内) */

    /* 教学设计面板按钮 */
    .teaching-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
    .left-group {
        margin-right: 0;
    }

    /* 减小内边距，增加紧凑性 */
    .card, .right-panel {
        padding: 0.8rem;
    }

    /* 底部生成按钮靠近卡片 */
    .action-bar {
        margin-top: 0.5rem;
    }
    .btn-generate-prompt {
        font-size: 1rem;
        padding: 0.6rem 1.5rem;
        min-width: 160px;
    }
    .card-title {
        font-size: 1rem;
    }
    .field-label {
        font-size: 0.9rem;
    }

    /* 表单元素防止iOS缩放 */
    select, input, textarea {
        font-size: 16px;
    }
    .field-select {
        font-size: 16px;
    }
    .single-select {
        font-size: 16px;
    }

    /* 词库浮层 */
    .keyword-library-content {
        width: 95%;
    }

    /* 开始页面内边距 */
    .landing-page {
        padding: 2rem 1.2rem;
    }

    /* 操作步骤模态框 */
    .steps-modal-card {
        width: 95%;
    }

    /* 复选框触摸热区增大 */
    .checkbox-item {
        padding: 0.3rem 0;
    }
    .focus-basic-grid .checkbox-item,
    #focusCheckboxGrid .checkbox-item,
    #unitFocusGroup .checkbox-item {
        padding: 0.25rem 0.4rem;
    }

    /* 模式选择模态框header — footer确保按钮不被截断 */
    .mode-header {
        padding: 1rem 1.2rem;
    }
    .mode-header h3 {
        font-size: 1.2rem;
    }
    .mode-body {
        padding: 1.2rem;
    }
    .mode-footer {
        padding: 0.8rem 1.2rem 1.2rem;
    }
    .steps-modal-btn-outline {
        min-height: 44px;
        font-size: 0.95rem;
        padding: 0.5rem 1.5rem;
    }

    /* 工作台文本框：16px 防止移动端聚焦时自动放大 */
    .wb-field textarea, .wb-note-field textarea, .wb-prompt-text {
        font-size: 16px;
    }
}

/* ========================================
   小手机进一步优化 (max-width: 480px)
   ======================================== */
@media (max-width: 480px) {
    .landing-title {
        font-size: 2rem;
    }
    .landing-brand {
        font-size: 0.9rem;
    }
    .main-interface .main-title {
        font-size: 1.8rem;
    }
    .steps-guide-header h3 {
        font-size: 1.2rem;
    }
    .mode-title {
        font-size: 1.2rem;
    }
    .guide-header h2 {
        font-size: 1.1rem;
    }
    .landing-top-links {
        font-size: 0.9rem;
        gap: 1rem;
    }
}

/* ========================================
   语文备课百宝箱
   ======================================== */

/* --- 页面容器 --- */
.toolbox-page {
    max-width: 1480px;
    width: 100%;
    margin: 0 auto;
}

/* --- 顶部导航栏 --- */
.toolbox-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.toolbox-top-left {
    display: flex;
    align-items: center;
}

/* --- 搜索栏 --- */
.toolbox-search-wrapper {
    flex: 0 0 auto;
}

.toolbox-search {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 2px solid #E5B8A0;
    border-radius: 24px;
    padding: 0.4rem 0.8rem;
    min-width: 280px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.toolbox-search:focus-within {
    border-color: #FFB6A0;
    box-shadow: 0 0 0 3px rgba(255,182,160,0.25);
}

.toolbox-search-icon {
    font-size: 1rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.toolbox-search input {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.9rem;
    color: #5A3E2B;
    font-family: inherit;
}

.toolbox-search input::placeholder {
    color: #B8A28E;
}

.toolbox-search-clear {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #B8A28E;
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
}

.toolbox-search-clear:hover {
    color: #8B6914;
}

/* --- 标题 --- */
.toolbox-title-wrapper {
    text-align: center;
    margin-bottom: 1.2rem;
}

.toolbox-main-title {
    font-size: 2rem;
    color: #8B6914;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.toolbox-sub-head {
    color: #B8A28E;
    font-size: 0.9rem;
    letter-spacing: 0.2em;
}

/* --- Tab 切换 --- */
.toolbox-tabs {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #E5B8A0;
}

.toolbox-tab {
    padding: 0.6rem 1.8rem;
    border: none;
    background: none;
    font-size: 1rem;
    color: #8B7355;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}

.toolbox-tab:hover {
    color: #5A3E2B;
}

.toolbox-tab.active {
    color: #8B6914;
    border-bottom-color: #8B6914;
    font-weight: 600;
}

/* --- Tab 内容 --- */
.toolbox-tab-content {
    display: none;
}

.toolbox-tab-content.active {
    display: block;
}

/* --- 分类导航布局 --- */
.toolbox-category-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* --- 左侧侧边栏 --- */
.toolbox-sidebar {
    flex: 0 0 180px;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    border: 2px solid #E5B8A0;
    position: sticky;
    top: 1rem;
}

.toolbox-sidebar-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #8B6914;
    margin-bottom: 0.8rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #E5B8A0;
}

.toolbox-category-list {
    max-height: calc(100dvh - 10rem);
    overflow-y: auto;
}

.toolbox-category-item {
    padding: 0.45rem 0.6rem;
    font-size: 0.85rem;
    color: #5A3E2B;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 0.2rem;
    transition: background 0.15s;
}

.toolbox-category-item:hover {
    background: #FFF3E8;
}

.toolbox-category-item.active {
    background: #FFE8D6;
    color: #8B6914;
    font-weight: 600;
}

.toolbox-subcategory-item {
    padding: 0.35rem 0.6rem 0.35rem 1.5rem;
    font-size: 0.8rem;
    color: #8B7355;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 0.1rem;
    transition: background 0.15s;
}

.toolbox-subcategory-item:hover {
    background: #FFF3E8;
}

.toolbox-subcategory-item.active {
    background: #FFE8D6;
    color: #8B6914;
    font-weight: 600;
}

/* --- 右侧内容区 --- */
.toolbox-content {
    flex: 1;
    min-width: 0;
}

/* --- 筛选栏 --- */
.toolbox-filter-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.6rem 1rem;
    background: #FFFFFF;
    border-radius: 10px;
    border: 2px solid #E5B8A0;
    flex-wrap: wrap;
}

.toolbox-filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.toolbox-filter-group label {
    font-size: 0.85rem;
    color: #8B7355;
    white-space: nowrap;
}

.toolbox-filter-group select {
    padding: 0.35rem 0.6rem;
    border: 1.5px solid #E5B8A0;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #5A3E2B;
    background: #FEFAF5;
    cursor: pointer;
    font-family: inherit;
    outline: none;
}

.toolbox-filter-group select:focus {
    border-color: #FFB6A0;
}

.toolbox-sort-group {
    margin-left: auto;
}

/* --- 资源卡片列表 --- */
.toolbox-resource-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: 1rem;
    align-items: stretch;
}

.toolbox-resource-list > .toolbox-loading,
.toolbox-resource-list > .toolbox-empty {
    grid-column: 1 / -1;
}

.toolbox-catalog-note {
    max-width: 720px;
    margin: 0.8rem auto 0;
    color: #8B7355;
    font-size: 0.85rem;
    line-height: 1.7;
}

button.toolbox-category-item,
button.toolbox-subcategory-item {
    display: block;
    width: 100%;
    text-align: left;
    font-family: inherit;
    border: 0;
    background: transparent;
}

button.toolbox-category-item:focus-visible,
button.toolbox-subcategory-item:focus-visible {
    outline: 2px solid #8B6914;
    outline-offset: -2px;
}

.toolbox-loading {
    text-align: center;
    padding: 2rem;
    color: #B8A28E;
    font-size: 0.95rem;
}

.toolbox-empty {
    text-align: center;
    padding: 2rem;
    color: #B8A28E;
    font-size: 0.95rem;
}

.toolbox-resource-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid #E9D9CB;
    box-shadow: 0 2px 7px rgba(90,62,43,0.035);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.toolbox-resource-card:hover {
    border-color: #D7B18F;
    box-shadow: 0 4px 16px rgba(90,62,43,0.08);
}

.toolbox-resource-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.toolbox-resource-name {
    display: block;
    min-width: 0;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.55;
    color: #5A3E2B;
    overflow-wrap: anywhere;
}

.toolbox-resource-title-link {
    color: inherit;
    text-decoration: none;
}

.toolbox-resource-title-link:hover {
    color: #8B6914;
    text-decoration: underline;
}

.toolbox-resource-type {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: #B8A28E;
    background: #FEFAF5;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #E5B8A0;
}

.toolbox-resource-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
    font-size: 0.8rem;
    color: #8B7355;
    line-height: 1.65;
    margin: 0 0 0.65rem;
}

.toolbox-resource-info-btn {
    display: inline-block;
    vertical-align: middle;
    padding: 0.08rem 0.35rem;
    margin-left: 0.25rem;
    border: 1px solid #E5CBB5;
    border-radius: 4px;
    background: #FEFAF5;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 400;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    color: #8B7355;
}

.toolbox-resource-info-btn:hover {
    color: #5A3E2B;
    background: #FFF3E8;
    border-color: #D7B18F;
}

.toolbox-access-note {
    color: #6D5946;
    background: #FEFAF5;
    border-left: 3px solid #D7BDA4;
    border-radius: 4px;
    padding: 0.55rem 0.75rem;
    margin: 0.6rem 0;
    font-size: 0.8rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.toolbox-flow-access {
    display: block;
    color: #6D5946;
    font-size: 0.76rem;
    line-height: 1.6;
    margin-top: 0.3rem;
}

.toolbox-resource-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.toolbox-tag {
    display: inline-block;
    font-size: 0.72rem;
    color: #8B6914;
    background: #FFF3E8;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    border: 1px solid #FFE0C0;
}

.toolbox-resource-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 0.65rem;
    border-top: 1px solid #F2E9E1;
}

.toolbox-resource-link {
    font-size: 0.78rem;
    color: #8B6914;
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.1rem;
    border-bottom: 1px solid transparent;
    overflow-wrap: anywhere;
    transition: background 0.15s, border-color 0.15s;
}

.toolbox-resource-link:hover {
    border-color: #D7B18F;
}

.toolbox-resource-title-link:focus-visible,
.toolbox-resource-link:focus-visible,
.toolbox-resource-info-btn:focus-visible,
.toolbox-resource-dialog-close:focus-visible {
    outline: 2px solid #8B6914;
    outline-offset: 3px;
    border-radius: 3px;
}

.toolbox-resource-dialog {
    position: fixed;
    inset: 0;
    width: 480px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 3rem);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid #E5CBB5;
    border-radius: 16px;
    background: #FFFDFA;
    color: #5A3E2B;
    box-shadow: 0 16px 60px rgba(65,45,30,0.2);
}

.toolbox-resource-dialog::backdrop {
    background: rgba(50,38,27,0.32);
}

.toolbox-resource-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #F0E4DA;
}

.toolbox-resource-dialog-header h2 {
    margin: 0;
    font-size: 1rem;
}

.toolbox-resource-dialog-close {
    border: 0;
    background: transparent;
    color: #8B7355;
    font-size: 1.5rem;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.toolbox-resource-dialog-body {
    padding: 1.25rem;
    font-size: 0.85rem;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.toolbox-resource-dialog-body h3 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
    line-height: 1.6;
}

.toolbox-resource-dialog-body .toolbox-access-note {
    margin: 1rem 0 0;
}

.toolbox-resource-dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 1.25rem 1.25rem;
}

/* --- 备课流程预览 --- */
.toolbox-flow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.toolbox-flow-step {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 1.2rem 1.5rem;
    border: 2px solid #E5B8A0;
    width: 100%;
    max-width: 700px;
    transition: border-color 0.2s;
}

.toolbox-flow-step:hover {
    border-color: #FFB6A0;
}

.toolbox-flow-step-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed #E5B8A0;
}

.toolbox-flow-step-number {
    width: 32px;
    height: 32px;
    background: #FFE8D6;
    color: #8B6914;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.toolbox-flow-step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #5A3E2B;
}

.toolbox-flow-resources {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.toolbox-flow-resource {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.8rem;
    background: #FEFAF5;
    border-radius: 8px;
    border: 1px solid #F0E0D0;
}

.toolbox-flow-resource-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.toolbox-flow-link {
    color: #8B6914;
    text-decoration: none;
    transition: color 0.15s;
}

.toolbox-flow-link:hover {
    color: #5A3E2B;
    text-decoration: underline;
}

.toolbox-flow-resource-desc {
    font-size: 0.8rem;
    color: #8B7355;
    line-height: 1.4;
}

.toolbox-flow-connector {
    text-align: center;
    font-size: 1.3rem;
    color: #B8A28E;
    padding: 0.15rem 0;
}

/* ========================================
   百宝箱响应式
   ======================================== */
@media (max-width: 768px) {
    .toolbox-category-layout {
        flex-direction: column;
    }

    .toolbox-sidebar {
        flex: 0 0 auto;
        position: static;
        width: 100%;
    }

    .toolbox-content {
        width: 100%;
    }

    .toolbox-category-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.3rem;
        max-height: 140px;
    }

    button.toolbox-category-item,
    button.toolbox-subcategory-item {
        width: auto;
        font-size: 0.78rem;
        padding: 0.35rem 0.5rem;
        margin-bottom: 0;
    }

    .toolbox-search {
        min-width: 200px;
    }

    .toolbox-filter-bar {
        gap: 0.5rem;
    }

    .toolbox-tab {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }

    .toolbox-flow-step {
        padding: 0.8rem 1rem;
    }

    .toolbox-main-title {
        font-size: 1.5rem;
    }
}

/* === Stale prompt banner (课文已更换) === */
.prompt-stale-warn {
    display: none;
    margin: 0 0 0.6rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #C0392B;
    border-radius: 6px;
    background: #FFF0EC;
    color: #C0392B;
    font-size: 0.86rem;
    font-weight: 600;
}

.prompt-stale-warn.visible {
    display: block;
}

/* === Settings modal (API keys) === */
.settings-card {
    max-width: 560px;
}
.settings-card .tip-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
}
.settings-body {
    max-height: 68vh;
    overflow-y: auto;
}
.settings-intro {
    background: #FFF5EE;
    border-left: 3px solid #C96F4A;
    padding: 0.6rem 0.8rem;
    border-radius: 0 8px 8px 0;
}
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin: 0.8rem 0;
}
.settings-provider {
    border: 1px solid #FFE2CE;
    border-radius: 14px;
    padding: 0.8rem 0.9rem;
    background: #FFFFFF;
}
.settings-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}
.settings-provider-name {
    font-weight: 600;
    color: #5A3E2B;
}
.settings-badge {
    font-size: 0.78rem;
    white-space: nowrap;
}
.settings-badge-on {
    color: #2E8B57;
}
.settings-badge-off {
    color: #A99184;
}
.settings-provider-note {
    font-size: 0.78rem;
    color: #8B6F5C;
    margin: 0.15rem 0 0.5rem;
}
.settings-provider-note a {
    color: #C96F4A;
    text-decoration: underline;
    cursor: pointer;
}
.settings-key-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.settings-key-input {
    flex: 1;
    min-width: 0;
    border: 1px solid #FFE2CE;
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    color: #5A3E2B;
    background: #FFFDF7;
    font-family: Consolas, Monaco, monospace;
}
.settings-key-input:focus {
    outline: none;
    border-color: #C96F4A;
}
.settings-option-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    flex-wrap: wrap;
}
.settings-default-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.settings-model-label {
    margin-left: auto;
    color: #8B6F5C;
}
.settings-model-select {
    border: 1px solid #FFE2CE;
    border-radius: 8px;
    padding: 0.3rem 0.4rem;
    font-size: 0.8rem;
    color: #5A3E2B;
    background: #FFFDF7;
    max-width: 190px;
}
.settings-action-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}
.settings-msg {
    font-size: 0.78rem;
    color: #2E8B57;
}
.settings-msg-err {
    color: #C0392B;
}
.settings-footnote {
    font-size: 0.78rem;
    color: #8B6F5C;
}
/* Generation state remains visible while the model is thinking. */
.generation-state {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 16px;
    margin: 10px 0;
    border-radius: 10px;
    background: #f3f6f5;
    color: #42574b;
    line-height: 1.6;
    font-size: 14px;
}
.generation-state[data-state="loading"]::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid #c9d8cf;
    border-top-color: #49745b;
    border-radius: 50%;
    animation: generation-spin .8s linear infinite;
}
.generation-state[data-state="error"] { background: #fff0ed; color: #a33628; }
.generation-state[data-state="ready"] { background: #ecf6ef; color: #315d40; }
.generation-message { flex: 1; min-width: 180px; }
#promptElapsed { font-variant-numeric: tabular-nums; color: #68766d; }
button:disabled { opacity: .5; cursor: not-allowed; }
@keyframes generation-spin { to { transform: rotate(360deg); } }


/* 备课工作台：顶部选课文 / 左步骤导览 / 中对话工作台 / 右参考资料 */
.container.workbench-active { max-width: min(1720px, calc(100vw - 40px)); }
.workbench-active .title-wrapper { display: none; }
.workbench-active .top-bar { margin-bottom: 14px; }
.workbench-active, .workbench-active * {
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}
.workbench-panel { background: #f5f8f1; border: 1px solid #e1e6dc; border-radius: 16px; padding: 14px; color: #2f3c34; }

/* 顶部：选课文 */
.wb-topbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; background: #fff; border: 1px solid #e3e9dd; border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; }
.wb-lesson, .wb-topbar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.wb-topbar-title { font-size: 13px; font-weight: 700; color: #31573b; padding-right: 12px; margin-right: 4px; border-right: 1px solid #e8ece3; letter-spacing: .5px; }
.wb-meta-label { color: #8b968c; font-size: 11px; }
.workbench-active .single-select { border: 1px solid #dbe2d6; border-radius: 7px; font-size: 13px; max-width: 220px; padding: 6px 8px; color: #33453b; background: #fbfcf9; }
.wb-save-status { font-size: 11px; color: #8b968c; }
.workbench-active .btn-outline { border: 1px solid #dbe1d7; background: #fff; color: #526151; box-shadow: none; border-radius: 8px; font-size: 12px; padding: 7px 11px; }
.workbench-active .btn-solid { background: #38644d; color: #fff; border: 1px solid #38644d; box-shadow: none; border-radius: 8px; font-size: 13px; padding: 8px 16px; }

/* 三栏 */
.workbench-active .wb-layout { display: grid; grid-template-columns: 200px minmax(360px, 1fr) 296px; gap: 14px; align-items: start; }

/* 左：步骤导览（与中、右两栏等高，展开当前问题也不出现滚动条） */
.workbench-active .wb-steps { display: flex; flex-direction: column; gap: 5px; height: calc(100dvh - 200px); min-height: 520px; overflow-y: auto; background: #fff; border: 1px solid #e3e9dd; border-radius: 12px; padding: 12px 10px; }
.wb-steps-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 0 6px 8px; margin-bottom: 3px; border-bottom: 1px solid #eef1ea; }
.wb-steps-head span { font-size: 11px; color: #9aa694; letter-spacing: 1.5px; }
.wb-steps-head small { font-size: 10px; color: #a8b39e; font-variant-numeric: tabular-nums; }
.wb-steps-foot { margin: auto 0 0; padding: 11px 6px 2px; border-top: 1px dashed #e9ede4; font-size: 10.5px; line-height: 1.75; color: #a3ad9b; }
.workbench-active .wb-step-item { position: relative; display: flex; align-items: center; align-content: center; flex-wrap: wrap; gap: 0 9px; width: 100%; border: 0; background: transparent; padding: 10px 9px 10px 11px; border-radius: 9px; font-size: 12.5px; color: #838b82; cursor: pointer; text-align: left; transition: background .18s, color .18s, box-shadow .18s; }
.workbench-active .wb-step-item:hover { background: #f3f6ee; color: #56654f; }
.workbench-active .wb-step-item.active { background: #e9f1e1; color: #22452f; font-weight: 700; box-shadow: inset 0 0 0 1px #cfdcc4, 0 4px 14px rgba(56, 100, 77, .09); }
.workbench-active .wb-step-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #38644d; }
.wb-step-q { flex: 0 0 100%; margin-top: 7px; padding: 8px 4px 1px 30px; border-top: 1px solid #cfdcc4; font-size: 11.5px; font-weight: 400; line-height: 1.75; letter-spacing: 0; color: #3f6449; text-align: left; }
.wb-step-q.is-new { animation: wb-q-open .2s ease-out both; }
@keyframes wb-q-open { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.wb-step-num { display: inline-flex; justify-content: center; align-items: center; flex: none; width: 21px; height: 21px; border: 1px solid #dfe5da; border-radius: 6px; font-size: 11px; color: #8b9689; background: #fbfcf9; transition: background .18s, color .18s, border-color .18s; }
.workbench-active .wb-step-item.filled .wb-step-num { border-color: #b9cfae; background: #eef4e7; color: #4a7052; }
.workbench-active .wb-step-item.active .wb-step-num { background: #38644d; border-color: #38644d; color: #fff; }
.wb-step-name { flex: 1 1 auto; min-width: 0; }
.wb-step-dot { height: 6px; width: 6px; border-radius: 50%; background: #dde3d7; margin-left: auto; flex: none; }
.workbench-active .wb-step-item.filled .wb-step-dot { background: #6f9574; }
.workbench-active .wb-step-item.stale .wb-step-dot { background: #c9a227; }
.workbench-active .wb-step-item.ready .wb-step-dot { background: #38644d; }

/* 中：对话工作台 */
.workbench-active .wb-main { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e3e9dd; border-radius: 12px; padding: 18px 20px 16px; height: calc(100dvh - 200px); min-height: 520px; overflow: hidden; }
.wb-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; scrollbar-width: thin; }
.wb-scroll.wb-step-in { animation: wb-content-in .28s ease both; }
@keyframes wb-content-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 字段：小语提问下横排的几格，老师先直接作答 */
.wb-fields { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 11px; }
.wb-field { min-width: 0; border: 1px solid #e3e9db; border-radius: 11px; background: #fbfcf8; padding: 12px 13px; transition: border-color .15s, background .15s, box-shadow .15s; }
.wb-field:focus-within { border-color: #9db78e; background: #fff; box-shadow: 0 0 0 3px rgba(132, 163, 116, .12); }
.wb-field-label { display: block; font-size: 11.5px; font-weight: 600; color: #6d7d66; letter-spacing: .3px; margin-bottom: 7px; }
.wb-field select, .wb-field-select { width: 100%; max-width: 100%; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: #2b4a34; padding: 2px 0; outline: none; cursor: pointer; }
.wb-field textarea { width: 100%; border: 0; background: transparent; outline: none; resize: vertical; font-size: 13px; line-height: 1.85; color: #3c4e3d; min-height: 50px; max-height: 150px; padding: 1px 0 0; }
.wb-field textarea::placeholder { color: #aab3a2; font-size: 12.5px; }
.wb-field-hint { margin: 7px 0 0; font-size: 11.5px; line-height: 1.7; color: #8b9a83; }
.wb-field-hint.hidden { display: none; }
.wb-fields.is-inline { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid #e3e9db; border-radius: 11px; background: #fbfcf8; overflow: hidden; }
.wb-fields.is-inline .wb-field { flex: 1 1 0; min-width: 132px; border: 0; border-radius: 0; background: transparent; padding: 10px 12px; }
.wb-fields.is-inline .wb-field + .wb-field { border-left: 1px solid #eef1e8; }
.wb-fields.is-inline .wb-field:focus-within { background: #fff; box-shadow: none; }
.wb-fields.is-inline .wb-field-label { margin-bottom: 4px; font-size: 11px; font-weight: 400; }

/* 对话 */
.wb-chat-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 10px; margin-bottom: 10px; border-bottom: 1px solid #eef1ea; }
.wb-chat-head-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #3a5a3d; }
.wb-avatar { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #38644d; color: #fff; font-size: 11px; flex: none; }
.wb-chat-feed { flex: none; min-height: 120px; padding: 2px 0 4px; }
.wb-chat-intro { flex: none; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #f4f8ee; border: 1px solid #e6eddc; }
.wb-intro-who { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: #6e8a6a; }
.wb-intro-text { margin: 0; font-size: 13.5px; line-height: 1.9; color: #3d5040; }
.wb-intro-text strong { font-weight: 600; color: #2b5238; }
.wb-chat-message { margin: 14px 0 20px; }
.wb-chat-who { font-size: 11px; font-weight: 600; color: #6e8a6a; margin-bottom: 6px; }
.wb-chat-text { font-size: 13.5px; line-height: 1.9; color: #3a4a3a; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-chat-message.is-user { width: fit-content; max-width: 82%; margin-left: auto; padding: 9px 13px; background: #eef3e8; border-radius: 12px 12px 3px 12px; }
.wb-chat-message.is-user .wb-chat-who { color: #899580; font-weight: 400; }
.wb-chat-options { display: grid; gap: 9px; margin-top: 13px; }
.wb-chat-option { display: flex; gap: 11px; align-items: flex-start; border: 1px solid #e3e8db; background: #fff; border-radius: 10px; padding: 12px 13px; text-align: left; color: #364c38; cursor: pointer; transition: border-color .15s, background .15s; }
.wb-chat-option:hover { border-color: #90ac82; background: #f8faf4; }
.wb-option-index { display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 7px; background: #eff3e9; font-size: 11px; flex: none; }
.wb-chat-option strong, .wb-chat-option span span, .wb-chat-option small { display: block; }
.wb-chat-option strong { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.wb-chat-option span span { font-size: 12.5px; line-height: 1.7; color: #6d7968; }
.wb-chat-option small { font-size: 11px; line-height: 1.6; margin-top: 5px; color: #8b9582; }
.wb-options-caption { margin: 2px 0 0; font-size: 11px; line-height: 1.7; color: #98a290; }
.wb-chat-option .wb-option-action { display: block; margin-top: 8px; font-size: 11px; color: #6e8b60; }
.wb-chat-option.is-borrowed { background: #edf4e8; border-color: #b8cbb0; }
.wb-chat-option.is-escape { justify-content: center; background: #fafbf8; border-style: dashed; border-color: #c6cdbf; color: #7a8572; }
.wb-chat-option.is-escape:hover { background: #f3f6ef; border-color: #90ac82; color: #556b48; }
.wb-chat-option.is-escape .wb-option-action { margin: 0; font-size: 12.5px; }
.wb-context-notice { flex: none; font-size: 11px; color: #97703e; background: #fcf5e5; border-radius: 7px; padding: 8px 10px; line-height: 1.7; margin-bottom: 4px; }
.wb-context-notice button, .wb-inline-action { border: 0; background: transparent; color: #38644d; text-decoration: underline; margin-left: 6px; cursor: pointer; font-size: 12px; }
.wb-inline-note { font-size: 11.5px; color: #7b887c; margin-right: 8px; }
.wb-chat-status { flex: none; font-size: 11.5px; line-height: 1.8; color: #7b8875; padding: 0; }
.wb-chat-status:empty { display: none; }
.wb-chat-status[data-state="loading"]::before { content: ""; display: inline-block; width: 10px; height: 10px; border: 2px solid #dce5d6; border-top-color: #5b7951; border-radius: 50%; margin-right: 8px; animation: generation-spin .8s linear infinite; }
.wb-chat-status[data-state="error"] { color: #a45b43; background: #fff6f0; border-radius: 8px; padding: 8px 10px; }

/* 输入 */
.wb-composer { flex: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; border: 1px solid #d9e2d1; background: #fff; border-radius: 12px; padding: 10px 12px 8px; box-shadow: 0 2px 10px rgba(56, 100, 77, .05); transition: border-color .15s; }
.wb-composer:focus-within { border-color: #8fab7c; }
.wb-composer textarea { width: 100%; background: transparent; border: 0; outline: none; resize: none; min-height: 44px; max-height: 140px; font-size: 13px; color: #334b34; line-height: 1.8; }
.wb-composer textarea::placeholder { color: #a0a894; }
.wb-composer-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.wb-composer-footer > span { font-size: 10px; color: #a5ae9c; }
.wb-step-nav { flex: none; margin-top: 10px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 2px; }
.wb-step-hint { flex: 1 1 160px; min-width: 0; margin: 0; text-align: center; font-size: 11px; line-height: 1.6; color: #95a08c; }

/* 右：参考资料 */
.workbench-active .wb-refs { height: calc(100dvh - 200px); min-height: 520px; overflow-y: auto; padding: 0; border: 1px solid #e3e9dd; border-radius: 12px; background: #fff; min-width: 0; }
.wb-refs-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 700; color: #31573b; padding: 14px 14px 6px; }
.wb-refs-title button { font-size: 10px; color: #8a997e; border: 0; background: transparent; cursor: pointer; }
.wb-refs-intro { font-size: 12px; color: #7f8c78; line-height: 1.75; margin: 0 14px 10px; }
.wb-refs-legend { display: flex; flex-direction: column; gap: 6px; margin: 0 14px 12px; padding: 9px 11px; background: #f8faf4; border: 1px solid #eef1e8; border-radius: 9px; }
.wb-refs-legend span { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #7d8a76; line-height: 1.6; }
.wb-refs-body { padding: 0 11px 12px; }
.wb-ref-group { border: 1px solid #e7eae1; border-radius: 9px; margin-bottom: 8px; background: #fcfdfa; overflow: hidden; }
.wb-ref-group > summary { display: flex; align-items: flex-start; flex-direction: column; gap: 5px; cursor: pointer; font-size: 12.5px; padding: 11px 11px; color: #4c5e47; position: relative; padding-right: 26px; list-style: none; }
.wb-ref-group > summary::-webkit-details-marker { display: none; }
.wb-ref-group > summary::after { content: "+"; position: absolute; right: 11px; top: 10px; color: #8c9f81; }
.wb-ref-group[open] > summary::after { content: "−"; }
.wb-ref-badge { flex: none; font-size: 9.5px; font-weight: 400; color: #8b9a80; background: #f0f4eb; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.wb-ref-badge.is-ai { color: #5c7b4f; background: #ecf4e4; }
.wb-ref-badge.is-db { color: #5b7891; background: #eaf1f8; }
.wb-ref-badge.is-mine { color: #8d6f3c; background: #fbf2e0; }
.wb-ref-badge.is-none { color: #94948a; background: #f1f1ec; }
.wb-ref-content { padding: 0 11px 9px; border-top: 1px solid #f0f2ec; }
.wb-ref-item { padding-top: 9px; font-size: 11px; line-height: 1.85; color: #7b8674; overflow-wrap: anywhere; }
.wb-ref-item > summary { cursor: pointer; color: #607054; font-size: 11.5px; list-style: none; position: relative; padding-right: 16px; }
.wb-ref-item > summary::-webkit-details-marker { display: none; }
.wb-chat-text.is-typing { color: #9aa79a; }
.wb-ref-item > strong { display: block; color: #607054; font-size: 10px; margin-bottom: 3px; }
.wb-ref-item.is-plain { padding-bottom: 1px; }
.wb-ref-item > summary::after { content: "+"; position: absolute; right: 0; top: 0; color: #8c9f81; font-size: 11px; }
.wb-ref-item[open] > summary::after { content: "−"; }
.wb-ref-item p { margin: 4px 0 0; white-space: pre-wrap; }
.wb-ref-image { display: block; max-width: 100%; height: auto; margin: 9px 0; border-radius: 4px; }
.wb-task-level { margin: 4px 0; }
.wb-task-level > summary, .wb-task-group > summary { position: relative; list-style: none; cursor: pointer; padding: 9px 20px 9px 15px; overflow-wrap: anywhere; }
.wb-task-level > summary { color: #40523f; font-size: 13px; line-height: 1.6; font-weight: 700; }
.wb-task-level > summary::-webkit-details-marker, .wb-task-group > summary::-webkit-details-marker { display: none; }
.wb-task-level > summary::before { content: "•"; position: absolute; left: 0; color: #818b7a; }
.wb-task-level > summary::after, .wb-task-group > summary::after { content: "+"; position: absolute; right: 2px; top: 9px; color: #8c9f81; font-weight: 400; }
.wb-task-level[open] > summary::after, .wb-task-group[open] > summary::after { content: "−"; }
.wb-task-group { margin-left: 15px; }
.wb-task-group > summary { color: #53654b; font-size: 12px; line-height: 1.7; font-weight: 400; }
.wb-task-group > summary::before { content: "○"; position: absolute; left: 0; color: #89937e; font-size: 11px; }
.wb-task-text { margin: 0 0 10px 15px; padding: 5px 0; font-size: 11.5px; line-height: 1.95; color: #74806c; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-task-source { margin: 9px 0; padding-top: 8px; border-top: 1px solid #edf0e7; font-size: 10.5px; line-height: 1.8; color: #8b9582; }
.wb-task-source > summary { cursor: pointer; }
.wb-task-source > p { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-task-level > summary:focus-visible, .wb-task-group > summary:focus-visible, .wb-task-source > summary:focus-visible { outline: 2px solid #71935c; outline-offset: 2px; border-radius: 4px; }
.wb-refs-empty { font-size: 11px; line-height: 1.9; color: #97a18e; padding: 8px; }
.workbench-active .refs-collapsed .wb-layout { grid-template-columns: 200px minmax(360px, 1fr) 44px; }
.refs-collapsed .wb-refs-content { display: none; }
.wb-refs-rail { border: 0; background: #eff3e9; color: #6d855f; width: 100%; padding: 15px 9px; min-height: 120px; writing-mode: vertical-rl; cursor: pointer; font-size: 12px; letter-spacing: 3px; border-radius: 10px; }

/* 右栏双 tab：参考资料 | 思路看板 */
.wb-aside-tabs { display: flex; gap: 4px; padding: 12px 14px 0; }
.wb-aside-tabs button { flex: 1; border: 0; background: transparent; font-size: 12.5px; color: #7d8a76; padding: 7px 0 8px; border-bottom: 2px solid #edf0e8; cursor: pointer; transition: color .15s, border-color .15s; }
.wb-aside-tabs button:hover { color: #556b48; }
.wb-aside-tabs button.active { color: #31573b; font-weight: 700; border-bottom-color: #6e8b60; }

/* 思路看板：7 张决策卡，灰（未开始）→ 点亮（已钉死） */
.wb-board { padding: 2px 14px 14px; display: grid; gap: 10px; }
.wb-board-card { border: 1px solid #e7eae1; border-radius: 10px; background: #fafbf8; padding: 10px 12px; }
.wb-board-card.is-lit { background: #fff; border-color: #b9cfaa; box-shadow: 0 1px 6px rgba(56, 100, 77, .07); }
.wb-board-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #4c5e47; }
.wb-board-num { flex: none; width: 17px; height: 17px; border-radius: 50%; background: #e6ebdf; color: #7d8a76; font-size: 10.5px; font-weight: 400; display: flex; align-items: center; justify-content: center; }
.is-lit .wb-board-num { background: #5b7951; color: #fff; }
.wb-board-state { margin-left: auto; font-size: 10px; font-weight: 400; color: #a2ab97; }
.is-lit .wb-board-state { color: #5b7951; }
.wb-board-tip { font-size: 11px; color: #97a18e; line-height: 1.7; margin: 6px 0 0; }
.wb-board-facts { margin-top: 8px; padding: 7px 9px; background: #f4f7f0; border-radius: 7px; font-size: 10.5px; color: #7d8a76; line-height: 1.8; }
.wb-board-facts p { margin: 0; }
.wb-board-facts b { color: #607054; font-weight: 600; margin-right: 5px; }
.wb-board-slots { margin-top: 8px; display: grid; gap: 7px; }
.wb-board-slot { font-size: 11.5px; line-height: 1.8; color: #55654e; overflow-wrap: anywhere; }
.wb-board-slot b { display: block; font-size: 10.5px; color: #8b9882; font-weight: 600; }
.wb-board-slot.is-empty { color: #aab39f; }

/* 对话里的半成品卡：小语起草，老师确认或微调后才上板 */
.wb-card-draft { margin-top: 12px; border: 1px solid #d7e2cc; background: #fdfff9; border-radius: 10px; padding: 12px 13px; }
.wb-card-draft.is-stale { opacity: .72; }
.wb-card-draft.is-done { border-color: #e3e8db; background: #f8faf4; }
.wb-card-draft-head { font-size: 12px; font-weight: 700; color: #47603f; margin-bottom: 2px; }
.wb-card-draft-facts { margin-top: 8px; padding: 7px 9px; background: #f4f7f0; border-radius: 7px; font-size: 10.5px; color: #7d8a76; line-height: 1.8; }
.wb-card-draft-facts p { margin: 0; }
.wb-card-draft-facts b { color: #607054; font-weight: 600; margin-right: 5px; }
.wb-card-draft-slot { margin-top: 9px; font-size: 12.5px; line-height: 1.8; color: #44563e; }
.wb-card-draft-slot b { display: block; font-size: 11px; color: #7d8a76; font-weight: 600; margin-bottom: 2px; }
.wb-card-draft-slot p { margin: 0; }
.wb-card-draft-slot textarea { width: 100%; border: 1px solid #dfe6d5; border-radius: 7px; padding: 7px 9px; font-size: 12.5px; line-height: 1.7; color: #334b34; background: #fff; resize: vertical; outline: none; }
.wb-card-draft-slot textarea:focus { border-color: #8fab7c; }
.wb-card-draft-actions { display: flex; gap: 8px; margin-top: 12px; }
.wb-card-draft-note { margin: 8px 0 0; font-size: 11px; color: #7d8a76; }

/* 小语说完开场，本步要确认的几项再出现 */
.wb-fields.is-reveal { animation: wb-fields-in .26s ease both; }
@keyframes wb-fields-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
/* 每轮末尾的出口：老师认为本步讨论够了 */
.wb-chat-option.is-wrap { justify-content: center; background: #f7faf3; border-style: dashed; border-color: #b9cfaa; }
.wb-chat-option.is-wrap:hover { background: #eef4e9; border-color: #8fab7c; }
.wb-chat-option.is-wrap .wb-option-action { margin: 0; font-size: 12px; font-weight: 600; color: #47603f; }

/* 汇总导出 */
#wbExport { flex: none; padding: 2px 0 0; }
.wb-export-lead { font-size: 12px; color: #7c8974; line-height: 1.8; margin-bottom: 15px; }
.wb-summary-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; line-height: 1.9; color: #5e7057; }
.wb-export-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.workbench-active .wb-prompt-text { width: 100%; margin-top: 16px; border: 1px solid #dfe4d9; border-radius: 8px; padding: 9px; font-size: 12px; color: #40523f; background: #fcfdf9; resize: vertical; line-height: 1.8; }
.workbench-active button:focus-visible, .workbench-active summary:focus-visible { outline: 2px solid #71935c; outline-offset: 3px; }

@media (min-width: 1600px) {
    .workbench-active .wb-layout { grid-template-columns: 224px minmax(380px, 1fr) 336px; gap: 16px; }
}
@media (max-width: 1320px) and (min-width: 1101px) {
    .workbench-active .wb-layout { grid-template-columns: 178px minmax(340px, 1fr) 256px; gap: 12px; }
    .workbench-active .refs-collapsed .wb-layout { grid-template-columns: 178px minmax(340px, 1fr) 40px; }
    .workbench-active .wb-main { padding: 16px; }
    .wb-save-status { display: none; }
}
@media (max-width: 1100px) {
    .workbench-panel { padding: 10px; }
    .workbench-active .wb-layout, .workbench-active .refs-collapsed .wb-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .workbench-active .wb-steps { height: auto; min-height: 0; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; padding: 8px; align-items: flex-start; }
    .wb-steps-head, .wb-steps-foot { display: none; }
    .workbench-active .wb-step-item { flex: none; width: auto; white-space: nowrap; padding: 8px; }
    .workbench-active .wb-main { padding: 14px; height: calc(100dvh - 150px); min-height: 520px; max-height: none; }
    .wb-chat-feed { max-height: none; }
    .workbench-active .wb-refs { height: auto; min-height: 0; max-height: 56dvh; }
    .wb-refs-rail { writing-mode: horizontal-tb; min-height: auto; padding: 10px; }
    .wb-topbar { padding: 9px 11px; }
    .wb-topbar-actions { gap: 6px; }
    .wb-save-status, .wb-composer-footer > span { display: none; }
    .workbench-active .wb-step-item, .workbench-active .btn-outline { min-height: 34px; }
    .wb-step-q { flex: none; margin-top: 6px; padding: 6px 2px 0 30px; max-width: 220px; white-space: normal; }
    .wb-step-hint { display: none; }
}

/* 本步信息区底部的提交按钮 */
.wb-fields-confirm { grid-column: 1 / -1; margin-top: 6px; display: flex; align-items: center; gap: 8px; }
.wb-fields-confirm-btn { height: 32px; padding: 0 16px; font-size: 13px; line-height: 1; border-radius: 8px; }
.wb-fields-confirm-btn:disabled { background: #e4e7de; color: #9aa290; border-color: #dde0d7; cursor: not-allowed; }
.wb-fields-confirm-hint { font-size: 11.5px; color: #8c9583; }
.wb-fields-confirm-hint.hidden { display: none; }


/* 备课环节翻页及顶部索引 */
.toolbox-flow-container { max-width: 1080px; margin: 0 auto; gap: 20px; scroll-margin-top: 20px; min-width: 0; }
.toolbox-flow-indexes { display: flex; width: 100%; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.toolbox-flow-index { display: flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 8px; padding: 12px 14px; border: 1px solid #E5B8A0; border-radius: 10px; background: #fff; color: #755B3B; font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; }
.toolbox-flow-index-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #FEF2E5; font-size: .8rem; }
.toolbox-flow-index:hover { background: #FFF5EA; }
.toolbox-flow-index.active { border-color: #8B6914; background: #FFF0DC; color: #72520D; font-weight: 700; }
.toolbox-flow-index.active .toolbox-flow-index-number { background: #8B6914; color: #fff; }
.toolbox-flow-container .toolbox-flow-step { max-width: 700px; box-sizing: border-box; }
.toolbox-flow-container .toolbox-flow-step-title { margin: 0; line-height: 1.5; }
.toolbox-flow-container .toolbox-flow-resources { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; align-items: start; }
.toolbox-flow-container .toolbox-flow-resource { padding: 16px; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.toolbox-flow-container .toolbox-flow-resource-name { line-height: 1.6; }
.toolbox-flow-container .toolbox-flow-resource-desc { line-height: 1.8; }
.toolbox-flow-pager { display: flex; width: 100%; max-width: 700px; align-items: center; justify-content: space-between; gap: 12px; color: #8B7355; font-size: .9rem; }
.toolbox-flow-pager button { padding: 10px 20px; border: 1px solid #E5B8A0; border-radius: 10px; background: #fff; color: #755B3B; font: inherit; cursor: pointer; }
.toolbox-flow-pager button:hover:not(:disabled) { background: #FFF0DC; border-color: #8B6914; }
.toolbox-flow-pager button:disabled { opacity: .45; cursor: default; }
.toolbox-flow-index:focus-visible, .toolbox-flow-pager button:focus-visible { outline: 2px solid #8B6914; outline-offset: 3px; }
@media (max-width: 768px) {
    .toolbox-flow-container { gap: 14px; }
    .toolbox-flow-container .toolbox-flow-resources { grid-template-columns: minmax(0, 1fr); }
    .toolbox-flow-index { padding: 10px 12px; font-size: .85rem; }
    .toolbox-flow-pager { gap: 8px; font-size: .8rem; }
    .toolbox-flow-pager button { padding: 10px 12px; }
}


/* 底部数字页码 */
.toolbox-flow-page-numbers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.toolbox-flow-pager .toolbox-flow-page-number { padding: 0; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 8px; }
.toolbox-flow-pager .toolbox-flow-page-number.active { background: #8B6914; border-color: #8B6914; color: #fff; font-weight: 700; }
.toolbox-flow-pager .toolbox-flow-page-number.active:hover { background: #755710; }
.toolbox-flow-page-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 768px) {
    .toolbox-flow-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .toolbox-flow-page-numbers { grid-column: 1 / -1; grid-row: 1; }
    .toolbox-flow-pager > button:first-child { grid-column: 1; grid-row: 2; justify-self: start; }
    .toolbox-flow-pager > button:last-child { grid-column: 2; grid-row: 2; justify-self: end; }
    .toolbox-flow-pager .toolbox-flow-page-number { width: 32px; height: 36px; flex-basis: 32px; }
}