/* ===== CSS Reset & Base ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #4338ca;
    --primary-dark: #3124a8;
    --primary-light: #eef0ff;
    --secondary: #9333ea;
    --secondary-light: #f3e8ff;
    --accent: #06b6d4;
    --brand-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 55%, #c026d3 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(192, 38, 211, 0.12));
    --bg-page: #eef3fa;
    --bg-card: rgba(255, 255, 255, 0.92);
    /* Intro 专用字体栈：拉丁/数字用 Manrope，中文用 MiSans（均自托管，见 fonts/） */
    --font-intro: 'Manrope', 'MiSans', sans-serif;
    --bg-sidebar: #f0f4f9;
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a72;
    --text-muted: #8a8aa3;
    --border-color: #dde3ef;
    --shadow-sm: 0 1px 3px rgba(79, 70, 229, 0.08);
    --shadow-md: 0 4px 20px rgba(99, 102, 241, 0.14);
    --shadow-lg: 0 8px 32px rgba(124, 58, 237, 0.16);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --sidebar-width: 248px;
    --topbar-height: 56px;
    --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-display: 'Noto Sans SC', 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* ===== Web Fonts ===== */
/* 展示字体: 思源黑体 Heavy (Noto Sans SC wght@700;900) — 免费商用, 通过 Google 中国镜像在 index.html 的 <link> 加载 */

html {
    font-size: 14px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(1000px 560px at 100% 0%, rgba(217, 70, 239, 0.16), transparent 55%),
        linear-gradient(135deg, #e9edff 0%, #eee9ff 38%, #f4eaff 70%, #fdeeff 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: 1.6;
    overflow: hidden;
    height: 100vh;
}

.hidden {
    display: none !important;
}

/* ===== App Container ===== */
.app-container {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* ===== Sidebar ===== */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 6%, #f0f4f9) 0%, color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 4%, #eef2f9) 100%);
    border-right: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 22%, rgba(221, 227, 239, 0.9));
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition), background var(--transition), border-color var(--transition);
    z-index: 100;
    flex-shrink: 0;
}

.sidebar.collapsed {
    margin-left: calc(-1 * var(--sidebar-width));
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    height: var(--topbar-height);
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-text {
    font-size: 16px;
    font-weight: 700;
    /* Shiny gradient is now provided by the .shiny-text effect (see below). */
}

/* ===== ShinyText — vanilla port of React Bits <ShinyText />
   Moving gradient clipped to text. Mirrors the component: 200% gradient,
   sweep from background-position 150% -> -50% (direction 'left' = normal). ===== */
.shiny-text {
    display: inline-block;
    background-image: linear-gradient(
        var(--shiny-spread, 120deg),
        var(--shiny-color, #b5b5b5) 0%,
        var(--shiny-color, #b5b5b5) 35%,
        var(--shiny-shine, #ffffff) 50%,
        var(--shiny-color, #b5b5b5) 65%,
        var(--shiny-color, #b5b5b5) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-position: 150% center;
    animation: shiny-sweep var(--shiny-speed, 2s) linear infinite;
    animation-direction: var(--shiny-dir, normal);
}
.shiny-text--disabled {
    background-image: none;
    -webkit-text-fill-color: var(--shiny-color, #b5b5b5);
    color: var(--shiny-color, #b5b5b5);
    animation: none;
}
.shiny-text--pause-hover:hover {
    animation-play-state: paused;
}
@keyframes shiny-sweep {
    0% { background-position: 150% center; }
    100% { background-position: -50% center; }
}
@media (prefers-reduced-motion: reduce) {
    .shiny-text { animation: none; }
}

.sidebar-toggle {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    display: none;
    align-items: center;
}

.sidebar-toggle:hover {
    background: var(--bg-page);
    color: var(--primary);
}

/* ===== Sidebar Navigation ===== */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 2px;
}

.nav-group {
    margin-bottom: 4px;
}

.nav-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 8px;
    cursor: pointer;
    user-select: none;
    transition: all var(--transition);
    border-radius: var(--radius-md);
    margin: 0 8px;
}

.nav-group-header:hover {
    background: rgba(232, 241, 255, 0.6);
}

.nav-group-title {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.nav-group-arrow {
    color: var(--text-muted);
    transition: transform var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-group.collapsed .nav-group-arrow {
    transform: rotate(-90deg);
}

.nav-group.collapsed .nav-list {
    display: none;
}

.nav-list {
    list-style: none;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 12px 4px;
    padding: 10px 14px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 14px;
    transition: all var(--transition);
    position: relative;
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    width: calc(100% - 24px);
    text-align: left;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.55);
    color: var(--tool-accent, var(--primary));
}

.nav-item.active {
    color: var(--tool-accent, var(--primary));
    font-weight: 600;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 242, 255, 0.8)) padding-box,
                linear-gradient(135deg, var(--tool-accent, #6366f1), color-mix(in srgb, var(--tool-accent, #6366f1) 70%, #ffffff)) border-box;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.16);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--tool-accent, #6366f1);
}

.nav-item.active .nav-icon {
    filter: drop-shadow(0 2px 4px rgba(99, 102, 241, 0.28));
    transform: scale(1.05);
}

.nav-icon {
    font-size: 16px;
    width: 24px;
    height: 24px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    display: block;
}

.nav-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 工单 Z2：写作教学「核心亮点」星星 —— 低饱和淡黄 + 细腻光晕，契合粉/白/灰 UI；
   不撑行高（inline-flex + 固定尺寸），不与文字挤压（margin-left 小间隙）。 */
.nav-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-left: 5px;
    filter: drop-shadow(0 1px 2px rgba(245,158,11,.38));
    animation: navStarPulse 3.2s ease-in-out infinite;
}
@keyframes navStarPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .78; transform: scale(.92); }
}
.nav-item.active .nav-star svg { fill: #FCD34D; stroke: #F59E0B; }

.nav-badge {
    background: #ff6b6b;
    color: white;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
}

/* 开发中工具的小标签（导航右侧） */
.nav-dev-badge {
    flex-shrink: 0;
    background: #ede9fe;
    color: #7c3aed;
    font-size: 10.5px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* 分组标题带图标（竞赛辅助） */
.nav-group-left {
    display: flex;
    align-items: center;
    gap: 7px;
}

.nav-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.nav-group-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
}

.history-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    margin-right: 4px;
    display: inline-block;
    vertical-align: middle;
}

.user-avatar {
    width: 22px;
    height: 22px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    cursor: pointer;
}

/* ===== 开发中占位页 ===== */
.dev-panel {
    display: flex;
    justify-content: center;
    padding: 40px 16px 56px;
}

.dev-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid var(--border-color, #e6ebf3);
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(79, 124, 255, 0.10);
    padding: 38px 32px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 柔和光晕 */
.dev-card::before {
    content: '';
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 180px;
    background: radial-gradient(closest-side, rgba(139, 92, 246, 0.16), transparent 70%);
    pointer-events: none;
}

.dev-icon-wrap {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.dev-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dev-title {
    font-size: 21px;
    font-weight: 800;
    color: var(--text-ink, #1f2330);
    margin: 0 0 10px;
    position: relative;
    z-index: 1;
}

.dev-status {
    display: inline-block;
    background: #f3e8ff;
    color: #7c3aed;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 13px;
    border-radius: 999px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.dev-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5160;
    margin: 0 0 18px;
    max-width: 360px;
    position: relative;
    z-index: 1;
}

.dev-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.dev-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c9b8f5;
    animation: none;
}

.dev-dot:nth-child(2) { background: #b9a4f0; }
.dev-dot:nth-child(3) { background: #a78bfa; }

.dev-tip {
    font-size: 13px;
    color: #8a90a0;
    margin: 0 0 24px;
    position: relative;
    z-index: 1;
}

.dev-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #ffffff;
    color: var(--text-ink, #1f2330);
    border: 1.5px solid var(--border-color, #e6ebf3);
    padding: 9px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition, 0.2s);
    position: relative;
    z-index: 1;
}

.dev-back-btn:hover {
    border-color: #c4b5fd;
    color: #7c3aed;
    background: #faf8ff;
}

/* G 听说：更大圆角的插画容器 */
.dev-icon-wrap.has-illustration {
    width: 96px;
    height: 96px;
    border-radius: 26px;
    background: linear-gradient(135deg, #ede9fe 0%, #e0f2fb 100%);
    margin-bottom: 20px;
    box-shadow: 0 10px 26px rgba(99, 102, 241, 0.16);
}

.dev-icon-wrap.has-illustration .dev-icon svg {
    width: 80px;
    height: 64px;
}

/* 声波轻微呼吸，克制不循环闪动感 */
.gs-wave {
    transform-origin: center;
    animation: gsWavePulse 2.4s ease-in-out infinite;
}

@keyframes gsWavePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* 预期功能标签 */
.dev-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    position: relative;
    z-index: 1;
}

.dev-features:empty {
    display: none;
}

.dev-feature-pill {
    font-size: 12.5px;
    font-weight: 600;
    color: #4338ca;
    background: linear-gradient(135deg, #eef0ff 0%, #f1e9ff 100%);
    border: 1px solid rgba(124, 58, 237, 0.16);
    padding: 5px 13px;
    border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
    .gs-wave { animation: none; }
}

/* ===== Sidebar Footer ===== */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-color);
}

.credits-display {
    background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
    border-radius: var(--radius-md);
    padding: 14px;
}

.credits-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.credits-icon {
    font-size: 24px;
}

.credits-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.credits-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
}

.btn-rc {
    width: 100%;
    padding: 7px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-rc:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 140, 255, 0.3);
}

/* ===== Main Content ===== */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
    background: transparent;
}

/* ===== Top Bar ===== */
.top-bar {
    height: var(--topbar-height);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(221, 227, 239, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 100; /* 顶栏（含下拉/个人中心入口）必须位于 Intro Section 之上，否则下拉会被 Intro 色板挡住 */
    transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.top-bar.scrolled {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.06);
    border-bottom-color: rgba(221, 227, 239, 0.9);
}
[data-theme="dark"] .top-bar {
    background: rgba(17, 23, 37, 0.6);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .top-bar.scrolled {
    background: rgba(17, 23, 37, 0.85);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    overflow: hidden;
}

.menu-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ===== 工单 F#6：顶部状态栏收拢 / 展开 ===== */
/* 收拢态：height 归零 + 无下边框 + 内容溢出隐藏 —— 完全消失，不留隔断条 */
.top-bar.topbar-folded {
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
    overflow: hidden;
}
.top-bar.topbar-folded .top-bar-left,
.top-bar.topbar-folded .top-bar-right {
    display: none;
}
/* 收拢 / 展开按钮（线性图标，无底） */
.topbar-fold-btn,
.topbar-unfold-btn {
    background: none;
    border: none;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: color 0.2s ease, background 0.2s ease;
}
.topbar-fold-btn:hover,
.topbar-unfold-btn:hover {
    background: rgba(148, 163, 184, 0.14);
    color: var(--text-primary, #1f2937);
}
/* 展开按钮：悬浮在右上角（fixed，绕开折叠容器 overflow:hidden 裁剪） */
.topbar-unfold-btn {
    position: fixed;
    top: 8px;
    right: 18px;
    z-index: 101;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(221, 227, 239, 0.9);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.08);
}
[data-theme="dark"] .topbar-unfold-btn {
    background: rgba(17, 23, 37, 0.85);
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
}
[data-theme="dark"] .topbar-unfold-btn:hover {
    background: rgba(30, 41, 59, 0.95);
    color: #f1f5f9;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    max-width: 100%;
}

.breadcrumb-item {
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: 600;
    flex-shrink: 0;
}

.breadcrumb-sep {
    color: var(--text-muted);
}

.btn-text {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.btn-text:hover {
    background: var(--bg-page);
    color: var(--primary);
}

.btn-login {
    padding: 7px 24px;
    background: var(--brand-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.32);
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.42);
}

.user-avatar {
    cursor: pointer;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-gradient);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}

/* ===== Workspace ===== */
.workspace {
    flex: 1;
    overflow-y: auto;
    padding: 24px clamp(24px, 4vw, 48px);
    width: calc(100% - 48px);
    max-width: 1380px;
    margin: 0 auto;
    background: transparent;
}

.workspace::-webkit-scrollbar {
    width: 6px;
}

.workspace::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ===== Tool Header ===== */
/* ===== 工具 Intro 区（统一升级：高级感 + 视觉记忆点） ===== */
.tool-header.intro-card {
    --ic1: color-mix(in srgb, var(--intro-accent, #8b5cf6) 16%, #ffffff);
    --ic2: var(--intro-accent, #8b5cf6);
    position: relative;
    z-index: 1; /* 明确放到下层：保证顶栏下拉/个人中心抽屉/夜间切换不会被 Intro 色板挡住 */
    isolation: isolate; /* 强制建立独立堆叠上下文，避免 transform: none 状态下与其他 z-auto 兄弟节点按 DOM 顺序错位覆盖 */
    margin-bottom: 18px;
    min-height: 134px;
    display: flex;
    align-items: center;
    padding: 22px 28px;
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--intro-accent, #8b5cf6) 9%, #ffffff) 0%, color-mix(in srgb, var(--intro-accent, #8b5cf6) 5%, #ffffff) 60%, #ffffff 100%);
    border: 1px solid color-mix(in srgb, var(--intro-accent, #8b5cf6) 16%, transparent);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--intro-accent, #8b5cf6) 12%, transparent);
    opacity: 0;
    transform: translateY(8px);
}
.tool-header.intro-card.intro-in {
    animation: introCardIn 440ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes introCardIn {
    to { opacity: 1; transform: none; }
}
.intro-glow {
    position: absolute;
    top: -46%;
    right: -8%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--intro-accent, #8b5cf6) 40%, transparent), transparent 70%);
    opacity: 0.5;
    pointer-events: none;
    filter: blur(8px);
}
.intro-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center; /* 标题 + 图标 + 副标题整体水平居中，视觉重心稳定 */
    gap: 22px;
    width: 100%;
}
.intro-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 不增加圆角方形底框：Intro 图标与侧栏图标一致，仅裸线框等比例放大（22px → 46px） */
    overflow: hidden; /* 仅裁剪动画溢出，不产生任何可见底框 */
}
.intro-icon svg { display: block; width: 46px; height: 46px; }
.intro-text {
    display: flex;
    flex-direction: column;
    align-items: center; /* 标题与副标题在文本列内水平居中 */
    gap: 9px;
    min-width: 0;
}
.intro-title {
    display: flex;
    align-items: center; /* "Hi～我是" 与工具名垂直居中对齐 */
    justify-content: center; /* 标题内容在文本列内水平居中 */
    flex-wrap: wrap;
    gap: 10px;
}
.greeting-text {
    font-family: var(--font-intro);
    font-size: 32px;
    font-weight: 800;
    color: #4b4b5e;
    letter-spacing: 0.01em;
    line-height: 1.18;
    white-space: nowrap;
}
.greeting-name {
    font-family: var(--font-intro);
    font-size: 32px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: 0.01em;
    background-image: var(--intro-name-gradient, linear-gradient(120deg, #8b5cf6, #6366f1, #3b82f6));
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    position: relative;
}
/* 进入一次渐变扫光（不循环） */
.greeting-name::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.92) 50%, transparent 62%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0;
    pointer-events: none;
}
.tool-header.intro-card.intro-in .greeting-name::before {
    animation: introShimmer 720ms ease-out 140ms 1 forwards;
}
@keyframes introShimmer {
    0% { opacity: 0; transform: translateX(-16%); }
    32% { opacity: 1; }
    100% { opacity: 0; transform: translateX(16%); }
}
.tool-subtitle {
    align-self: center; /* 居中于标题下方 */
    font-family: var(--font-intro);
    font-size: 13.5px;
    font-weight: 500;
    color: color-mix(in srgb, var(--intro-accent, #8b5cf6) 60%, #374151);
    padding: 5px 13px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--intro-accent, #8b5cf6) 8%, rgba(255, 255, 255, 0.55));
    border: 1px solid color-mix(in srgb, var(--intro-accent, #8b5cf6) 16%, transparent);
    line-height: 1.5;
    max-width: 100%;
}

/* ===== Intro 专属动态图标（统一双色填充 + 一次性微动画） ===== */
.intro-icon .ia { transform-box: fill-box; transform-origin: center; }
.ia-rise   { animation: iiRise 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.ia-rise.d1 { animation-delay: 0ms; }
.ia-rise.d2 { animation-delay: 0ms; }
.ia-rise.d3 { animation-delay: 0ms; }
.ia-pop    { animation: iiPop 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.ia-draw   { animation: iiDraw 720ms ease-out both; }
.ia-flip   { animation: iiFlip 720ms ease-in-out both; transform-origin: left center; }
.ia-sweep  { animation: iiSweep 760ms ease-in-out both; }
.ia-scan   { animation: iiScan 820ms ease-in-out both; }
.ia-bounce2{ animation: iiBounce2 720ms ease-in-out both; }
.ia-ray    { animation: iiRay 700ms ease-out both; }
.ia-swapA  { animation: iiSwapA 840ms ease-in-out both; }
.ia-swapB  { animation: iiSwapB 840ms ease-in-out both; }
.ia-fade   { animation: iiFade 440ms ease-out both; }
/* 悬停图标时重播一次 */
.intro-icon:hover .ia-rise   { animation: iiRise 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.intro-icon:hover .ia-pop    { animation: iiPop 640ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.intro-icon:hover .ia-draw   { animation: iiDraw 720ms ease-out both; }
.intro-icon:hover .ia-flip   { animation: iiFlip 720ms ease-in-out both; transform-origin: left center; }
.intro-icon:hover .ia-sweep  { animation: iiSweep 760ms ease-in-out both; }
.intro-icon:hover .ia-scan   { animation: iiScan 820ms ease-in-out both; }
.intro-icon:hover .ia-bounce2{ animation: iiBounce2 720ms ease-in-out both; }
.intro-icon:hover .ia-ray    { animation: iiRay 700ms ease-out both; }
.intro-icon:hover .ia-swapA  { animation: iiSwapA 840ms ease-in-out both; }
.intro-icon:hover .ia-swapB  { animation: iiSwapB 840ms ease-in-out both; }
.intro-icon:hover .ia-fade   { animation: iiFade 440ms ease-out both; }

@keyframes iiRise   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iiPop    { 0% { opacity: 0; transform: translateY(-10px) scale(0.9); } 60% { opacity: 1; transform: translateY(2px) scale(1.03); } 100% { transform: translateY(0) scale(1); } }
@keyframes iiDraw   { from { stroke-dashoffset: 64; } to { stroke-dashoffset: 0; } }
@keyframes iiFlip   { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-152deg); } }
@keyframes iiSweep  { 0% { opacity: 0; transform: translateX(-20px); } 25% { opacity: 0.9; } 100% { opacity: 0; transform: translateX(20px); } }
@keyframes iiScan   { 0% { opacity: 0; transform: translateY(-4px); } 22% { opacity: 0.55; } 100% { opacity: 0; transform: translateY(26px); } }
@keyframes iiBounce2{ 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px); } 50% { transform: translateY(0); } 75% { transform: translateY(-4px); } }
@keyframes iiRay    { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: scale(1); } }
@keyframes iiSwapA  { 0% { transform: translateX(0); } 50% { transform: translateX(15px); } 100% { transform: translateX(0); } }
@keyframes iiSwapB  { 0% { transform: translateX(0); } 50% { transform: translateX(-15px); } 100% { transform: translateX(0); } }
@keyframes iiFade   { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* ===== Intro 专属动态图标（itv 系统，与侧栏同款核心造型的动画版） =====
   设计原则：部件自然(CSS)状态 = 动画完成后的静止状态；瞬态装饰（扫描/闪光/光芒）自然态 opacity:0。
   播放控制：动画只随 switchTool 重新挂载（innerHTML 替换）触发一次；CSS fill-mode:both 停在终态；
   不绑定 hover/滚动/缩放重播；prefers-reduced-motion 时 animation:none → 直接显示静态完整图标。 */
.intro-icon .itv {
    transform-box: fill-box;
    transform-origin: center;
    animation-duration: .8s;
    animation-timing-function: cubic-bezier(.34, 1.3, .5, 1);
    animation-fill-mode: both;
    animation-iteration-count: 1;
}
.it-expand { animation-name: itExpand; }
.it-slide  { animation-name: itSlide; }
.it-fade   { animation-name: itFade; }
.it-settle { animation-name: itSettle; }
.it-draw   { stroke-dasharray: var(--dash, 30); animation-name: itDraw; }
.it-scan   { opacity: 0; animation-name: itScan; }
.it-scan-v { opacity: 0; animation-name: itScanV; }
.it-flash  { opacity: 0; animation-name: itFlash; }
.it-up     { animation-name: itUp; }
.it-drop   { animation-name: itDrop; }
.it-from-l { animation-name: itFromL; }
.it-from-r { animation-name: itFromR; }
.it-tick   { animation-name: itTick; }
.it-dot    { animation-name: itDot; }
.it-glow   { animation-name: itGlow; }
.it-wave   { animation-name: itWave; }
.it-swap-a { animation-name: itSwapA; }
.it-swap-b { animation-name: itSwapB; }
.it-ray    { opacity: 0; animation-name: itRay; }
/* 写作教学：笔尖书写辅助弧线（瞬态，画完即隐，终态回到纯笔图标） */
.it-scribble { opacity: 0; stroke-dasharray: var(--dash, 6); animation-name: itScribble; }
/* 写作教学：笔从左起笔向右书写，终态停在行尾 */
.it-write { animation-name: itWrite; }
/* 语言讲解：灯泡轻微亮起一次（瞬态 filter，终态无 filter） */
.it-glowflash { animation-name: itGlowFlash; }

@keyframes itExpand { 0% { opacity: 0; transform: scale(.45); } 55% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes itSlide  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes itFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes itSettle { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.7); } to { opacity: 1; transform: translate(0, 0) scale(1); } }
@keyframes itDraw   { from { stroke-dashoffset: var(--dash, 30); } to { stroke-dashoffset: 0; } }
@keyframes itScan   { 0% { opacity: 0; transform: translateX(-4px); } 18% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; transform: translateX(15px); } }
@keyframes itScanV  { 0% { opacity: 0; transform: translateY(-4px); } 18% { opacity: .9; } 80% { opacity: .6; } 100% { opacity: 0; transform: translateY(13px); } }
@keyframes itFlash  { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@keyframes itUp     { 0% { opacity: 0; transform: translateY(7px); } 60% { opacity: 1; transform: translateY(-1px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes itDrop   { 0% { opacity: 0; transform: translateY(-7px); } 60% { opacity: 1; transform: translateY(1.5px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes itFromL  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes itFromR  { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: translateX(0); } }
@keyframes itTick   { 0% { opacity: 0; transform: scale(.3); } 65% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes itDot    { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
@keyframes itGlow   { 0% { opacity: 0; } 65% { opacity: .3; } 100% { opacity: .2; } }
@keyframes itWave   { 0% { opacity: 0; transform: scaleY(.3); } 14% { opacity: 1; transform: scaleY(1.18); } 28% { transform: scaleY(.82); } 42% { transform: scaleY(1.12); } 56% { transform: scaleY(.9); } 100% { opacity: 1; transform: scaleY(1); } }
@keyframes itSwapA  { 0% { opacity: 0; transform: translate(-6px, -3px) rotate(-7deg); } 60% { opacity: 1; transform: translate(2px, 1px) rotate(2deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0); } }
@keyframes itSwapB  { 0% { opacity: 0; transform: translate(6px, 3px) rotate(7deg); } 60% { opacity: 1; transform: translate(-2px, -1px) rotate(-2deg); } 100% { opacity: 1; transform: translate(0, 0) rotate(0); } }
@keyframes itRay    { 0% { opacity: 0; transform: scale(.2); } 55% { opacity: .95; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1.15); } }
@keyframes itScribble { 0% { opacity: 0; stroke-dashoffset: var(--dash, 6); } 35% { opacity: 1; } 70% { opacity: .9; stroke-dashoffset: 0; } 100% { opacity: 0; stroke-dashoffset: 0; } }
@keyframes itWrite { 0% { opacity: 0; transform: translate(-1px, 0.6px); } 16% { opacity: 1; } 40% { transform: translate(5px, -1px); } 68% { transform: translate(9px, 1px); } 100% { opacity: 1; transform: translate(13px, 0); } }
@keyframes itGlowFlash { 0% { filter: drop-shadow(0 0 0 rgba(251,146,60,0)); } 55% { filter: drop-shadow(0 0 5px rgba(251,146,60,.5)); } 100% { filter: drop-shadow(0 0 0 rgba(251,146,60,0)); } }

@media (prefers-reduced-motion: reduce) {
    .tool-header.intro-card { opacity: 1 !important; transform: none !important; animation: none !important; }
    .intro-icon .ia { animation: none !important; }
    .intro-icon .itv { animation: none !important; }
    .greeting-name::before { animation: none !important; }
}

/* ===== Input Card ===== */
.input-card {
    background: var(--bg-card) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--current-tool-accent, #7c3aed) 78%, transparent), color-mix(in srgb, var(--current-tool-accent, #7c3aed) 42%, transparent)) border-box;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 16px;
    margin-bottom: 18px;
    border: 2px solid transparent;
}

.input-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.input-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 900;
    color: var(--text-primary);
    font-family: var(--font-display);
}

.card-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card-icon svg {
    display: block;
}

.grade-selector {
    display: flex;
    gap: 4px;
    background: var(--bg-page);
    padding: 3px;
    border-radius: var(--radius-sm);
}

.grade-btn {
    padding: 5px 16px;
    border: none;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all var(--transition);
}

.grade-btn.active {
    background: var(--primary);
    color: white;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(79, 140, 255, 0.3);
}

.grade-btn:not(.active):hover {
    color: var(--primary);
}

/* ===== Text Input ===== */
.input-area {
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition);
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--current-tool-accent, #7c3aed) 70%, transparent), color-mix(in srgb, var(--current-tool-accent, #7c3aed) 45%, transparent)) border-box;
}

.input-area:focus-within {
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--current-tool-accent, #7c3aed) 95%, transparent), color-mix(in srgb, var(--current-tool-accent, #7c3aed) 70%, transparent)) border-box;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--current-tool-accent, #7c3aed) 14%, transparent);
}

.text-input {
    width: 100%;
    min-height: 140px;
    padding: 12px;
    border: none;
    outline: none;
    resize: vertical;
    font-size: 14px;
    line-height: 1.7;
    font-family: inherit;
    color: var(--text-primary);
    background: transparent;
}

.text-input::placeholder {
    color: var(--text-muted);
}

.input-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.7);
}

.input-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-example {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    padding: 5px 12px;
    border-radius: 16px;
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.30);
}

.btn-example svg {
    color: #fff;
}

.btn-example:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.40);
    background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%);
}

.btn-upload {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid var(--border-color);
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-upload:hover {
    border-color: var(--current-tool-accent, var(--primary));
    color: var(--current-tool-accent, var(--primary));
    background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 10%, transparent);
}

/* ===== Upload dropdown (本地文件 / 拍照上传) ===== */
.upload-wrap {
    position: relative;
}

.upload-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 50;
    animation: fadeIn 0.15s ease;
}

.upload-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition);
}

.upload-menu-item:hover {
    background: color-mix(in srgb, var(--current-tool-accent, #3b82f6) 12%, transparent);
}

.umi-emoji {
    font-size: 20px;
    line-height: 1;
}

.umi-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.umi-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.umi-desc {
    font-size: 12px;
    color: var(--text-muted);
}

/* ===== Camera modal (拍照上传 + OCR) ===== */
/* 关键：hidden 属性需强制隐藏，否则会被下方 display 规则覆盖（弹窗关不掉/预览错乱） */
[hidden] { display: none !important; }

.camera-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

.camera-modal {
    background: var(--bg-card, #fff);
    border-radius: var(--radius-lg, 16px);
    width: 420px;
    max-width: 92vw;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: slideUp 0.3s ease;
}

.camera-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.camera-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.camera-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 8px);
    transition: all var(--transition);
}

.camera-close:hover {
    background: var(--bg-page);
    color: var(--text-primary);
}

.camera-body {
    position: relative;
    background: #0b0b0f;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-body video,
.camera-preview {
    width: 100%;
    max-height: 60vh;
    object-fit: contain;
    display: block;
}

.camera-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    color: #cfcfd6;
    font-size: 14px;
}

.camera-status {
    padding: 10px 20px 0;
    min-height: 20px;
    font-size: 13px;
    color: var(--current-tool-accent, #3b82f6);
}

.camera-actions {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    justify-content: flex-end;
}

.btn-primary,
.btn-secondary {
    padding: 9px 18px;
    border-radius: var(--radius-sm, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
}

.btn-primary {
    background: linear-gradient(135deg, var(--current-tool-accent, #3b82f6) 0%, color-mix(in srgb, var(--current-tool-accent, #3b82f6) 72%, #000) 100%);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--current-tool-accent, #3b82f6) 30%, transparent);
}

.btn-primary:hover {
    transform: translateY(-1px);
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--bg-page);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    border-color: var(--current-tool-accent, #3b82f6);
    color: var(--current-tool-accent, #3b82f6);
}

.char-count {
    font-size: 13px;
    color: var(--text-muted);
}

.char-count-sep {
    margin: 0 2px;
}

/* ===== Input Actions ===== */
.input-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.btn-submit {
    display: flex;
    align-items: center;
    padding: 10px 32px;
    background: linear-gradient(135deg, var(--current-tool-accent, #6366f1) 0%, color-mix(in srgb, var(--current-tool-accent, #6366f1) 65%, #0f0a1a) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--current-tool-accent, #6366f1) 38%, transparent);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--current-tool-accent, #6366f1) 46%, transparent);
}

.btn-submit:active {
    transform: translateY(0);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-clear {
    padding: 10px 24px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-clear:hover {
    border-color: var(--current-tool-accent, var(--primary));
    color: var(--current-tool-accent, var(--primary));
    background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 10%, transparent);
}

.btn-clear-compact {
    padding: 5px 12px;
    font-size: 13px;
    border-radius: var(--radius-md);
}

#charCount.has-text {
    color: var(--primary);
    font-weight: 600;
}

/* ===== Intro Section ===== */
/* ===== Info Cards (Intro & Example) ===== */
.info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 18px;
}

.info-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 16px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100px;
}

.info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--intro-accent, #8b5cf6) 14%, transparent);
    border-color: color-mix(in srgb, var(--intro-accent, #8b5cf6) 26%, transparent);
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-right: 28px;
}

.info-card-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.info-card-title {
    font-size: 15px;
    font-weight: 900;
    color: var(--intro-accent, #8b5cf6);
    flex: 1;
    font-family: var(--font-display);
}

.info-card-more {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.7);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition);
    padding: 0;
}

.info-card-more:hover {
    background: var(--intro-accent, var(--brand-gradient));
    color: white;
    border-color: transparent;
    transform: translateX(2px);
}

.info-card-summary {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    padding-left: 12px;
    border-left: 3px solid color-mix(in srgb, var(--intro-accent, #8b5cf6) 35%, transparent);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.example-summary {
    font-family: Georgia, 'Times New Roman', serif;
    color: #5a6478;
}

.btn-use-example-inline {
    align-self: flex-start;
    margin-top: 10px;
    padding: 5px 14px;
    background: white;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
}

.btn-use-example-inline:hover {
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    border-color: transparent;
}

/* ===== Info Modal ===== */
.info-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
    padding: 20px;
}

.info-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}

.info-modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 680px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(16px) scale(0.97);
    transition: all 0.25s ease;
    overflow: hidden;
}

.info-modal-overlay.show .info-modal {
    transform: translateY(0) scale(1);
}

.info-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.info-modal-title {
    font-size: 17px;
    font-weight: 900;
    color: var(--current-tool-accent, var(--intro-accent, var(--text-primary)));
    font-family: var(--font-display);
}

.info-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-modal-close:hover {
    background: var(--primary-light);
    color: var(--primary);
}

.info-modal-body {
    padding: 26px;
    overflow-y: auto;
    flex: 1;
}

.info-modal-highlight {
    position: relative;
    font-size: 14.5px;
    line-height: 1.95;
    color: var(--text-primary);
    padding: 22px 22px 22px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 9%, var(--bg-card)) 0%,
        color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 4%, var(--bg-card)) 100%);
    border: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 14%, transparent);
    border-left: 4px solid var(--current-tool-accent, #8b5cf6);
    margin-bottom: 26px;
    letter-spacing: 0.2px;
}

.info-modal-highlight::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: 22px;
    height: 22px;
    background: var(--current-tool-accent, #8b5cf6);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z'/%3E%3Cpath d='M19 16l1 3l3 1l-3 1l-1 3l-1-3l-3-1l3-1z'/%3E%3C/svg%3E") no-repeat center/contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5z'/%3E%3Cpath d='M19 16l1 3l3 1l-3 1l-1 3l-1-3l-3-1l3-1z'/%3E%3C/svg%3E") no-repeat center/contain;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.info-modal-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-modal-feature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 7%, var(--bg-card)) 0%,
        color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 3%, var(--bg-card)) 100%);
    border: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 12%, transparent);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.info-modal-feature:hover {
    transform: translateX(4px);
    border-color: color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 30%, transparent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 14%, transparent);
}

.feature-badge {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    line-height: 1;
    color: var(--current-tool-accent, #8b5cf6);
    background: color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 15%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 24%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}
.feature-badge svg {
    display: block;
    width: 22px;
    height: 22px;
}

.info-modal-feature .feature-text {
    flex: 1;
    min-width: 0;
}

.info-modal-feature .feature-name {
    font-size: 15px;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 4px;
    font-family: var(--font-display);
    letter-spacing: 0.2px;
}

.info-modal-feature .feature-desc {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.info-modal-example {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-secondary);
    padding: 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, #f8faff 0%, #f9f5ff 100%);
    border: 1px solid var(--border-color);
    font-family: Georgia, 'Times New Roman', serif;
    white-space: pre-wrap;
    max-height: 50vh;
    overflow-y: auto;
}

.info-modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 26px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.btn-modal-confirm {
    padding: 9px 28px;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity var(--transition);
}

.btn-modal-confirm:hover {
    opacity: 0.92;
}

/* ===== Result Section ===== */
.result-section {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.result-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.result-icon {
    font-size: 22px;
}

.result-actions {
    display: flex;
    gap: 10px;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--brand-gradient-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--primary);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-icon:hover {
    background: var(--brand-gradient);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.download-wrap {
    position: relative;
}

.download-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
    padding: 6px;
    z-index: 50;
}

.download-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.download-item:hover {
    background: var(--primary-light);
    color: var(--primary);
}

/* ===== 统一导出 UI（导出完整结果 / 导出本节 / 选择面板 / PPT 预览）===== */
.export-full-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
    transition: all var(--transition);
    white-space: nowrap;
}
.export-full-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}
.export-full-btn svg { width: 16px; height: 16px; }

/* 导出本节：轻量按钮，紧贴分栏标签右侧 */
.export-section-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #7c3aed;
    background: #f3effe;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.export-section-btn:hover { background: #7c3aed; color: #fff; }

/* 复制本节：次级描边按钮，紧贴在「导出本节」左侧 */
.gy-copy-section-btn, .rd-copy-btn {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 8px; padding: 2px 10px 2px 8px;
    font-size: 12px; font-weight: 600;
    color: #475569; background: #f1f5f9;
    border: 1px solid #e2e8f0; border-radius: 999px;
    cursor: pointer; white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.gy-copy-section-btn svg, .rd-copy-btn svg {
    display: block;
    width: 13px;
    height: 13px;
}
.gy-copy-section-btn:hover, .rd-copy-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #cbd5e1; }

/* 复制 / 导出按钮组：标题在左，按钮紧邻在右，两者间保持小间隙 */
.gy-sechead-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.gy-sechead-actions .gy-copy-section-btn,
.gy-sechead-actions .export-section-btn,
.gy-sechead-actions .rd-copy-btn,
.gy-sechead-actions .rd-secexp {
    margin-left: 0;
}

/* 分栏标题 + 导出本节（vocab / writing 等自带分栏的工具，不进顶部标签栏） */
.gy-sechead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 4px 0 10px;
}
.gy-sechead-title {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: 17px; font-weight: 700; color: #6d28d9;
}

/* 选择面板：桌面下拉 / 移动底部抽屉 */
.export-chooser { position: absolute; z-index: 200; }
.export-chooser.hidden { display: none; }
.export-chooser.expand-up .export-chooser-pad {
    transform-origin: bottom right;
    animation: exportPopUp .18s ease-out;
}
@keyframes exportPopUp {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.export-chooser-pad {
    width: 260px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.18);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.export-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, transform .1s;
}
.export-opt b { font-size: 14px; color: var(--text-primary); }
.export-opt span { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.export-opt:hover { background: #f3effe; border-color: #7c3aed; }
.export-opt:active { transform: scale(0.99); }
.export-opt.export-cancel { align-items: center; border-style: dashed; }
.export-opt.export-cancel b { color: var(--text-muted); }
.export-opt:disabled, .export-opt.busy { opacity: .6; cursor: progress; }

/* 移动端底部抽屉 */
.export-chooser.mobile { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 2000; }
.export-chooser.mobile::before {
    content: ''; position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); pointer-events: none;
}
.export-chooser.mobile .export-chooser-pad {
    width: 100%;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.25);
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 8px;
    animation: exportSheetUp .22s ease-out;
}
@keyframes exportSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* PPT 预览弹窗 */
.export-modal {
    position: fixed; inset: 0; z-index: 3000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, 0.5); padding: 16px;
}
.export-modal.hidden { display: none; }
.export-modal-box {
    width: min(680px, 100%); max-height: 86vh;
    display: flex; flex-direction: column;
    background: #fff; border-radius: var(--radius-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3); overflow: hidden;
}
.export-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--border-color);
    font-weight: 700; color: var(--text-primary);
}
.export-modal-x { border: none; background: transparent; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.export-modal-area {
    flex: 1; min-height: 280px; margin: 0; padding: 14px 16px; border: none; resize: none;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; line-height: 1.7;
    color: #1f2937; background: #f8fafc;
}
.export-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border-color); }
.export-modal-btn {
    padding: 8px 16px; font-size: 13px; font-weight: 600; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color); background: #fff; color: var(--text-primary); cursor: pointer;
}
.export-modal-btn.primary { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; border-color: transparent; }
.export-modal-btn:hover { opacity: .92; }

/* 查看完整结果 / 返回分栏切换条 */
.gy-viewfull-bar {
    display: flex; justify-content: flex-end; padding: 8px 2px 10px;
    position: sticky; top: 0; z-index: 5;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
}
.gy-viewfull-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    border-radius: 999px; cursor: pointer;
    color: #6d28d9; background: #f3e8ff; border: 1px solid #e9d5ff;
    transition: background .15s, box-shadow .15s;
}
.gy-viewfull-btn:hover { background: #ede9fe; box-shadow: 0 2px 8px rgba(124, 58, 237, .18); }
.gy-viewfull-content { /* 切换视图时只替换内容，不破坏切换条 */ }

/* 暗色模式覆盖 */
[data-theme="dark"] .gy-viewfull-bar {
    background: linear-gradient(to bottom, rgba(28, 26, 52, 0.95), rgba(28, 26, 52, 0));
}
[data-theme="dark"] .gy-viewfull-btn {
    color: #c8b5ff; background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.4);
}
[data-theme="dark"] .gy-viewfull-btn:hover { background: rgba(139, 92, 246, 0.3); }
[data-theme="dark"] .export-full-btn { color: #fff; }
[data-theme="dark"] .export-section-btn { background: rgba(139, 92, 246, 0.18); color: #c8b5ff; }
[data-theme="dark"] .export-section-btn:hover { background: #7c3aed; color: #fff; }
[data-theme="dark"] .gy-sechead-title { color: #c8b5ff; }
[data-theme="dark"] .export-chooser-pad,
[data-theme="dark"] .export-opt { background: #211f3d; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .export-opt b { color: #f3f1ff; }
[data-theme="dark"] .export-opt span { color: #b6b2d6; }
[data-theme="dark"] .export-opt:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); }
[data-theme="dark"] .gy-copy-section-btn,
[data-theme="dark"] .rd-copy-btn {
    color: #cbd5e1; background: rgba(148, 163, 184, 0.16); border-color: rgba(148, 163, 184, 0.28);
}
[data-theme="dark"] .gy-copy-section-btn:hover,
[data-theme="dark"] .rd-copy-btn:hover { background: rgba(148, 163, 184, 0.28); color: #f1f5f9; border-color: rgba(148, 163, 184, 0.4); }
[data-theme="dark"] .export-modal-box { background: #1c1a34; }
[data-theme="dark"] .export-modal-head { color: #f3f1ff; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .export-modal-area { background: #15142b; color: #e8e4f5; }
[data-theme="dark"] .export-modal-btn { background: #2a2850; color: #e8e4f5; border-color: rgba(255, 255, 255, 0.14); }

.result-content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
}

/* Result content styling */
.result-block {
    margin-bottom: 24px;
}

.result-block:last-child {
    margin-bottom: 0;
}

.result-block-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 10px;
    padding-left: 12px;
    border-left: 3px solid var(--primary);
}

.result-block-content {
    padding: 14px 16px;
    background: var(--bg-page);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    line-height: 1.8;
}

.result-block-content ul {
    padding-left: 20px;
    margin-top: 8px;
}

.result-block-content li {
    margin-bottom: 6px;
}

.result-highlight {
    color: var(--primary);
    font-weight: 600;
}

/* Loading animation */
.loading-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 20px 0;
}

.loading-dots span {
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    animation: bounce 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.loading-text {
    margin-left: 12px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== Modal ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal {
    background: white;
    border-radius: var(--radius-lg);
    width: 400px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
    overflow: hidden;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.modal-close:hover {
    background: var(--bg-page);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
}

.login-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border-color);
}

.login-tab {
    padding: 8px 0;
    background: none;
    border: none;
    font-size: 15px;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
    transition: color var(--transition);
}

.login-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.login-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary);
}

.form-group {
    margin-bottom: 18px;
}

.form-label {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
    transition: border-color var(--transition);
    font-family: inherit;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.1);
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    font-size: 13px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label input {
    cursor: pointer;
}

.link-forget {
    color: var(--primary);
    text-decoration: none;
}

.link-forget:hover {
    text-decoration: underline;
}

.btn-login-submit {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 4px 12px rgba(79, 140, 255, 0.3);
}

.btn-login-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 140, 255, 0.4);
}

.qrcode-form {
    text-align: center;
}

.qrcode-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
}

.qrcode-placeholder svg {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.qrcode-tip {
    color: var(--text-secondary);
    font-size: 14px;
}

/* ===== Toast ===== */
.toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: var(--text-primary);
    color: white;
    padding: 10px 24px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* 成功提示：更轻量、带图标，不抢视觉焦点 */
.toast.success {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--text-primary);
    border: 1px solid rgba(16, 185, 129, 0.22);
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.toast.success .toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    flex-shrink: 0;
}

.toast.success .toast-icon svg {
    display: block;
}

[data-theme="dark"] .toast.success {
    background: rgba(30, 28, 56, 0.94);
    color: #f3f1ff;
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .toast.success .toast-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

/* ===== Responsive ===== */

/* 中等屏（平板 / 小桌面）：解除 1380 上限，内容占满主区，左右留白 20–24px */
@media (max-width: 1200px) {
    .workspace {
        width: 100%;
        max-width: none;
        padding: 24px clamp(20px, 4vw, 24px);
    }
}

@media (max-width: 768px) {
    /* 手机端：左侧滑出 Drawer（不挤压主内容），默认收起 */
    .sidebar {
        position: fixed;
        top: var(--topbar-height);
        bottom: 0;
        left: 0;
        width: min(82vw, 320px);
        box-shadow: var(--shadow-lg);
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.4, 0, .2, 1), background var(--transition), border-color var(--transition);
        will-change: transform;
    }

    .sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
        margin-left: 0;
    }

    .sidebar-toggle {
        display: flex;
    }

    /* 抽屉遮罩：半透明深色 + 轻微模糊，突出工具栏 */
    .mobile-nav-overlay {
        position: fixed;
        top: var(--topbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background: rgba(12, 14, 30, 0.5);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
    }
    .mobile-nav-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* 打开抽屉时锁定底层滚动 */
    body.mobile-nav-open .workspace {
        overflow: hidden;
    }

    /* 首次使用引导提示卡（菜单按钮下方，箭头指向 ☰） */
    .mobile-nav-hint {
        position: fixed;
        top: calc(var(--topbar-height) + 10px);
        left: 12px;
        z-index: 130;
        width: min(82vw, 320px);
        padding: 16px 18px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 28%, rgba(221, 227, 239, 0.9));
        box-shadow: 0 18px 44px rgba(40, 30, 90, 0.26);
        text-align: center;
    }
    .mobile-nav-hint::before {
        content: '';
        position: absolute;
        top: -7px;
        left: 20px;
        width: 13px;
        height: 13px;
        background: inherit;
        border-left: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 28%, rgba(221, 227, 239, 0.9));
        border-top: 1px solid color-mix(in srgb, var(--current-tool-accent, #8b5cf6) 28%, rgba(221, 227, 239, 0.9));
        transform: rotate(45deg);
    }
    .mnh-icon {
        width: 46px;
        height: 46px;
        margin: 0 auto 10px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #4f7cff, #8b5cf6);
        color: #fff;
        box-shadow: 0 8px 18px rgba(99, 102, 241, 0.28);
    }
    .mnh-title {
        font-size: 16px;
        font-weight: 800;
        color: #1e1b3a;
        margin-bottom: 6px;
    }
    .mnh-desc {
        font-size: 13px;
        line-height: 1.6;
        color: #6b7280;
        margin-bottom: 14px;
    }
    .mnh-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .mnh-btn {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        border: none;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 700;
        cursor: pointer;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
    }
    .mnh-btn:active { transform: translateY(1px); }
    .mnh-btn-primary {
        background: linear-gradient(135deg, #4f7cff, #8b5cf6);
        color: #fff;
        box-shadow: 0 6px 16px rgba(99, 102, 241, 0.32);
    }
    .mnh-btn-primary:active { box-shadow: 0 4px 10px rgba(99, 102, 241, 0.28); }
    .mnh-btn-secondary {
        background: #f3f4f6;
        color: #6b7280;
    }
    .mnh-btn-secondary:active { background: #e5e7eb; }
    [data-theme="dark"] .mobile-nav-hint {
        background: rgba(28, 32, 52, 0.98);
        border-color: rgba(139, 92, 246, 0.45);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    }
    [data-theme="dark"] .mnh-title { color: #f3f1ff; }
    [data-theme="dark"] .mnh-desc { color: #b6b2d6; }
    [data-theme="dark"] .mnh-btn-secondary { background: #232b3d; color: #B4BED0; }
    [data-theme="dark"] .mnh-btn-secondary:active { background: #2a3347; }

    .workspace {
        padding: 20px 16px;
    }

    .info-cards {
        grid-template-columns: 1fr;
    }

    .top-bar {
        padding: 0 12px;
    }

    .breadcrumb {
        font-size: 13px;
    }

    .btn-text {
        display: none;
    }
}

/* 桌面/平板：手机端抽屉组件一律不显示 */
@media (min-width: 769px) {
    .mobile-nav-overlay,
    .mobile-nav-hint {
        display: none !important;
    }
}

/* 个人中心/版本记录：手机端也使用右侧 sidebar 抽屉 */
@media (max-width: 768px) {
    .pc-drawer {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        width: 50vw !important;
        max-width: 50vw !important;
        height: 100%;
        max-height: none;
        border-left: 1px solid var(--border-color);
        border-top: none;
        border-radius: 0;
        transform: translateX(calc(100% + 120px));
        -webkit-transform: translateX(calc(100% + 120px));
        box-shadow: -10px 0 36px rgba(79, 70, 229, 0.14);
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                    -webkit-transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                    opacity 0.22s ease, visibility 0.22s ease;
    }
    .pc-drawer.open { transform: translateX(0); -webkit-transform: translateX(0); pointer-events: auto; visibility: visible; opacity: 1; }
    .pc-body { max-height: none; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); gap: 14px; }
    .pc-card { padding: 14px; border-radius: var(--radius-lg); }
    .pc-header { padding: 16px 18px; }
    .pc-logout-area { padding: 0 14px calc(14px + env(safe-area-inset-bottom)); }
}

@media (max-width: 480px) {
    .workspace {
        padding: 16px 12px;
    }

    .input-card {
        padding: 16px;
    }

    .input-actions {
        flex-direction: column;
    }

    .btn-submit {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .input-footer-right {
        gap: 8px;
    }

    .btn-clear-compact {
        padding: 4px 10px;
        font-size: 12px;
    }

    .char-count {
        font-size: 12px;
    }

    .tool-header.intro-card {
        min-height: 0;
        padding: 18px 20px;
        border-radius: 20px;
    }
    .intro-main {
        flex-direction: column;
        align-items: center; /* 手机端图标与文字均水平居中 */
        text-align: center;
        gap: 14px;
    }
    .intro-icon { width: 42px; height: 42px; border-radius: 12px; }
    .intro-icon svg { width: 38px; height: 38px; }
    .intro-text { align-items: center; }
    .greeting-text { font-size: 27px; white-space: normal; }
    .greeting-name { font-size: 27px; }
    .tool-subtitle { text-align: center; }

    .info-card {
        padding: 18px;
    }

    .info-modal {
        max-height: 88vh;
    }

    /* 手机端也显示「分组 / 当前工具」定位提示（窄屏靠 ellipsis 截断，不换行） */
    .breadcrumb-item:not(.active) {
        min-width: 0;
    }

    .breadcrumb-sep {
        flex-shrink: 0;
    }

    .top-bar {
        padding: 0 10px;
    }

    .top-bar-right {
        gap: 8px;
    }

    .user-balance {
        padding: 4px 8px 4px 6px;
        font-size: 12px;
        line-height: 1;
        gap: 3px;
        margin-right: 0;
    }

    .balance-rc {
        padding: 4px 10px;
        font-size: 11px;
    }

    #userPhone { display: none; }
}

/* ===== AI Streaming Output ===== */
.ai-streaming {
    min-height: 100px;
}

.streaming-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
}

.streaming-indicator .loading-dots {
    padding: 0;
}

.streaming-content {
    font-size: 14px;
    line-height: 1.9;
    color: var(--text-primary);
    word-break: break-word;
}

/* ===== Markdown Content Styles ===== */
.streaming-content h1,
.streaming-content h2,
.streaming-content h3,
.streaming-content h4,
.streaming-content h5,
.streaming-content h6,
.result-content h1,
.result-content h2,
.result-content h3,
.result-content h4,
.result-content h5,
.result-content h6 {
    margin: 20px 0 12px;
    color: var(--text-primary);
    line-height: 1.4;
}

.streaming-content h1,
.result-content h1 {
    font-size: 22px;
    border-bottom: 2px solid var(--primary-light);
    padding-bottom: 8px;
}

.streaming-content h2,
.result-content h2 {
    font-size: 19px;
    color: var(--primary);
    border-left: 4px solid var(--primary);
    padding-left: 12px;
}

.streaming-content h3,
.result-content h3 {
    font-size: 17px;
}

.streaming-content h4,
.result-content h4 {
    font-size: 15px;
}

.streaming-content p,
.result-content p {
    margin: 10px 0;
    line-height: 1.9;
}

.streaming-content ul,
.streaming-content ol,
.result-content ul,
.result-content ol {
    padding-left: 24px;
    margin: 10px 0;
}

.streaming-content li,
.result-content li {
    margin-bottom: 6px;
    line-height: 1.8;
}

.streaming-content strong,
.result-content strong {
    color: var(--primary);
    font-weight: 600;
}

.streaming-content em,
.result-content em {
    font-style: italic;
}

.streaming-content blockquote,
.result-content blockquote {
    border-left: 4px solid var(--primary);
    padding: 8px 16px;
    margin: 12px 0;
    background: var(--primary-light);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
}

.streaming-content code,
.result-content code {
    background: #f0f2f5;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 13px;
    color: #e83e8c;
}

.streaming-content pre,
.result-content pre {
    background: #1e1e2e;
    color: #cdd6f4;
    padding: 16px;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: 12px 0;
}

.streaming-content pre code,
.result-content pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.streaming-content table,
.result-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
}

.streaming-content th,
.result-content th {
    background: var(--primary-light);
    color: var(--primary);
    padding: 8px 12px;
    text-align: left;
    border: 1px solid var(--border-color);
    font-weight: 600;
}

.streaming-content td,
.result-content td {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
}

.streaming-content tr:nth-child(even),
.result-content tr:nth-child(even) {
    background: #fafafa;
}

.streaming-content hr,
.result-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 20px 0;
}

.streaming-content del,
.result-content del {
    color: var(--text-muted);
}

/* ===== Error Display ===== */
.result-error {
    color: #ff6b6b;
    font-size: 14px;
}

.result-error-box {
    background: #fff5f5;
    border: 1px solid #ffdcdc;
    border-radius: var(--radius-md);
    padding: 20px;
}

.result-error-title {
    font-size: 16px;
    font-weight: 600;
    color: #ff6b6b;
    margin-bottom: 8px;
}

.result-error-msg {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 12px;
}

.result-error-tip {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.result-error-list {
    padding-left: 20px;
    font-size: 13px;
    color: var(--text-muted);
}

.result-error-list li {
    margin-bottom: 4px;
}

.result-stopped {
    color: var(--text-muted);
    font-style: italic;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
    margin-top: 12px;
}

/* ===== Streaming cursor blink ===== */
.streaming-content::after {
    content: '▌';
    color: var(--primary);
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===== 顶部：指令设置按钮 ===== */
.top-bar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-prompt-settings {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-prompt-settings:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f5f9ff;
}

/* ===== 指令设置弹窗 ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
    backdrop-filter: blur(2px);
}

.modal-overlay.show {
    display: flex;
}

.prompt-modal {
    background: #fff;
    border-radius: 16px;
    width: 100%;
    max-width: 760px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    animation: modalPop 0.22s ease;
}

@keyframes modalPop {
    from { transform: translateY(12px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

.prompt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.prompt-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close {
    width: 34px;
    height: 34px;
    border: none;
    background: #f1f5f9;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #e2e8f0;
    color: var(--text-primary);
}

.prompt-modal-desc {
    padding: 14px 24px 0;
    margin: 0;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.7;
}

.prompt-modal-desc b {
    color: var(--primary);
}

.prompt-list {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prompt-card {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fafbfc;
}

.prompt-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.prompt-card-icon {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.prompt-card-icon svg {
    display: block;
}

.prompt-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.prompt-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 2px;
}

.prompt-badge.default {
    background: #eef2f7;
    color: #94a3b8;
}

.prompt-badge.custom {
    background: #e6f4ff;
    color: var(--primary);
}

.prompt-reset-one {
    margin-left: auto;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.prompt-reset-one:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.prompt-textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    font-size: 13px;
    line-height: 1.7;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box;
}

.prompt-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.12);
}

.prompt-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
}

.btn-prompt-reset-all {
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-muted);
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-prompt-reset-all:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.btn-prompt-save {
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    padding: 10px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-prompt-save:hover {
    opacity: 0.92;
    box-shadow: 0 6px 16px rgba(79, 124, 255, 0.3);
}

@media (max-width: 640px) {
    .btn-prompt-settings span { display: none; }
    .btn-prompt-settings { padding: 8px 10px; }
    .prompt-modal { max-height: 92vh; }
}

/* ===== Sidebar Bottom Actions ===== */
.sidebar-actions {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.sidebar-actions .btn-history {
    width: 100%;
    justify-content: center;
}

/* ===== Output History ===== */
.btn-history {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-history:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: #f5f9ff;
}

.history-view {
    animation: fadeInUp 0.35s ease;
}

.history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.history-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.history-title h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.history-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.btn-back {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.history-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 24px;
}

.history-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 16px;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 160px;
}

.filter-item.filter-date {
    flex: 1.4;
    min-width: 260px;
}

.filter-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.filter-input,
.filter-select,
.filter-date-input {
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: #fff;
    outline: none;
    transition: all 0.2s ease;
    font-family: inherit;
}

.filter-input:focus,
.filter-select:focus,
.filter-date-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.1);
}

.date-range {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-range .filter-date-input {
    flex: 1;
    min-width: 0;
}

.date-sep {
    color: var(--text-muted);
    font-size: 14px;
}

.filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.btn-history-clear {
    padding: 8px 20px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-primary);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-history-clear:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-light);
}

.btn-history-search {
    padding: 8px 24px;
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(79, 124, 255, 0.25);
}

.btn-history-search:hover {
    opacity: 0.92;
    box-shadow: 0 6px 16px rgba(79, 124, 255, 0.35);
}

.history-tip {
    font-size: 12px;
    color: #f59e0b;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.history-table-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    margin-bottom: 16px;
}

.history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: #fff;
}

.history-table th {
    background: #f5f7fb;
    color: var(--text-primary);
    font-weight: 600;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.history-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
    vertical-align: top;
}

.history-table tbody tr:last-child td {
    border-bottom: none;
}

.history-table tbody tr:hover {
    background: #fafbff;
}

.history-title-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-title-link:hover {
    text-decoration: underline;
}

.history-time {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}

.history-relative {
    color: #f59e0b;
    font-size: 12px;
    margin-top: 2px;
}

.history-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.history-status.success {
    background: #dcfce7;
    color: #16a34a;
}

.history-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.history-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-action.export {
    color: var(--primary);
}

.history-action.export:hover {
    text-decoration: underline;
}

.history-action.delete {
    color: #ef4444;
}

.history-action.delete:hover {
    text-decoration: underline;
}

.history-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.pagination-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pagination-ellipsis {
    color: var(--text-muted);
    font-size: 13px;
    padding: 0 4px;
}

.pagination-size {
    font-size: 13px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.pagination-goto {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pagination-goto-input {
    width: 44px;
    height: 30px;
    padding: 0 4px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-align: center;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
}

.pagination-goto-input:focus {
    border-color: var(--primary);
}

@media (max-width: 768px) {
    .history-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-item,
    .filter-item.filter-date {
        min-width: auto;
        width: 100%;
    }

    .filter-actions {
        margin-left: 0;
        width: 100%;
    }

    .filter-actions button {
        flex: 1;
    }

    .history-table th,
    .history-table td {
        padding: 12px 10px;
        font-size: 13px;
    }

    .history-title-link {
        max-width: 120px;
    }

    .history-actions {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }

    .history-pagination {
        justify-content: center;
    }

    .history-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ===== Auth UI ===== */
.user-balance {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    white-space: nowrap;
    background: var(--brand-gradient-soft);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 999px;
    padding: 5px 10px 5px 7px;
    font-size: 13px;
    line-height: 1;
    color: var(--text-primary);
    margin-right: 4px;
    vertical-align: middle;
}

.balance-rc {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.balance-rc:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(79, 124, 255, 0.3);
}

.balance-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.balance-text {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.balance-text strong {
    color: var(--primary-dark);
    margin: 0;
    line-height: 1;
}

.btn-rc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border: none;
    padding: 5px 12px;
    border-radius: 18px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rc-icon {
    display: inline-block;
    vertical-align: middle;
}

.btn-rc:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 124, 255, 0.25);
}

.btn-login {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 13px;
    color: #fff;
    cursor: pointer;
    transition: all var(--transition);
    margin-left: 8px;
    font-weight: 600;
}

.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 140, 255, 0.35);
}

.user-menu {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.user-menu button {
    background: none;
    border: none;
    color: var(--primary);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    white-space: nowrap;
}

.user-menu button:hover {
    text-decoration: underline;
}

/* Auth Modals */
.auth-overlay,
.rc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 46, 0.45);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.auth-overlay.show,
.rc-overlay.show {
    display: flex;
}

.auth-modal,
.rc-modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 92%;
    max-width: 400px;
    max-height: 92vh;
    overflow-y: auto;
    animation: modalSlideIn 0.25s ease;
}

@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.auth-modal-header,
.rc-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px 0;
}

.auth-modal-header h3,
.rc-modal-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
}

.auth-tabs {
    display: flex;
    gap: 12px;
    padding: 16px 20px 0;
    border-bottom: 1px solid var(--border-color);
}

.auth-tab {
    background: none;
    border: none;
    padding: 8px 4px 12px;
    font-size: 14px;
    color: var(--text-muted);
    cursor: pointer;
    position: relative;
}

.auth-tab.active {
    color: var(--primary);
    font-weight: 600;
}

.auth-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
}

.auth-body,
.rc-body {
    padding: 20px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.form-row label {
    flex: 0 0 auto;
    min-width: 60px;
    white-space: nowrap; /* 防止"手机号""密码"等中文标签被窄列挤成竖排 */
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.form-row input {
    flex: 1;
    width: auto;
    min-width: 0;
    padding: 11px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    outline: none;
    font-family: inherit;
}

.form-row input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.auth-tip {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.btn-auth-submit,
.btn-rc-pay {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    transition: opacity 0.2s;
}

.btn-auth-submit:hover,
.btn-rc-pay:hover {
    opacity: 0.92;
}

.rc-balance {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.rc-balance strong {
    color: var(--primary-dark);
    font-size: 20px;
}

.rc-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #eef2ff 0%, #f3eefd 100%);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 18px;
}

.rc-option-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.rc-option-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.rc-option-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--primary-dark);
}

.rc-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #f5f7ff;
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 18px;
}

.rc-notice-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    display: inline-block;
}

.rc-notice-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.rc-notice-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.rc-notice-text a:hover {
    text-decoration: underline;
}

.rc-status {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    text-align: center;
}

.rc-status.success {
    background: #ecfdf5;
    color: #065f46;
}

.rc-status.pending {
    background: #fffbeb;
    color: #92400e;
}

.rc-status.error {
    background: #fef2f2;
    color: #991b1b;
}

.rc-status.pending a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}

.user-menu-admin {
    color: var(--primary);
    text-decoration: none;
    font-size: 13px;
    padding: 4px;
}

.user-menu-admin:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .user-balance {
        padding: 4px 5px 4px 10px;
        font-size: 12px;
    }
    .btn-rc {
        padding: 4px 10px;
    }
    .btn-login {
        padding: 6px 10px;
        font-size: 12px;
    }
    .user-menu {
        gap: 4px;
        margin-left: 4px;
    }

    .user-menu-trigger span {
        display: none;
    }

    .user-menu button {
        padding: 4px 2px;
        font-size: 12px;
    }
}

/* ===== Vocabulary teaching card (词汇教学 专属高亮卡片) ===== */
.vocab-card {
    background: #fff;
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    border-radius: 14px;
    overflow: hidden;
    margin: 18px 0;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.vocab-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff7ed;
    color: var(--text-primary, #1f2937);
    position: relative;
    cursor: pointer;
    user-select: none;
}
.vocab-head::after {
    content: '▾';
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(0deg);
    font-size: 14px;
    opacity: 0.9;
    color: #f97316;
    transition: transform .2s ease;
}
.vocab-card.collapsed .vocab-head::after {
    transform: translateY(-50%) rotate(-90deg);
}
.vocab-head:hover { background: #FAEEDA; filter: none; }
.vocab-card.collapsed .vocab-section,
.vocab-card.collapsed .vocab-exam { display: none; }
.vocab-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fde7c8;
    color: #b45309;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
}
.vocab-word {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
}
.vocab-meta {
    font-size: 13px;
    opacity: 0.92;
    color: #8a94a6;
    margin-top: 2px;
}
.vocab-section {
    --c: #888;
    padding: 12px 16px 12px 14px;
    border-left: 4px solid var(--c);
    margin: 10px 14px;
    border-radius: 0 8px 8px 0;
    background: rgba(0, 0, 0, 0.02);
}
.vocab-section[data-c="purple"] { --c: #534AB7; }
.vocab-section[data-c="green"]  { --c: #0F6E56; }
.vocab-section[data-c="orange"] { --c: #993C1D; }
.vocab-section[data-c="blue"]   { --c: #185FA5; }
.vocab-section[data-c="coral"]  { --c: #993C1D; }
.vocab-section[data-c="teal"]   { --c: #0F6E56; }
.vocab-section[data-c="amber"]  { --c: #854F0B; }
.vocab-section[data-c="pink"]   { --c: #993556; }
.vocab-sec-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--c);
    margin-bottom: 4px;
}
.vocab-sec-body {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-primary);
}
.vocab-card code {
    background: color-mix(in srgb, var(--c) 14%, #fff);
    color: var(--c);
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 12.5px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}
.vocab-exam {
    margin: 10px 14px 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: #fff3e0;
}
.vocab-exam-title {
    font-weight: 600;
    font-size: 13px;
    color: #633806;
    margin-bottom: 6px;
}
.vocab-exam-q {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}
.vocab-exam-a {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.vocab-pill {
    background: var(--current-tool-accent, #534AB7);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 3px 12px;
    border-radius: 14px;
    cursor: pointer;
    user-select: none;
    transition: filter .15s ease;
}
.vocab-pill:hover { filter: brightness(1.08); }
.vocab-exam-a.revealed .vocab-pill { background: color-mix(in srgb, var(--current-tool-accent, #534AB7) 70%, #fff); }
.vocab-exam-note {
    font-size: 12px;
    color: #854F0B;
    display: none; /* 答案默认隐藏，点击"答案"胶囊后展开 */
}
.vocab-exam-a.revealed .vocab-exam-note {
    display: inline; /* 展开后水平排列 */
}

/* ===== 词汇教学：四大板块标题 / 默写表 / 语法填空 ===== */
.result-content h2.vocab-h2 {
    font-size: 17px;
    font-weight: 700;
    color: #f97316;
    margin: 30px 0 14px;
    padding: 8px 0 8px 14px;
    border-left: 5px solid #f97316;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.09), transparent);
    border-radius: 0 8px 8px 0;
}
.result-content h3.vocab-h3 {
    font-size: 15px;
    font-weight: 600;
    color: #f97316;
    margin: 20px 0 10px;
}
.vocab-dictation,
.vocab-answer {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 24px;
    font-size: 13.5px;
}
.vocab-dictation th,
.vocab-answer th {
    background: #fff7ed;
    color: #b45309;
    font-weight: 600;
    padding: 9px 12px;
    border: 1px solid #f5d9b0;
    text-align: left;
}
.vocab-dictation td,
.vocab-answer td {
    padding: 9px 12px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    color: var(--text-primary);
    height: 26px;
}
.vocab-dictation tbody tr:nth-child(even),
.vocab-answer tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.025);
}
.vocab-dictation td:first-child,
.vocab-answer td:first-child {
    width: 52px;
    text-align: center;
    color: var(--text-secondary);
}
p.vocab-cloze {
    background: #F7F6FC;
    border: 1px solid rgba(83, 74, 183, 0.18);
    border-radius: 10px;
    padding: 16px 18px;
    line-height: 2.1;
    font-size: 14px;
    color: var(--text-primary);
    margin: 14px 0;
}
.vocab-blank {
    color: #f97316;
    font-weight: 600;
    white-space: nowrap;
}

/* 默写表：双栏单词/短语默写 + 纵向词性转换 */
.vocab-dictation.two-col th,
.vocab-dictation.two-col td {
    text-align: center;
}
.vocab-dictation.two-col td:nth-child(2),
.vocab-dictation.two-col td:nth-child(5) {
    text-align: left;
}
.vocab-dictation.two-col td:nth-child(3),
.vocab-dictation.two-col td:nth-child(6) {
    height: 32px;
    background: rgba(83, 74, 183, 0.04);
}
.vocab-pos {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 24px;
    font-size: 13.5px;
}
.vocab-pos th {
    background: #fff7ed;
    color: #b45309;
    font-weight: 600;
    padding: 9px 12px;
    border: 1px solid #f5d9b0;
    text-align: left;
}
.vocab-pos td {
    padding: 9px 12px;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
    color: var(--text-primary);
    height: 30px;
}
.vocab-pos tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.025);
}
.vocab-pos td:nth-child(2) {
    color: var(--current-tool-accent, #534AB7);
    font-weight: 600;
    white-space: nowrap;
}
/* 板块 2 词性转换双栏：对齐板块 1 默写表的双栏视觉 */
.vocab-pos.two-col th,
.vocab-pos.two-col td {
    text-align: center;
}
.vocab-pos.two-col td:nth-child(2),
.vocab-pos.two-col td:nth-child(5) {
    text-align: left;
}
.vocab-pos.two-col td:nth-child(3),
.vocab-pos.two-col td:nth-child(6) {
    height: 32px;
    background: rgba(249, 115, 22, 0.05);
}

/* 双栏默写/词性转换：固定布局，序号窄 / 原词中 / 作答宽（方便手写作答） */
.vocab-dictation.two-col,
.vocab-pos.two-col {
    table-layout: fixed;
}
.vocab-dictation.two-col th,
.vocab-dictation.two-col td,
.vocab-pos.two-col th,
.vocab-pos.two-col td {
    overflow-wrap: break-word;
}
.vocab-dictation.two-col th:nth-child(1), .vocab-dictation.two-col td:nth-child(1),
.vocab-pos.two-col th:nth-child(1), .vocab-pos.two-col td:nth-child(1) { width: 7%; }
.vocab-dictation.two-col th:nth-child(2), .vocab-dictation.two-col td:nth-child(2),
.vocab-dictation.two-col th:nth-child(5), .vocab-dictation.two-col td:nth-child(5),
.vocab-pos.two-col th:nth-child(2), .vocab-pos.two-col td:nth-child(2),
.vocab-pos.two-col th:nth-child(5), .vocab-pos.two-col td:nth-child(5) { width: 16%; }
.vocab-dictation.two-col th:nth-child(3), .vocab-dictation.two-col td:nth-child(3),
.vocab-dictation.two-col th:nth-child(6), .vocab-dictation.two-col td:nth-child(6),
.vocab-pos.two-col th:nth-child(3), .vocab-pos.two-col td:nth-child(3),
.vocab-pos.two-col th:nth-child(6), .vocab-pos.two-col td:nth-child(6) { width: 27%; }
.vocab-dictation.two-col td:nth-child(3),
.vocab-dictation.two-col td:nth-child(6),
.vocab-pos.two-col td:nth-child(3),
.vocab-pos.two-col td:nth-child(6) {
    height: 40px;
}
.vocab-pos.two-col td:nth-child(3),
.vocab-pos.two-col td:nth-child(6) {
    background: color-mix(in srgb, var(--current-tool-accent, #534AB7) 6%, transparent);
}

/* ===== 文章结构图（彩色卡片式，阅读设计工具） ===== */
.struct-map {
    margin: 18px 0;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #F8FAFC;
    overflow: hidden;
}

/* ===== 结构图 / 流式缓冲骨架屏（替代闪现的 JSON 代码） ===== */
.rd-skeleton {
    margin: 18px 0; padding: 18px; border: 1px solid #e2e8f0; border-radius: 16px;
    background: #F8FAFC; animation: rdSkeletonPulse 1.4s ease-in-out infinite;
}
.rd-skeleton-head { margin-bottom: 14px; }
.rd-skeleton-title { height: 20px; border-radius: 8px; background: #e2e8f0; width: 40%; }
.rd-skeleton-line { height: 12px; border-radius: 6px; background: #e2e8f0; margin: 8px 0; }
.rd-skeleton-line.w90 { width: 90%; } .rd-skeleton-line.w70 { width: 70%; }
.rd-skeleton-line.w60 { width: 60%; } .rd-skeleton-line.w40 { width: 40%; }
.rd-skeleton-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rd-skeleton-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; }
.rd-skeleton-tip {
    margin-top: 14px; text-align: center; color: #6366f1; font-size: 13.5px; font-weight: 600;
}
@keyframes rdSkeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.rd-parse-tip, .struct-fallback {
    margin: 14px 0; padding: 14px 16px; border-radius: 12px; font-size: 13.5px;
    color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
}

/* ===== 流式分段：未完成板块「正在生成…」骨架 + 生成期间禁用控件 ===== */
.stream-panel-skeleton {
    margin: 12px 0 18px; padding: 16px 18px; border-radius: 14px;
    background: #F8FAFC; border: 1px solid #e2e8f0;
    animation: rdSkeletonPulse 1.4s ease-in-out infinite;
}
.sps-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
    font-size: 14px; font-weight: 700; color: #6d28d9;
}
.sps-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #8b5cf6;
    animation: spsBlink 1s steps(2, start) infinite;
}
@keyframes spsBlink { 50% { opacity: .25; } }
.sps-line { height: 12px; border-radius: 6px; background: #e2e8f0; margin: 9px 0; }
.sps-line.w90 { width: 90%; } .sps-line.w80 { width: 80%; }
.sps-line.w60 { width: 60%; } .sps-line.w40 { width: 40%; }

/* 分栏按钮上的「生成中」徽标 */
.writing-tab.stream-loading, .vui-tab.stream-loading {
    position: relative;
}
.writing-tab.stream-loading::after, .vui-tab.stream-loading::after {
    content: "生成中";
    margin-left: 7px; font-size: 10.5px; font-weight: 600; line-height: 1;
    padding: 2px 6px; border-radius: 999px;
    color: #fff; background: #8b5cf6; vertical-align: middle;
}

/* 生成期间：禁用复制 / 导出 / 继续修改，杜绝复制半成品或误触导出 */
body.gy-generating .export-section-btn,
body.gy-generating .gy-copy-section-btn,
body.gy-generating .rd-copy-btn,
body.gy-generating #exportFullBtn,
body.gy-generating .vui-btn[data-act="copy"],
body.gy-generating .w-copy-all,
body.gy-generating .copy-btn,
body.gy-generating [data-revise-trigger],
body.gy-generating .revise-btn {
    pointer-events: none !important;
    opacity: .45;
    cursor: not-allowed;
}
body.gy-generating .export-section-btn::before {
    content: "生成中";
    margin-right: 6px; font-size: 11px; color: #8b5cf6; font-weight: 600;
}

.struct-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.struct-toggle { display: inline-flex; border: 1px solid #cbd5e1; border-radius: 999px; overflow: hidden; }
.struct-toggle button {
    border: 0; background: #fff; padding: 6px 16px; font-size: 13px; cursor: pointer; color: #475569;
}
.struct-toggle button.active { background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; }
.struct-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.struct-actions button {
    border: 1px solid #cbd5e1; background: #fff; border-radius: 8px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; color: #334155;
}
.struct-actions button:hover { background: #f1f5f9; }
.struct-canvas { padding: 16px; }
.struct-title-card {
    background: linear-gradient(90deg, #4F46E5, #7C3AED);
    color: #fff; border-radius: 14px; padding: 14px 18px; text-align: center;
}
.struct-title-card .st-title { font-size: 17px; font-weight: 700; }
.struct-title-card .st-main { margin-top: 6px; font-size: 13px; opacity: .92; }
.struct-branches {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 14px;
}
.struct-branch {
    background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6);
    border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.struct-branch .sb-para {
    display: inline-block; background: var(--bc, #3B82F6); color: #fff; font-size: 11px; font-weight: 700;
    border-radius: 6px; padding: 2px 8px; margin-bottom: 6px;
}
.struct-branch .sb-head { font-size: 14.5px; font-weight: 700; color: #1E293B; margin: 2px 0 6px; }
.struct-branch .sb-summary { font-size: 12.5px; color: #475569; margin-bottom: 8px; line-height: 1.5; }
.struct-branch .sb-point { font-size: 12.5px; color: #334155; margin: 4px 0; }
.struct-branch .sb-point .sb-label { color: #64748B; font-weight: 600; }
.struct-branch .sb-conclusion {
    margin-top: 8px; font-size: 12px; color: #64748B; border-top: 1px dashed #e2e8f0; padding-top: 6px;
}
.struct-blank { display: inline-block; min-width: 64px; border-bottom: 1.5px solid #94a3b8; height: 16px; vertical-align: middle; }
.struct-map:not(.show-student) .struct-student { display: none; }
.struct-map.show-student .struct-teacher { display: none; }
@media (max-width: 640px) { .struct-branches { grid-template-columns: 1fr; } }
@media print {
    .struct-toolbar { display: none !important; }
    .struct-map { box-shadow: none; }
    html.printing-struct body * { visibility: hidden; }
    html.printing-struct .struct-map,
    html.printing-struct .struct-map * { visibility: visible; }
    html.printing-struct .struct-map {
        position: absolute; left: 0; top: 0; width: 100%; max-width: 100%;
        border: 0; background: #fff; overflow: visible;
    }
}

/* --- 结构图：多模板补充样式 --- */
.struct-teacher, .struct-student { margin-top: 14px; }

/* timeline */
.struct-timeline { display: flex; gap: 14px; position: relative; padding-top: 10px; overflow-x: auto; }
.struct-timeline::before {
    content: ''; position: absolute; top: 28px; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #4F46E5, #7C3AED); border-radius: 2px;
}
.tl-item { flex: 1; min-width: 220px; position: relative; z-index: 1; }
.tl-node { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.tl-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--bc, #3B82F6); border: 3px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.tl-para { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--bc, #3B82F6); background: #fff; padding: 2px 8px; border-radius: 6px; }
.tl-card { background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6); border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.tl-head { font-size: 14px; font-weight: 700; color: #1E293B; margin-bottom: 4px; }
.tl-summary { font-size: 12.5px; color: #475569; margin-bottom: 6px; line-height: 1.5; }

/* process */
.struct-process { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.proc-step { flex: 1; min-width: 180px; display: flex; flex-direction: column; align-items: center; }
.proc-badge { width: 32px; height: 32px; border-radius: 50%; background: var(--bc, #3B82F6); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.proc-card { background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6); border-radius: 12px; padding: 12px; width: 100%; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.proc-para { font-size: 11px; font-weight: 700; color: var(--bc, #3B82F6); margin-bottom: 4px; }
.proc-head { font-size: 14px; font-weight: 700; color: #1E293B; margin-bottom: 4px; }
.proc-summary { font-size: 12.5px; color: #475569; margin-bottom: 6px; line-height: 1.5; }
.proc-arrow { display: flex; align-items: center; justify-content: center; font-size: 22px; color: #94a3b8; font-weight: 700; min-width: 28px; }

/* comparison */
.struct-comparison { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.cmp-vs { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.cmp-side { background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6); border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.cmp-side.cmp-empty { background: transparent; border: 0; box-shadow: none; }
.cmp-para { display: inline-block; background: var(--bc, #3B82F6); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; }
.cmp-head { font-size: 15px; font-weight: 700; color: #1E293B; margin: 2px 0 6px; }
.cmp-summary { font-size: 12.5px; color: #475569; margin-bottom: 8px; line-height: 1.5; }

/* argument */
.struct-argument { display: flex; flex-direction: column; gap: 14px; }
.arg-claim { background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; border-radius: 14px; padding: 16px; text-align: center; }
.arg-claim-label { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.arg-claim-head { font-size: 17px; font-weight: 700; }
.arg-claim-summary { margin-top: 6px; font-size: 13px; opacity: .92; }
.arg-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.arg-reason { background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6); border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.arg-reason-head { font-size: 14px; font-weight: 700; color: #1E293B; margin-bottom: 4px; }
.arg-reason-summary { font-size: 12.5px; color: #475569; margin-bottom: 6px; line-height: 1.5; }

/* cause_effect */
.struct-cause-effect { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; }
.ce-group { display: flex; flex-direction: column; gap: 10px; }
.ce-title { font-size: 12px; font-weight: 700; color: #64748B; text-transform: uppercase; text-align: center; }
.ce-card { background: #fff; border: 1px solid #e2e8f0; border-top: 5px solid var(--bc, #3B82F6); border-radius: 12px; padding: 12px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.ce-para { display: inline-block; background: var(--bc, #3B82F6); color: #fff; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2px 8px; margin-bottom: 6px; }
.ce-head { font-size: 14px; font-weight: 700; color: #1E293B; margin: 2px 0 4px; }
.ce-summary { font-size: 12.5px; color: #475569; margin-bottom: 6px; line-height: 1.5; }
.ce-event { background: linear-gradient(90deg, #4F46E5, #7C3AED); color: #fff; border-radius: 14px; padding: 16px; text-align: center; }
.ce-event-label { font-size: 11px; font-weight: 700; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.ce-event-head { font-size: 16px; font-weight: 700; }
.ce-event-summary { margin-top: 6px; font-size: 13px; opacity: .92; }
.ce-arrow { font-size: 26px; color: #94a3b8; font-weight: 700; }

@media (max-width: 840px) {
    .struct-timeline { flex-direction: column; }
    .struct-timeline::before { display: none; }
    .struct-process { flex-direction: column; }
    .proc-arrow { transform: rotate(90deg); }
    .struct-comparison { grid-template-columns: 1fr; }
    .cmp-vs { margin: 0 auto; }
    .struct-cause-effect { grid-template-columns: 1fr; }
    .ce-arrow { transform: rotate(90deg); text-align: center; }
}
@media print {
    .struct-timeline, .struct-process, .struct-comparison, .struct-argument, .struct-cause-effect { break-inside: avoid; }
}

/* ===================================================================
   作文批改：上传面板 + 报告卡 + 原图 Canvas 批注
   =================================================================== */

/* ---------- 上传 / OCR 面板 ---------- */
.essay-panel {
    margin: 0 0 14px;
    padding: 14px 16px 4px;
    border: 1px solid rgba(225, 29, 72, 0.22);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(225, 29, 72, 0.05), rgba(225, 29, 72, 0.01));
}
.essay-panel.hidden { display: none; }

.essay-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.essay-panel-head-sub { margin: 12px 0 8px; }

.essay-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-primary);
}
.essay-panel-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e11d48;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.essay-ocr-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
    white-space: nowrap;
}
.essay-ocr-badge.ready { background: rgba(16, 185, 129, 0.14); color: #047857; }
.essay-ocr-badge.off { background: rgba(245, 158, 11, 0.16); color: #b45309; }

.essay-drop {
    position: relative;
    border: 1.6px dashed rgba(225, 29, 72, 0.34);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}
.essay-drop:hover, .essay-drop.dragging {
    border-color: #e11d48;
    background: rgba(225, 29, 72, 0.05);
}
.essay-drop-empty {
    padding: 22px 16px;
    text-align: center;
    color: var(--text-muted);
}
.essay-drop-empty svg { color: #e11d48; opacity: 0.75; }
.essay-drop-title {
    margin: 8px 0 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
}
.essay-drop-hint { margin: 0; font-size: 12px; }

.essay-drop-preview {
    position: relative;
    padding: 10px;
    text-align: center;
}
.essay-drop-preview.hidden { display: none; }
.essay-drop-empty.hidden { display: none; }
.essay-drop-preview img {
    max-width: 100%;
    max-height: 240px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.essay-img-remove {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.essay-img-remove:hover { background: #e11d48; }
.essay-img-meta {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-muted);
}

.essay-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.btn-ocr {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #e11d48, #f43f5e);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(225, 29, 72, 0.28);
}
.btn-ocr:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(225, 29, 72, 0.34); }
.btn-ocr:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn-ocr.loading svg { animation: essaySpin 1s linear infinite; }
@keyframes essaySpin { to { transform: rotate(360deg); } }

.essay-status { font-size: 12.5px; color: var(--text-muted); }
.essay-status-ok { color: #047857; font-weight: 600; }
.essay-status-error { color: #dc2626; font-weight: 600; }
.essay-status-loading { color: #b45309; }

/* ---------- 批改报告卡 ---------- */
.essay-report {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 18px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, #ffffff, #fbfcff);
    box-shadow: var(--shadow-sm);
}
.essay-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 6px;
    border-right: 1px dashed var(--border-color);
}
.essay-ring {
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: conic-gradient(var(--ringc) var(--ring), #e8ecf6 0);
    display: flex;
    align-items: center;
    justify-content: center;
}
.essay-ring-in {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.essay-ring-in strong { font-size: 30px; color: var(--text-primary); }
.essay-ring-in span { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.essay-score-meta { text-align: center; }
.essay-level { font-size: 15px; font-weight: 700; }
.essay-words { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.essay-dims {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}
.essay-dim-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.essay-dim-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.essay-dim-score { font-size: 14px; font-weight: 700; }
.essay-dim-score i { font-style: normal; font-size: 11px; color: var(--text-muted); }
.essay-dim-bar {
    height: 6px;
    margin: 5px 0 4px;
    border-radius: 999px;
    background: #edf1f8;
    overflow: hidden;
}
.essay-dim-bar span { display: block; height: 100%; border-radius: 999px; }
.essay-dim-cmt { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

/* ---------- Canvas 批注 ---------- */
.essay-annot {
    margin: 18px 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: #fff;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.essay-annot-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(225, 29, 72, 0.08), rgba(244, 63, 94, 0.03));
    border-bottom: 1px solid var(--border-color);
}
.essay-annot-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.essay-annot-tools { display: inline-flex; gap: 8px; }
.essay-annot-btn {
    padding: 5px 12px;
    border: 1px solid rgba(225, 29, 72, 0.3);
    border-radius: 6px;
    background: #fff;
    color: #e11d48;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.essay-annot-btn:hover { background: rgba(225, 29, 72, 0.08); }
.essay-annot-btn.active { background: #e11d48; color: #fff; border-color: #e11d48; }

.essay-annot-stage { padding: 12px; text-align: center; background: #f7f9fc; }
.essay-canvas {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
}
.essay-annot-empty { display: none; }
.essay-annot-noimg .essay-canvas { display: none; }
.essay-annot-noimg .essay-annot-tools { display: none; }
.essay-annot-noimg .essay-annot-empty {
    display: block;
    padding: 26px 18px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-muted);
}

.essay-annot-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border-top: 1px solid var(--border-color);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.essay-lg { display: inline-flex; align-items: center; gap: 6px; }
.essay-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.essay-miss { color: #b45309; }

.essay-marks {
    margin: 0;
    padding: 10px 16px 14px 16px;
    list-style: none;
    border-top: 1px dashed var(--border-color);
}
.essay-mark {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.6;
}
.essay-mark-no {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border-radius: 50%;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.essay-mark-body b { color: var(--text-primary); font-weight: 600; }
.essay-mark-body em {
    font-style: normal;
    margin: 0 7px;
    padding: 1px 7px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: #4338ca;
    font-size: 11.5px;
}
.essay-mark-fix { color: #047857; }

@media (max-width: 860px) {
    .essay-report { grid-template-columns: 1fr; }
    .essay-score { border-right: none; border-bottom: 1px dashed var(--border-color); padding-bottom: 14px; }
    .essay-dims { grid-template-columns: 1fr; }
}

@media print {
    .essay-panel, .essay-annot-tools { display: none !important; }
    .essay-annot, .essay-report { break-inside: avoid; page-break-inside: avoid; }
    .essay-report { background: #fff !important; }
    .essay-dim-bar span, .essay-mark-no, .essay-lg i, .essay-ring {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ===== 英语写作教学 WRITING_UI_DATA 结构化界面 ===== */
.writing-ui {
    --w-accent: #f43f5e;
    --w-ink: #1f2937;
    --w-sub: #6b7280;
    --w-line: #e5e7eb;
    --w-soft: #f8fafc;
    font-size: 14px;
    color: var(--w-ink);
}
.writing-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--w-line);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.writing-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border: none;
    background: none;
    color: var(--w-sub);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.writing-tab .w-ico { color: currentColor; }
.writing-tab.active { color: var(--w-accent); border-bottom-color: var(--w-accent); }
.writing-panel { display: none; animation: wFade .2s ease; }
.writing-panel.active { display: block; }
@keyframes wFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.w-panel-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.w-copy-all {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--w-line); background: #fff; color: var(--w-sub);
    font-size: 12.5px; padding: 5px 11px; border-radius: 7px; cursor: pointer;
}
.w-copy-all:hover { color: var(--w-accent); border-color: var(--w-accent); }

.w-card {
    background: #fff; border: 1px solid var(--w-line); border-radius: 12px;
    padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.w-card-h {
    display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px;
    color: var(--w-accent); margin-bottom: 12px;
}
.w-card-h .w-ico { color: var(--w-accent); }

/* 审题速览 */
.w-ov-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.w-ov-item { display: flex; gap: 10px; align-items: baseline; border-bottom: 1px dashed var(--w-line); padding-bottom: 8px; }
.w-ov-k { flex: 0 0 72px; color: var(--w-sub); font-size: 13px; }
.w-ov-v { color: var(--w-ink); font-weight: 600; }

.w-block { margin-bottom: 16px; }
.w-block-h { font-weight: 700; font-size: 14px; color: var(--w-ink); margin-bottom: 9px; padding-left: 9px; border-left: 3px solid var(--w-accent); }
.w-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.w-tag {
    background: var(--w-soft); border: 1px solid var(--w-line); color: #374151;
    font-size: 13px; padding: 4px 12px; border-radius: 999px;
}
.w-num-list { list-style: none; counter-reset: wn; margin: 0; padding: 0; display: grid; gap: 9px; }
.w-num { display: flex; gap: 11px; align-items: flex-start; }
.w-num-i {
    flex: 0 0 22px; height: 22px; border-radius: 7px; background: var(--w-accent); color: #fff;
    font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.w-exp-wrap { display: grid; gap: 9px; }
.w-exp-card {
    background: var(--w-soft); border: 1px solid var(--w-line); border-radius: 9px; padding: 10px 13px;
}
.w-exp-body { color: #374151; line-height: 1.6; }
.w-exp-ref { margin-top: 5px; font-size: 12px; color: var(--w-sub); }

.w-risk-wrap { display: grid; gap: 9px; }
.w-risk {
    display: flex; gap: 9px; align-items: flex-start; background: #FFF7ED;
    border: 1px solid #FED7AA; border-left: 3px solid #F97316; border-radius: 9px; padding: 9px 12px;
}
.w-risk-ico { color: #EA580C; flex: 0 0 auto; margin-top: 1px; }
.w-risk-txt { color: #9A3412; line-height: 1.6; }

/* 子标签 */
.w-subtabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.w-subtab {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--w-line); background: #fff; color: var(--w-sub);
    font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer;
}
.w-subtab i { font-style: normal; font-size: 11.5px; color: #9ca3af; }
.w-subtab.active { color: var(--w-accent); border-color: var(--w-accent); background: #FFF1F3; }
.w-subtab.active i { color: var(--w-accent); }

/* 写作支架 */
.w-sc-version { display: grid; gap: 12px; }
.w-sc-card {
    background: #fff; border: 1px solid var(--w-line); border-radius: 10px; padding: 13px 15px;
}
.w-sc-label { font-size: 12px; font-weight: 700; color: var(--w-accent); margin-bottom: 7px; letter-spacing: .5px; }
.w-sc-content { font-family: 'Georgia', 'Times New Roman', serif; font-size: 15px; line-height: 1.9; color: #1f2937; white-space: pre-wrap; word-break: break-word; }
/* P0+（2026-08-13 工单）：填空横线 = 真 richtext <mark>（文字 + 背景高亮，稳定不消失）—— 替代旧空盒外框 */
.sc-blank { display: inline; background: #FDE8EB; color: #9F1239; font-weight: 700; padding: 1px 5px; border-radius: 4px; white-space: nowrap; box-decoration-break: clone; }
.sc-hint { color: #e11d48; font-size: 0.82em; font-weight: 700; margin-left: 3px; font-style: normal; }

.w-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.w-btn {
    display: inline-flex; align-items: center; gap: 5px;
    border: 1px solid var(--w-line); background: #fff; color: #374151;
    font-size: 13px; padding: 7px 13px; border-radius: 8px; cursor: pointer;
}
.w-btn:hover { color: var(--w-accent); border-color: var(--w-accent); }
.w-btn .w-ico { color: currentColor; }

/* 语言支持 */
.w-phrase-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.w-phrase {
    background: #fff; border: 1px solid var(--w-line); border-radius: 9px; padding: 10px 13px;
    display: flex; flex-direction: column; gap: 2px;
}
.w-phrase b { color: #111827; font-size: 14.5px; }
.w-phrase span { color: var(--w-sub); font-size: 13px; }
.w-sp { background: #fff; border: 1px solid var(--w-line); border-radius: 9px; padding: 11px 14px; margin-bottom: 10px; }
.w-sp-fn { display: inline-block; background: var(--w-soft); color: var(--w-sub); font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 6px; margin-bottom: 7px; }
.w-sp-c { color: #374151; line-height: 1.7; font-family: 'Georgia', serif; }
.w-conn-grp { margin-bottom: 13px; }
.w-conn-fn { font-size: 13px; font-weight: 700; color: #374151; margin-bottom: 7px; }
.w-conn-items { display: flex; flex-wrap: wrap; gap: 7px; }
.w-conn-tag { font-size: 12.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid rgba(0,0,0,.04); }
.w-conn-grid { display: block; }
.w-conn-empty { font-size: 12.5px; color: var(--w-sub); font-style: italic; }

/* 计划栏：导出完整教案 */
.w-plan-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 14px; padding: 10px 13px;
    background: linear-gradient(90deg, #FFF1F3, #fff);
    border: 1px solid var(--w-line); border-left: 3px solid var(--w-accent);
    border-radius: 10px;
}
.w-plan-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--w-accent); color: #fff; border: none;
    font-size: 13px; font-weight: 600; padding: 8px 15px; border-radius: 8px; cursor: pointer;
    box-shadow: 0 2px 6px rgba(244,63,94,.25);
}
.w-plan-btn:hover { filter: brightness(.95); }
.w-plan-btn svg { width: 16px; height: 16px; }
.w-plan-tip { color: var(--w-sub); font-size: 12.5px; line-height: 1.4; }

/* 主题词汇：版本标签页 + 要点分类卡片（桌面双栏 / 移动单栏） */
.w-ver-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.w-ver-tab {
    border: 1px solid var(--w-line); background: #fff; color: var(--w-sub);
    font-size: 13px; font-weight: 600; padding: 6px 15px; border-radius: 8px; cursor: pointer;
}
.w-ver-tab.active { color: var(--w-accent); border-color: var(--w-accent); background: #FFF1F3; }
.w-empty { color: var(--w-sub); font-size: 13px; padding: 8px 2px; }

.w-point-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.w-point-card {
    background: #fff; border: 1px solid var(--w-line); border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
}
.w-cat-label {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    font-size: 12.5px; font-weight: 700; padding: 3px 11px; border-radius: 999px; border: 1px solid transparent;
}
.w-cat-idx { font-size: 11px; opacity: .85; }
.w-pw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.w-pw { display: grid; grid-template-columns: auto 1fr; gap: 2px 9px; align-items: baseline; }
.w-pw-empty { color: var(--w-sub); font-size: 12.5px; }
.w-pw-en { font-family: 'Georgia','Times New Roman',serif; font-size: 14.5px; font-weight: 600; color: #111827; }
.w-pw-cn { grid-column: 2; color: var(--w-sub); font-size: 12.5px; }
.w-pw-ctx { grid-column: 1 / -1; margin-top: 1px; font-size: 12px; color: #4b5563; background: var(--w-soft); border-radius: 6px; padding: 4px 9px; line-height: 1.5; }

/* 实用句型：功能卡片 + 核心结构高亮 + 中文功能说明 */
.w-fn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.w-fn-card {
    background: #fff; border: 1px solid var(--w-line); border-radius: 10px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 9px;
}
.w-pat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.w-pat-c { font-family: 'Georgia','Times New Roman',serif; font-size: 14.5px; line-height: 1.7; color: #1f2937; }
.w-pat-note { font-size: 12.5px; color: var(--w-sub); margin-top: 3px; line-height: 1.5; }
.w-core-tip { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--w-sub); margin-top: 4px; }
.w-core-tip i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; flex: 0 0 auto; }
.w-hl-core { border-radius: 3px; padding: 0 2px; font-weight: 600; }

/* 范文亮点分析 */
.w-anal { margin-top: 0; }
.w-anal-sum { background: var(--w-soft); border: 1px solid var(--w-line); border-radius: 9px; padding: 10px 13px; margin-bottom: 12px; }
.w-anal-sum-l { display: block; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--w-accent); margin-bottom: 4px; }
.w-anal-sum p { margin: 0; line-height: 1.7; color: #374151; }
.w-anal-sec { margin-bottom: 12px; }
.w-anal-sec:last-child { margin-bottom: 0; }
.w-anal-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--w-ink); margin-bottom: 7px; }
.w-anal-h em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--w-sub); background: var(--w-soft); padding: 1px 8px; border-radius: 999px; }
.w-expr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.w-expr { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--w-line); border-radius: 8px; padding: 8px 11px; }
.w-expr mark { align-self: flex-start; border-radius: 4px; padding: 1px 6px; font-weight: 600; font-family: 'Georgia',serif; font-size: 13.5px; }
.w-expr-cn { font-size: 12.5px; color: var(--w-sub); }

.w-ls-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 10px; font-size: 12.5px; color: var(--w-sub); }
.w-ls { border: 1px solid var(--w-line); border-radius: 9px; padding: 11px 13px; margin-bottom: 10px; background: #fff; }
.w-ls:last-child { margin-bottom: 0; }
.w-ls-orig { display: flex; gap: 9px; align-items: baseline; margin-bottom: 8px; }
.w-ls-idx { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--w-accent); padding: 1px 8px; border-radius: 6px; }
.w-ls-txt { font-family: 'Georgia',serif; font-size: 14.5px; line-height: 1.7; color: #1f2937; }
.w-ls-rows { display: grid; gap: 5px; }
.w-ls-row { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; }
.w-ls-k { font-size: 12.5px; font-weight: 700; color: var(--w-sub); }
.w-ls-v { font-size: 13px; color: #374151; line-height: 1.6; }
.w-ls-tr .w-ls-v { color: var(--w-accent); font-weight: 600; }

/* 参考范文 */
.w-view-toggle { display: inline-flex; border: 1px solid var(--w-line); border-radius: 8px; overflow: hidden; }
.w-view { border: none; background: #fff; color: var(--w-sub); font-size: 13px; padding: 7px 13px; cursor: pointer; }
.w-view.active { background: var(--w-accent); color: #fff; }
.w-word-badge { font-size: 12.5px; font-weight: 700; color: var(--w-accent); background: #FFF1F3; padding: 4px 11px; border-radius: 999px; }
.w-essay-body { margin-top: 14px; }
.w-pgh { margin-bottom: 14px; }
.w-pgh-label { display: inline-block; font-size: 12px; font-weight: 700; color: var(--w-accent); background: #FFF1F3; padding: 2px 10px; border-radius: 6px; margin-bottom: 6px; }
.w-pgh p { margin: 0; line-height: 1.9; color: #1f2937; font-family: 'Georgia', serif; font-size: 15px; }

mark[data-tip] { border-radius: 3px; padding: 0 2px; cursor: help; position: relative; font-weight: 600; }
.w-hl-conn { background: #DBEAFE; color: #1D4ED8; }
.w-hl-gram { background: #F3E8FF; color: #7E22CE; }
.w-hl-expr { background: #DCFCE7; color: #15803D; }
mark[data-tip]:hover::after, mark[data-tip]:focus::after {
    content: attr(data-tip); position: absolute; left: 50%; bottom: 135%;
    transform: translateX(-50%); background: #1f2937; color: #fff; font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: 5px; white-space: nowrap; z-index: 30;
}
mark[data-tip]:hover::before {
    content: ''; position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%);
    border: 5px solid transparent; border-top-color: #1f2937; z-index: 31;
}
.w-essay-legend { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 6px 0 14px; font-size: 12.5px; color: var(--w-sub); }
.w-legend-h { font-weight: 700; }
.w-lg { display: inline-flex; align-items: center; gap: 5px; }
.w-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.w-essay-hl .w-card { margin-top: 4px; }
.w-hl-sec { margin-bottom: 12px; }
.w-hl-sec:last-child { margin-bottom: 0; }
.w-hl-h { font-size: 13.5px; font-weight: 700; color: var(--w-ink); margin-bottom: 6px; }
.w-hl-p { color: #4b5563; line-height: 1.7; }
.w-hl-list { margin: 0; padding-left: 20px; color: #4b5563; line-height: 1.8; }

.writing-prose { margin-top: 18px; border-top: 1px dashed var(--w-line); padding-top: 12px; }
.writing-prose summary {
    cursor: pointer; display: flex; align-items: center; gap: 7px; color: var(--w-sub);
    font-size: 13px; font-weight: 600; list-style: none;
}
.writing-prose summary::-webkit-details-marker { display: none; }
.writing-prose[open] summary { margin-bottom: 12px; }

/* 响应式：双列转单列，标签可横滑 */
@media (max-width: 820px) {
    .w-ov-grid { grid-template-columns: 1fr; }
    .w-phrase-grid { grid-template-columns: 1fr; }
    .w-point-grid,
    .w-fn-grid,
    .w-expr-grid { grid-template-columns: 1fr; }
    .writing-tabs { padding-bottom: 2px; }
    .w-subtabs { flex-wrap: nowrap; overflow-x: auto; }
}

/* ===== 阅读设问 READING_QUESTION_UI_DATA 结构化界面 ===== */
.reading-ui { --w-accent: #06b6d4; margin-top: 8px; }
.reading-body { background: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }

/* 命题分析 */
.rq-overview { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.rq-stat { flex: 1 1 140px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 12px; padding: 12px 14px; }
.rq-stat-num { font-size: 20pt; font-weight: 800; color: #0f172a; line-height: 1.15; }
.rq-stat-txt { font-size: 13pt; font-weight: 700; }
.rq-stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }
.rq-table-wrap { overflow-x: auto; }
.rq-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rq-table th { background: #f1f5f9; color: #475569; text-align: left; padding: 8px 10px; border-bottom: 2px solid #e2e8f0; white-space: nowrap; }
.rq-table td { padding: 8px 10px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
.rq-tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.rq-tag-func { background: #DBEAFE; color: #1D4ED8; }

/* 学生版试题 */
.rq-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.rq-btn { display: inline-flex; align-items: center; gap: 5px; background: #f1f5f9; border: 1px solid #e2e8f0; color: #334155; padding: 6px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; transition: all .15s; }
.rq-btn:hover { background: #e2e8f0; }
.rq-paper { background: #fff; border: 1px solid #eef2f7; border-radius: 12px; padding: 20px 22px; }
.rq-paper-title { text-align: center; font-size: 17pt; margin: 0 0 12px; color: #0f172a; }
.rq-info { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: #334155; margin-bottom: 14px; }
.rq-article { margin: 12px 0; }
.rq-article h3 { font-size: 14pt; color: #0f172a; margin: 0 0 6px; }
.rq-article p { text-align: justify; text-align-last: left; line-height: 1.8; margin: 0 0 14px 0; }
.rq-article p:last-child { margin-bottom: 0; }
.rq-q { margin: 14px 0; }
.rq-q-stem { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; margin-bottom: 5px; color: #1e293b; }
.rq-q-num { flex: 0 0 2.4em; min-width: 2.4em; text-align: left; }
.rq-q-text { flex: 1; }
.rq-opts { }
.rq-opt { display: flex; align-items: flex-start; gap: 4px; padding-left: calc(2.4em + 6px); margin: 3px 0; }
.rq-opt-label { flex: 0 0 1.5em; min-width: 1.5em; font-weight: 700; color: #334155; text-align: left; }
.rq-opt-txt { flex: 1; }
.rq-answer-grid { margin-top: 18px; border-top: 1px dashed #e2e8f0; padding-top: 10px; }
.rq-ag-title { font-size: 13px; color: #64748b; margin-bottom: 6px; }
.rq-ag-items { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #334155; }
.rq-ag-item { white-space: nowrap; }

/* 答案与解析 */
.rq-acard { border: 1px solid #eef2f7; border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.rq-acard-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; background: #f8fafc; }
.rq-acard-head:hover { background: #f1f5f9; }
.rq-ac-num { font-weight: 700; color: #0f172a; }
.rq-ac-type { font-size: 12px; color: #475569; background: #eef2f7; padding: 1px 8px; border-radius: 8px; }
.rq-ac-ans { font-size: 12px; font-weight: 700; color: #15803D; background: #DCFCE7; padding: 1px 8px; border-radius: 8px; }
.rq-ac-arrow { margin-left: auto; color: #94a3b8; transition: transform .2s; }
.rq-acard.open .rq-ac-arrow { transform: rotate(180deg); }
.rq-acard-body { display: none; padding: 12px 14px; }
.rq-acard.open .rq-acard-body { display: block; }
.rq-row { display: flex; gap: 10px; margin: 6px 0; align-items: flex-start; }
.rq-k { flex: 0 0 84px; font-weight: 600; color: #475569; font-size: 13px; }
.rq-k-func { color: #1D4ED8; }
.rq-k-para { color: #7E22CE; }
.rq-quote { flex: 1; background: #f8fafc; border-left: 3px solid #cbd5e1; padding: 6px 10px; border-radius: 6px; font-size: 13px; color: #334155; }
.rq-opts-analysis { margin-top: 8px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.rq-opt-a { padding: 5px 8px; background: #F0FDF4; border-left: 3px solid #16A34A; border-radius: 6px; margin: 4px 0; font-size: 13px; }
.rq-badge { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.rq-badge-ans { background: #DCFCE7; color: #15803D; }
.rq-badge-dist { background: #FFEDD5; color: #C2410C; }
.rq-opt-d { padding: 5px 8px; border-left: 3px solid #FED7AA; border-radius: 6px; margin: 4px 0; font-size: 13px; }
.rq-dist-exp { margin: 3px 0 0 18px; color: #9a3412; font-size: 12px; }

/* 质量检查 */
.rq-qc-status { padding: 10px 14px; border-radius: 10px; font-weight: 700; margin-bottom: 12px; }
.rq-qc-ok { background: #DCFCE7; color: #15803D; }
.rq-qc-warn { background: #FFEDD5; color: #C2410C; }
.rq-qc-list { display: flex; flex-direction: column; gap: 8px; }
.rq-qc-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: #f8fafc; border: 1px solid #eef2f7; }
.rq-qc-mark { font-weight: 800; font-size: 14px; }
.rq-qc-pass .rq-qc-mark { color: #16A34A; }
.rq-qc-fail .rq-qc-mark { color: #EA580C; }
.rq-qc-text { flex: 1; font-size: 13px; color: #334155; }
.rq-qc-state { font-size: 12px; font-weight: 700; }
.rq-qc-pass .rq-qc-state { color: #16A34A; }
.rq-qc-fail .rq-qc-state { color: #EA580C; }

/* 移动端：语篇分析表转卡片，试题选项单列 */
@media (max-width: 640px) {
    .rq-table thead { display: none; }
    .rq-table, .rq-table tbody, .rq-table tr, .rq-table td { display: block; width: 100%; }
    .rq-table tr { margin-bottom: 10px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
    .rq-table td { border: none; border-bottom: 1px solid #f1f5f9; display: flex; gap: 8px; }
    .rq-table td::before { content: attr(data-label); font-weight: 700; color: #64748b; flex: 0 0 72px; }
}

/* ===== 每日登录奖励弹窗 ===== */
.daily-reward-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(17, 20, 45, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.daily-reward-overlay.show {
    opacity: 1;
    visibility: visible;
}

.daily-reward-modal {
    position: relative;
    width: 420px;
    max-width: calc(100% - 32px);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(60, 40, 120, 0.28), 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 30px 28px 28px;
    text-align: center;
    overflow: hidden;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2, .8, .25, 1), opacity .22s ease;
}
.daily-reward-overlay.show .daily-reward-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.daily-reward-glow {
    position: absolute;
    top: -130px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 280px;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(139, 92, 246, 0.78), rgba(124, 58, 237, 0.58) 44%, transparent 76%),
        radial-gradient(ellipse at 50% 80%, rgba(99, 102, 241, 0.5), transparent 72%);
    filter: blur(20px);
    pointer-events: none;
}

.daily-reward-coin-wrap {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 6px auto 2px;
    z-index: 1;
}
.daily-reward-badge {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 55%, #d97706 100%);
    box-shadow: 0 10px 28px rgba(217, 119, 6, 0.35), inset 0 -4px 12px rgba(180, 83, 9, 0.25);
    color: #ffffff;
}
.daily-reward-badge svg {
    width: 56%;
    height: 56%;
    filter: drop-shadow(0 1px 2px rgba(180, 83, 9, 0.25));
}
.dr-drop {
    animation: dr-coin-drop .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@keyframes dr-coin-drop {
    0% { transform: translateY(-44px) scale(0.7); opacity: 0; }
    60% { transform: translateY(6px) scale(1.04); opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.dr-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #ffffff 0%, #fcd34d 60%, transparent 72%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.dr-sparkle-1 { top: 4px; left: 12px; }
.dr-sparkle-2 { top: 22px; right: 4px; width: 6px; height: 6px; }
.dr-sparkle-3 { bottom: 16px; left: 0; width: 5px; height: 5px; }
.dr-sparkle-4 { bottom: 8px; right: 18px; width: 7px; height: 7px; }
.daily-reward-overlay.show .dr-sparkle {
    animation: dr-sparkle-in .6s ease .25s both;
}
@keyframes dr-sparkle-in {
    0% { opacity: 0; transform: scale(0.2); }
    60% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 0.9; transform: scale(1); }
}

.daily-reward-subtitle {
    position: relative;
    z-index: 1;
    margin-top: 2px;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #8b5cf6;
}
.daily-reward-title {
    position: relative;
    z-index: 1;
    margin: 6px 0 10px;
    font-size: 22px;
    font-weight: 800;
    color: #1e1b3a;
}
.daily-reward-amount {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 8px;
}
.dr-plus {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, #f6c453, #e0a020);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dr-num {
    font-size: 56px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(135deg, #fbd34b, #e0a020 60%, #c8851a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dr-unit {
    font-size: 20px;
    font-weight: 700;
    color: #b8860b;
    margin-left: 2px;
}
.daily-reward-desc {
    position: relative;
    z-index: 1;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 14px;
}
.daily-reward-balance {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: #f3ebff;
    color: #5b3aa6;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.daily-reward-balance strong {
    font-weight: 800;
    color: #4c1d95;
}
.daily-reward-btn {
    position: relative;
    z-index: 1;
    display: block;
    width: 80%;
    height: 48px;
    margin: 0 auto;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f7cff, #8b5cf6);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.35);
    transition: transform .18s ease, box-shadow .18s ease;
}
.daily-reward-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(99, 102, 241, 0.45);
}
.daily-reward-btn:active {
    transform: translateY(0);
}
.daily-reward-close {
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: #6b7280;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.daily-reward-close:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #374151;
}

/* 体验豆数字增加动画 */
.bean-bump {
    display: inline-block;
    animation: bean-bump .6s ease;
}
@keyframes bean-bump {
    0% { transform: scale(1); color: inherit; }
    30% { transform: scale(1.35); color: #f6c453; }
    100% { transform: scale(1); }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
    .daily-reward-modal {
        background: rgba(34, 33, 58, 0.82);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    }
    .daily-reward-title { color: #f3f1ff; }
    .daily-reward-desc { color: #b6b2d6; }
    .daily-reward-balance { background: rgba(139, 92, 246, 0.18); color: #d6c8ff; }
    .daily-reward-balance strong { color: #efe7ff; }
    .daily-reward-close { background: rgba(255, 255, 255, 0.12); color: #cfcae6; }
    .daily-reward-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
    .dr-unit { color: #f0c969; }
}

/* 小屏 */
@media (max-width: 420px) {
    .daily-reward-modal { padding: 26px 20px 24px; }
    .dr-num { font-size: 48px; }
}

/* 减少动态效果：取消粒子与数字滚动，弹窗直接呈现 */
@media (prefers-reduced-motion: reduce) {
    .daily-reward-overlay,
    .daily-reward-modal,
    .dr-drop,
    .daily-reward-overlay.show .dr-sparkle,
    .bean-bump {
        transition: none !important;
        animation: none !important;
    }
    .daily-reward-overlay { opacity: 1; }
    .daily-reward-modal { transform: none; opacity: 1; }
}

/* =====================================================================
   联系管理员弹窗
   ===================================================================== */
.acm-overlay,
.admin-contact-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.acm-overlay.show,
.admin-contact-overlay.show {
    opacity: 1;
    visibility: visible;
}
.acm-modal,
.admin-contact-modal {
    position: relative;
    width: 420px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2, .8, .25, 1), opacity .22s ease;
}
.acm-overlay.show .acm-modal,
.admin-contact-overlay.show .admin-contact-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.acm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.acm-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.acm-close {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: background .15s, color .15s;
}
.acm-close:hover {
    background: var(--bg-page);
    color: var(--text-primary);
}
.acm-body {
    padding: 28px 24px;
    overflow-y: auto;
    flex: 1;
}
.acm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.acm-empty-art {
    width: 160px;
    height: 128px;
    margin-bottom: 14px;
}
.acm-empty-art svg {
    width: 100%;
    height: 100%;
}
.acm-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.acm-empty-desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.acm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.acm-btn {
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    border: 1px solid transparent;
}
.acm-btn-primary {
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28);
}
.acm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.38);
}
.acm-btn-secondary {
    background: var(--bg-page);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.acm-btn-secondary:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.admin-contact-modal {
    padding-top: 0;
    overflow: visible;
}
.admin-contact-hero {
    position: relative;
    height: 110px;
    margin: -1px -1px 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    flex-shrink: 0;
}
.admin-contact-hero-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.35), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.30), transparent 50%),
        linear-gradient(135deg, #f5f3ff 0%, #eef2ff 100%);
}
.admin-contact-hero-icon {
    position: absolute;
    left: 50%;
    bottom: -28px;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
    box-shadow: 0 10px 28px rgba(99, 102, 241, 0.35);
    border: 3px solid #ffffff;
}
.admin-contact-close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
    color: #6b7280;
    background: rgba(255, 255, 255, 0.72);
    padding: 4px 8px;
}
.admin-contact-close:hover {
    background: #fff;
    color: #374151;
}
.admin-contact-body {
    padding: 40px 28px 16px;
    text-align: center;
}
.admin-contact-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.admin-contact-lead {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px;
}
.admin-contact-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 20px;
}
.admin-contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
}
.admin-contact-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366F1, #8B5CF6);
    color: #fff;
}
.admin-contact-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.admin-contact-label {
    font-size: 12px;
    color: var(--text-muted);
}
.admin-contact-email {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
}
.admin-contact-copy {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.admin-contact-copy:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
}
.admin-contact-copy.copied {
    background: #ecfdf5;
    border-color: #34d399;
    color: #059669;
}
.admin-contact-tip {
    font-size: 12px;
    color: var(--text-muted);
    margin: 14px 0 0;
}
.admin-contact-footer {
    justify-content: center;
    padding: 10px 28px 22px;
}

/* 深色模式：联系管理员弹窗 */
[data-theme="dark"] .acm-modal,
[data-theme="dark"] .admin-contact-modal {
    background: #171E2E;
    border-color: #2d3344;
}
[data-theme="dark"] .acm-header,
[data-theme="dark"] .acm-footer {
    border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .acm-title { color: #F4F7FC; }
[data-theme="dark"] .acm-close { color: #B4BED0; }
[data-theme="dark"] .acm-close:hover { background: #232b3d; color: #F4F7FC; }
[data-theme="dark"] .acm-empty-title { color: #F4F7FC; }
[data-theme="dark"] .acm-empty-desc { color: #B4BED0; }
[data-theme="dark"] .acm-btn-secondary {
    background: #232b3d;
    color: #B4BED0;
    border-color: rgba(255, 255, 255, 0.14);
}
[data-theme="dark"] .acm-btn-secondary:hover { background: #2a3347; color: #F4F7FC; }
[data-theme="dark"] .admin-contact-hero-bg {
    background:
        radial-gradient(circle at 30% 20%, rgba(139, 92, 246, 0.28), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.22), transparent 50%),
        linear-gradient(135deg, #1c1a34 0%, #171E2E 100%);
}
[data-theme="dark"] .admin-contact-hero-icon { border-color: #171E2E; }
[data-theme="dark"] .admin-contact-close { color: #B4BED0; background: rgba(23, 30, 46, 0.72); }
[data-theme="dark"] .admin-contact-close:hover { background: #171E2E; color: #F4F7FC; }
[data-theme="dark"] .admin-contact-title { color: #F4F7FC; }
[data-theme="dark"] .admin-contact-lead { color: #F4F7FC; }
[data-theme="dark"] .admin-contact-desc { color: #B4BED0; }
[data-theme="dark"] .admin-contact-card { background: #232b3d; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .admin-contact-icon { background: linear-gradient(135deg, #818CF8, #A78BFA); }
[data-theme="dark"] .admin-contact-label { color: #8a95a8; }
[data-theme="dark"] .admin-contact-email { color: #F4F7FC; }
[data-theme="dark"] .admin-contact-copy { background: #171E2E; color: #F4F7FC; border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .admin-contact-copy:hover { background: #232b3d; }
[data-theme="dark"] .admin-contact-copy.copied { background: rgba(52, 211, 153, 0.12); border-color: #34d399; color: #6ee7b7; }
[data-theme="dark"] .admin-contact-tip { color: #8a95a8; }

/* 小屏适配 */
@media (max-width: 480px) {
    .acm-modal,
    .admin-contact-modal { width: 100%; max-width: calc(100% - 24px); }
    .acm-body { padding: 22px 18px; }
    .acm-empty-art { width: 130px; height: 104px; }
    .acm-footer { padding: 12px 18px 16px; }
    .acm-btn { flex: 1; justify-content: center; }
    .admin-contact-hero { height: 96px; }
    .admin-contact-hero-icon { width: 58px; height: 58px; bottom: -24px; }
    .admin-contact-body { padding: 34px 20px 14px; }
    .admin-contact-card { flex-wrap: wrap; }
    .admin-contact-copy { width: 100%; justify-content: center; margin-top: 6px; }
    .admin-contact-footer { padding: 8px 20px 18px; }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    .acm-overlay, .admin-contact-overlay,
    .acm-modal, .admin-contact-modal {
        transition: none !important;
        animation: none !important;
    }
    .acm-overlay.show .acm-modal,
    .admin-contact-overlay.show .admin-contact-modal { transform: none; opacity: 1; }
}

/* =====================================================================
   我的课件管理弹窗（首页下拉「我的课件」入口，#1041）
   ===================================================================== */
.courseware-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.courseware-overlay.show {
    opacity: 1;
    visibility: visible;
}
.courseware-modal {
    position: relative;
    width: 460px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 48px);
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(16px) scale(0.96);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2, .8, .25, 1), opacity .22s ease;
}
.courseware-overlay.show .courseware-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.courseware-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.courseware-head-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #4338ca);
}
.courseware-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.courseware-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted, #8a8aa3);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.courseware-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-primary);
}
.courseware-body {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
    min-height: 180px;
    max-height: 60vh;
}
.courseware-loading,
.courseware-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-muted, #8a8aa3);
    text-align: center;
}
.courseware-empty p {
    margin: 4px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-secondary, #5a5a72);
}
.courseware-empty span {
    font-size: 13px;
    color: var(--text-muted, #8a8aa3);
}
.courseware-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.courseware-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background .15s ease;
}
.courseware-item:hover {
    background: rgba(67, 56, 202, 0.07);
}
.courseware-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.courseware-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.courseware-item-time {
    font-size: 12px;
    color: var(--text-muted, #8a8aa3);
}
.courseware-item-del {
    flex-shrink: 0;
    width: 32px; height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted, #8a8aa3);
    border-radius: 8px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.courseware-item-del:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
.courseware-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.courseware-count {
    font-size: 13px;
    color: var(--text-muted, #8a8aa3);
}
.courseware-refresh {
    font-size: 13px;
    color: var(--primary, #4338ca);
    background: transparent;
    border: 1px solid rgba(67, 56, 202, 0.3);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
}
.courseware-refresh:hover {
    background: rgba(67, 56, 202, 0.08);
}

/* #1058 课件制作弹窗 */
.cmk-intro { margin: 0 0 14px; font-size: 13px; color: var(--text-muted, #8a8aa3); line-height: 1.6; }
.cmk-instruction { background: rgba(109, 92, 246, 0.07); border: 1px solid rgba(109, 92, 246, 0.22); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.cmk-instruction-title { font-size: 13px; font-weight: 600; color: var(--text-strong, #2b2b3a); margin-bottom: 8px; }
.cmk-instruction-list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--text-soft, #55556a); line-height: 1.9; }
.cmk-instruction-list code { background: rgba(109, 92, 246, 0.12); color: #6d5cf6; padding: 1px 6px; border-radius: 5px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cmk-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-strong, #2b2b3a); margin-bottom: 8px; }
.cmk-input { width: 100%; min-height: 200px; resize: vertical; padding: 12px 14px; border: 1px solid var(--border-color, #e3e3ee); border-radius: 10px; font-size: 14px; line-height: 1.7; color: var(--text-strong, #2b2b3a); background: var(--bg-soft, #fafafe); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; box-sizing: border-box; }
.cmk-input:focus { outline: none; border-color: #6d5cf6; box-shadow: 0 0 0 3px rgba(109, 92, 246, 0.15); }
.cmk-err { min-height: 18px; margin: 8px 0 0; font-size: 13px; color: #e05656; }
.cmk-actions { display: flex; gap: 10px; }
.cmk-cancel { font-size: 14px; color: var(--text-muted, #8a8aa3); background: transparent; border: 1px solid var(--border-color, #e3e3ee); padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: background .15s ease; }
.cmk-cancel:hover { background: rgba(0, 0, 0, 0.04); }
.cmk-generate { font-size: 14px; font-weight: 600; color: #fff; background: #6d5cf6; border: none; padding: 8px 18px; border-radius: 9px; cursor: pointer; transition: background .15s ease; }
.cmk-generate:hover { background: #5b4be0; }
.cmk-generate:disabled { opacity: .6; cursor: default; }
[data-theme="dark"] .cmk-intro { color: #8a95a8; }
[data-theme="dark"] .cmk-instruction { background: rgba(167, 139, 250, 0.1); border-color: rgba(167, 139, 250, 0.3); }
[data-theme="dark"] .cmk-instruction-title { color: #F4F7FC; }
[data-theme="dark"] .cmk-instruction-list { color: #b4bed0; }
[data-theme="dark"] .cmk-instruction-list code { background: rgba(167, 139, 250, 0.18); color: #A78BFA; }
[data-theme="dark"] .cmk-label { color: #F4F7FC; }
[data-theme="dark"] .cmk-input { color: #F4F7FC; background: #11192a; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .cmk-cancel { color: #8a95a8; border-color: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] .cmk-cancel:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .courseware-modal { background: #171E2E; }
[data-theme="dark"] .courseware-head { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .courseware-title { color: #F4F7FC; }
[data-theme="dark"] .courseware-close { color: #B4BED0; }
[data-theme="dark"] .courseware-close:hover { background: #232b3d; color: #F4F7FC; }
[data-theme="dark"] .courseware-item:hover { background: rgba(129, 140, 248, 0.12); }
[data-theme="dark"] .courseware-item-name { color: #F4F7FC; }
[data-theme="dark"] .courseware-item-time { color: #8a95a8; }
[data-theme="dark"] .courseware-item-del { color: #8a95a8; }
[data-theme="dark"] .courseware-item-del:hover { background: rgba(239, 68, 68, 0.18); color: #f87171; }
[data-theme="dark"] .courseware-foot { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .courseware-count { color: #8a95a8; }
[data-theme="dark"] .courseware-refresh { color: #A78BFA; border-color: rgba(167, 139, 250, 0.35); }
[data-theme="dark"] .courseware-refresh:hover { background: rgba(167, 139, 250, 0.12); }
[data-theme="dark"] .courseware-empty p { color: #F4F7FC; }
[data-theme="dark"] .courseware-empty span { color: #8a95a8; }

/* 我的课件列表：分享 / 重命名 / 删除 操作按钮（#1053 / #1056） */
.courseware-item-acts {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.courseware-item-act {
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.courseware-item-share {
    color: #4338ca;
    background: rgba(67, 56, 202, 0.08);
    border-color: rgba(67, 56, 202, 0.25);
}
.courseware-item-share:hover { background: rgba(67, 56, 202, 0.16); }
.courseware-item-rename {
    color: #475569;
    background: rgba(15, 23, 42, 0.05);
    border-color: rgba(15, 23, 42, 0.12);
}
.courseware-item-rename:hover { background: rgba(15, 23, 42, 0.1); }
/* 删除按钮保持方形图标样式（覆盖 .courseware-item-act 的文字 padding） */
.courseware-item-del.courseware-item-act {
    width: 32px; height: 32px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #8a8aa3);
    background: transparent;
    border-color: transparent;
}
.courseware-item-del.courseware-item-act:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}
[data-theme="dark"] .courseware-item-act { color: #cdd6e6; }
[data-theme="dark"] .courseware-item-share { color: #A78BFA; background: rgba(167, 139, 250, .14); border-color: rgba(167, 139, 250, .35); }
[data-theme="dark"] .courseware-item-share:hover { background: rgba(167, 139, 250, .22); }
[data-theme="dark"] .courseware-item-rename { color: #cdd6e6; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
[data-theme="dark"] .courseware-item-rename:hover { background: rgba(255, 255, 255, .12); }
[data-theme="dark"] .courseware-item-del.courseware-item-act { color: #8a95a8; background: transparent; border-color: transparent; }
[data-theme="dark"] .courseware-item-del.courseware-item-act:hover { background: rgba(239, 68, 68, .18); color: #f87171; }

/* ===== 课件分享弹窗（#1053） ===== */
.share-modal, .rename-modal {
    position: relative;
    width: 520px;
    max-width: calc(100% - 32px);
    background: #ffffff;
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(15, 23, 42, 0.25));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalPop .22s ease;
}
.share-head, .rename-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #eef2f7);
    flex-shrink: 0;
}
.share-head-title, .rename-head-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #4338ca);
}
.share-title, .rename-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}
.share-close, .rename-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--text-muted, #8a8aa3);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
.share-close:hover, .rename-close:hover { background: rgba(0, 0, 0, 0.06); color: var(--text-primary, #1e293b); }
.share-body, .rename-body { padding: 20px; }
.share-desc {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary, #5a5a72);
}
.share-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.share-link-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text-primary, #1e293b);
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    transition: border-color .12s, box-shadow .12s;
}
.share-link-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); background: #fff; }
.share-copy-btn {
    flex-shrink: 0;
    border: none;
    border-radius: 9px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    transition: background .15s ease;
}
.share-copy-btn:hover { background: #1d4ed8; }
.share-warn {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 8px 10px;
}
/* 重命名弹窗 */
.rename-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    margin-bottom: 8px;
}
.rename-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary, #1e293b);
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.rename-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); background: #fff; }
.rename-err {
    margin: 8px 0 0;
    font-size: 12px;
    color: #dc2626;
    min-height: 0;
}
.rename-err.on { min-height: 16px; }
.rename-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color, #eef2f7);
    flex-shrink: 0;
}
.rename-cancel, .rename-ok-btn {
    border-radius: 9px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
}
.rename-cancel { background: #fff; border-color: #cbd5e1; color: #475569; }
.rename-cancel:hover { background: #f1f5f9; }
.rename-ok-btn { background: #2563eb; border-color: #2563eb; color: #fff; }
.rename-ok-btn:hover { background: #1d4ed8; }
[data-theme="dark"] .share-modal, [data-theme="dark"] .rename-modal { background: #171E2E; }
[data-theme="dark"] .share-head, [data-theme="dark"] .rename-head { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .share-title, [data-theme="dark"] .rename-title { color: #F4F7FC; }
[data-theme="dark"] .share-close, [data-theme="dark"] .rename-close { color: #B4BED0; }
[data-theme="dark"] .share-close:hover, [data-theme="dark"] .rename-close:hover { background: #232b3d; color: #F4F7FC; }
[data-theme="dark"] .share-desc { color: #B4BED0; }
[data-theme="dark"] .share-link-input { background: #0f172a; color: #F4F7FC; border-color: #334155; }
[data-theme="dark"] .share-link-input:focus { background: #0f172a; }
[data-theme="dark"] .share-warn { color: #fbbf24; background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .3); }
[data-theme="dark"] .rename-label { color: #B4BED0; }
[data-theme="dark"] .rename-input { background: #0f172a; color: #F4F7FC; border-color: #334155; }
[data-theme="dark"] .rename-input:focus { background: #0f172a; }
[data-theme="dark"] .rename-foot { border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .rename-cancel { background: #1e293b; border-color: #334155; color: #cdd6e6; }
[data-theme="dark"] .rename-cancel:hover { background: #232b3d; }

/* =====================================================================
   首次登录欢迎弹窗（与每日登录奖励共用设计语言，层级更丰富）
   ===================================================================== */
.welcome-modal {
    width: 460px;
    padding: 32px 32px 26px;
    text-align: center;
    transition: transform .42s cubic-bezier(.2,.8,.25,1), opacity .42s ease;
}
.welcome-glow {
    /* 紫色径向渐变背景：紫罗兰中心 → 靛蓝边缘，金币浮于其上，去掉透明马赛克 */
    background:
        radial-gradient(ellipse at 50% 38%, rgba(139, 92, 246, 0.82), rgba(124, 58, 237, 0.62) 42%, transparent 76%),
        radial-gradient(ellipse at 50% 80%, rgba(99, 102, 241, 0.55), transparent 72%);
}

.welcome-badge {
    position: relative; z-index: 1;
    display: inline-block;
    padding: 5px 14px;
    margin: 0 auto 8px;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    color: #6d28d9;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(139, 92, 246, 0.28);
    border-radius: 999px;
}
.welcome-title {
    position: relative; z-index: 1;
    margin: 4px 0 14px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    color: #1e1b3a;
}
.welcome-title .welcome-brand {
    display: inline-block;
    margin-top: 2px;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #c026d3 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.welcome-art-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 2px auto 8px;
    z-index: 1;
}
.welcome-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(80, 60, 160, 0.28));
}
.wl-art-in {
    animation: wl-art-in .7s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes wl-art-in {
    0% { opacity: 0; transform: translateY(10px) scale(0.92); }
    60% { opacity: 1; transform: translateY(-2px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.wl-sparkle {
    position: absolute;
    width: 9px; height: 9px;
    background: radial-gradient(circle, #ffffff 0%, #fcd34d 55%, transparent 72%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.wl-sparkle-1 { top: 8px; left: 16px; width: 10px; height: 10px; }
.wl-sparkle-2 { top: 28px; right: 8px; width: 7px; height: 7px; }
.wl-sparkle-3 { bottom: 30px; left: 4px; width: 6px; height: 6px; }
.wl-sparkle-in {
    animation: wl-sparkle-in .65s ease both;
}
@keyframes wl-sparkle-in {
    0% { opacity: 0; transform: scale(0.2); }
    55% { opacity: 1; transform: scale(1.2); }
    100% { opacity: 0.9; transform: scale(1); }
}

.welcome-reward {
    position: relative; z-index: 1;
    margin: 28px 0 14px; /* 去掉金币图后，给 100 数字与标题之间留出呼吸空间 */
}
.wl-num {
    font-size: 72px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, #fbd34b 0%, #f59e0b 55%, #c8851a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    vertical-align: baseline;
}
.wl-unit {
    display: inline-block;
    margin-left: 4px;
    font-size: 20px;
    font-weight: 700;
    color: #b8860b;
}
.wl-done {
    margin-top: 4px;
    font-size: 13.5px;
    color: #6b7280;
    letter-spacing: 0.02em;
}

.welcome-cards {
    position: relative; z-index: 1;
    display: flex;
    gap: 10px;
    margin: 0 auto 16px;
    max-width: 92%;
}
.welcome-card {
    flex: 1;
    text-align: left;
    padding: 11px 11px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #3f3658;
    min-width: 0;
}
.welcome-card .wc-label {
    display: block;
    font-weight: 800;
    margin-bottom: 3px;
    font-size: 13px;
    white-space: nowrap;
}
.welcome-card .wc-text {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wc-purple {
    background: rgba(139, 92, 246, 0.10);
    border: 1px solid rgba(139, 92, 246, 0.18);
}
.wc-purple .wc-label { color: #6d28d9; }
.wc-gold {
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.20);
}
.wc-gold .wc-label { color: #b45309; }

.welcome-btn {
    width: 88%;
    height: 48px;
    border-radius: 14px;
}
.welcome-foot {
    position: relative; z-index: 1;
    margin-top: 12px;
    font-size: 11.5px;
    color: #9ca3af;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    .welcome-modal { background: rgba(28, 26, 52, 0.84); border-color: rgba(255,255,255,0.10); }
    .welcome-title { color: #f3f1ff; }
    .wl-done { color: #b6b2d6; }
    .welcome-card { color: #d6d0eb; }
    .wc-purple { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.30); }
    .wc-purple .wc-label { color: #c8b5ff; }
    .wc-gold { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.30); }
    .wc-gold .wc-label { color: #f6c453; }
    .welcome-foot { color: #8a8298; }
    .welcome-badge { color: #c8b5ff; background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(99,102,241,0.16)); border-color: rgba(139,92,246,0.40); }
    .wl-unit { color: #f6c453; }
}
[data-theme="dark"] .welcome-modal { background: rgba(28, 26, 52, 0.84); border-color: rgba(255,255,255,0.10); }
[data-theme="dark"] .welcome-title { color: #f3f1ff; }
[data-theme="dark"] .wl-done { color: #b6b2d6; }
[data-theme="dark"] .welcome-card { color: #d6d0eb; }
[data-theme="dark"] .wc-purple { background: rgba(139, 92, 246, 0.18); border-color: rgba(139, 92, 246, 0.30); }
[data-theme="dark"] .wc-purple .wc-label { color: #c8b5ff; }
[data-theme="dark"] .wc-gold { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.30); }
[data-theme="dark"] .wc-gold .wc-label { color: #f6c453; }
[data-theme="dark"] .welcome-foot { color: #8a8298; }
[data-theme="dark"] .welcome-badge { color: #c8b5ff; background: linear-gradient(135deg, rgba(139,92,246,0.22), rgba(99,102,241,0.16)); border-color: rgba(139,92,246,0.40); }
[data-theme="dark"] .wl-unit { color: #f6c453; }

/* 小屏 */
@media (max-width: 480px) {
    .welcome-modal { width: calc(100% - 32px); padding: 26px 20px 22px; }
    .welcome-art-wrap { width: 180px; height: 168px; }
    .wl-num { font-size: 60px; }
    .welcome-title { font-size: 20px; }
    .welcome-title .welcome-brand { font-size: 22px; }
    .welcome-cards { flex-direction: column; }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    .welcome-modal, .wl-art-in, .wl-sparkle-in {
        transition: none !important;
        animation: none !important;
    }
    .welcome-modal { transform: none; opacity: 1; }
}

/* =====================================================================
   用户菜单 / 个人中心 / 退出确认 / 主题切换（新增组件）
   ===================================================================== */
.user-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px 10px 3px 5px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: inherit;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.user-menu-trigger:hover { background: var(--bg-page); color: var(--text-primary); }
.user-menu-trigger .user-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: center top; }
.user-menu-caret { transition: transform var(--transition); }
.user-menu-trigger[aria-expanded="true"] .user-menu-caret { transform: rotate(180deg); }
.user-menu .user-menu-trigger { color: var(--text-secondary); }
.user-menu .user-menu-trigger:hover { text-decoration: none; }

/* 用户下拉面板：显式配色（不再仅依赖主题变量），确保移动端 / 深色模式文字始终可见 */
.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 264px;
    max-width: calc(100vw - 24px);
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    box-shadow: 0 14px 38px rgba(79, 70, 229, 0.16);
    padding: 9px;
    z-index: 200;
    animation: udFadeIn 0.22s ease;
}
@keyframes udFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* 头部：头像 / 脱敏手机号 / 当前豆值 / 奖励状态 */
.ud-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 11px;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(221, 227, 239, 0.8);
}
.ud-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    object-fit: cover; object-position: center top;
    background: var(--brand-gradient); flex-shrink: 0;
}
.ud-head-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ud-head-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ud-phone { font-size: 14px; font-weight: 700; color: #1f2937; }
.ud-beans { font-size: 12.5px; font-weight: 500; color: #6b7280; }
.ud-beans strong { color: var(--primary-dark); font-weight: 700; }
.ud-reward {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px; font-weight: 600;
    color: #16a34a; background: rgba(34, 197, 94, 0.12);
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.18);
}
.ud-reward::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18);
}
/* 菜单项 */
.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: 11px;
    padding: 11px 12px;
    font-size: 15.5px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.user-dropdown-item > svg { color: #6b7280; flex-shrink: 0; transition: color 0.18s ease, transform 0.18s ease; }
.user-dropdown-item:hover { background: linear-gradient(135deg, #f5f3ff 0%, #f3f4f6 100%); color: var(--primary-dark); }
.user-dropdown-item:hover > svg { color: var(--primary); transform: translateX(1px); }
.user-dropdown-item.danger { color: #c05656; }
.user-dropdown-item.danger > svg { color: #c05656; }
.user-dropdown-item.danger:hover { background: rgba(192, 86, 86, 0.12); }
/* 每日领取：未领取显示为主行动按钮；已领取则隐藏（状态移至头部绿标） */
.user-dropdown-item.daily-claim {
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
    margin-top: 2px;
}
.user-dropdown-item.daily-claim > svg { color: #fff; }
.user-dropdown-item.daily-claim:hover { background: linear-gradient(135deg, var(--primary-dark) 0%, #7c3aed 100%); box-shadow: 0 6px 18px rgba(99, 102, 241, 0.36); transform: translateY(-1px); }
.user-dropdown-item.daily-claim:hover > svg { transform: none; }
.user-dropdown-item.daily-claim.claimed { display: none; }
.user-dropdown-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--border-color), transparent); margin: 8px 6px; }
.theme-quick { justify-content: space-between; cursor: default; }
.theme-quick:hover { background: none; }
.theme-quick:hover > svg { color: #6b7280; }
.theme-quick-label { font-size: 14.5px; font-weight: 600; color: #5a5a72; }

/* 深色模式：下拉面板 */
[data-theme="dark"] .user-dropdown {
    background: #171E2E;
    border-color: #2d3344;
}
[data-theme="dark"] .user-dropdown-item { color: #F4F7FC; }
[data-theme="dark"] .user-dropdown-item > svg { color: #9aa6bd; }
[data-theme="dark"] .user-dropdown-item:hover { background: #232b3d; }
[data-theme="dark"] .user-dropdown-item:hover > svg { color: #c4b5fd; }
[data-theme="dark"] .user-dropdown-item.danger { color: #f0a0a0; }
[data-theme="dark"] .user-dropdown-item.danger > svg { color: #f0a0a0; }
[data-theme="dark"] .user-dropdown-item.daily-claim { color: #fff; }
[data-theme="dark"] .user-dropdown-item.daily-claim > svg { color: #fff; }
[data-theme="dark"] .ud-phone { color: #F4F7FC; }
[data-theme="dark"] .ud-beans { color: #9aa6bd; }
[data-theme="dark"] .ud-beans strong { color: #c4b5fd; }
[data-theme="dark"] .ud-reward { color: #4ade80; background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.22); }
[data-theme="dark"] .ud-reward::before { background: #4ade80; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.22); }
[data-theme="dark"] .theme-quick-label { color: #B4BED0; }
[data-theme="dark"] .user-dropdown-item:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, #232b3d 100%); color: #c4b5fd; }
[data-theme="dark"] .user-dropdown-item.danger:hover { background: rgba(240, 160, 160, 0.12); color: #f0a0a0; }

/* 主题分段双选控件（日间 / 夜间） */
.theme-seg {
    display: inline-flex;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}
.theme-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.theme-seg-btn.active {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
    font-weight: 700;
}
.theme-seg-sm .theme-seg-btn { padding: 4px 10px; }
.theme-seg-sm .theme-seg-btn svg { width: 15px; height: 15px; }

/* ===== 个人中心抽屉 ===== */
.pc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease;
    z-index: 1500;
}
.pc-overlay.show { opacity: 1; visibility: visible; }
.pc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 440px;
    max-width: 92vw;
    background: #f4f1fb;
    border-left: 1px solid var(--border-color);
    box-shadow: -10px 0 36px rgba(79, 70, 229, 0.14);
    transform: translateX(calc(100% + 120px));
    -webkit-transform: translateX(calc(100% + 120px));
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.22s ease, visibility 0.22s ease;
    z-index: 1501;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.pc-drawer.open { transform: translateX(0); -webkit-transform: translateX(0); pointer-events: auto; visibility: visible; opacity: 1; }
.pc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.pc-header h3 { margin: 0; font-size: 17px; color: var(--text-primary); }
.pc-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    transition: background 0.2s, color 0.2s;
}
.pc-close:hover { background: var(--bg-page); color: var(--text-primary); }
.pc-body {
    padding: 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f4f1fb;
}
/* 紧凑白色卡片 */
.pc-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.06);
}
.pc-account { display: flex; align-items: center; gap: 12px; }
.pc-avatar {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: var(--brand-gradient); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pc-avatar img { width: 44px; height: 44px; object-fit: cover; object-position: center top; }
.pc-account-info { display: flex; flex-direction: column; gap: 2px; }
.pc-phone { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.pc-status { font-size: 12px; color: var(--text-secondary); }
/* 豆值卡片 */
.pc-beans-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pc-beans { display: flex; align-items: baseline; gap: 4px; }
.pc-beans-num { font-size: 26px; font-weight: 800; color: var(--primary); }
.pc-beans-unit { font-size: 14px; color: var(--text-secondary); }
.pc-reward-flag { font-size: 12px; padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
.pc-reward-flag.claimed { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.pc-reward-flag.unclaimed { background: rgba(245, 158, 11, 0.16); color: #fbbf24; }
.pc-beans-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-card .pc-rc-btn {
    width: auto;
    padding: 9px 22px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    border-radius: 999px;
    font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
}
.pc-card .pc-rc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3); border-color: transparent; color: #fff; }
.pc-bean-detail {
    background: none; border: none; padding: 0;
    color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.pc-bean-detail:hover { text-decoration: underline; }
/* 快捷功能行 */
.pc-quick-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: none; border: none; text-align: left;
    border-radius: 12px; padding: 12px 8px; cursor: pointer; font-family: inherit;
    transition: background 0.15s;
}
.pc-quick-row + .pc-quick-row { border-top: 1px solid var(--border-color); border-radius: 0; }
.pc-quick-row:hover { background: #f7f6fe; }
.pc-quick-row .pqi {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: var(--brand-gradient-soft); color: var(--primary);
}
.pc-quick-row .pq-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pc-quick-row .pq-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.pc-quick-row .pq-desc { font-size: 12px; color: var(--text-muted); }
.pc-quick-row .pq-arrow { color: var(--text-muted); flex-shrink: 0; }
.pc-quick-row:hover .pq-arrow { color: var(--primary); }
/* 外观与账号 */
.pc-appearance { display: flex; align-items: center; justify-content: space-between; padding: 2px; }
.pc-card-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pc-logout-area {
    display: flex;
    justify-content: center;
    padding: 2px 0 calc(6px + env(safe-area-inset-bottom));
}
.pc-logout-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #c05656;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
}
.pc-logout-text:hover { background: rgba(192, 86, 86, 0.10); }

/* 深色模式：个人中心 */
[data-theme="dark"] .pc-drawer { background: #0f1420; }
[data-theme="dark"] .pc-body { background: #0f1420; }
[data-theme="dark"] .pc-card { background: #171E2E; border-color: #2d3344; }
[data-theme="dark"] .pc-quick-row:hover { background: #1f2738; }
[data-theme="dark"] .pc-quick-row .pqi { background: rgba(99, 102, 241, 0.18); color: #c4b5fd; }
[data-theme="dark"] .pc-quick-row .pq-name { color: #F4F7FC; }
[data-theme="dark"] .pc-bean-detail { color: #c4b5fd; }
[data-theme="dark"] .pc-logout-text { color: #f0a0a0; }
[data-theme="dark"] .pc-logout-text:hover { background: rgba(240, 160, 160, 0.12); }

/* 退出登录确认框 */
.logout-confirm {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    width: 360px;
    max-width: 90vw;
    padding: 28px 24px 22px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.3s ease;
}
.logout-confirm-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(192, 86, 86, 0.12); color: #c05656;
    display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.logout-confirm-title { margin: 0 0 8px; font-size: 18px; color: var(--text-primary); }
.logout-confirm-desc { margin: 0 0 20px; font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.logout-confirm-actions { display: flex; gap: 10px; }
.logout-cancel {
    flex: 1; padding: 11px; border: 1px solid var(--border-color); background: var(--bg-page);
    color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; font-family: inherit;
    transition: all 0.2s;
}
.logout-cancel:hover { color: var(--text-primary); }
.logout-confirm-btn {
    flex: 1; padding: 11px; border: none; background: #c05656; color: #fff;
    border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: background 0.2s;
}
.logout-confirm-btn:hover { background: #a84747; }

/* =====================================================================
   Request M：结果操作栏 / 继续修改 / 版本记录抽屉
   ===================================================================== */

/* 结果底部固定操作栏 */
.result-actionbar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    padding: 16px 0 2px;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(to bottom, transparent 0%, var(--bg-card) 22%);
    z-index: 6;
}
.ra-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-page);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: all 0.2s;
}
.ra-btn svg { flex-shrink: 0; }
.ra-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 35%, var(--border-color));
}
/* 继续修改：品牌色主按钮，但视觉权重低于首次「生成」按钮 */
.ra-primary {
    background: var(--current-tool-accent, var(--primary));
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--current-tool-accent, var(--primary)) 22%, transparent);
}
.ra-primary:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--current-tool-accent, var(--primary)) 30%, transparent);
}
.ra-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ra-ver-badge {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 14%, transparent);
    color: var(--current-tool-accent, var(--primary));
    margin-left: 2px;
}

/* 继续修改：编辑意见面板（浅色圆角卡片，与工具主题色联动） */
.revise-panel {
    margin-top: 16px;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 6%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--current-tool-accent, var(--primary)) 18%, var(--border-color));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.revise-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.revise-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.revise-x {
    background: none; border: none; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--text-muted);
    width: 30px; height: 30px; border-radius: 8px; transition: all 0.2s;
}
.revise-x:hover { background: var(--bg-page); color: var(--text-primary); }
.revise-input {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.revise-input:focus {
    outline: none;
    border-color: var(--current-tool-accent, var(--primary));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--current-tool-accent, var(--primary)) 14%, transparent);
}
.revise-input::placeholder { color: var(--text-muted); }
.revise-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.revise-tag {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--current-tool-accent, var(--primary)) 25%, var(--border-color));
    background: #fff;
    color: var(--current-tool-accent, var(--primary));
    font-size: 13px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}
.revise-tag:hover { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 10%, transparent); }
.revise-tag:active { transform: scale(0.96); }
.revise-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.revise-hint { font-size: 12px; color: var(--text-muted); flex: 1; min-width: 160px; }
.revise-actions { display: flex; gap: 10px; }
.revise-cancel {
    padding: 9px 18px; border: 1px solid var(--border-color); background: var(--bg-page);
    color: var(--text-secondary); border-radius: var(--radius-sm); font-size: 14px; cursor: pointer; font-family: inherit; transition: all 0.2s;
}
.revise-cancel:hover { color: var(--text-primary); }
.revise-cancel:disabled { opacity: 0.6; cursor: not-allowed; }
.revise-submit {
    padding: 9px 20px; border: none;
    background: linear-gradient(135deg, var(--current-tool-accent, #6366f1), color-mix(in srgb, var(--current-tool-accent, #6366f1) 65%, #0f0a1a));
    color: #fff; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--current-tool-accent, #6366f1) 30%, transparent);
    transition: all 0.2s;
}
.revise-submit:hover { transform: translateY(-1px); }
.revise-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* 版本记录抽屉内容 */
.ver-tip {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    background: var(--bg-page); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); padding: 12px 14px; margin: 0 0 16px;
}
.ver-list { display: flex; flex-direction: column; gap: 12px; }
.ver-item {
    border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    padding: 16px; background: var(--bg-card);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}
.ver-item:hover { border-color: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 40%, var(--border-color)); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.ver-item.current {
    border-color: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 45%, var(--border-color));
    background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--current-tool-accent, var(--primary)) 6%, var(--bg-card)) 100%);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--current-tool-accent, var(--primary)) 12%, transparent);
}
.ver-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ver-tag {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 700; letter-spacing: .3px;
    color: #fff; background: var(--current-tool-accent, var(--primary));
    border-radius: 999px; padding: 4px 10px;
}
.ver-tag svg { stroke: #fff; }
.ver-current {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    color: #15803d; background: #dcfce7;
    border-radius: 999px; padding: 4px 10px;
}
.ver-current svg { stroke: #15803d; }
.ver-time {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto; font-size: 12px; color: var(--text-muted);
}
.ver-time svg { stroke: var(--text-muted); }
.ver-note { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 12px; word-break: break-word; }
.ver-note-first { color: var(--text-muted); font-style: italic; }
.ver-item-actions { display: flex; gap: 8px; }
.ver-act {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; font-family: inherit;
    border: 1px solid var(--border-color); transition: all 0.2s; font-weight: 500;
}
.ver-act.view { background: var(--bg-page); color: var(--text-secondary); }
.ver-act.view:hover { color: var(--text-primary); border-color: var(--primary); background: var(--bg-secondary); }
.ver-act.restore {
    background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 10%, transparent);
    color: var(--current-tool-accent, var(--primary)); border-color: transparent; font-weight: 600;
}
.ver-act.restore:hover { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 18%, transparent); }
.ver-act:disabled { opacity: .45; cursor: not-allowed; background: var(--bg-page); color: var(--text-muted); border-color: var(--border-color); }
.ver-restore-ok { background: var(--current-tool-accent, var(--primary)); }
.ver-restore-ok:hover { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 85%, #000); }
.ver-restore-icon { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 12%, transparent); color: var(--current-tool-accent, var(--primary)); }

/* =====================================================================
   统一夜间模式（data-theme="dark"）
   ===================================================================== */
[data-theme="dark"] {
    --bg-page: #0D111C;
    --bg-card: #171E2E;
    --bg-sidebar: #121827;
    --bg-topbar: #111725;
    --bg-input: #111827;
    --bg-secondary: #1C2436;
    --text-primary: #F4F7FC;
    --text-secondary: #B4BED0;
    --text-muted: #8792A8;
    --border-color: rgba(255, 255, 255, 0.10);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --primary-light: #232C44;
    --secondary-light: #2A2140;
    --brand-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, 0.20), rgba(168, 85, 247, 0.20));
}
[data-theme="dark"] body { background: #0D111C; color: var(--text-primary); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }

/* 侧边栏 / 顶栏 */
[data-theme="dark"] .sidebar { background: var(--bg-sidebar); border-right-color: var(--border-color); }
[data-theme="dark"] .top-bar { background: var(--bg-topbar); border-bottom-color: var(--border-color); }
[data-theme="dark"] .sidebar-toggle,
[data-theme="dark"] .menu-toggle { color: var(--text-secondary); }

/* 卡片 / 弹窗（已用 var 的自动适配，这里补硬编码白底） */
[data-theme="dark"] .modal,
[data-theme="dark"] .prompt-modal,
[data-theme="dark"] .info-modal,
[data-theme="dark"] .auth-modal,
[data-theme="dark"] .rc-modal { background: var(--bg-card); }
[data-theme="dark"] .info-card { background: var(--bg-card); }
[data-theme="dark"] .download-menu { background: var(--bg-card); border-color: var(--border-color); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .download-item:hover { background: var(--bg-secondary); }
[data-theme="dark"] .input-footer { background: var(--bg-secondary); }
[data-theme="dark"] .input-area {
    background: linear-gradient(var(--bg-input), var(--bg-input)) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--current-tool-accent, #7c3aed) 70%, transparent), color-mix(in srgb, var(--current-tool-accent, #7c3aed) 45%, transparent)) border-box;
}
[data-theme="dark"] .input-area:focus-within {
    background: linear-gradient(var(--bg-input), var(--bg-input)) padding-box,
                linear-gradient(135deg, color-mix(in srgb, var(--current-tool-accent, #7c3aed) 95%, transparent), color-mix(in srgb, var(--current-tool-accent, #7c3aed) 70%, transparent)) border-box;
}

/* 历史记录 */
[data-theme="dark"] .btn-history,
[data-theme="dark"] .btn-history-clear { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .btn-history:hover,
[data-theme="dark"] .btn-history-clear:hover { background: var(--bg-secondary); }
[data-theme="dark"] .btn-back { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .filter-input,
[data-theme="dark"] .filter-select,
[data-theme="dark"] .filter-date-input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .history-tip { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #fbbf24; }
[data-theme="dark"] .history-table { background: var(--bg-card); }
[data-theme="dark"] .history-table th { background: var(--bg-secondary); color: var(--text-primary); border-bottom-color: var(--border-color); }
[data-theme="dark"] .history-table td { color: var(--text-secondary); border-bottom-color: var(--border-color); }
[data-theme="dark"] .history-table tbody tr:hover { background: var(--bg-secondary); }
[data-theme="dark"] .pagination-btn { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }

/* 错误框 */
[data-theme="dark"] .result-error-box { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.3); }

/* 指令设置弹窗内部 */
[data-theme="dark"] .btn-prompt-settings { background: var(--bg-card); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .btn-prompt-settings:hover { background: var(--bg-secondary); }
[data-theme="dark"] .prompt-reset-one,
[data-theme="dark"] .btn-prompt-reset-all { background: var(--bg-card); border-color: var(--border-color); color: var(--text-muted); }
[data-theme="dark"] .prompt-textarea { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .prompt-badge.default { background: var(--bg-secondary); color: var(--text-muted); }
[data-theme="dark"] .btn-use-example-inline { background: var(--bg-card); }

/* 登录 */
[data-theme="dark"] .user-balance { background: linear-gradient(135deg, #1d2540, #241d3a); border-color: rgba(139, 92, 246, 0.25); }
[data-theme="dark"] .rc-option { background: linear-gradient(135deg, #1d2540, #241d3a); border-color: rgba(139, 92, 246, 0.3); }
[data-theme="dark"] .rc-notice { background: var(--bg-secondary); border-color: rgba(139, 92, 246, 0.25); }
[data-theme="dark"] .rc-status.success { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }
[data-theme="dark"] .rc-status.pending { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
[data-theme="dark"] .rc-status.error { background: rgba(239, 68, 68, 0.14); color: #fca5a5; }
[data-theme="dark"] .form-row input { background: var(--bg-input); border-color: var(--border-color); color: var(--text-primary); }
[data-theme="dark"] .form-row input:focus { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25); }

/* 词汇卡 */
[data-theme="dark"] .vocab-card { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .vocab-card .vocab-body,
[data-theme="dark"] .vocab-card .vocab-def { color: var(--text-secondary); }
[data-theme="dark"] .vocab-pos.two-col td:nth-child(3),
[data-theme="dark"] .vocab-pos.two-col td:nth-child(6) { background: rgba(139, 92, 246, 0.10); }

/* 文章结构图等工具结构化卡片：工具主题色仅用于顶部描边/标签，背景统一深色 */
[data-theme="dark"] .struct-map { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .rd-skeleton { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .rd-skeleton-title,
[data-theme="dark"] .rd-skeleton-line { background: var(--bg-card); }
[data-theme="dark"] .rd-skeleton-card { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .rd-skeleton-tip { color: #a5b4fc; }
[data-theme="dark"] .stream-panel-skeleton { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .sps-head { color: #c8b5ff; }
[data-theme="dark"] .sps-dot { background: #a78bfa; }
[data-theme="dark"] .sps-line { background: var(--bg-card); }
[data-theme="dark"] .writing-tab.stream-loading::after,
[data-theme="dark"] .vui-tab.stream-loading::after { color: #fff; background: #7c3aed; }
[data-theme="dark"] .rd-parse-tip,
[data-theme="dark"] .struct-fallback { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.3); color: #fcd34d; }
[data-theme="dark"] .struct-toolbar { background: var(--bg-card); border-bottom-color: var(--border-color); }
[data-theme="dark"] .struct-toggle { border-color: var(--border-color); }
[data-theme="dark"] .struct-toggle button { background: var(--bg-input); color: var(--text-secondary); }
[data-theme="dark"] .struct-toggle button.active { color: #fff; }
[data-theme="dark"] .struct-actions button { background: var(--bg-input); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .struct-actions button:hover { background: var(--bg-secondary); }
[data-theme="dark"] .struct-branch,
[data-theme="dark"] .tl-card,
[data-theme="dark"] .proc-card,
[data-theme="dark"] .cmp-side,
[data-theme="dark"] .arg-reason,
[data-theme="dark"] .ce-card { background: var(--bg-card); border: 1px solid var(--border-color); }
[data-theme="dark"] .tl-dot { border-color: var(--bg-card); }
[data-theme="dark"] .tl-para { background: var(--bg-input); }
[data-theme="dark"] .tl-head,
[data-theme="dark"] .sb-head,
[data-theme="dark"] .proc-head,
[data-theme="dark"] .cmp-head,
[data-theme="dark"] .ce-head,
[data-theme="dark"] .arg-reason-head { color: var(--text-primary); }
[data-theme="dark"] .sb-summary,
[data-theme="dark"] .sb-point,
[data-theme="dark"] .tl-summary,
[data-theme="dark"] .proc-summary,
[data-theme="dark"] .cmp-summary,
[data-theme="dark"] .ce-summary,
[data-theme="dark"] .arg-reason-summary,
[data-theme="dark"] .sb-conclusion { color: var(--text-secondary); }
[data-theme="dark"] .sb-point .sb-label,
[data-theme="dark"] .sb-conclusion { color: var(--text-muted); }
[data-theme="dark"] .struct-blank { border-bottom-color: var(--text-muted); }

/* 写作工具卡片 */
[data-theme="dark"] .w-card,
[data-theme="dark"] .w-sc-card,
[data-theme="dark"] .w-phrase,
[data-theme="dark"] .w-sp,
[data-theme="dark"] .w-copy-all,
[data-theme="dark"] .w-subtab,
[data-theme="dark"] .w-btn,
[data-theme="dark"] .w-view { background: var(--bg-card); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .w-card-h { color: var(--w-accent, var(--primary)); }
[data-theme="dark"] .w-tag { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .w-ov-k { color: var(--text-muted); }
[data-theme="dark"] .w-ov-v { color: var(--text-primary); }
[data-theme="dark"] .w-block-h { color: var(--text-primary); }
[data-theme="dark"] .w-exp-card,
[data-theme="dark"] .w-exp-body { background: var(--bg-secondary); color: var(--text-secondary); }
[data-theme="dark"] .w-risk { background: rgba(249, 115, 22, 0.10); border-color: rgba(249, 115, 22, 0.3); }
[data-theme="dark"] .w-risk-txt { color: #fdba74; }
[data-theme="dark"] .w-subtab.active { background: rgba(244, 63, 94, 0.12); color: var(--w-accent, var(--primary)); }
[data-theme="dark"] .w-sc-content,
[data-theme="dark"] .w-pgh p,
[data-theme="dark"] .w-sp-c { color: var(--text-primary); }
[data-theme="dark"] .w-phrase b { color: var(--text-primary); }
[data-theme="dark"] .w-phrase span { color: var(--text-muted); }
[data-theme="dark"] .w-conn-fn { color: var(--text-secondary); }
[data-theme="dark"] .w-view.active { color: #fff; }
[data-theme="dark"] .w-word-badge,
[data-theme="dark"] .w-pgh-label { background: rgba(244, 63, 94, 0.14); color: #fda4af; }
[data-theme="dark"] .w-hl-sec { color: var(--text-primary); }
[data-theme="dark"] .w-hl-p,
[data-theme="dark"] .w-hl-list { color: var(--text-secondary); }

/* 写作：计划栏 / 版本标签 / 要点卡片 / 功能卡片 / 亮点分析 暗色 */
[data-theme="dark"] .w-plan-bar { background: rgba(244,63,94,.10); border-color: var(--border-color); }
[data-theme="dark"] .w-plan-btn { background: var(--w-accent); color: #fff; }
[data-theme="dark"] .w-plan-tip { color: var(--text-muted); }
[data-theme="dark"] .w-ver-tab { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .w-ver-tab.active { background: rgba(244,63,94,.14); color: #fda4af; border-color: var(--w-accent); }
[data-theme="dark"] .w-empty { color: var(--text-muted); }
[data-theme="dark"] .w-point-card,
[data-theme="dark"] .w-fn-card,
[data-theme="dark"] .w-expr,
[data-theme="dark"] .w-ls { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .w-cat-label { border-color: var(--border-color); }
[data-theme="dark"] .w-pw-en { color: var(--text-primary); }
[data-theme="dark"] .w-pw-cn { color: var(--text-muted); }
[data-theme="dark"] .w-pw-ctx { background: var(--bg-secondary); color: var(--text-secondary); }
[data-theme="dark"] .w-pat-c { color: var(--text-primary); }
[data-theme="dark"] .w-pat-note { color: var(--text-muted); }
[data-theme="dark"] .w-core-tip { color: var(--text-muted); }
[data-theme="dark"] .w-anal-sum { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .w-anal-sum p { color: var(--text-secondary); }
[data-theme="dark"] .w-anal-h { color: var(--text-primary); }
[data-theme="dark"] .w-anal-h em { background: var(--bg-secondary); color: var(--text-muted); }
[data-theme="dark"] .w-expr { border-color: var(--border-color); }
[data-theme="dark"] .w-expr-cn { color: var(--text-muted); }
[data-theme="dark"] .w-ls-txt { color: var(--text-primary); }
[data-theme="dark"] .w-ls-k { color: var(--text-muted); }
[data-theme="dark"] .w-ls-v { color: var(--text-secondary); }
[data-theme="dark"] .w-ls-tr .w-ls-v { color: #fda4af; }
[data-theme="dark"] .w-ls-legend { color: var(--text-muted); }

/* 阅读设问 */
[data-theme="dark"] .reading-body { background: var(--bg-card); }
[data-theme="dark"] .rq-stat { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .rq-stat-num { color: var(--text-primary); }
[data-theme="dark"] .rq-stat-label { color: var(--text-muted); }
[data-theme="dark"] .rq-table th { background: var(--bg-secondary); color: var(--text-secondary); border-bottom-color: var(--border-color); }
[data-theme="dark"] .rq-table td { color: var(--text-secondary); border-bottom-color: var(--border-color); }
[data-theme="dark"] .rq-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .rq-btn:hover { background: var(--bg-card); }
[data-theme="dark"] .rq-paper { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .rq-paper-title,
[data-theme="dark"] .rq-article h3,
[data-theme="dark"] .rq-q-stem { color: var(--text-primary); }
[data-theme="dark"] .rq-info,
[data-theme="dark"] .rq-article-body p { color: var(--text-secondary); }
[data-theme="dark"] .rq-acard { border-color: var(--border-color); }
[data-theme="dark"] .rq-acard-head { background: var(--bg-secondary); }
[data-theme="dark"] .rq-acard-head:hover { background: var(--bg-card); }
[data-theme="dark"] .rq-ac-num { color: var(--text-primary); }
[data-theme="dark"] .rq-quote { background: var(--bg-secondary); border-left-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .rq-opts-analysis { border-top-color: var(--border-color); }
[data-theme="dark"] .rq-qc-ok { background: rgba(16, 185, 129, 0.14); color: #6ee7b7; }

/* 每日奖励弹窗补充（覆盖 prefers-color-scheme，改用统一变量） */
[data-theme="dark"] .daily-reward-modal {
    background: rgba(23, 30, 46, 0.92);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .daily-reward-title { color: #f3f1ff; }
[data-theme="dark"] .daily-reward-desc { color: #b6b2d6; }
[data-theme="dark"] .daily-reward-balance { background: rgba(139, 92, 246, 0.18); color: #d6c8ff; }
[data-theme="dark"] .daily-reward-balance strong { color: #efe7ff; }
[data-theme="dark"] .daily-reward-close { background: rgba(255, 255, 255, 0.12); color: #cfcae6; }
[data-theme="dark"] .daily-reward-close:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
[data-theme="dark"] .dr-unit { color: #f0c969; }

/* Request M 夜间适配 */
[data-theme="dark"] .result-actionbar {
    background: linear-gradient(to bottom, transparent 0%, var(--bg-card) 22%);
    border-top-color: var(--border-color);
}
[data-theme="dark"] .ra-btn { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .ra-btn:hover { background: var(--bg-card); color: var(--text-primary); border-color: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 40%, var(--border-color)); }
[data-theme="dark"] .ra-primary { color: #fff; }
[data-theme="dark"] .ra-primary:hover { color: #fff; }
[data-theme="dark"] .revise-panel { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 28%, var(--border-color)); }
[data-theme="dark"] .revise-input { background: var(--bg-input); color: var(--text-primary); }
[data-theme="dark"] .revise-input::placeholder { color: var(--text-muted); }
[data-theme="dark"] .revise-tag { background: var(--bg-secondary); color: var(--current-tool-accent, var(--primary)); }
[data-theme="dark"] .revise-tag:hover { background: color-mix(in srgb, var(--current-tool-accent, var(--primary)) 16%, transparent); }
[data-theme="dark"] .revise-cancel { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .ver-tip { background: var(--bg-secondary); border-color: var(--border-color); }
[data-theme="dark"] .ver-item { background: var(--bg-card); border-color: var(--border-color); }
[data-theme="dark"] .ver-item.current { background: linear-gradient(135deg, var(--bg-card) 0%, color-mix(in srgb, var(--current-tool-accent, var(--primary)) 9%, var(--bg-card)) 100%); }
[data-theme="dark"] .ver-current { color: #86efac; background: rgba(22, 163, 74, 0.22); }
[data-theme="dark"] .ver-current svg { stroke: #86efac; }
[data-theme="dark"] .ver-act.view { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-secondary); }
[data-theme="dark"] .ver-act.view:hover { color: var(--text-primary); background: var(--bg-page); }

/* Intro 夜间模式 */
[data-theme="dark"] .tool-header.intro-card {
    --ic1: color-mix(in srgb, var(--intro-accent, #8b5cf6) 26%, #111725);
    --ic2: color-mix(in srgb, var(--intro-accent, #8b5cf6) 82%, #ffffff);
    background: linear-gradient(135deg, color-mix(in srgb, var(--intro-accent, #8b5cf6) 16%, #111725) 0%, color-mix(in srgb, var(--intro-accent, #8b5cf6) 10%, #111725) 60%, #111725 100%);
    border-color: color-mix(in srgb, var(--intro-accent, #8b5cf6) 30%, transparent);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .intro-glow { opacity: 0.62; }
[data-theme="dark"] .intro-icon {
    background: color-mix(in srgb, var(--intro-accent, #8b5cf6) 20%, #1b2233);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--intro-accent, #8b5cf6) 30%, transparent);
}
[data-theme="dark"] .greeting-text { color: #c9cde0; }
[data-theme="dark"] .greeting-name {
    filter: brightness(1.12);
    text-shadow: 0 0 1px color-mix(in srgb, var(--intro-accent, #8b5cf6) 50%, transparent);
}
[data-theme="dark"] .tool-subtitle {
    color: color-mix(in srgb, var(--intro-accent, #8b5cf6) 70%, #d6dbe8);
    background: color-mix(in srgb, var(--intro-accent, #8b5cf6) 16%, rgba(255, 255, 255, 0.06));
    border-color: color-mix(in srgb, var(--intro-accent, #8b5cf6) 30%, transparent);
}

/* 减少动态效果时取消主题相关过渡（规则 12） */
@media (prefers-reduced-motion: reduce) {
    .pc-drawer, .pc-overlay, .user-dropdown, .theme-seg-btn, body { transition: none !important; }
}

/* ===== 词汇教学四标签结果区 ===== */
.vui-root { margin: 4px 0 8px; }
.vui-tabs { display:flex; gap:6px; border-bottom:2px solid #e5e7eb; margin-bottom:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.vui-tab { position:relative; border:none; background:transparent; padding:10px 16px; font-size:14px; font-weight:600; color:#6b7280; cursor:pointer; white-space:nowrap; border-radius:10px 10px 0 0; transition:background .15s,color .15s; }
.vui-tab:hover { background:#f5f3ff; color:#7c3aed; }
.vui-tab.active { color:#fff; background:linear-gradient(135deg,#a78bfa,#8b5cf6); }
.vui-tab.active::after { content:''; position:absolute; left:12px; right:12px; bottom:-2px; height:3px; border-radius:3px; background:#8b5cf6; }
.vui-panels { }
.vui-panel { display:none; }
.vui-panel.show { display:block; }

.vui-expand-row { display:flex; gap:8px; margin-bottom:10px; }
.vui-analysis-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid #e9d5ff; }
.vui-analysis-title { font-size:18px; font-weight:700; color:#6d28d9; }
.vui-classroom-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid #c4b5fd; background:#f5f3ff; color:#7c3aed; padding:7px 14px; border-radius:10px; font-size:13px; cursor:pointer; font-weight:700; transition:background .15s,transform .15s; }
.vui-classroom-btn:hover { background:#ede9fe; transform:translateY(-1px); }
.vui-classroom-btn svg { display:block; }
.vui-btn { border:1px solid #e9d5ff; background:#ffffff; color:#7c3aed; padding:6px 12px; border-radius:8px; font-size:13px; cursor:pointer; font-weight:600; transition:background .15s; }
.vui-btn:hover { background:#f5f3ff; }
.vui-cards { display:flex; flex-direction:column; gap:12px; }
.vui-card { background:#ffffff; border:1px solid #DDD0FA; border-radius:12px; overflow:hidden; box-shadow:0 1px 4px rgba(124,58,237,.08); }
.vui-card-head { display:flex; align-items:center; gap:12px; padding:14px 18px; background:#F3EEFF; cursor:pointer; border-bottom:1px solid #DDD0FA; transition:background .15s; }
.vui-card.open .vui-card-head { background:#EEE6FF; }
.vui-card-head:hover { background:#F8F4FF; }
.vui-num { flex:0 0 auto; width:28px; height:28px; line-height:28px; text-align:center; border-radius:50%; background:#7c3aed; color:#fff; font-weight:700; font-size:12px; }
.vui-card-id { flex:1 1 auto; min-width:0; }
.vui-word { font-weight:700; font-size:21px; color:#111827; letter-spacing:.3px; }
.vui-meta { font-size:15.5px; color:#111827; font-weight:700; margin-top:4px; line-height:1.5; }
.vui-chevron { flex:0 0 auto; color:#6b7280; transition:transform .15s; }
.vui-card.open .vui-chevron { transform:rotate(180deg); }
.vui-audio-btn { flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1px solid #c4b5fd; background:#ffffff; color:#7c3aed; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0; margin-left:auto; margin-right:4px; transition:background .15s,transform .15s; }
.vui-audio-btn:hover { background:#f5f3ff; transform:scale(1.06); }
.vui-audio-btn svg { display:block; width:16px; height:16px; }
.vui-card-body { display:none; padding:16px 20px 20px; border-top:1px solid #f3e8ff; }
.vui-card.open .vui-card-body { display:block; }
.vui-sec { border:1px solid #ede9fe; border-left:4px solid #c4b5fd; background:#ffffff; padding:10px 14px; margin:12px 0; border-radius:0 8px 8px 0; }
.vui-sec-t { font-weight:700; font-size:13px; color:#7c3aed; margin-bottom:4px; }
.vui-sec-b { font-size:14px; line-height:1.8; color:#374151; }
/* 卡片分区多色方案（层次分明、抓人） */
.vui-sec-purple { border-left-color:#a78bfa; background:#faf5ff; }
.vui-sec-purple .vui-sec-t { color:#7c3aed; }
.vui-sec-green { border-left-color:#34d399; background:#f0fdf4; }
.vui-sec-green .vui-sec-t { color:#047857; }
.vui-sec-orange { border-left-color:#fb923c; background:#fff7ed; }
.vui-sec-orange .vui-sec-t { color:#c2410c; }
.vui-sec-blue { border-left-color:#60a5fa; background:#eff6ff; }
.vui-sec-blue .vui-sec-t { color:#1d4ed8; }
.vui-sec-gray { border-left-color:#9ca3af; background:#f9fafb; }
.vui-sec-gray .vui-sec-t { color:#374151; }
.vui-hl-purple, .vui-hl-blue, .vui-hl-green, .vui-hl-orange { display:inline-block; padding:2px 8px; border-radius:999px; font-weight:600; font-size:13px; line-height:1.4; margin:0 2px; vertical-align:middle; white-space:nowrap; }
.vui-hl-purple { background:#ede9fe; color:#6d28d9; border:1px solid #ddd6fe; }
.vui-hl-blue { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.vui-hl-green { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.vui-hl-orange { background:#ffedd5; color:#9a3412; border:1px solid #fed7aa; }
.vui-hl-gray { display:inline-block; padding:2px 8px; border-radius:999px; font-weight:600; font-size:13px; line-height:1.4; margin:0 2px; vertical-align:middle; white-space:nowrap; background:#f3f4f6; color:#374151; border:1px solid #e5e7eb; }
.vui-ex { margin:6px 0 2px; }
.vui-ex-q { font-size:14px; color:#374151; margin-bottom:8px; line-height:1.7; }
.vui-ex-toggle { margin:2px 0 4px; }
.vui-ex-ans { margin-top:6px; padding:10px 14px; background:#f5f3ff; border:1px solid #e9d5ff; border-radius:8px; }
.vui-ex-ans[hidden] { display:none; }
.vui-ex-line { font-size:14px; line-height:1.8; color:#374151; }
.vui-ex-line b { color:#4c1d95; }
.vui-export-full { display:inline-flex !important; align-items:center; gap:6px; padding:0 12px !important; width:auto !important; }
.vui-export-label { font-size:13px; font-weight:600; color:#6d28d9; white-space:nowrap; }

.vui-subtabs { display:inline-flex; gap:4px; background:#f5f3ff; padding:4px; border-radius:10px; margin:4px 0 12px; }
.vui-subtab { border:none; background:transparent; padding:6px 14px; border-radius:7px; font-size:13px; font-weight:600; color:#6d28d9; cursor:pointer; }
.vui-subtab.active { background:#fff; color:#7c3aed; box-shadow:0 1px 2px rgba(124,58,237,.15); }
.vui-subpanel { display:none; }
.vui-subpanel.show { display:block; }
.vui-act-row { display:flex; gap:8px; margin:8px 0 12px; flex-wrap:wrap; }

.vui-dict-title { font-size:15px; font-weight:700; color:#6d28d9; margin:16px 0 6px; }
table.vui-dict { border-collapse:collapse; width:100%; table-layout:fixed; font-size:13px; margin-bottom:16px; }
table.vui-dict th { background:#f5f3ff; color:#6d28d9; border:1px solid #e9d5ff; padding:7px 6px; font-weight:700; text-align:left; white-space:nowrap; }
table.vui-dict td { border:1px solid #e9d5ff; padding:8px 10px; height:30px; color:#1f2937; }
table.vui-dict td.vui-ans { background:#fafafa; }
table.vui-dict.two-col td:nth-child(3), table.vui-dict.two-col td:nth-child(6) { background:#fafafa; }
.vui-seq { text-align:center; color:#9ca3af; white-space:nowrap; }
.vui-dict td.vui-prompt { word-wrap:break-word; overflow-wrap:break-word; }
.vui-dict-wrap { margin-bottom:8px; }
/* 手机端：双栏表横向滚动，不压缩作答区（规则6） */
@media (max-width:600px) {
  .vui-dict-wrap { overflow-x:auto; }
  table.vui-dict.two-col { min-width:540px; }
  table.vui-dict.one-col { table-layout:fixed; }
}

table.vui-ans-table { border-collapse:collapse; width:100%; font-size:13px; margin:10px 0; }
table.vui-ans-table th { background:#f5f3ff; color:#6d28d9; border:1px solid #e9d5ff; padding:7px 10px; font-weight:700; text-align:left; }
table.vui-ans-table td { border:1px solid #e9d5ff; padding:8px 10px; color:#1f2937; }

ul.vui-sent, ol.vui-sent { font-size:14px; line-height:2.1; padding-left:24px; color:#1f2937; }
ul.vui-sent { list-style:none; padding-left:4px; }
.vui-s-num { font-weight:700; color:#7c3aed; margin-right:4px; }
.vui-s-given { color:var(--text-primary); font-weight:700; margin-left:4px; }
.vui-s-ans { display:none; color:#7c3aed; margin-left:8px; }
.vui-panel.reveal .vui-s-ans { display:inline; }

.vui-bank { background:#f5f3ff; border:1px solid #e9d5ff; border-radius:8px; padding:9px 12px; margin-bottom:12px; font-size:13px; color:#6d28d9; }
.vui-passage { font-size:14px; line-height:2.1; color:#1f2937; }
.vui-blank { color:#7c3aed; font-weight:700; white-space:nowrap; }

/* ---------- 词汇解析课堂展示模式 ---------- */
/* 首页背景轻音乐按钮（三套课堂共用，js/classroom-music.js 注入） */
.cls-music-host { display:flex; align-items:center; margin-left:auto; }
.cls-music-btn {
  display:none; align-items:center; gap:7px;
  border:1px solid #e2e8f0; background:#fff; color:#334155;
  padding:7px 13px; border-radius:999px; cursor:pointer;
  font:600 13px/1 inherit; font-family:inherit; white-space:nowrap;
  box-shadow:0 1px 3px rgba(15,23,42,.06);
  transition:background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.cls-music-btn.on { display:inline-flex; }
.cls-music-btn:hover { background:#f8fafc; border-color:#cbd5e1; color:#0f172a; box-shadow:0 2px 6px rgba(15,23,42,.1); }
.cls-music-btn svg { width:16px; height:16px; flex:none; }
.cls-music-btn[data-mstate="playing"] { color:#e11d48; border-color:#fecdd3; background:#fff1f2; }
.cls-music-btn[data-mstate="playing"]:hover { background:#ffe4e6; }
.cls-music-btn[data-mstate="blocked"] { border-style:dashed; color:#b45309; border-color:#fde68a; background:#fffbeb; }
[data-theme="dark"] .cls-music-btn { background:#232b3d; border-color:#3b4663; color:#cbd5e1; }
[data-theme="dark"] .cls-music-btn:hover { background:#2a3448; color:#F4F7FC; }
[data-theme="dark"] .cls-music-btn[data-mstate="playing"] { color:#fda4af; border-color:#7f1d3d; background:rgba(244,63,94,.16); }
[data-theme="dark"] .cls-music-btn[data-mstate="blocked"] { color:#fcd34d; border-color:#a16207; background:rgba(245,158,11,.12); }
@media (max-width:640px) { .cls-music-label { display:none; } }

.vclass-overlay { position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:#faf7ff; color:#1f2937; }
.vclass-overlay:fullscreen { background:#faf7ff; }
.vclass-top { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; border-bottom:1px solid #ece7fb; background:rgba(255,255,255,.72); backdrop-filter:blur(6px); }
.vclass-progress { font-size:22px; font-weight:800; color:#7c3aed; font-variant-numeric:tabular-nums; }
.vclass-hint { font-size:14px; color:#8b7fb5; }
.vclass-stage { position:relative; flex:1 1 auto; overflow:auto; padding:32px; display:flex; align-items:center; justify-content:center; }
.vclass-card { position:relative; width:100%; max-width:1120px; }

/* 概览页 */
.vclass-overview {
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  min-height:62vh; padding:56px 64px;
  background:linear-gradient(135deg,#f3ecff 0%,#ece2ff 45%,#f8f3ff 100%);
  border:2px solid #e7dcff; border-radius:28px;
  box-shadow:0 24px 70px rgba(124,58,237,.18), inset 0 0 70px rgba(167,139,250,.12);
  cursor:pointer;
}
.vclass-overview::before {
  content:""; position:absolute; width:460px; height:460px; right:-130px; top:-150px;
  background:radial-gradient(circle, rgba(167,139,250,.38), rgba(167,139,250,0) 70%);
  filter:blur(6px); pointer-events:none;
}
.vclass-overview-deco {
  position:absolute; right:18px; bottom:-46px;
  font-size:360px; font-weight:900; line-height:1;
  color:rgba(124,58,237,.08); pointer-events:none; user-select:none;
  font-family:Georgia,"Times New Roman",serif;
}
.vclass-overview-main { position:relative; z-index:1; text-align:center; }
.vclass-progress-badge { display:inline-block; font-size:16px; font-weight:800; color:#7c3aed; background:#fff; border:1px solid #e0d4ff; padding:5px 16px; border-radius:999px; margin-bottom:20px; }
.vclass-word { font-size:clamp(64px, 9vw, 88px); font-weight:900; color:#3b0764; line-height:1.05; letter-spacing:.5px; text-shadow:0 2px 20px rgba(124,58,237,.18); }
.vclass-word--phrase { font-size:clamp(44px, 6vw, 64px); }
.vclass-word-row { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; }
.vclass-word-row .vui-audio-btn { width:64px; height:64px; border-width:2px; }
.vclass-word-row .vui-audio-btn svg { width:30px; height:30px; }
.vclass-phonetic { font-size:clamp(22px, 3vw, 30px); color:#6d28d9; margin-top:14px; font-family:"Times New Roman",Georgia,serif; }
.vclass-meaning { font-size:clamp(26px, 3.2vw, 38px); color:#374151; margin-top:16px; line-height:1.4; font-weight:600; }
.vclass-pos { display:inline-block; background:#ede9fe; color:#6d28d9; padding:4px 14px; border-radius:999px; font-size:clamp(16px, 2vw, 22px); margin-right:12px; font-weight:700; }
.vclass-hint-start { margin-top:36px; font-size:clamp(18px, 2.2vw, 24px); color:#7c3aed; }
.vclass-hint-start::before { content:"▸ "; }

/* 详细页（PPT 模块） */
.vclass-detail { display:none; }
.vclass-stage.show-detail .vclass-overview { display:none; }
.vclass-stage.show-detail .vclass-detail { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
.vclass-detail-head { grid-column:1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:6px; padding-bottom:14px; border-bottom:2px solid #ece7fb; }
.vclass-detail-head .vui-audio-btn { width:52px; height:52px; border-width:2px; margin-left:auto; }
.vclass-detail-head .vui-audio-btn svg { width:24px; height:24px; }
.vclass-detail-title { font-size:clamp(32px, 4vw, 46px); font-weight:900; color:#3b0764; }
.vclass-detail-sub { font-size:clamp(17px, 2vw, 22px); color:#6d28d9; }
.vclass-module { background:#fff; border:1px solid #ece7fb; border-left:5px solid #c4b5fd; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(124,58,237,.06); }
.vclass-module-head { width:100%; display:flex; align-items:center; gap:14px; padding:16px 22px; background:transparent; border:none; cursor:pointer; text-align:left; font:inherit; color:inherit; }
.vclass-module-idx { flex:0 0 auto; width:34px; height:34px; border-radius:50%; background:#7c3aed; color:#fff; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; }
.vclass-module-title { flex:1 1 auto; font-size:clamp(20px, 2.4vw, 26px); font-weight:800; color:#4c1d95; }
.vclass-chevron { transition:transform .25s; color:#a78bfa; font-size:18px; }
.vclass-module.open .vclass-chevron { transform:rotate(180deg); }
.vclass-module-body { max-height:0; overflow:hidden; padding:0 22px; opacity:0; transition:max-height .3s ease, opacity .3s ease, padding .3s ease; }
.vclass-module.open .vclass-module-body { max-height:2200px; padding:4px 22px 22px; opacity:1; }
.vclass-list { list-style:none; margin:0; padding:0; }
.vclass-item-form { font-size:clamp(20px, 2.4vw, 26px); line-height:1.9; padding:6px 0; border-bottom:1px dashed #f0e9ff; }
.vclass-chain-row { font-size:clamp(20px, 2.4vw, 26px); line-height:1.8; padding:8px 0; }
.vclass-caps { display:flex; flex-wrap:wrap; gap:12px; padding:6px 0; }
.vclass-cap { display:inline-flex; align-items:center; padding:10px 18px; background:#f5f3ff; border:1px solid #e0d4ff; border-radius:999px; font-size:clamp(18px, 2.2vw, 24px); color:#4c1d95; font-weight:600; }
.vclass-hint-card { margin-top:6px; padding:18px 22px; background:linear-gradient(135deg,#eef2ff,#f5f3ff); border:1px solid #dbe4ff; border-radius:14px; font-size:clamp(20px, 2.4vw, 26px); line-height:1.7; color:#3730a3; }
.vclass-ex-q { font-size:clamp(20px, 2.4vw, 26px); line-height:1.8; color:#374151; }
.vclass-ans { margin-top:12px; padding:16px 20px; background:#fff; border:1px solid #ddd6fe; border-radius:12px; }
.vclass-ans-badge { display:inline-block; background:#7c3aed; color:#fff; padding:3px 12px; border-radius:8px; font-size:clamp(16px, 1.8vw, 20px); margin-right:10px; }
.vclass-ans b { font-size:clamp(22px, 2.6vw, 30px); color:#4c1d95; }
.vclass-ans-point { display:block; margin-top:8px; font-size:clamp(18px, 2vw, 22px); color:#4b5563; }

/* 词汇展示：英文 highlight 与中文同字号（覆盖全局 13px 小标签） */
.vclass-overlay .vui-hl-purple, .vclass-overlay .vui-hl-blue, .vclass-overlay .vui-hl-green, .vclass-overlay .vui-hl-orange, .vclass-overlay .vui-hl-gray { font-size:1em; padding:2px 6px; }

/* 模块逐条入场动画（仅揭示，不改数据） */
@keyframes vclassItemIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.vclass-item-form, .vclass-chain-row, .vclass-cap, .vclass-hint-card, .vclass-ex-q, .vclass-ans { animation:vclassItemIn .32s ease both; }
.vclass-module.open .vclass-item-form { animation-delay:calc(var(--i) * 70ms); }
.vclass-module.open .vclass-chain-row { animation-delay:calc(var(--i) * 90ms); }
.vclass-module.open .vclass-cap { animation-delay:calc(var(--i) * 70ms); }

/* 音频按钮声波动效 */
.vui-audio-btn.vui-audio-on { box-shadow:0 0 0 4px rgba(124,58,237,.18); border-color:#7c3aed; color:#7c3aed; }
.vui-audio-btn.vui-audio-on svg { animation:vAudioPulse .55s ease-in-out infinite; }
@keyframes vAudioPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.28); opacity:.55; } }

.vclass-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 22px; border-top:1px solid #ece7fb; background:rgba(255,255,255,.92); flex-wrap:wrap; }
.vclass-btn { padding:11px 20px; font-size:16px; border-radius:10px; border:1px solid #c4b5fd; background:#f5f3ff; color:#7c3aed; font-weight:700; cursor:pointer; transition:background .15s,transform .15s; }
.vclass-btn:hover { background:#ede9fe; transform:translateY(-1px); }
.vclass-btn-primary { background:#7c3aed; color:#fff; border-color:#7c3aed; }
.vclass-btn-primary:hover { background:#6d28d9; }
.vclass-btn-exit { background:#fee2e2; color:#dc2626; border-color:#fecaca; }
.vclass-btn-exit:hover { background:#fecaca; }
.vclass-fade-in { animation:vclassFadeIn 180ms ease-out; }
@keyframes vclassFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

@media (min-width:1024px) {
  .vclass-stage.show-detail .vclass-detail { grid-template-columns:1fr 1fr; }
}
@media (max-width:900px) {
  .vclass-stage { padding:18px 20px; }
  .vclass-overview { padding:36px 28px; min-height:54vh; }
  .vclass-overview-deco { font-size:240px; }
  .vclass-top { padding:12px 16px; }
  .vclass-hint { display:none; }
  .vclass-bar { gap:8px; }
  .vclass-btn { padding:9px 13px; font-size:13px; }
}

[data-theme="dark"] .vui-tab { color:#cbb6f5; }
[data-theme="dark"] .vui-tab:hover { background:rgba(167,139,250,.14); }
[data-theme="dark"] .vui-card { background:var(--bg-card,#1f2430); border-color:#3a3346; }
[data-theme="dark"] .vui-card-head { background:rgba(124,58,237,.12); border-bottom-color:rgba(167,139,250,.30); }
[data-theme="dark"] .vui-card.open .vui-card-head { background:rgba(124,58,237,.18); }
[data-theme="dark"] .vui-card-head:hover { background:rgba(167,139,250,.18); }
[data-theme="dark"] .vui-word { color:#c4b5fd; }
[data-theme="dark"] .vui-meta { color:var(--text-primary,#e8eaf0); }
[data-theme="dark"] .vui-sec { background:var(--bg-card,#1f2430); border-color:#3a3346; border-left-color:#8b5cf6; }
[data-theme="dark"] .vui-sec-t { color:#c4b5fd; }
[data-theme="dark"] .vui-sec-b, [data-theme="dark"] .vui-passage, [data-theme="dark"] ul.vui-sent, [data-theme="dark"] ol.vui-sent { color:var(--text-primary,#e8eaf0); }
[data-theme="dark"] .vui-sec-purple { background:rgba(167,139,250,.12); border-color:#3a3346; border-left-color:#8b5cf6; }
[data-theme="dark"] .vui-sec-purple .vui-sec-t { color:#c4b5fd; }
[data-theme="dark"] .vui-sec-green { background:rgba(16,185,129,.12); border-color:#3a3346; border-left-color:#34d399; }
[data-theme="dark"] .vui-sec-green .vui-sec-t { color:#6ee7b7; }
[data-theme="dark"] .vui-sec-orange { background:rgba(251,146,60,.12); border-color:#3a3346; border-left-color:#fb923c; }
[data-theme="dark"] .vui-sec-orange .vui-sec-t { color:#fdba74; }
[data-theme="dark"] .vui-sec-blue { background:rgba(59,130,246,.12); border-color:#3a3346; border-left-color:#60a5fa; }
[data-theme="dark"] .vui-sec-blue .vui-sec-t { color:#93c5fd; }
[data-theme="dark"] .vui-sec-gray { background:rgba(255,255,255,.05); border-color:#3a3346; border-left-color:#9ca3af; }
[data-theme="dark"] .vui-sec-gray .vui-sec-t { color:#cbd5e1; }
[data-theme="dark"] .vui-num { background:#7c3aed; }
[data-theme="dark"] .vui-audio-btn { background:var(--bg-secondary,#262b38); border-color:#4a3f63; color:#d9c8f7; }
[data-theme="dark"] .vui-audio-btn:hover { background:rgba(167,139,250,.22); }
[data-theme="dark"] .vui-dict-title, [data-theme="dark"] table.vui-dict th, [data-theme="dark"] table.vui-ans-table th { background:rgba(167,139,250,.18); color:#d9c8f7; }
[data-theme="dark"] table.vui-dict td, [data-theme="dark"] table.vui-ans-table td { border-color:#3a3346; color:var(--text-primary,#e8eaf0); }
[data-theme="dark"] table.vui-dict td.vui-ans, [data-theme="dark"] table.vui-dict.two-col td:nth-child(3), [data-theme="dark"] table.vui-dict.two-col td:nth-child(6) { background:rgba(255,255,255,.04); }
[data-theme="dark"] .vui-subtabs { background:rgba(167,139,250,.12); }
[data-theme="dark"] .vui-subtab { color:#cbb6f5; }
[data-theme="dark"] .vui-subtab.active { background:var(--bg-secondary,#262b38); color:#c4b5fd; }
[data-theme="dark"] .vui-btn { background:rgba(167,139,250,.14); border-color:#4a3f63; color:#d9c8f7; }
[data-theme="dark"] .vui-bank { background:rgba(167,139,250,.14); border-color:#4a3f63; color:#d9c8f7; }
[data-theme="dark"] .vui-s-num, [data-theme="dark"] .vui-dict-title { color:#c4b5fd; }
[data-theme="dark"] .vui-s-given { color:#e5e7eb; }
[data-theme="dark"] .vui-s-ans { color:#c4b5fd; }
[data-theme="dark"] .vui-blank { color:#c4b5fd; }
[data-theme="dark"] .vui-hl-purple { background:rgba(167,139,250,.22); color:#ddd6fe; border-color:#7c3aed; }
[data-theme="dark"] .vui-hl-blue { background:rgba(59,130,246,.18); color:#93c5fd; border-color:#3b82f6; }
[data-theme="dark"] .vui-hl-green { background:rgba(34,197,94,.16); color:#6ee7b7; border-color:#22c55e; }
[data-theme="dark"] .vui-hl-orange { background:rgba(251,146,60,.18); color:#fdba74; border-color:#f97316; }
[data-theme="dark"] .vui-hl-gray { background:rgba(255,255,255,.08); color:#cbd5e1; border-color:#4b5563; }
[data-theme="dark"] .vui-ex-ans { background:rgba(124,58,237,.12); border-color:#4a3f63; }
[data-theme="dark"] .vui-ex-line b { color:#d9c8f7; }
[data-theme="dark"] .vui-export-label { color:#d9c8f7; }

[data-theme="dark"] .vui-analysis-header { border-bottom-color:rgba(167,139,250,.30); }
[data-theme="dark"] .vui-analysis-title { color:#c4b5fd; }
[data-theme="dark"] .vui-classroom-btn { background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.40); color:#d9c8f7; }
[data-theme="dark"] .vui-classroom-btn:hover { background:rgba(124,58,237,.28); }

[data-theme="dark"] .vclass-overlay { background:#141a2b; color:#F4F7FC; }
[data-theme="dark"] .vclass-overlay:fullscreen { background:#141a2b; }
[data-theme="dark"] .vclass-top { background:rgba(20,26,43,.8); border-bottom-color:#2d3650; }
[data-theme="dark"] .vclass-progress { color:#c4b5fd; }
[data-theme="dark"] .vclass-hint { color:#9aa6c4; }
[data-theme="dark"] .vclass-overview { background:linear-gradient(135deg,#1b2238,#202a47 50%,#1a2138); border-color:#37314f; box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 0 70px rgba(124,58,237,.15); }
[data-theme="dark"] .vclass-overview-deco { color:rgba(167,139,250,.10); }
[data-theme="dark"] .vclass-progress-badge { background:#202a47; border-color:#3a3352; color:#c4b5fd; }
[data-theme="dark"] .vclass-word, [data-theme="dark"] .vclass-detail-title { color:#EDE9FE; text-shadow:0 2px 18px rgba(124,58,237,.3); }
[data-theme="dark"] .vclass-phonetic { color:#b8a6f0; }
[data-theme="dark"] .vclass-meaning { color:#F4F7FC; }
[data-theme="dark"] .vclass-pos { background:rgba(124,58,237,.25); color:#d9c8f7; }
[data-theme="dark"] .vclass-hint-start { color:#c4b5fd; }
[data-theme="dark"] .vclass-detail-head { border-bottom-color:#2d3650; }
[data-theme="dark"] .vclass-detail-sub { color:#b8a6f0; }
[data-theme="dark"] .vclass-module { background:#1f2738; border-color:#37314f; border-left-color:#8b5cf6; box-shadow:0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .vclass-module-title { color:#d9c8f7; }
[data-theme="dark"] .vclass-module-idx { background:#7c3aed; }
[data-theme="dark"] .vclass-chevron { color:#a78bfa; }
[data-theme="dark"] .vclass-item-form { border-bottom-color:#2d3650; }
[data-theme="dark"] .vclass-cap { background:rgba(124,58,237,.16); border-color:#3a3352; color:#d9c8f7; }
[data-theme="dark"] .vclass-hint-card { background:linear-gradient(135deg,#1e2746,#241f3c); border-color:#3a3352; color:#c7d2fe; }
[data-theme="dark"] .vclass-ex-q { color:#e2e8f0; }
[data-theme="dark"] .vclass-ans { background:#141a2b; border-color:#3a3352; }
[data-theme="dark"] .vclass-ans b { color:#d9c8f7; }
[data-theme="dark"] .vclass-ans-point { color:#9aa6c4; }
[data-theme="dark"] .vclass-bar { background:rgba(20,26,43,.92); border-top-color:#2d3650; }
[data-theme="dark"] .vclass-btn { background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.40); color:#d9c8f7; }
[data-theme="dark"] .vclass-btn:hover { background:rgba(124,58,237,.28); }
[data-theme="dark"] .vclass-btn-primary { background:#7c3aed; border-color:#7c3aed; color:#fff; }
[data-theme="dark"] .vclass-btn-primary:hover { background:#6d28d9; }
[data-theme="dark"] .vclass-btn-exit { background:rgba(220,38,38,.15); color:#fca5a5; border-color:rgba(252,165,165,.30); }
[data-theme="dark"] .vclass-btn-exit:hover { background:rgba(220,38,38,.25); }

/* ===== 词汇故事（第五分栏）===== */
.vui-story-act { justify-content:flex-end; }
.vui-story-card {
  position:relative;
  background:#fffdf6;
  border:1px solid #ece4cf;
  border-radius:16px;
  padding:22px 26px 26px;
  box-shadow:0 6px 22px rgba(120,100,60,.10);
  background-image:radial-gradient(#f0e7d4 1px, transparent 1px);
  background-size:18px 18px;
}
.vui-story-badge {
  display:inline-block;
  padding:4px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#a78bfa,#8b5cf6);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:12px;
}
.vui-story-title {
  font-size:24px;
  font-weight:800;
  color:#1e1b3a;
  text-align:center;
  line-height:1.4;
  margin:2px 0 2px;
  letter-spacing:.3px;
}
.vui-story-title-mark {
  background:linear-gradient(180deg,rgba(253,230,138,0) 54%,#fde68a 54%);
  padding:0 4px;
  border-radius:4px;
}
.vui-story-theme { font-size:12.5px; color:#9ca3af; text-align:center; margin-bottom:14px; }
.vui-story-body {
  background:#ffffff;
  border:1px solid #e9e2cf;
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 2px 10px rgba(120,100,60,.06);
}
.vui-story-body p { font-size:16px; line-height:3.2; margin:0 0 14px; color:#1f2937; }
.vui-story-body p:last-child { margin-bottom:0; }
/* 高亮固定两类：单词=绿色、短语=蓝色。
   排版规则：原词与同一行其它文字「同基线、同字号、等高」（.vui-story-t 用 inline，
   纵向 padding 不撑高行盒）；中文/音标注释绝对定位悬浮在该词正下方的空行里，
   既不参与行盒计算、也不会挨到正文那一行。 */
.vui-story-w {
  position:relative;
  display:inline-block;
  text-align:center;
  vertical-align:baseline;
  line-height:1.35;
  margin:0 2px;
}
.vui-story-t { display:inline; font-weight:700; border-radius:5px; padding:1px 6px; }
.vui-story-note {
  position:absolute;
  left:50%;
  top:calc(100% + 4px);
  transform:translateX(-50%);
  padding:1px 7px;
  border-radius:5px;
  font-size:11.5px;
  font-weight:600;
  line-height:1.45;
  white-space:nowrap;
  pointer-events:none;
}
/* 统一蓝色 Highlight：单词与短语同一套低饱和雾蓝（不再区分绿色/蓝色分类） */
.vui-story-w .vui-story-t      { background:#dbeafe; color:#1e40af; }
.vui-story-w .vui-story-note   { background:#dbeafe; color:#1e3a8a; }
.vui-story-legend { text-align:center; margin:0 0 14px; }
.vui-story-legend-item { display:inline-block; margin:0 5px; padding:3px 14px; border-radius:999px; font-size:12px; font-weight:700; background:#dbeafe; color:#1e40af; }
/* 启发：灯泡徽标 + 衬线斜体金句 + 马克笔高亮 */
.vui-story-insp {
  position:relative;
  margin-top:22px;
  background:linear-gradient(135deg,#fffbeb 0%,#fff7ed 100%);
  border:1px solid #f5d9a8;
  border-left:5px solid #f59e0b;
  border-radius:14px;
  padding:16px 20px 16px 18px;
  box-shadow:0 4px 16px rgba(180,120,20,.08);
}
.vui-story-insp-head { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.vui-story-insp-ic {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  box-shadow:0 2px 6px rgba(245,158,11,.35);
  flex:0 0 auto;
}
.vui-story-insp-ic svg { width:15px; height:15px; display:block; }
.vui-story-insp-t { font-size:12.5px; font-weight:800; color:#b45309; letter-spacing:3px; margin:0; }
.vui-story-insp-q {
  font-size:17px;
  font-style:italic;
  font-weight:700;
  color:#b91c1c;
  line-height:1.95;
  margin:0;
  font-family:Georgia,"Times New Roman","Songti SC","PingFang SC","Microsoft YaHei",serif;
}
.vui-story-insp-mark {
  background:#fde68a;
  background:linear-gradient(180deg,rgba(253,230,138,0) 54%,#fde68a 54%);
  padding:0 3px;
  border-radius:3px;
}
.vui-story-insp-c { font-size:13.5px; color:#a16207; margin-top:9px; line-height:1.75; padding-left:2px; }
.vui-story-empty { padding:26px; text-align:center; color:#9ca3af; font-size:14px; background:#fffdf6; border:1px dashed #e0d6bd; border-radius:12px; }
[data-theme="dark"] .vui-story-card { background:rgba(30,32,46,.6); border-color:#33384b; background-image:radial-gradient(rgba(240,231,212,.05) 1px, transparent 1px); }
[data-theme="dark"] .vui-story-title { color:#e8e0ff; }
[data-theme="dark"] .vui-story-title-mark { background:linear-gradient(180deg,rgba(251,191,36,0) 54%,rgba(251,191,36,.32) 54%); }
[data-theme="dark"] .vui-story-theme { color:#8a95a8; }
[data-theme="dark"] .vui-story-body { background:#1b2030; border-color:#33384b; }
[data-theme="dark"] .vui-story-body p { color:var(--text-primary,#e8eaf0); }
/* 夜间：统一蓝色高亮为固定语义色，保持浅色块 + 深色字，不做反色，与导出图片一致 */
[data-theme="dark"] .vui-story-insp { background:linear-gradient(135deg,rgba(180,83,9,.20),rgba(120,53,15,.14)); border-color:#8a5a1e; border-left-color:#f59e0b; }
[data-theme="dark"] .vui-story-insp-t { color:#fbbf24; }
[data-theme="dark"] .vui-story-insp-q { color:#fca5a5; }
[data-theme="dark"] .vui-story-insp-mark { background:linear-gradient(180deg,rgba(251,191,36,0) 54%,rgba(251,191,36,.32) 54%); }
[data-theme="dark"] .vui-story-insp-c { color:#fbbf24; }
[data-theme="dark"] .vui-story-empty { background:rgba(30,32,46,.6); border-color:#33384b; color:#8a95a8; }
/* 导出中：按钮置灰不可重复点击 */
.vui-btn.is-busy, .vui-btn:disabled { opacity:.6; cursor:not-allowed; }
/* 手机端：故事卡内边距收紧 */
@media (max-width:600px) {
  .vui-story-card { padding:16px 14px 18px; }
  .vui-story-body { padding:14px 12px; }
  .vui-story-title { font-size:20px; }
  .vui-story-body p { font-size:15px; line-height:3.1; }
  .vui-story-note { font-size:10.5px; padding:1px 5px; }
  .vui-story-legend-item { margin:0 3px 4px; padding:2px 10px; font-size:11.5px; }
  .vui-story-insp { padding:14px 14px 14px 13px; }
  .vui-story-insp-q { font-size:15.5px; line-height:1.9; }
}


/* ===================================================================
   阅读设计 READING_DESIGN_UI_DATA 四分栏界面（.rd-ui）
   正文 15.5px / 行高 1.7；只 Highlight 关键词，不整段铺色
   =================================================================== */
.rd-ui {
    --rd-accent: #d97706;
    --rd-accent-soft: #fef3c7;
    --rd-ink: #1f2937;
    --rd-sub: #6b7280;
    --rd-line: #e5e7eb;
    --w-accent: #d97706;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--rd-ink);
}
.rd-ui p, .rd-ui li, .rd-ui td, .rd-ui th { line-height: 1.7; }

/* 顶部条 + 查看完整设计 */
.rd-topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.rd-topbar-t { font-size: 15px; font-weight: 700; color: var(--rd-accent); letter-spacing: .3px; }
.rd-viewbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--rd-accent); background: #fff; color: var(--rd-accent);
    font-size: 13.5px; font-weight: 600; transition: background .15s, color .15s;
}
.rd-viewbtn:hover { background: var(--rd-accent); color: #fff; }
.rd-ui[data-rdview="full"] .rd-viewbtn { background: var(--rd-accent); color: #fff; }
.rd-ui[data-rdview="full"] .writing-tabs { display: none; }
.rd-ui[data-rdview="full"] .writing-panel { display: block; margin-bottom: 34px; }
.rd-ui[data-rdview="full"] .writing-panel + .writing-panel { border-top: 1px dashed var(--rd-line); padding-top: 22px; }

/* 分栏标题 + 导出本节 */
.rd-sechead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin: 4px 0 2px;
}
.rd-h2 {
    display: flex; align-items: center; gap: 9px; margin: 0;
    font-size: 18px; font-weight: 700; color: var(--rd-accent);
}
.rd-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--rd-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.rd-subtitle { font-size: 13px; color: var(--rd-sub); margin: 0 0 18px; }
.rd-h3 {
    margin: 26px 0 12px; font-size: 15.5px; font-weight: 700; color: #374151;
    padding-left: 10px; border-left: 4px solid var(--rd-accent);
}
.rd-p { margin: 8px 0; }

/* 表格：宽表可横向滚动 */
.rd-tw { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 10px 0 18px; }
.rd-table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 14.5px; background: #fff; }
.rd-table th, .rd-table td { border: 1px solid var(--rd-line); padding: 9px 12px; text-align: left; vertical-align: top; }
.rd-table thead th { background: #fffbeb; color: #92400e; font-weight: 700; white-space: nowrap; }
.rd-table tbody tr:nth-child(even) td { background: #fcfcfd; }
.rd-kv { min-width: 320px; }
.rd-kv th, .rd-rowh { width: 150px; background: #fffbeb; color: #92400e; font-weight: 600; white-space: nowrap; }
.rd-flow .rd-stage { white-space: nowrap; color: #92400e; }
.rd-time { display: block; font-size: 12px; color: var(--rd-sub); font-weight: 500; margin-top: 2px; }
.rd-qn, .rd-wn { width: 44px; text-align: center; color: var(--rd-sub); }
.rd-word { font-weight: 700; color: #b45309; white-space: nowrap; }
.rd-ans { color: #047857; font-weight: 600; }
.rd-from { color: var(--rd-sub); font-size: 13px; white-space: nowrap; }
.rd-ev { color: var(--rd-sub); font-size: 13.5px; }
.rd-selfa td:nth-child(2), .rd-selfa td:nth-child(3) { width: 88px; }

/* 关键词高亮 / 标签 / 药丸 */
.rd-k { color: #b45309; font-weight: 700; }
.rd-tag {
    display: inline-block; padding: 1px 9px; border-radius: 999px;
    background: var(--rd-accent-soft); color: #92400e; font-size: 12.5px; font-weight: 600;
}
.rd-pills { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0; }
.rd-pill {
    display: inline-block; padding: 4px 11px; border-radius: 8px; font-size: 13.5px;
    background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb;
}
.rd-pill.warn { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.rd-pill.info { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.rd-pill.soft { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rd-quote { color: #4b5563; font-style: italic; }
.rd-code {
    display: inline-block; padding: 1px 7px; border-radius: 5px;
    background: #f3f4f6; color: #1f2937; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px;
}
.rd-ul { margin: 6px 0 0; padding-left: 20px; }
.rd-ul li { margin-bottom: 5px; }
.rd-ol { margin: 8px 0 0; padding-left: 22px; }
.rd-ol li { margin-bottom: 7px; }

/* What–Why–How 三卡片 */
.rd-wwh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 10px 0 16px; }
.rd-wcard {
    background: #fff; border: 1px solid var(--rd-line); border-top: 3px solid var(--rd-c, #d97706);
    border-radius: 12px; padding: 15px 16px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.rd-wcard.rd-blue { --rd-c: #2563eb; }
.rd-wcard.rd-amber { --rd-c: #d97706; }
.rd-wcard.rd-green { --rd-c: #059669; }
.rd-wcard-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.rd-wcard-tag { font-size: 16px; font-weight: 800; color: var(--rd-c); letter-spacing: .5px; }
.rd-wcard-sub { font-size: 12.5px; color: var(--rd-sub); }
.rd-wcard-sum { margin: 0 0 8px; font-size: 14.5px; }
.rd-hook {
    display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px;
    padding: 12px 15px; border-radius: 10px; background: #fffbeb; border: 1px dashed #fcd34d;
}
.rd-hook-tag {
    flex: 0 0 auto; padding: 2px 10px; border-radius: 999px;
    background: var(--rd-accent); color: #fff; font-size: 12.5px; font-weight: 700;
}

/* 教学目标三步卡片 */
.rd-steps { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 10px 0 18px; }
.rd-step {
    flex: 1 1 210px; position: relative; background: #fff; border: 1px solid var(--rd-line);
    border-radius: 12px; padding: 14px 15px 13px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.rd-step-0 { border-top: 3px solid #2563eb; }
.rd-step-1 { border-top: 3px solid #d97706; }
.rd-step-2 { border-top: 3px solid #059669; }
.rd-step-n {
    position: absolute; top: 12px; right: 13px; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: var(--rd-sub); font-size: 12px; font-weight: 700;
}
.rd-step-lv { font-size: 13px; font-weight: 700; color: #92400e; margin-bottom: 6px; }
.rd-step-0 .rd-step-lv { color: #1d4ed8; }
.rd-step-2 .rd-step-lv { color: #047857; }
.rd-step-t { font-size: 14.5px; }
.rd-step-task { margin-top: 8px; font-size: 13px; color: var(--rd-sub); }
.rd-step-arrow { align-self: center; color: #d1d5db; font-size: 20px; font-weight: 700; }

/* 通用卡片 / 提示 */
.rd-card {
    background: #fff; border: 1px solid var(--rd-line); border-radius: 12px;
    padding: 15px 16px; margin: 10px 0 18px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.rd-note {
    display: flex; align-items: flex-start; gap: 9px; margin-top: 10px;
    padding: 10px 13px; border-radius: 9px; background: #ecfdf5; border: 1px solid #a7f3d0;
    font-size: 14px;
}
.rd-note-tag {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
    background: #059669; color: #fff; font-size: 12px; font-weight: 700;
}

/* 关键句折叠卡片 */
.rd-expandrow { display: flex; gap: 8px; margin: 6px 0 10px; }
.rd-mini {
    border: 1px solid var(--rd-line); background: #fff; color: var(--rd-sub);
    font-size: 12.5px; padding: 5px 12px; border-radius: 8px; cursor: pointer;
}
.rd-mini:hover { color: var(--rd-accent); border-color: var(--rd-accent); }
.rd-scards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.rd-scard { border: 1px solid var(--rd-line); border-radius: 12px; background: #fff; overflow: hidden; }
.rd-scard-h {
    display: flex; align-items: center; gap: 10px; padding: 12px 15px; cursor: pointer;
    background: #fffbeb; transition: background .15s;
}
.rd-scard-h:hover { background: #fef3c7; }
.rd-scard-n {
    flex: 0 0 auto; padding: 2px 9px; border-radius: 7px;
    background: var(--rd-accent); color: #fff; font-size: 12px; font-weight: 700;
}
.rd-scard-t { flex: 1 1 auto; font-size: 14.5px; font-weight: 600; color: #1f2937; }
.rd-chev { flex: 0 0 auto; color: var(--rd-sub); transition: transform .18s; }
.rd-scard.open .rd-chev { transform: rotate(180deg); }
.rd-scard-b { display: none; padding: 4px 15px 6px; }
.rd-scard.open .rd-scard-b { display: block; }
.rd-scard-b .rd-tw { margin: 10px 0; }

/* 学生任务单 */
.rd-sheet { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.rd-sheet-b { border: 1px solid var(--rd-line); border-radius: 12px; padding: 13px 16px 15px; background: #fff; }
.rd-sheet-h {
    display: flex; align-items: center; gap: 9px;
    font-size: 14.5px; font-weight: 700; color: #92400e; margin-bottom: 4px;
}
.rd-sheet-note { font-size: 12.5px; font-weight: 500; color: var(--rd-sub); }

/* 移动端适配：标签横向滑动 + 卡片单列 */
@media (max-width: 767px) {
    .rd-ui { font-size: 15px; }
    .rd-wwh { grid-template-columns: 1fr; }
    .rd-steps { flex-direction: column; }
    .rd-step-arrow { display: none; }
    .rd-h2 { font-size: 16.5px; }
    .rd-sechead { align-items: flex-start; }
    .rd-kv th, .rd-rowh { width: 108px; }
}

/* 夜间模式 */
[data-theme="dark"] .rd-ui { --rd-ink: #e5e7eb; --rd-sub: #9ca3af; --rd-line: #3b3757; --rd-accent: #fbbf24; --w-accent: #fbbf24; color: var(--rd-ink); }
[data-theme="dark"] .rd-viewbtn { background: transparent; color: #fbbf24; border-color: #fbbf24; }
[data-theme="dark"] .rd-viewbtn:hover,
[data-theme="dark"] .rd-ui[data-rdview="full"] .rd-viewbtn { background: #b45309; color: #fff; border-color: #b45309; }
[data-theme="dark"] .rd-num { background: #b45309; }
[data-theme="dark"] .rd-h3 { color: #e5e7eb; border-left-color: #fbbf24; }
[data-theme="dark"] .rd-table { background: var(--bg-card, #211f3d); }
[data-theme="dark"] .rd-table th, [data-theme="dark"] .rd-table td { border-color: #3b3757; color: #e5e7eb; }
[data-theme="dark"] .rd-table thead th, [data-theme="dark"] .rd-kv th, [data-theme="dark"] .rd-rowh { background: rgba(251, 191, 36, .12); color: #fcd34d; }
[data-theme="dark"] .rd-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .rd-k { color: #fcd34d; }
[data-theme="dark"] .rd-word { color: #fcd34d; }
[data-theme="dark"] .rd-ans { color: #6ee7b7; }
[data-theme="dark"] .rd-tag { background: rgba(251, 191, 36, .16); color: #fcd34d; }
[data-theme="dark"] .rd-pill { background: rgba(255, 255, 255, .06); color: #d1d5db; border-color: #3b3757; }
[data-theme="dark"] .rd-pill.warn { background: rgba(244, 63, 94, .14); color: #fda4af; border-color: rgba(244, 63, 94, .3); }
[data-theme="dark"] .rd-pill.info { background: rgba(59, 130, 246, .14); color: #93c5fd; border-color: rgba(59, 130, 246, .3); }
[data-theme="dark"] .rd-pill.soft { background: rgba(16, 185, 129, .14); color: #6ee7b7; border-color: rgba(16, 185, 129, .3); }
[data-theme="dark"] .rd-code { background: rgba(255, 255, 255, .07); color: #e5e7eb; }
[data-theme="dark"] .rd-quote { color: #b9b6cf; }
[data-theme="dark"] .rd-wcard, [data-theme="dark"] .rd-step,
[data-theme="dark"] .rd-card, [data-theme="dark"] .rd-scard,
[data-theme="dark"] .rd-sheet-b { background: var(--bg-card, #211f3d); border-color: #3b3757; }
[data-theme="dark"] .rd-wcard-sub, [data-theme="dark"] .rd-step-task, [data-theme="dark"] .rd-sheet-note { color: #9ca3af; }
[data-theme="dark"] .rd-hook { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .35); }
[data-theme="dark"] .rd-hook-tag { background: #b45309; }
[data-theme="dark"] .rd-note { background: rgba(16, 185, 129, .12); border-color: rgba(16, 185, 129, .3); }
[data-theme="dark"] .rd-step-n { background: rgba(255, 255, 255, .07); color: #9ca3af; }
[data-theme="dark"] .rd-step-lv { color: #fcd34d; }
[data-theme="dark"] .rd-step-0 .rd-step-lv { color: #93c5fd; }
[data-theme="dark"] .rd-step-2 .rd-step-lv { color: #6ee7b7; }
[data-theme="dark"] .rd-scard-h { background: rgba(251, 191, 36, .10); }
[data-theme="dark"] .rd-scard-h:hover { background: rgba(251, 191, 36, .18); }
[data-theme="dark"] .rd-scard-t { color: #e5e7eb; }
[data-theme="dark"] .rd-scard-n, [data-theme="dark"] .rd-sheet-h { color: #fcd34d; }
[data-theme="dark"] .rd-scard-n { background: #b45309; color: #fff; }
[data-theme="dark"] .rd-mini { background: transparent; border-color: #3b3757; color: #9ca3af; }
[data-theme="dark"] .rd-topbar-t { color: #fbbf24; }

/* ============================================================
   统一分栏流式结果（TabbedStreamingResult / .gy-tsr）
   ------------------------------------------------------------
   点击生成后立即出现的分栏骨架；结构化数据解析成功后会被
   各工具原有的富组件 DOM 整体替换，故此处只需覆盖流式与降级态。
   ============================================================ */
.gy-tsr { margin: 0; }

.gy-tsr-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 16px;
    scrollbar-width: thin;
}
.gy-tsr-tabs::-webkit-scrollbar { height: 4px; }
.gy-tsr-tabs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 4px; }

.gy-tsr-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 999px;
    background: #fff;
    color: #4b5563;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background .18s, color .18s, border-color .18s;
}
.gy-tsr-tab:hover { border-color: var(--tool-accent, #6366f1); color: var(--tool-accent, #6366f1); }
.gy-tsr-tab.active {
    background: var(--tool-accent, #6366f1);
    border-color: var(--tool-accent, #6366f1);
    color: #fff;
}

/* 状态圆点 */
.gy-tsr-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #d1d5db; flex: 0 0 auto;
}
.gy-tsr-tab.active .gy-tsr-dot { background: rgba(255, 255, 255, .65); }
.gy-tsr-tab[data-state="generating"] .gy-tsr-dot { background: #f59e0b; animation: gyTsrPulse 1.1s ease-in-out infinite; }
.gy-tsr-tab[data-state="completed"] .gy-tsr-dot { background: #10b981; }
.gy-tsr-tab[data-state="failed"] .gy-tsr-dot,
.gy-tsr-tab[data-state="interrupted"] .gy-tsr-dot { background: #ef4444; }
@keyframes gyTsrPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.gy-tsr-panel { display: none; }
.gy-tsr-panel.active { display: block; animation: gyTsrFade .2s ease; }
@keyframes gyTsrFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.gy-tsr-h {
    font-size: 19px;
    font-weight: 700;
    color: var(--tool-accent, #4f46e5);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tool-accent, #6366f1);
}
.gy-tsr-content { font-size: 15px; line-height: 1.85; color: var(--text-primary, #1f2937); }
.gy-tsr-content h3 { font-size: 16px; font-weight: 700; margin: 18px 0 8px; color: var(--text-primary, #1f2937); }
.gy-tsr-content h4, .gy-tsr-content h5, .gy-tsr-content h6 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.gy-tsr-content p { margin: 0 0 10px; }
.gy-tsr-content ul, .gy-tsr-content ol { margin: 0 0 12px; padding-left: 22px; }
.gy-tsr-content li { margin: 4px 0; }
.gy-tsr-content blockquote {
    margin: 10px 0; padding: 8px 14px;
    border-left: 3px solid var(--tool-accent, #6366f1);
    background: rgba(99, 102, 241, .06);
    color: #4b5563; border-radius: 0 6px 6px 0;
}
.gy-tsr-content code { background: rgba(0, 0, 0, .05); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.gy-tsr-content hr { border: 0; border-top: 1px dashed var(--border-color, #e5e7eb); margin: 16px 0; }
.gy-tsr-mark { background: #fef08a; color: inherit; padding: 0 3px; border-radius: 3px; }

.gy-tsr-table {
    width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px;
}
.gy-tsr-table th, .gy-tsr-table td {
    border: 1px solid var(--border-color, #e5e7eb);
    padding: 8px 10px; text-align: left; vertical-align: top;
}
.gy-tsr-table th { background: rgba(99, 102, 241, .08); font-weight: 700; color: var(--tool-accent, #4f46e5); }

.gy-tsr-struct { margin-top: 16px; }

/* 骨架 + 状态提示 */
.gy-tsr-foot:empty { display: none; }
.gy-tsr-sk { margin: 12px 0 8px; }
.gy-tsr-sk-line {
    height: 13px; border-radius: 6px; margin-bottom: 10px;
    background: linear-gradient(90deg, #eef0f4 25%, #f7f8fa 37%, #eef0f4 63%);
    background-size: 400% 100%;
    animation: gyTsrShimmer 1.3s ease infinite;
}
@keyframes gyTsrShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.gy-tsr-status { font-size: 13px; color: #9ca3af; margin-top: 4px; }
.gy-tsr-panel[data-state="failed"] .gy-tsr-status,
.gy-tsr-panel[data-state="interrupted"] .gy-tsr-status { color: #ef4444; }

.gy-tsr-tip {
    margin-top: 14px; padding: 9px 13px;
    background: #fff7ed; border: 1px solid #fed7aa; color: #b45309;
    border-radius: 8px; font-size: 13px;
}

.gy-tsr-full h2 {
    font-size: 18px; font-weight: 700; margin: 22px 0 12px;
    color: var(--tool-accent, #4f46e5);
    padding-bottom: 7px; border-bottom: 2px solid var(--tool-accent, #6366f1);
}
.gy-tsr-full h2:first-child { margin-top: 0; }

@media (max-width: 640px) {
    .gy-tsr-tab { padding: 7px 11px; font-size: 13px; }
    .gy-tsr-h { font-size: 17px; }
    .gy-tsr-content { font-size: 14.5px; }
}

/* ---------- 夜间模式 ---------- */
[data-theme="dark"] .gy-tsr-tabs { border-bottom-color: #332f4d; }
[data-theme="dark"] .gy-tsr-tab { background: #1f1d38; border-color: #3b3757; color: #b9b6cf; }
[data-theme="dark"] .gy-tsr-tab:hover { color: #c7d2fe; border-color: #6366f1; }
[data-theme="dark"] .gy-tsr-tab.active { color: #fff; }
[data-theme="dark"] .gy-tsr-dot { background: #4b4770; }
[data-theme="dark"] .gy-tsr-content { color: #e5e7eb; }
[data-theme="dark"] .gy-tsr-content h3, [data-theme="dark"] .gy-tsr-content h4,
[data-theme="dark"] .gy-tsr-content h5, [data-theme="dark"] .gy-tsr-content h6 { color: #e5e7eb; }
[data-theme="dark"] .gy-tsr-content blockquote { background: rgba(99, 102, 241, .12); color: #b9b6cf; }
[data-theme="dark"] .gy-tsr-content code { background: rgba(255, 255, 255, .07); color: #e5e7eb; }
[data-theme="dark"] .gy-tsr-content hr { border-top-color: #3b3757; }
[data-theme="dark"] .gy-tsr-mark { background: rgba(250, 204, 21, .28); color: #fde68a; }
[data-theme="dark"] .gy-tsr-table th, [data-theme="dark"] .gy-tsr-table td { border-color: #3b3757; }
[data-theme="dark"] .gy-tsr-table th { background: rgba(99, 102, 241, .16); color: #c7d2fe; }
[data-theme="dark"] .gy-tsr-sk-line {
    background: linear-gradient(90deg, #262343 25%, #302c50 37%, #262343 63%);
    background-size: 400% 100%;
}
[data-theme="dark"] .gy-tsr-status { color: #8b88a8; }
[data-theme="dark"] .gy-tsr-tip { background: rgba(251, 191, 36, .10); border-color: rgba(251, 191, 36, .35); color: #fcd34d; }

/* 完整结果视图：逐栏展开（.gy-tsr-fullmode 内所有面板同时可见） */
.gy-tsr-fullmode .vui-panel, .gy-tsr-fullmode .writing-panel, .gy-tsr-fullmode .gy-tsr-panel { display: block !important; }
.gy-tsr-fullh {
    font-size: 18px; font-weight: 700; margin: 26px 0 12px;
    color: var(--tool-accent, #4f46e5);
    padding-bottom: 7px; border-bottom: 2px solid var(--tool-accent, #6366f1);
}
.gy-tsr-full > .gy-tsr-fullmode > *:first-child .gy-tsr-fullh { margin-top: 0; }

/* 结构化数据解析中的轻量提示 */
.gy-tsr-opt-banner {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; padding: 10px 14px;
    border-radius: 10px;
    background: linear-gradient(90deg, #f5f3ff, #eef2ff);
    border: 1px solid #ddd6fe;
    color: #5b21b6; font-size: 13px; font-weight: 500;
    animation: gyTsrBannerIn .2s ease;
}
.gy-tsr-opt-ic {
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid #c4b5fd; border-top-color: #7c3aed;
    animation: gyTsrSpin .8s linear infinite;
}
@keyframes gyTsrSpin { to { transform: rotate(360deg); } }
@keyframes gyTsrBannerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 骨架 → 精排 UI 的平滑过渡（220ms 交叉淡入淡出） */
.gy-tsr-finishing { position: relative; }
.gy-tsr-old,
.gy-tsr-new { transition: opacity 220ms ease; }
.gy-tsr-old { opacity: 1; }
.gy-tsr-old.gy-tsr-fade-out { opacity: 0; }
.gy-tsr-new {
    opacity: 0; position: absolute; top: 0; left: 0; width: 100%;
    pointer-events: none;
}
.gy-tsr-new.gy-tsr-fade-in { opacity: 1; pointer-events: auto; }

[data-theme="dark"] .gy-tsr-opt-banner {
    background: linear-gradient(90deg, rgba(124,58,237,.15), rgba(99,102,241,.12));
    border-color: rgba(139,92,246,.35); color: #ddd6fe;
}
[data-theme="dark"] .gy-tsr-opt-ic { border-color: rgba(139,92,246,.4); border-top-color: #a78bfa; }

/* ==================== 写作教学 · 课堂展示（PPT 逐页讲解） ==================== */
/* 触发按钮（分析结果标题右侧，玫红主题，与写作工具一致） */
.w-classroom-btn { display:inline-flex; align-items:center; gap:6px; border:1px solid #fecdd3; background:#fff1f2; color:#e11d48; padding:8px 14px; border-radius:var(--radius-sm,10px); font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; transition:background .15s, transform .15s, box-shadow .15s; }
.w-classroom-btn:hover { background:#ffe4e6; transform:translateY(-1px); box-shadow:0 4px 12px rgba(244,63,94,.18); }
.w-classroom-btn svg { width:16px; height:16px; }

/* ==========================================================================
   写作教学 · 课堂展示（wcl-）
   字体：中文 MiSans → HarmonyOS Sans SC → 系统中文
        英文 UI  Manrope → Inter
        英文支架/范文 Source Serif 4 → Georgia
   以上均为本地字体（fonts/misans、fonts/manrope），不引用任何外链字体。
   动画统一缓动 cubic-bezier(0.22,1,0.36,1)；禁止 3D 翻转 / 弹跳 / 粒子 / 循环闪烁。
   ========================================================================== */
.wcl-overlay {
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column;
  background:#FDFBFA; color:#1f2937; -webkit-font-smoothing:antialiased;
  --wcl-ui:'Manrope','Inter','MiSans','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
  --wcl-serif:'Source Serif 4',Georgia,'Times New Roman','MiSans','PingFang SC',serif;
  --wcl-h1:clamp(30px,3.2vw,48px);      /* 主标题 40–48 */
  --wcl-h2:clamp(24px,2.5vw,40px);      /* 章节标题 32–40 */
  --wcl-h3:clamp(19px,1.9vw,28px);
  --wcl-body:26px;   /* P0+（2026-08-13 全局强制）：幻灯片正文统一 26px（字体规范） */
  --wcl-hint:clamp(15px,1.2vw,20px);    /* 中文提示 17–20 */
  --wcl-label:clamp(14px,1vw,17px);     /* 标签 15–17 */
  --wcl-ease:cubic-bezier(0.22,1,0.36,1);
  --wcl-line:#EFE7E8;
  font-family:var(--wcl-ui);
}
.wcl-overlay:fullscreen { background:#FDFBFA; }
.wcl-overlay *, .wcl-overlay *::before, .wcl-overlay *::after { box-sizing:border-box; }

/* ===================== 课件首页（封面） 2026-08-14 ===================== */
/* 仅作「课堂展示」前的入口网关，不污染 16 页页表；z-index 高于编辑器浮层(99990) 以盖在其上。 */
/* 课件首页（封面）· 2026-08-14 重设计 —— 红色渐变高级感 */
.wcl-home-overlay {
  position:fixed; inset:0; z-index:99996; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse 120% 100% at 50% 38%, #ffffff 0%, #fff7f8 38%, #ffe4e6 72%, #fecaca 100%);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  opacity:0; transition:opacity .26s ease; padding:24px; overflow:hidden;
}
/* 两团装饰柔光（柔化背景层次） */
.wcl-home-overlay::before,.wcl-home-overlay::after{
  content:""; position:absolute; border-radius:50%; pointer-events:none; filter:blur(40px);
}
.wcl-home-overlay::before{
  width:520px; height:520px; left:-120px; top:-160px;
  background:radial-gradient(circle, rgba(252,165,165,.42) 0%, rgba(252,165,165,.18) 40%, transparent 70%);
}
.wcl-home-overlay::after{
  width:620px; height:620px; right:-160px; bottom:-200px;
  background:radial-gradient(circle, rgba(244,114,182,.32) 0%, rgba(244,114,182,.12) 45%, transparent 72%);
}
.wcl-home-overlay.wcl-home-in { opacity:1; }
.wcl-reduced .wcl-home-overlay { transition:none; }
.wcl-home-card {
  position:relative; z-index:1;
  width:min(720px,94vw); background:#ffffff;
  border:1px solid rgba(255,255,255,.7);
  border-radius:28px;
  box-shadow:0 36px 80px rgba(225,29,72,.22), 0 8px 24px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.9);
  padding:54px 48px 42px; text-align:center;
  transform:translateY(20px); transition:transform .36s cubic-bezier(.2,.8,.25,1);
}
.wcl-home-overlay.wcl-home-in .wcl-home-card { transform:translateY(0); }
/* 标题（深酒红，可点击编辑） */
.wcl-home-title {
  font-size:46px; font-weight:800; color:#9f1239;
  margin:0 0 14px; letter-spacing:.04em; line-height:1.15;
  outline:none; transition:color .15s;
}
.wcl-home-title:focus { color:#7f1d1d; }
.wcl-home-title[contenteditable="true"]:hover { background:rgba(255,241,243,.6); border-radius:6px; }
/* 副标 */
.wcl-home-sub {
  font-size:15.5px; color:#6b7280; margin:0 0 30px; line-height:1.65;
  outline:none; transition:color .15s;
}
.wcl-home-sub:focus { color:#374151; }
.wcl-home-sub[contenteditable="true"]:hover { background:rgba(255,241,243,.5); border-radius:6px; }
/* 4 步串联（› 连接，红色描边胶囊） */
.wcl-home-steps { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin-bottom:36px; }
.wcl-home-step {
  font-size:13.5px; font-weight:600; color:#b91c2c; background:#fff;
  border:1px solid #fecaca; padding:8px 16px; border-radius:999px;
  letter-spacing:.02em;
}
.wcl-home-step-sep {
  color:#f87171; font-size:14px; font-weight:600; user-select:none; letter-spacing:.5px;
}
/* 「开始课堂」卡片：白底淡红边、hover 提亮 + 微上浮 */
.wcl-home-actions { display:flex; justify-content:center; margin-bottom:0; }
.wcl-home-start {
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  background:#ffffff; color:#b91c2c;
  padding:22px 32px; border:1.5px solid #fecaca; border-radius:18px;
  cursor:pointer; gap:18px; min-width:280px;
  box-shadow:0 6px 18px rgba(225,29,72,.12);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.wcl-home-start:hover {
  background:linear-gradient(180deg, #fff5f6 0%, #ffe4e6 100%);
  border-color:#fb7185; transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(225,29,72,.22);
}
.wcl-home-start:active { transform:translateY(0); }
.wcl-home-start-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(135deg, #f43f5e, #e11d48); color:#fff;
  flex:0 0 auto;
  box-shadow:0 6px 16px rgba(225,29,72,.36);
}
.wcl-home-start-icon svg { width:22px; height:22px; }
.wcl-home-start-text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:0 0 auto; }
.wcl-home-start-title { font-size:20px; font-weight:800; letter-spacing:.04em; color:#b91c2c; line-height:1.1; }
.wcl-home-start-hint { font-size:13px; color:#6b7280; letter-spacing:.02em; }

[data-theme="dark"] .wcl-home-overlay {
  background:radial-gradient(ellipse 120% 100% at 50% 38%, #1f1622 0%, #2a1521 45%, #3a1622 80%, #4a1422 100%);
}
[data-theme="dark"] .wcl-home-overlay::before { background:radial-gradient(circle, rgba(244,114,182,.32) 0%, transparent 70%); }
[data-theme="dark"] .wcl-home-overlay::after { background:radial-gradient(circle, rgba(225,29,72,.28) 0%, transparent 72%); }
[data-theme="dark"] .wcl-home-card {
  background:#1c1320; border-color:rgba(255,255,255,.06);
  box-shadow:0 36px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);
}
[data-theme="dark"] .wcl-home-title { color:#fda4af; }
[data-theme="dark"] .wcl-home-title:focus { color:#fecaca; }
[data-theme="dark"] .wcl-home-title[contenteditable="true"]:hover { background:rgba(159,18,57,.18); }
[data-theme="dark"] .wcl-home-sub { color:#94a3b8; }
[data-theme="dark"] .wcl-home-sub:focus { color:#cbd5e1; }
[data-theme="dark"] .wcl-home-sub[contenteditable="true"]:hover { background:rgba(159,18,57,.14); }
[data-theme="dark"] .wcl-home-step { background:#2a1622; border-color:#4a1422; color:#fda4af; }
[data-theme="dark"] .wcl-home-step-sep { color:#fb7185; }
[data-theme="dark"] .wcl-home-start { background:#1c1320; border-color:#4a1422; color:#fda4af; box-shadow:0 6px 18px rgba(0,0,0,.5); }
[data-theme="dark"] .wcl-home-start:hover { background:linear-gradient(180deg, #2a1622 0%, #3a1622 100%); border-color:#fb7185; }
[data-theme="dark"] .wcl-home-start-title { color:#fda4af; }
[data-theme="dark"] .wcl-home-start-hint { color:#94a3b8; }
@media (max-width:560px) {
  .wcl-home-card { padding:38px 22px 30px; }
  .wcl-home-title { font-size:30px; }
  .wcl-home-actions { flex-direction:column; gap:12px; }
  .wcl-home-start { width:100%; justify-content:center; }
}

/* ---------- 顶部信息栏（路线 + 进度常驻） ---------- */
.wcl-top { position:relative; flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 30px; border-bottom:1px solid var(--wcl-line); background:rgba(255,255,255,.86); backdrop-filter:blur(6px); }
.wcl-top-l { display:flex; align-items:center; gap:8px; min-width:0; }
/* 顶栏当前路线徽章（与底部切换按钮双向同步） */
.wcl-top-route { display:none; align-items:center; font-size:var(--wcl-label); font-weight:700; line-height:1; padding:5px 12px; border-radius:999px; white-space:nowrap;
  color:#0369a1; background:#e0f2fe; border:1px solid #bae6fd; }
.wcl-top-route.on { display:inline-flex; }
.wcl-top-route.adv { color:#6D28D9; background:#EDE9FE; border-color:#DDD6FE; }
[data-theme="dark"] .wcl-top-route { color:#7dd3fc; background:rgba(56,189,248,.16); border-color:rgba(56,189,248,.35); }
[data-theme="dark"] .wcl-top-route.adv { color:#C4B5FD; background:rgba(109,40,217,.24); border-color:rgba(167,139,250,.35); }
.wcl-chapter { font-size:clamp(16px,1.4vw,20px); font-weight:800; color:#e11d48; white-space:nowrap; }
.wcl-dot { color:#f0b9c2; }
.wcl-pagename { font-size:clamp(15px,1.3vw,19px); font-weight:700; color:#334155; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wcl-top-c { display:flex; align-items:center; gap:18px; }
.wcl-draft-badge { display:inline-flex; align-items:center; font-size:var(--wcl-label,12px); font-weight:700; line-height:1; padding:5px 12px; border-radius:999px; white-space:nowrap; color:#B45309; background:#FEF3C7; border:1px solid #FDE68A; margin-left:2px; }
[data-theme="dark"] .wcl-draft-badge { color:#FCD34D; background:rgba(180,83,9,.22); border-color:rgba(252,211,77,.35); }
.wcl-prog { display:inline-flex; align-items:center; gap:7px; font-size:var(--wcl-label); color:#94a3b8; }
.wcl-prog i { font-style:normal; }
.wcl-prog b { font-size:clamp(15px,1.2vw,18px); font-weight:800; color:#e11d48; font-variant-numeric:tabular-nums; }
.wcl-prog-all b { color:#0f172a; }
/* 「跳到指定页」按钮：把「总体进度 X/14」改成可点击下拉 */
button.wcl-prog-jump { font:inherit; color:inherit; background:transparent; border:1px solid transparent; padding:5px 12px; border-radius:10px; cursor:pointer; transition:background 180ms var(--wcl-ease), border-color 180ms var(--wcl-ease), transform 180ms var(--wcl-ease); }
button.wcl-prog-jump:hover { background:#FFF1F2; border-color:#FECDD3; color:#e11d48; }
button.wcl-prog-jump:active { transform:scale(.97); }
button.wcl-prog-jump.on { background:#fff; border-color:#f43f5e; color:#e11d48; box-shadow:0 4px 12px rgba(244,63,94,.18); }
.wcl-prog-chev { display:inline-flex; align-items:center; color:#94a3b8; margin-left:2px; transition:transform 220ms var(--wcl-ease); }
button.wcl-prog-jump.on .wcl-prog-chev { transform:rotate(180deg); color:#e11d48; }
/* 页码选择弹层（Portal：fixed 挂 .wcl-overlay，不被舞台 overflow 裁切） */
.wcl-pages-pop { position:fixed; left:50%; top:64px; transform:translate(-50%,-12px); z-index:10060; width:min(880px,92vw); max-height:min(640px,82dvh); display:flex; flex-direction:column; background:#FFFFFF; border:1px solid #F3DDE1; border-radius:18px; box-shadow:0 24px 60px rgba(15,23,42,.18); opacity:0; pointer-events:none; transition:opacity 200ms var(--wcl-ease), transform 240ms var(--wcl-ease); overflow:hidden; }
.wcl-pages-pop.on { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.wcl-pp-h { display:flex; align-items:center; gap:10px; padding:14px 20px; background:linear-gradient(135deg,#FFF1F2,#FFF7ED); border-bottom:1px solid #F3DDE1; color:#9f1239; }
.wcl-pp-h svg { color:#f43f5e; }
.wcl-pp-h span { font-size:clamp(17px,1.4vw,20px); font-weight:800; letter-spacing:1px; flex:1; }
.wcl-pp-x { background:transparent; border:none; padding:6px; border-radius:8px; cursor:pointer; color:#94a3b8; transition:background 160ms var(--wcl-ease), color 160ms var(--wcl-ease); }
.wcl-pp-x:hover { background:rgba(244,63,94,.1); color:#e11d48; }
.wcl-pp-body { flex:1 1 auto; overflow-y:auto; padding:16px 18px; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.wcl-pp-grp { background:#FAF7FB; border:1px solid #F1E3E5; border-radius:14px; padding:12px 14px; }
.wcl-pp-grp-h { display:flex; align-items:center; gap:8px; font-size:clamp(15px,1.2vw,17px); font-weight:800; color:#9f1239; margin-bottom:10px; }
.wcl-pp-grp-h svg { color:#f43f5e; }
.wcl-pp-grp-h em { margin-left:auto; font-style:normal; font-size:13px; font-weight:600; color:#94a3b8; background:#fff; border:1px solid #F3DDE1; padding:2px 8px; border-radius:999px; }
.wcl-pp-items { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wcl-pp-item { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid transparent; background:#fff; border-radius:10px; font:inherit; cursor:pointer; text-align:left; color:#1f2937; transition:background 160ms var(--wcl-ease), border-color 160ms var(--wcl-ease), color 160ms var(--wcl-ease), transform 160ms var(--wcl-ease); }
.wcl-pp-item:hover { background:#FFF1F2; border-color:#FECDD3; color:#e11d48; transform:translateY(-1px); }
.wcl-pp-item b { font-size:13px; font-weight:800; color:#94a3b8; font-variant-numeric:tabular-nums; min-width:24px; }
.wcl-pp-item span { flex:1; font-size:clamp(15px,1.25vw,17px); font-weight:600; }
.wcl-pp-item.current { background:#f43f5e; border-color:#f43f5e; color:#fff; cursor:default; transform:none; box-shadow:0 4px 12px rgba(244,63,94,.25); }
.wcl-pp-item.current b { color:rgba(255,255,255,.85); }
.wcl-pp-item.current:hover { background:#f43f5e; color:#fff; transform:none; }
[data-theme="dark"] .wcl-pages-pop { background:#1c2336; border-color:rgba(251,113,133,.32); box-shadow:0 24px 60px rgba(0,0,0,.5); }
[data-theme="dark"] .wcl-pp-h { background:linear-gradient(135deg,rgba(244,63,94,.18),rgba(167,139,250,.10)); border-bottom-color:rgba(251,113,133,.25); color:#fda4af; }
[data-theme="dark"] .wcl-pp-body { background:transparent; }
[data-theme="dark"] .wcl-pp-grp { background:rgba(35,43,61,.6); border-color:rgba(148,163,184,.18); }
[data-theme="dark"] .wcl-pp-grp-h { color:#fda4af; }
[data-theme="dark"] .wcl-pp-item { background:rgba(35,43,61,.5); color:#d7deea; }
[data-theme="dark"] .wcl-pp-item:hover { background:rgba(244,63,94,.18); border-color:rgba(251,113,133,.4); color:#fda4af; }
[data-theme="dark"] .wcl-pp-item.current { background:#f43f5e; color:#fff; }
[data-theme="dark"] button.wcl-prog-jump:hover { background:rgba(244,63,94,.18); border-color:rgba(251,113,133,.4); }
[data-theme="dark"] button.wcl-prog-jump.on { background:rgba(35,43,61,.6); border-color:rgba(251,113,133,.5); }
@media (max-width:780px) { .wcl-pp-body { grid-template-columns:1fr; } .wcl-pages-pop { top:56px; width:96vw; } }
@media (max-width:900px) { .wcl-prog-chev { display:none; } }
.wcl-top-r { display:flex; align-items:center; }

/* 顶部平滑进度条 */
.wcl-progbar { position:absolute; left:0; right:0; bottom:-1px; height:3px; background:transparent; pointer-events:none; }
.wcl-progbar i { display:block; height:100%; width:0; border-radius:0 3px 3px 0; background:linear-gradient(90deg,#fb7185,#f43f5e); transition:width 420ms var(--wcl-ease); }

/* ---------- 舞台 ---------- */
/* 🐛 2026-08-24 修复：画布背景不满铺（透明度<1 时滚动到底部露白）。
 * 根因：.wcl-stage 既是滚动容器，::before 背景又按「视口 padding box」铺满，
 * 内容超出滚动后视口下方无背景 → 露白。修复：.wcl-stage 改为固定视口（不滚动），
 * 滚动下放到直接子级 .wcl-slide；背景 ::before 恒铺满可见舞台，不再随滚动露白。 */
.wcl-stage { position:relative; flex:1 1 auto; overflow:hidden; padding:16px 20px; }
.wcl-stage > .wcl-slide { max-height:100%; overflow:auto; overflow-x:hidden; }

/* ============================================================
 * 共用课堂装饰层 PresentationTheme（.gy-deco，wcl/vclass/vsclass/未来模式共用）
 * 由 js/classroom-decor.js 生成，本 CSS 只负责样式与动画。
 * - 装饰层 pointer-events:none、z-index:0，内容层 z-index:1 始终在上
 * - 入场 500-800ms 淡入+微缩放（stagger）；圆环绘制一次；星点亮一次
 * - 仅 1 组（.gy-float）8-12s 缓慢漂浮，位移 ≤6px
 * - prefers-reduced-motion：全部静态；移动端缩小并降低不透明度
 * ============================================================ */
.gy-deco { position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; --gy-op:.62; }
.gy-deco-item { position:absolute; pointer-events:none; z-index:0; opacity:0; transform:scale(.9); filter:drop-shadow(0 4px 10px rgba(15,23,42,.06)); animation:gyDecoIn 680ms var(--wcl-ease) both; }
.gy-deco-item:nth-child(2) { animation-delay:.09s; }
.gy-deco-item:nth-child(3) { animation-delay:.18s; }
.gy-deco-item:nth-child(4) { animation-delay:.27s; }
.gy-deco-item:nth-child(5) { animation-delay:.36s; }
.gy-deco-item:nth-child(6) { animation-delay:.45s; }
.gy-deco-item i { position:absolute; display:block; pointer-events:none; }
.gy-deco-item i svg { width:100%; height:100%; display:block; }
@keyframes gyDecoIn { from { opacity:0; transform:scale(.9); } to { opacity:var(--gy-op,.62); transform:scale(1); } }

/* 圆环：缓慢绘制一次（pathLength=100 → dasharray 100 = 整圆） */
.gy-it-ring .gy-r { stroke-dasharray:100; stroke-dashoffset:100; animation:gyRing 1.1s var(--wcl-ease) .35s both; }
@keyframes gyRing { to { stroke-dashoffset:0; } }

/* 星点：点亮一次 */
.gy-it-spark svg { animation:gySpark 900ms var(--wcl-ease) .3s both; }
@keyframes gySpark { 0% { transform:scale(0); opacity:0; } 55% { transform:scale(1.28) rotate(45deg); opacity:var(--gy-op,.62); } 100% { transform:scale(1); opacity:var(--gy-op,.62); } }

/* 漂浮：最多 1 组，8-12s 缓慢上下（≤6px） */
.gy-float svg { animation:gyFloat 10s ease-in-out 1.5s infinite; }
@keyframes gyFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }

/* 内容层始终位于装饰层之上（三套课堂各自的内容容器提升到 z-index:1） */
.wcl-slide > :not(.gy-deco) { position:relative; z-index:1; }
.vclass-stage > .vclass-card { position:relative; z-index:1; }
.vsclass-stage > .vsclass-slide { position:relative; z-index:1; }

@media (prefers-reduced-motion: reduce) {
    .gy-deco-item, .gy-deco-item .gy-r, .gy-deco-item svg { animation:none !important; }
    .gy-deco-item { opacity:var(--gy-op,.62); transform:none; }
}
/* 移动端：缩小并降低不透明度，避免遮挡 */
@media (max-width:900px) { .gy-deco { --gy-op:.42; } }
@media (max-width:640px) { .gy-deco-item { width:52px !important; height:52px !important; } }
[data-theme="dark"] .gy-deco-item { filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
[data-theme="dark"] .gy-deco { --gy-op:.5; }
.wcl-slide { position:relative; width:100%; max-width:var(--wcl-slide-max,1280px); margin:0 auto; }
/* 第 23 轮（消除留白）：编辑端画布很宽（1500-1900px），仅在 1280px slide 内块两侧留白 10%。 */
/* 编辑端（.pe-wcl 容器内，renderSlide 渲染区）让 slide 填满画布，块按比例占满不留白。 */
/* 课堂端（.wcl-overlay 容器内）保留 1280px max-width 居中。 */
.pe-wcl .wcl-slide { max-width: none; width: 100%; }

/* 🐛 2026-08-21 工单方案1（#1052 双层背景）：画布设了背景后，背景只由最外层满铺容器
 * （课堂 .wcl-stage / 编辑 .pe-canvas）承载；内层卡片一律透明并去掉阴影，
 * 透明浮于满铺图之上 —— 消除「外壳套内胆」双层叠放与 max-width 居中导致的左右留白。
 * 只影响页面容器（slide/stage 卡片），内容区块 .wcl-ub / .pe-block-wrap 自身底色不动。 */
.wcl-stage.wcl-stage--bg > .wcl-slide,
.wcl-stage.wcl-stage--bg .wcl-slide { background:transparent !important; box-shadow:none !important; }
.pe-canvas.pe-canvas--bg .prs-stage { background:transparent !important; box-shadow:none !important; }
.pe-canvas.pe-canvas--bg .prs-stage-scroll { background:transparent !important; }

/* 工单 #1108：画布图片背景支持「透明度」+「仅当前页」范围。
 * 背景图走最外层满铺容器的 ::before 伪元素（background-image + --wcl-canvas-bg-opacity 变量），
 * 内容卡片(.wcl-slide / .prs-stage)以 z-index:1 浮于其上，保持单层满铺、不重复绘制（符合背景单层铁律）。
 * color/gradient 模式仍直接涂 host，--wcl-canvas-bg-image 缺省为 none → ::before 不可见。 */
.pe-canvas--bg, .wcl-stage--bg { position:relative; }
.pe-canvas--bg::before,
.wcl-stage--bg::before {
    content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
    background-image: var(--wcl-canvas-bg-image, none);
    background-size:cover; background-position:center center; background-repeat:no-repeat;
    opacity: var(--wcl-canvas-bg-opacity, 1);
}
/* 内容卡片浮于背景图之上 */
.pe-canvas--bg > .prs-stage { position:relative; z-index:1; }
.wcl-stage--bg > .wcl-slide { position:relative; z-index:1; }

/* 工单 2026-08-24：区块图片填充透明度（无极调节）。
 * 与画布背景同方案：图片走 ::before 伪元素 + --block-fill-opacity 变量，真正半透明、露出底层。
 * z-index:-1 让图片沉到区块文字/手柄之下（无需逐个抬升内容子元素），且始终位于画布背景之上。 */
.wcl-ub[style*="--block-fill-image"],
.pe-wcl-ub[style*="--block-fill-image"] { position:relative; }
.wcl-ub[style*="--block-fill-image"]::before,
.pe-wcl-ub[style*="--block-fill-image"]::before {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background-image: var(--block-fill-image, none);
    background-size:cover; background-position:center center; background-repeat:no-repeat;
    opacity: var(--block-fill-opacity, 1);
    border-radius:inherit;
}

/* 翻页（需求：更缓慢丝滑）。总时长 1500ms，cubic-bezier(0.22,1,0.36,1)：
   新页统一 fade + 上移缓慢进入（不再方向性左右滑，避免字体与卡片突兀跳入）；
   旧页同步淡出；转场期间禁止重复翻页（JS anim 锁）。
   标题遮罩移除（与字体突兀切换有关）；内部 stagger 错位移除（不再各卡片闪入）。 */
.wcl-stage.wcl-in-next > .wcl-slide:not(.wcl-ghost),
.wcl-stage.wcl-in-prev > .wcl-slide:not(.wcl-ghost) { animation:wclSlideIn 450ms var(--wcl-ease) both; }   /* 🐛 P0 2026-08-14：1500ms→450ms，翻页不拖节奏 */
@keyframes wclSlideIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.wcl-slide.wcl-ghost { position:absolute; left:50%; right:auto; top:18px; width:calc(100% - 40px); max-width:var(--wcl-slide-max,1100px); transform:translateX(-50%); pointer-events:none; margin:0; }
.wcl-slide.wcl-out-next { animation:wclOutNext 450ms var(--wcl-ease) both; }   /* 🐛 P0 2026-08-14：1500ms→450ms */
.wcl-slide.wcl-out-prev { animation:wclOutPrev 450ms var(--wcl-ease) both; }   /* 🐛 P0 2026-08-14：1500ms→450ms */
@keyframes wclOutNext { from { opacity:1; transform:translateX(-50%); } to { opacity:0; transform:translateX(calc(-50% - 12px)); } }
@keyframes wclOutPrev { from { opacity:1; transform:translateX(-50%); } to { opacity:0; transform:translateX(calc(-50% + 12px)); } }

/* 标题遮罩动画移除：避免大字号标题与正文字体切换突兀，整体交给新页入场动画统一带动 */
.wcl-slide-body { font-size:var(--wcl-body); line-height:1.7; color:#334155; padding:0 32px; }
/* 🐛 课件制作导入的 info 页走 presentation-render.js 通用渲染，它注入的 PRS_CSS 是为深色舞台
 * （.prs-stage）设计的浅色文字（.prs-block #e2e8f0、标题 #f8fafc）。wcl 舞台本身是浅色背景，
 * 没有 .prs-stage 的深色渐变，因此文字会淡到几乎看不见。此处强制把 wcl 里的 prs 文字改深色。 */
.wcl-slide-body .prs-block,
.wcl-slide-body .prs-block .pr-p,
.wcl-slide-body .prs-block .pr-list,
.wcl-slide-body .prs-bt-title,
.wcl-slide-body .prs-bt-subtitle,
.wcl-slide-body .prs-bt-note,
.wcl-slide-body .prs-bt-label,
.wcl-slide-body .prs-pager { color:#334155 !important; }
.wcl-slide-body .prs-bt-title { color:#1e293b !important; }
.wcl-slide-body .prs-bt-subtitle { color:#475569 !important; }
.wcl-slide-body .prs-bt-label { color:#1d4ed8 !important; background:rgba(37,99,235,.10) !important; }
/* 方案 B（2026-08-23）：课件制作导入页不再走 Render.slideHtml 的 .prs-slide--imported 卡片皮肤，
 * 改为在 wcl-edit.renderSlide（wclKind=imported-cards）同源渲染真实平台 .wcl-ub 区块
 * （红边纯文字块 / 红胶囊小标题 / 无边红标题），区块自带 peStyle / highlight，徽章已去除。
 * 故此处删除方案 A 的 prs-slide--imported 皮肤规则。 */
/* P0+（2026-08-13 工单）：课堂端专属壳页面（essay-hl）的 48px 红粗大标题（frameless 样式，
 * 与编辑端 ehTitle 一致）；下距图例胶囊 24px —— 遵守「标题与下方区块明显间距」排版纪律。 */
.wcl-slide-body .wcl-slide-title { font-size:48px; font-weight:800; color:#e11d48; text-align:left; line-height:1.2; margin-bottom:24px; }
/* P0+（2026-08-13 全局强制·排版纪律）：幻灯片大标题（frameless 首行，.pe-wcl-row-single）
 * 与其下方首个区块保持 36px 垂直间距；其余标题行（如「必写要点」胶囊）与下方 20px —— 杜绝标题紧贴区块。
 * 🐛 工单 2026-08-14：标题行上下都加 margin —— 「内容拓展」独立胶囊位于必写要点卡之后，
 * 若无 margin-top 会与上方卡片紧贴（用户实测 -1px）。相邻 singleRow 的上下 margin 折叠取大值，视觉不变。 */
.wcl-slide-body > .pe-wcl-row-single:first-child { margin:0 0 36px; }
.wcl-slide-body > .pe-wcl-row-single { margin:20px 0; }

/* P0+（2026-08-13 批量微调）：审题速览（第 1 页）改为顶部对齐 —— 移除之前 Request H·Part6 的
 * justify-content:center 垂直居中（展示端内容被挤到中下部、顶部巨大留白、与编辑端紧凑排版不一致）。
 * 现在与编辑端一致：标题+题目卡+审题卡靠上排列，两端肉眼同步。 */
.wcl-slide.wcl-slide-exam-overview { min-height:100%; display:flex; flex-direction:column; }
.wcl-slide.wcl-slide-exam-overview > .wcl-slide-body { flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }
/* P0+（2026-08-13）：审题速览卡片正文默认 26px（全局规范；标题块字号走 richText 内联，此处兜底） */
.wcl-slide-exam-overview .wcl-ub-x, .pe-wcl.pe-wcl-k-exam-overview .wcl-ub-x { font-size:26px; }
.wcl-slide-exam-overview .wcl-ub-t, .pe-wcl.pe-wcl-k-exam-overview .wcl-ub-t { font-size:28px; font-weight:800; color:#e11d48; }

/* 同页揭示（需求 #3）：opacity 0→1、translateY 12→0、scale .985→1，420ms
   整页同时出现多张卡片时（reveal:'all'），用 --wgi 让它们错开 120ms 依次浮现。 */
.wcl-groups { display:flex; flex-direction:column; gap:18px; }
/* 语言支持组卡并排（工单 #4）：编辑器把要点组拖成 row 后，课堂端组卡按 rowW 等比例横排 */
.wcl-groups.wcl-groups-row { flex-direction:row; flex-wrap:wrap; align-items:stretch; }
.wcl-groups.wcl-groups-row > .wcl-group { flex:0 0 auto; min-width:0; }
.wcl-groups.wcl-groups-row > .wcl-group > .wcl-point { height:100%; }
.wcl-group { display:none; }
.wcl-group.show { display:block; animation:wclReveal 420ms var(--wcl-ease) both; }
.wcl-groups.wcl-stagger > .wcl-group.show { animation-delay:0ms; }   /* 内部卡片 stagger 错位取消：所有分组同步入场，避免各元素闪入抖动 */
@keyframes wclReveal { from { opacity:0; transform:translateY(12px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
/* 柔和聚光：当前讲解卡片轻微抬升 + 描边加强 */
.wcl-group.show:last-of-type > .wcl-panel,
.wcl-group.show:last-of-type > .wcl-sc,
.wcl-group.show:last-of-type > .wcl-point,
.wcl-group.show:last-of-type > .wcl-fn,
.wcl-group.show:last-of-type > .wcl-conn-grp,
.wcl-group.show:last-of-type > .wcl-num { transform:translateY(-2px); border-color:#f9a8b4; box-shadow:0 14px 34px rgba(244,63,94,.13); transition:transform 280ms var(--wcl-ease),box-shadow 280ms var(--wcl-ease),border-color 280ms var(--wcl-ease); }

.wcl-subhead { font-size:var(--wcl-h3); font-weight:800; color:#9f1239; margin-bottom:16px; }
.wcl-hint-sm { display:flex; align-items:center; gap:8px; font-size:var(--wcl-hint); color:#94a3b8; margin-bottom:16px; }
.wcl-core-dot { display:inline-block; width:14px; height:14px; border-radius:4px; background:#EDE9FE; border:1px solid #c4b5fd; }
.wcl-wc { display:inline-flex; align-items:center; gap:8px; font-size:var(--wcl-label); font-weight:700; color:#e11d48; background:#fff1f2; border:1px solid #fecdd3; padding:5px 14px; border-radius:999px; margin-bottom:16px; }
.wcl-empty { text-align:center; color:#94a3b8; font-size:var(--wcl-hint); padding:48px 0; }
.wcl-empty-sm { color:#a1aab8; font-size:var(--wcl-label); }

/* ---------- 通用面板卡片 ---------- */
.wcl-panel { background:#fff; border:1px solid #F1E3E5; border-radius:18px; padding:24px 28px; box-shadow:0 6px 20px rgba(244,63,94,.05); }
.wcl-panel + .wcl-panel { margin-top:0; }
.wcl-panel-h { display:flex; align-items:center; gap:10px; font-size:var(--wcl-h3); font-weight:800; color:#9f1239; margin-bottom:18px; }
.wcl-panel-h svg { color:#f43f5e; }

/* ---------- 第 1 页 · 审题速览（需求 #1）----------
   结构：顶部「写作题目」原文卡（pre-wrap 原样保留段落/编号/换行/项目符号）
        + 5 张审题卡（体裁 / 人称 / 主要时态 / 写作对象 / 写作目的）。
   全部白底 + 细粉描边 + 18px 圆角 + 轻投影；卡片入场按 --wgi 错开 120ms。 */
.wcl-topic { background:#fff; border:1px solid #F3DDE1; border-radius:20px; padding:22px 26px; box-shadow:0 6px 18px rgba(244,63,94,.06); margin-bottom:18px;
  animation:wclReveal 420ms var(--wcl-ease) backwards; animation-delay:calc(var(--wgi,0) * 120ms); }
.wcl-topic-h { display:flex; align-items:center; gap:10px; font-size:var(--wcl-h3); font-weight:800; color:#9f1239; margin-bottom:14px; }
.wcl-topic-h svg { color:#f43f5e; }
/* 只有题目正文区滚动，绝不截断；宁可卡片更高，也留出底部操作栏空间 */
.wcl-topic-body { white-space:pre-wrap; word-break:break-word; color:#1f2937; line-height:1.75; max-height:38vh; overflow-y:auto; padding-right:8px; }
.wcl-tq-s1 { font-size:clamp(22px,1.8vw,24px); }    /* ≤120 字 */
.wcl-tq-s2 { font-size:clamp(20px,1.62vw,22px); }   /* 121–180 字 */
.wcl-tq-s3 { font-size:clamp(18px,1.45vw,20px); }   /* >180 字，下限 18px */
.wcl-topic-body::-webkit-scrollbar { width:8px; }
.wcl-topic-body::-webkit-scrollbar-thumb { background:#F1D7DC; border-radius:8px; }
.wcl-topic-body::-webkit-scrollbar-track { background:transparent; }

/* 教师「增加区块」注入的自定义文本（编辑器端追加、同步到课堂展示） */
.wcl-user-blocks { margin-top:18px; padding:14px 18px; background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border:1px dashed #d97706; border-radius:14px; }
.wcl-user-blocks-head { font-size:12px; font-weight:700; color:#92400e; letter-spacing:.5px; margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.wcl-user-blocks-head::before { content:''; width:6px; height:6px; border-radius:50%; background:#d97706; }
.wcl-user-block { font-size:clamp(15px,1.4vw,18px); line-height:1.6; color:#1e293b; padding:4px 0; }
.wcl-user-block + .wcl-user-block { margin-top:6px; border-top:1px dashed rgba(217,119,6,.3); padding-top:10px; }

/* 教师结构化区块（编辑端与课堂展示共用同一套样式，保证编辑≈展示） */
.wcl-ub-grid { display:grid; grid-template-columns:repeat(6,1fr); row-gap:var(--row-gap,20px); column-gap:var(--col-gap,14px); align-items:stretch; }
/* 第 21 轮（layout 不同步修复）：.pe-wcl-row 在 WCL_EDIT_CSS 里通过 S='.pe-wcl.pe-wcl ' 限定到编辑器，
   课堂端复用 renderSlide 输出（含 .pe-wcl-row）但 CSS 不生效 → 块在 row 里只占内容尺寸。
   这里补全局规则让 .pe-wcl-row 在 grid 内也是 flex 容器，块的 flex:1 1 0 才能等分占满。 */
.wcl-ub-grid > .pe-wcl-row { position:relative; display:flex; align-items:stretch; gap:var(--gap,14px); min-width:0; flex-wrap:nowrap; grid-column:1 / -1; }
.wcl-ub-grid > .pe-wcl-row-single { display:flex; align-items:stretch; min-width:0; flex-wrap:nowrap; grid-column:1 / -1; }
/* 悬浮形状图层（工单 #3「插入形状」）：课堂端形状是纯展示的绝对定位悬浮层。
   整层 pointer-events:none —— 绝不挡滚动/点击，也不参与任何排版计算。 */
.wcl-shapes-layer { position:absolute; inset:0; pointer-events:none; z-index:30; overflow:visible; }
.wcl-shape { position:absolute; pointer-events:none; }
.wcl-shape svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.wcl-shape-txt { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  padding:6px 10px; text-align:center; color:#fff; font-size:15px; line-height:1.4;
  overflow:hidden; overflow-wrap:anywhere; word-break:break-word; text-shadow:0 1px 2px rgba(0,0,0,.35); }
/* 工单 #1：同一页内多个独立网格（topicgrid/cardgrid/userzone…）直接堆叠时，
   网格之间没有 gap 只有内部 row-gap → 「新增区块（页尾自由块）紧贴上方区块」的真因。
   相邻网格之间补上与全局行距同值的 margin（每个网格内联 --row-gap 已带全局设定，
   var() 取后一个网格自己的值 = 常规/紧凑/宽松 均正确）。课堂端 .wcl-groups 后的
   教师块网格同样补上，编辑端与展示端间距一致。 */
.wcl-slide-body > .wcl-ub-grid + .wcl-ub-grid { margin-top:var(--row-gap, 28px); }
.wcl-slide-body > .wcl-groups + .wcl-ub-grid { margin-top:var(--row-gap, 28px); }
.wcl-ub-row { display:flex; align-items:stretch; gap:0; grid-column:1 / -1; flex-wrap:nowrap; }
.wcl-ub-row-item { min-width:0; display:flex; }
.wcl-ub-row-item > .wcl-ub { width:100%; }
/* P0（2026-08-11）：长文本横向溢出修复 —— 卡内正文/标题强制折行（不截断、不撑破画布）。
   overflow-wrap:break-word 允许长单词断行但优先空格处断；min-width:0 解除 flex 子项最小内容宽。 */
.wcl-ub, .wcl-ub * { overflow-wrap:break-word; word-break:break-word; }
.wcl-ub-bd, .wcl-ub-x, .wcl-ub-t, .wcl-tc-body, .wcl-tc-title, .wcl-ub-hd { min-width:0; max-width:100%; }
.wcl-ub-gap { flex:0 0 auto; display:block; }
/* P0+（2026-08-13 工单）：blank 占位符的 richtext <mark> 高亮（编辑端 + 课堂端）—— 替代旧 ::before 外部壳，
 * 聚焦不消失、点击编辑不改变色、课堂端稳定显示。 */
.wcl-slide .prs-block mark.pe-wcl-blank-hint,
.wcl-slide .prs-block .pe-wcl-blank-hint {
    background: #FFE4E6; color: #e11d48; font-weight: 700;
    padding: 0 4px; border-radius: 4px; letter-spacing: .3px;
}
[data-theme="dark"] .wcl-slide .prs-block mark.pe-wcl-blank-hint,
[data-theme="dark"] .wcl-slide .prs-block .pe-wcl-blank-hint {
    background: rgba(244,63,94,.22); color: #fda4af;
}
/* 空行：纯占位，课堂展示端完全透明无痕（教师端的虚线提示只在 hover 时出现，见 presentation-wcl-edit.js） */
.wcl-ub-spacer { background:transparent; border:0; border-radius:10px; }
.wcl-ub { position:relative; display:flex; gap:12px; align-items:flex-start; padding:16px 18px;
  background:#fff; border:1px solid #F3DDE1; border-radius:14px; box-shadow:0 6px 18px rgba(244,63,94,.06); min-width:0; }
/* 工单 R4：图标信息卡横/竖排版切换（与标题正文卡对齐，默认竖向 stack） */
.wcl-ub.wcl-tc-stack { flex-direction:column; align-items:stretch; }
.wcl-ub.wcl-tc-stack .wcl-ub-hd { flex:1 1 auto; width:100%; min-width:0; }
.wcl-ub.wcl-tc-stack .wcl-ub-bd { width:100%; min-width:0; }
.wcl-ub.wcl-tc-row { flex-direction:row; align-items:flex-start; }
.wcl-ub.wcl-tc-row .wcl-ub-hd { flex:0 0 var(--tc-title-pct,38%); min-width:0; }
/* 工单 T2：标题/正文占比调节条（课堂端只显示虚线，不参与拖拽） */
.pe-tc-divider { flex:0 0 12px; position:relative; align-self:stretch; cursor:col-resize; opacity:0; transition:opacity .12s; z-index:6; margin:0 -1px; user-select:none; }
.wcl-tc-row .pe-tc-divider, .wcl-ub.wcl-tc-row .pe-tc-divider { display:block; }
.wcl-tc-row:hover .pe-tc-divider, .wcl-ub.wcl-tc-row:hover .pe-tc-divider { opacity:1; }
.pe-tc-divider::before { content:''; position:absolute; left:50%; top:8px; bottom:8px; width:1px; transform:translateX(-50%); border-left:1px dashed #cbd5e1; }
.pe-tc-divider:hover::before { border-left-color:#94a3b8; }
.wcl-ub-text { display:block; padding:14px 18px; font-size:26px; line-height:1.5; color:#1f2937; text-indent:0; text-align:justify; } /* #1205 曾设首行缩进 2em；#1225c 老师明确「不要求首行缩进」→ 归零，保留两端对齐 + 1.5 行距 */
/* #1225c：正文分段——富文本的多段落会渲染成多个 <p class="pr-p">，
   但本文件开头的全局 reset（* { margin:0 }）把 <p> 的浏览器默认外边距清零了，
   段落之间会严丝合缝贴在一起，看起来仍像「挤在同一段」。这里补回段间距，末段不留尾巴。
   与课堂端 .prs-block .pr-p 的 0.5em（presentation-render.js 注入）同源同理。
   限定在课件正文容器内（.wcl-ub-text / .wcl-ub-x），不波及其他工具的富文本排版。 */
.wcl-ub-text .pr-p, .wcl-ub-x .pr-p { margin:0 0 .6em; }
.wcl-ub-text .pr-p:last-child, .wcl-ub-x .pr-p:last-child { margin-bottom:0; }
/* 工单 #1236：课件正文加粗字重从 700 提到 800，系统黑体在大屏上粗体更明显（解决「加粗看不出区别」） */
.wcl-ub-text strong, .wcl-ub-x strong, .wcl-ub-text b, .wcl-ub-x b { font-weight: 800; }

/* 🆕 2026-08-14 写开始页口号：「开始写吧！Plan it. Write it. Make it yours.」= 32px 加粗红 + 打字出现
 * · 字号 32px / 粗 800 / 红色 #e11d48（项目强调红）；
 * · 打字效果 = clip-path inset 从右往左扫（多行可用），steps(18) ≈ 18 个字逐字显现；
 * · 播放 1 次（forwards 停在终态），不循环，不影响老师后续编辑（动画结束后 contenteditable 正常）。 */
.wcl-ub-sub .wcl-ub-bd { padding:6px 0; }
.wcl-ub-sub .wcl-ub-bd > .wcl-ub-x,
.wcl-ub-sub .wcl-ub-bd > .wcl-ub-x-reveal { color:#e11d48; font-size:32px; font-weight:800; line-height:1.35; letter-spacing:.01em;
  display:inline-block; overflow:hidden; word-break:break-word; max-width:100%;
  clip-path:inset(0 100% 0 0); animation:wclWsSubTypewriter 1.6s steps(18,end) forwards; }
.wcl-ub-sub .wcl-ub-bd > .wcl-ub-x > [data-text], .wcl-ub-sub .wcl-ub-bd > .wcl-ub-x > span, .wcl-ub-sub .wcl-ub-bd > .wcl-ub-x > div { display:inline; }
@keyframes wclWsSubTypewriter { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce){ .wcl-ub-sub .wcl-ub-bd > .wcl-ub-x { animation:none; clip-path:inset(0 0 0 0); } }
/* 🐛 2026-08-14 两端同步：卡内标题基础定义（编辑端/展示端统一 32px #9f1239；slide-scoped 可覆盖） */
.wcl-ub-t { font-size:32px; font-weight:800; color:#9f1239; margin-bottom:6px; } /* S3：纯文字区块正文统一 32px（P0+ 2026-08-13 全局强制） */
/* P0+（2026-08-13 第三轮强制重构）：写作要求页严格垂直一字排开 ——
 * 大 padding（水平 32px / 垂直 24px，文字与卡片边缘 24~32px 舒适距离）、
 * 大区块间宽敞垂直间距（--row-gap 22px）、正文统一 32px（覆盖全局 26px）。 */
.wcl-slide-exam-require .wcl-slide-body, .pe-wcl.pe-wcl-k-exam-require .wcl-slide-body { --row-gap:22px; }
.wcl-slide-exam-require .wcl-ub-grid, .pe-wcl.pe-wcl-k-exam-require .wcl-ub-grid { --col-gap:0; --row-gap:16px; }
.wcl-slide-exam-require .wcl-ub-text, .pe-wcl.pe-wcl-k-exam-require .wcl-ub-text { padding:24px 32px; font-size:26px; line-height:1.6; }
.wcl-slide-exam-require .wcl-ub:not(.wcl-ub-text):not(.wcl-ub-frameless), .pe-wcl.pe-wcl-k-exam-require .wcl-ub:not(.wcl-ub-text):not(.wcl-ub-frameless) { padding:24px 32px; }
.wcl-slide-exam-require .wcl-ub-x p, .pe-wcl.pe-wcl-k-exam-require .wcl-ub-x p { margin:0 0 6px 0; font-size:26px; line-height:1.6; }
.wcl-slide-exam-require .wcl-ub-x p:last-child, .pe-wcl.pe-wcl-k-exam-require .wcl-ub-x p:last-child { margin-bottom:0; }
/* P0+（2026-08-13 全局强制）：「易漏点提醒」hdTitle 渲染在 .wcl-ub-t（与图标同处 .wcl-ub-hd 水平并排）——
 * 标题 28px 加粗红，保证图标与文字严格 flex-row 居中，杜绝上下堆叠。 */
.wcl-slide-exam-require .wcl-ub-t, .pe-wcl.pe-wcl-k-exam-require .wcl-ub-t { font-size:28px; font-weight:800; color:#e11d48; line-height:1.4; }
/* 工单 #1 + P6 返工：无边框纯文字文档块（课堂端与编辑端同款无边框/无背景/占满整行）。
   模板D（2026-08-10）：紧凑单行文档排版 —— padding 归零、字号 26px、行高 1.6。 */
.wcl-ub-frameless { background:transparent; border:0; box-shadow:none; border-radius:0; padding:0; width:100%; max-width:100%; min-width:0; font-size:26px; line-height:1.6; white-space:pre-wrap; word-break:break-word; overflow-wrap:break-word; cursor:text; }
/* 工单 S1：无边框块内任何位置恒为文本光标（含子元素），不出现箭头/手型闪烁 */
.wcl-ub-frameless, .wcl-ub-frameless * { cursor:text !important; }
/* 工单 #6：无边框块紧凑行距（负 margin 抵消 grid row-gap）—— 段落即区块，2px/8px */
.wcl-ub-grid > .wcl-ub-frameless { grid-column: 1 / -1; } /* 工单 G2：课堂端 frameless 占满整行（与编辑端一致） */
.wcl-ub-grid > .wcl-ub-frameless:first-child { margin-top:8px; }
.wcl-ub-grid > .wcl-ub-frameless:not(:first-child):not(.wcl-ub-frameless + .wcl-ub-frameless) { margin-top:calc(var(--row-gap,28px) * -1 + 8px); }
.wcl-ub-grid > .wcl-ub-frameless + .wcl-ub-frameless { margin-top:calc(var(--row-gap,28px) * -1 + 2px); }
/* 工单 #7：行内并排时 frameless 宽度交给 flex */
.wcl-slide-body .pe-wcl-row > .wcl-ub-frameless { width:auto !important; max-width:none; flex:var(--rw,1) 1 0; min-width:56px; }
/* 第 21 轮：行内并排时所有 .wcl-ub 都走 flex:var(--rw,1) 1 0（含 .wcl-ub-reveal/.wcl-ub-text/.wcl-ub-titlecard）——
   之前只有 .wcl-ub-frameless 有这条规则，exq 块（.wcl-ub-reveal）在 .pe-wcl-row 里只占内容尺寸
   (165px)，导致课堂端块极窄。补这条通用规则让 row 内的所有块等分（flex:1 1 0）。
   🆕 2026-08-14 修复：行内块加了 width:0 + min-width:0 强制让 flex 算法按 --rw 比例分配，避开
   .wcl-ub-lang（display:flex）和 .wcl-ub-vocab（content 撑满）的内容固有宽度干扰，否则并排兄弟会
   被其中一个撑爆成 100%（用户报「拖到并排被吃掉」）。单块行容器走 .pe-wcl-row-single 规则不受影响。 */
.wcl-slide-body .pe-wcl-row > .wcl-ub { flex: var(--rw,1) 1 0; width:0; min-width: 0; }
/* 工单 #2：大/中/小标题预设字号（课堂端与编辑端同款；CSS 类低优先级，用户工具栏可覆盖不锁死） */
/* 工单 W1：大/中/小标题字号统一 32/28/26（课堂端与编辑端一致） */
.wcl-ub-frameless.wcl-ub-h1 { font-size:32px; font-weight:700; line-height:1.4; }
.wcl-ub-frameless.wcl-ub-h2 { font-size:28px; font-weight:700; line-height:1.4; }
.wcl-ub-frameless.wcl-ub-h3 { font-size:26px; font-weight:700; line-height:1.4; }
/* ===== 工单 #1087/#1095：mermaid 流程图块（无边框）===== */
/* 编辑端显示可编辑代码框 + 缩放工具栏；课堂端 / 分享端仅渲染图，隐藏代码框与工具栏 */
/* 布局：上编辑框 + 下图（撑满整行）；列排，不被全局 .wcl-ub 的 flex 横排影响 */
.wcl-ub-mermaid {
    display:flex !important; flex-direction:column !important; align-items:stretch;
    width:100% !important; min-width:100% !important; flex:1 1 100% !important;
}
/* 覆盖 .wcl-slide-body .pe-wcl-row > .wcl-ub 的 width:0/flex:0 收缩，保证流程图块占满整行 */
.wcl-slide-body .pe-wcl-row > .wcl-ub-mermaid,
.wcl-slide-body .wcl-ub-grid > .wcl-ub-mermaid { width:100% !important; flex:1 1 100% !important; min-width:0; }
.wcl-ub-mermaid-render {
    width:100%; min-height:60px;
    /* 工单 #1107：非常淡的淡灰色外壳 —— 背景改成图片时图仍清晰可见；圆角 + 轻内边距包住整张图 */
    background: rgba(241, 245, 249, 0.66);
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 14px;
    padding: 14px 10px;
    overflow-x:auto; overflow-y:auto;       /* 放大超过 100% 可横向滚动；竖向过长可纵向滚动，避免撑爆整页 */
    max-height:520px;                        /* 编辑端限制图区高度，长流程图滚动查看，不撑大 16:9 画布 */
}
/* 缩放：SVG 宽度 = 100% × --mmd-zoom（百分比），矢量等比拉伸，字号随图一起放大。
   必须 max-width:none !important —— 否则被 .wcl-ub-frameless / 全局 max-width:100% 卡死在 100%，
   放大（zoom>100）永远不生效（验收：点 + 图不变大）。min-width 也取消，<100% 时允许缩小。 */
.wcl-ub-mermaid-zoomwrap { width:calc(var(--mmd-zoom, 100) * 1%); max-width:none !important; min-width:0; }
/* 工单 #1107：字号 18px→14px（文字不再溢出文字框）；取消 drop-shadow 廉价感，保留极淡投影 */
.wcl-ub-mermaid-render svg { width:100% !important; max-width:none !important; height:auto !important; display:block; font-size:14px; filter: drop-shadow(0 4px 12px rgba(15,23,42,.08)); }
.wcl-ub-mermaid-render svg text, .wcl-ub-mermaid-render svg .nodeLabel, .wcl-ub-mermaid-render svg .edgeLabel { font-size:14px !important; }
/* 缩放工具栏（仅编辑端 .pe-canvas 显示） */
.wcl-ub-mermaid-toolbar {
    display:none; align-items:center; gap:8px; margin:6px 0 2px;
    font-size:13px; color:#475569; user-select:none;
}
.pe-canvas .wcl-ub-mermaid-toolbar { display:flex; }
.wcl-mz-btn {
    width:28px; height:28px; border:1px solid #e2e8f0; background:#fff; border-radius:6px;
    font-size:16px; line-height:1; cursor:pointer; color:#334155; display:inline-flex; align-items:center; justify-content:center;
}
.wcl-mz-btn:hover { background:#f1f5f9; border-color:#cbd5e1; }
.wcl-mz-reset { width:auto; padding:0 10px; font-size:13px; }
.wcl-mz-val { min-width:42px; text-align:center; font-variant-numeric:tabular-nums; }
.wcl-ub-mermaid-src {
    display:none; width:100%; box-sizing:border-box; margin-bottom:12px;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.5;
    border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; background:#f8fafc; color:#334155;
    resize:vertical; min-height:64px; white-space:pre; outline:none;
}
.pe-canvas .wcl-ub-mermaid-src { display:block; }
.pe-canvas .wcl-ub-mermaid-src:focus { border-color:#94a3b8; background:#fff; }
.wcl-mermaid-empty, .wcl-mermaid-err { font-size:14px; color:#94a3b8; padding:10px 4px; white-space:pre-wrap; word-break:break-word; }
.wcl-mermaid-err { color:#b91c1c; background:#fef2f2; border:1px solid #fecaca; border-radius:8px; }
/* 🆕 2026-08-24 表格区块（工单 #1138）：Morandi 风格、圆角、斑马纹、扁平无重阴影。
   编辑端/课堂端共用同一份 CSS（经 Render.injectCss 注入 iframe），两端布局一致；
   编辑态单元格 contenteditable 可改字，课堂端经 wclCleanSlideHtml 剥离 contenteditable 自动只读。 */
.wcl-ub-table { position:relative; display:flex; flex-direction:column; }
.wcl-ub-table-src {
    display:none; width:100%; box-sizing:border-box; margin-bottom:12px; order:1;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; line-height:1.5;
    border:1px solid #e2e8f0; border-radius:8px; padding:8px 10px; background:#f8fafc; color:#334155;
    resize:vertical; min-height:64px; white-space:pre; outline:none;
}
.pe-canvas .wcl-ub-table-src { display:block; }
.pe-canvas .wcl-ub-table-src:focus { border-color:#94a3b8; background:#fff; }
/* 缩放条（编辑态专属，课堂端被剥离）→ 置于源码框之上 */
.wcl-ub-table-zoombar { display:flex; gap:8px; align-items:center; order:0; margin-bottom:8px; }
.pe-canvas .wcl-ub-table-zoombar { display:flex; }
.wcl-tb-zoom-val { min-width:46px; text-align:center; font-variant-numeric:tabular-nums; font-size:13px; color:#475569; }
.wcl-ub-table-render { width:100%; overflow:auto; order:2; }
/* 缩放：渲染容器以 --tb-zoom 为基准等比放大缩小（编辑态/课堂态共用同一 zoom 值） */
.wcl-ub-table-render[data-table-zoom] .wcl-table { width:calc(100% * var(--tb-zoom) / 100); min-width:100%; }
.wcl-table {
    border-collapse:separate; border-spacing:0; width:100%;
    font-size:17px; line-height:1.6; color:#334155;
    border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; background:#fff;
}
.wcl-table th, .wcl-table td {
    padding:12px 16px; text-align:left; vertical-align:top;
    border-bottom:1px solid #eef1f6; border-right:1px solid #eef1f6;
}
.wcl-table th:last-child, .wcl-table td:last-child { border-right:none; }
.wcl-table tr:last-child td { border-bottom:none; }
/* 行/列拖拽手柄（编辑态专属，课堂端无 data-pe-wcl → 不显示；手柄以 row-resizer / col-resizer 出现） */
.wcl-table .tb-resizer { position:absolute; background:transparent; z-index:4; }
.wcl-table .tb-col-resizer { top:0; right:-4px; width:8px; height:100%; cursor:col-resize; }
.wcl-table .tb-row-resizer { left:0; bottom:-4px; height:8px; width:100%; cursor:row-resize; }
.wcl-table .tb-resizer:hover { background:rgba(99,102,241,.18); }
.wcl-table .tb-resizer.tb-dragging { background:rgba(99,102,241,.35); }
/* 学术蓝灰表头：indigo 系低饱和，加粗 */
.wcl-table thead th { background:#EEF2FF; color:#4338CA; font-weight:700; border-bottom:1px solid #c7d2fe; }
/* 斑马纹：白 / 极浅冷灰 */
.wcl-table tbody tr:nth-child(even) td { background:#F8FAFC; }
.wcl-table tbody tr:nth-child(odd) td { background:#ffffff; }
/* 方案 C 升级 #1217b：正确项整行标绿（浅绿底 + 深绿字，首列加绿色左条）。
   用 !important 覆盖斑马纹；编辑/课堂/分享端共用同一 renderTableHtml，故三端一致。 */
.wcl-table tbody td.wcl-tb-correct {
    background:#dcfce7 !important;
    color:#166534 !important;
    font-weight:600;
}
.wcl-table tbody tr td.wcl-tb-correct:first-child { box-shadow: inset 3px 0 0 #16a34a; }
/* 圆角四角干净收口 */
.wcl-table thead th:first-child { border-top-left-radius:9px; }
.wcl-table thead th:last-child { border-top-right-radius:9px; }
.wcl-table tbody tr:last-child td:first-child { border-bottom-left-radius:9px; }
.wcl-table tbody tr:last-child td:last-child { border-bottom-right-radius:9px; }
/* 编辑态单元格可点选改字 */
.wcl-ub-table .wcl-table td[contenteditable="true"] { cursor:text; outline:none; }
.wcl-ub-table .wcl-table td[contenteditable="true"]:focus { background:#eef4ff; box-shadow:inset 0 0 0 2px #a5b4fc; border-radius:4px; }
/* 工单 #1216：单元格多选高亮（click 单选 / Ctrl(Cmd)+click 切换 / Shift+click 范围 / 工具栏全选）。
   与聚焦描边区分：选中用蓝底 + 内描边，聚焦（光标所在）用更亮蓝。两者可叠加。 */
.wcl-ub-table .wcl-table [data-table-cell].wcl-tb-cell-selected {
    background:#dbeafe !important;
    box-shadow:inset 0 0 0 2px #3b82f6 !important;
    border-radius:4px;
}
.wcl-ub-table .wcl-table [data-table-cell].wcl-tb-cell-selected:focus {
    background:#bfdbfe !important;
    box-shadow:inset 0 0 0 2px #2563eb !important;
}
/* 编辑端专属工具栏（课堂/分享端经 wclCleanSlideHtml 剥离 data-pe-wcl 自动隐藏） */
.wcl-ub-table-toolbar { display:flex; gap:8px; order:3; margin-top:12px; flex-wrap:wrap; }
.pe-canvas .wcl-ub-table-toolbar { display:flex; }
.wcl-tb-btn {
    border:1px solid #d8dee9; background:#fff; color:#475569; border-radius:8px;
    padding:6px 12px; font-size:13px; cursor:pointer; line-height:1;
}
.wcl-tb-btn:hover { background:#f1f5f9; border-color:#cbd5e1; color:#1e293b; }
/* 工单 #1213：单元格整格样式控件（字号/颜色/加粗），与增删行列同组，作用于当前聚焦单元格 */
.wcl-tb-sep { width:1px; height:20px; background:#e2e8f0; margin:0 2px; }
.wcl-tb-cell-ctl { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#64748b; line-height:1; }
.wcl-tb-hint { color:#94a3b8; font-size:12px; }
.wcl-tb-select { border:1px solid #d8dee9; background:#fff; color:#475569; border-radius:8px; padding:5px 6px; font-size:13px; cursor:pointer; }
.wcl-tb-select:hover { border-color:#cbd5e1; }
.wcl-tb-color { width:28px; height:28px; padding:0; border:1px solid #d8dee9; border-radius:8px; background:#fff; cursor:pointer; }
.wcl-tb-bold { font-weight:800; font-family:Georgia, 'Times New Roman', serif; min-width:30px; }
.wcl-tb-bold.is-active { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; }
/* 工单 #1112：mermaid 全屏阅读按钮（编辑端 + 课堂端通用，常显于区块右上角；不使用 data-pe-wcl 以免被课堂端清除） */
.wcl-ub-mermaid { position:relative; }
.wcl-mz-fullscreen {
    position:absolute; top:8px; right:8px; z-index:6;
    width:30px; height:30px; border:1px solid rgba(148,163,184,.5); background:rgba(255,255,255,.92);
    border-radius:8px; cursor:pointer; color:#334155; display:inline-flex; align-items:center; justify-content:center;
    font-size:16px; line-height:1; box-shadow:0 2px 8px rgba(15,23,42,.12); user-select:none;
}
.wcl-mz-fullscreen:hover { background:#fff; border-color:#94a3b8; color:#0f172a; }
/* 工单 #1112：全屏浮层（编辑端在 iframe 文档内、课堂端在主文档，覆盖各自视口） */
.wcl-mz-fs {
    position:fixed; inset:0; z-index:99999; display:none; flex-direction:column;
    background:rgba(15,23,42,.78);
}
.wcl-mz-fs[contenteditable="false"] { user-select:none; }
.wcl-mz-fs-bar {
    flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:10px 16px;
    background:rgba(255,255,255,.96); border-bottom:1px solid #e2e8f0;
}
.wcl-mz-fs-title { font-size:15px; font-weight:700; color:#0f172a; }
.wcl-mz-fs-zoom { display:flex; align-items:center; gap:8px; margin-left:auto; }
.wcl-mz-fs-btn {
    width:30px; height:30px; border:1px solid #e2e8f0; background:#fff; border-radius:7px; font-size:17px; line-height:1;
    cursor:pointer; color:#334155; display:inline-flex; align-items:center; justify-content:center;
}
.wcl-mz-fs-btn:hover { background:#f1f5f9; border-color:#cbd5e1; }
.wcl-mz-fs-reset { width:auto; padding:0 12px; font-size:13px; }
.wcl-mz-fs-val { min-width:48px; text-align:center; font-variant-numeric:tabular-nums; color:#475569; font-size:14px; }
.wcl-mz-fs-close {
    width:34px; height:34px; border:1px solid #e2e8f0; background:#fff; border-radius:8px; font-size:20px; line-height:1;
    cursor:pointer; color:#ef4444; display:inline-flex; align-items:center; justify-content:center; margin-left:10px;
}
.wcl-mz-fs-close:hover { background:#fef2f2; border-color:#fecaca; }
.wcl-mz-fs-scroll {
    flex:1 1 auto; overflow:auto; display:flex; align-items:flex-start; justify-content:flex-start;
    padding:28px; box-sizing:border-box; cursor:grab;
}
.wcl-mz-fs-scroll:active { cursor:grabbing; }
.wcl-mz-fs-svg {
    background:#fff; border-radius:14px; padding:24px; box-shadow:0 12px 40px rgba(0,0,0,.35);
    width:100%; max-width:none; min-height:120px; display:flex; align-items:center; justify-content:center;
    flex:0 0 auto;   /* 放大（width>100%）不被 flex-shrink 压回容器宽，超出部分由滚动容器承载 */
}
.wcl-mz-fs-svg svg { width:100% !important; max-width:none !important; height:auto !important; display:block; }
/* ===== 工单 #1095：插入区块下拉面板支持滚动（菜单无样式导致长列表被截断，mermaid 看不到）===== */
.pe-ub-insertmenu {
    max-height:min(60vh, 360px); overflow-y:auto; overflow-x:hidden;
    background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 8px 28px rgba(15,23,42,.18);
    padding:6px; min-width:200px;
}
.pe-ub-insertmenu .pe-menu-t { font-size:12px; color:#94a3b8; padding:4px 10px 6px; }
.pe-ub-insertmenu .pe-menu-i {
    display:flex; align-items:center; gap:10px; width:100%; box-sizing:border-box;
    padding:9px 10px; border:0; background:transparent; border-radius:8px; cursor:pointer; text-align:left; color:#1f2937; font-size:14px;
}
.pe-ub-insertmenu .pe-menu-i:hover { background:#f1f5f9; }
.pe-ub-insertmenu .pe-menu-i b { font-weight:600; }
.pe-ub-insertmenu .pe-menu-ico { width:20px; height:20px; flex:0 0 20px; display:inline-flex; align-items:center; justify-content:center; color:#e11d48; }
/* 收纳区块（toggle 折叠容器）：标题栏点击切换。
 * 2026-08-27 二次返工：**去掉白色外壳 + 去掉默认淡蓝胶囊底色**；标题 22px 加粗保持；
 * 行距进一步压紧（margin 0 / head·body 紧凑 padding / gap 2px）；内容字号 inherit。 */
.wcl-ub-toggle { border:0; border-radius:0; background:transparent; overflow:visible; margin:0; }
.wcl-ub-toggle:hover { background:rgba(59,130,246,.05); box-shadow:none; }
.wcl-toggle-head { display:flex; align-items:center; gap:4px; padding:0 2px; cursor:pointer; background:transparent; user-select:none; line-height:1.1; }
.wcl-toggle-arrow { font-style:normal; font-size:11px; color:#64748b; width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 16px; line-height:1; }
.wcl-toggle-arrow.wcl-toggle-has-child { color:#3b82f6; }
.wcl-toggle-title { flex:0 1 auto; max-width:100%; min-width:0; font-weight:700; color:#1e40af; font-size:22px; line-height:1.2; text-align:left; }
.wcl-toggle-title .prs-block { display:inline-block; width:auto; min-width:0; padding:1px 2px; min-height:1.4em; background:transparent; border-radius:0; }
.wcl-toggle-title .prs-block:has([class*="pr-hl"]) { background:transparent; padding:1px 2px; }
.wcl-toggle-body { padding:0 0 0 22px; background:transparent; border-top:0; display:flex !important; flex-direction:column !important; align-items:stretch; gap:2px; min-height:0; font-size:inherit; line-height:inherit; }
.wcl-toggle-child { width:100%; min-width:0; }
.wcl-toggle-collapsed { display:none !important; }
/* 2026-08-27：收纳空正文占位条（编辑端交互：点击创建正文子块） */
.wcl-toggle-empty { padding:2px 6px; color:#94a3b8; font-size:15px; line-height:1.5; cursor:text; border-radius:8px; user-select:none; }
.wcl-toggle-empty:hover { background:rgba(59,130,246,.07); color:#475569; }
/* ===== 2026-08-27：全课件正文默认衬线字体 —— 英文 Times New Roman，中文配对宋体系 =====
 * 只设在画布根容器（.prs-stage-scroll / .wcl-slide），靠 CSS 继承下发给全部正文后代；
 * 这样教师用字体下拉框选中的 .pr-ff-* 内联样式仍能逐字/逐段覆盖 → 字体保持可编辑。
 * 不影响工具栏/侧边栏等管理 UI。 */
.wcl-slide, .prs-stage-scroll {
  font-family:'Times New Roman','Source Han Serif SC','Noto Serif SC','Songti SC','SimSun',serif;
}
/* ===== 2026-08-27：标题默认黑体 + 英文 Arial（不走宋体）=====
 * 覆盖上方继承来的衬线；同样靠继承生效，字体下拉框内联 .pr-ff-* 可覆盖 → 标题字体也可编辑。
 * 覆盖：页标题 / 小节标题 / 大·中·小标题 / 收纳标题 / 写作题标题 / 标题卡标题。 */
.wcl-slide-title, .wcl-subhead, .wcl-topic-h, .wcl-fin-title,
.wcl-ub-frameless.wcl-ub-h1, .wcl-ub-frameless.wcl-ub-h2, .wcl-ub-frameless.wcl-ub-h3,
.wcl-toggle-title, .wcl-tc-title {
  font-family:'Arial','Microsoft YaHei','PingFang SC','Heiti SC','SimHei',sans-serif;
}
/* ===== 工单 O1 + R2 返工：标题正文卡（titlecard，课堂端与编辑端同构）===== */
/* R2：移除左侧红色圆角描边（::before/::after 全部删除）与标题强制胶囊底色 */
.wcl-ub-titlecard { position:relative; background:#fff; border:1px solid #F3DDE1; border-radius:16px; padding:16px 20px; box-shadow:0 6px 18px rgba(244,63,94,.05); }
.wcl-tc-title { font-size:28px; font-weight:800; color:#111827; margin-bottom:6px; } /* S3：全区块标题统一 28px；正文紧贴标题下方 */
.wcl-ub-titlecard.wcl-tc-stack .wcl-tc-bd { display:flex; flex-direction:column; }
.wcl-ub-titlecard.wcl-tc-stack .wcl-tc-body { flex:1 1 auto; }
.wcl-ub-titlecard.wcl-tc-row .wcl-tc-bd { display:flex; flex-direction:row; align-items:flex-start; gap:0; }
.wcl-ub-titlecard.wcl-tc-row .wcl-tc-title { flex:0 0 var(--tc-title-pct,38%); margin-bottom:0; min-width:0; }
.wcl-ub-titlecard.wcl-tc-row .wcl-tc-body { flex:1 1 auto; min-width:0; }
/* ===== 工单 O3：词汇卡（vocab，课堂端）===== */
/* 工单 R6+R7：词汇卡 —— 卡面低饱和莫兰迪丁香紫、无深色描边、hover 提亮；字号分级 32/28/24 */
.wcl-ub-vocab { display:block; border:0; border-radius:12px; background:#EDE9F6; transition:background .18s ease,box-shadow .18s ease; }
.wcl-ub-vocab:hover { background:#F3F0FA; box-shadow:0 0 0 1px rgba(167,139,250,.28),0 4px 14px rgba(167,139,250,.14); }
/* 🆕 2026-08-14 修复：词汇卡 inline width 已剔除 → 单块行内 vocab 必须撑满整行；
 * 行内并排时 vocab 内容（wcl-vocab-head + input）固有 width 撑爆兄弟。
 * 强制 width:0 + min-width:0 让 flex 算法按 --rw 比例分配，避开内容固有宽度干扰。
 * 公共 css/style.css 同时覆盖课堂展示端与编辑端的 .wcl-stage 容器（编辑端 inline style
 * 带 .pe-wcl.pe-wcl 前缀无法命中 .wcl-stage 内的元素，必须在此公共位置声明）。 */
.wcl-stage .pe-wcl-row > .wcl-ub-vocab { flex:var(--rw,1) 1 0; width:0; min-width:0; grid-column:auto !important; overflow:hidden; }
.wcl-stage .pe-wcl-row-single > .wcl-ub-vocab { flex:1 1 0 !important; width:100% !important; max-width:100%; min-width:0; grid-column:auto !important; }
.wcl-vocab-head { display:flex; align-items:center; gap:10px; padding:10px 14px; cursor:pointer; background:#E7E1F3; user-select:none; line-height:1; }
.wcl-vocab-arrow { font-style:normal; font-size:11px; color:#6d5ba6; width:14px; height:14px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px; line-height:1; }
.wcl-vocab-no { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 8px; border-radius:999px; background:#e11d48; color:#fff; font-size:16px; font-weight:700; line-height:1; box-sizing:border-box; }
.wcl-vocab-word { flex:0 1 auto; min-width:0; font-size:32px; font-weight:700; color:#111827; }
.wcl-vocab-meta { flex:1 1 auto; min-width:0; font-size:28px; font-weight:500; color:#6d5ba6; }
.wcl-vocab-tts { flex:0 0 auto; width:36px; height:36px; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid rgba(167,139,250,.35); border-radius:999px; background:#F6F3FC; color:#7c5cbf; font-size:14px; cursor:pointer; transition:all .12s; line-height:1; }
.wcl-vocab-tts:hover { background:#EAE3F8; border-color:#a78bfa; color:#6d28d9; }
.wcl-vocab-body { padding:14px 16px; background:#F6F4FC; border-top:1px solid rgba(167,139,250,.18); border-radius:0 0 12px 12px; font-size:24px; line-height:1.7; color:#1f2937; }
.wcl-vocab-collapsed { display:none !important; }
/* PDF 区块（课堂端与编辑端同款：纯前端 pdf.js 渲染 —— 可滚动容器 + canvas 页堆叠，不再 iframe）
 * 工单 I4：overflow:auto !important 覆盖 .wcl-ub-media>.pe-media-in{overflow:hidden}；
 * 缩放改为 canvas 渲染 scale 直接乘倍数，不再用 transform:scale（布局盒不增长→滚动区不扩展）。 */
.wcl-ub-media .pe-media-in-pdf { position:relative; overflow:auto !important; background:#eef0f4; }
.wcl-ub-media .pe-media-pdf-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#94a3b8; font-size:13px; background:#fff; z-index:1; }
.wcl-ub-media .pe-media-pdf-loading::before { content:''; width:18px; height:18px; margin-right:8px; border:2px solid #e2e8f0; border-top-color:#9f1239; border-radius:50%; animation:pe-spin .7s linear infinite; }
@keyframes pe-spin { to { transform:rotate(360deg); } }
.wcl-ub-media .pe-pdf-canvas-wrap { display:flex; flex-direction:column; align-items:center; gap:10px; padding:10px; min-height:100%; box-sizing:border-box; }
.wcl-ub-media .pe-pdf-canvas { max-width:100%; height:auto; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.14); border-radius:2px; display:block; }
/* 工单 P1（2026-08-12）：长文本全局防溢出 —— 所有课堂内容容器（含静态段落/列表/富文本块）
 * 强制自动换行，杜绝长英文/长 URL 撑破画布。 */
.wcl-slide-body p, .wcl-slide-body li, .wcl-slide-body .prs-block, .wcl-slide-body .wcl-ub,
.wcl-slide-body .wcl-ub *, .wcl-slide-body .wcl-topic-body, .wcl-slide-body .wcl-essay,
.wcl-slide-body .wcl-exq-slot, .wcl-slide-body .wcl-tts-text,
.wcl-full-block, .wcl-full-block *, .wcl-essaypg, .wcl-essaypg *,
.wcl-essay, .wcl-essay * { overflow-wrap:break-word; word-break:break-word; max-width:100%; }
/* 倒计时区块（timer，课堂端与编辑端同款） */
.wcl-ub-timer { background:#fdf6f6; border:1px solid #f6e3e5; border-radius:14px; padding:10px 12px; }
.wcl-timer { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; position:relative; }
.wcl-timer-top { height:0; }
/* TTS 朗读区块（工单 2026-08-12）：白底圆角卡 + 左缘红描边（peStyle 6 档，画在 .wcl-ub-tts 上）；
 * 内部 = 左上角白色圆形喇叭 + 多行文本（左缘与喇叭对齐，换行自动撑高）。编辑端 / 课堂端同构。 */
.wcl-ub-tts { background:#fff; border:1px solid #F3DDE1; border-radius:14px; box-shadow:0 6px 18px rgba(244,63,94,.06); }
.wcl-tts { display:flex; align-items:flex-start; gap:10px; width:100%; min-width:0; }
.wcl-tts-btn { flex:0 0 auto; width:34px; height:34px; margin-top:2px; border-radius:50%; background:#fff;
  border:1px solid #fecdd3; color:#e11d48; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 2px 6px rgba(244,63,94,.14); transition:background .12s, border-color .12s; padding:0; }
.wcl-tts-btn:hover { background:#fff1f2; border-color:#fda4af; }
.wcl-tts-btn.is-speaking { background:#e11d48; border-color:#e11d48; color:#fff; box-shadow:0 2px 8px rgba(225,29,72,.35); }
.wcl-tts-text { flex:1 1 auto; min-width:0; }
.wcl-tts-text .pe-wcl-fill, .wcl-tts-text > [contenteditable] { min-height:20px; white-space:pre-wrap; word-break:break-word; }
/* P0+（2026-08-13 工单）：课堂端教学标注 TTS 卡 —— 段落标签（开头/主体/结尾）与正文分层，
 * 标签放 .wcl-tts-body 顶部（**不在 .wcl-tts-text 内**，避免 TTS 朗读把标签读出来）。 */
.wcl-essay-tts .wcl-tts-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.wcl-essay-tts .wcl-pg-l { margin-top:0; align-self:flex-start; font-size:32px; font-weight:800; }

.wcl-timer-clock { display:flex; align-items:center; gap:4px; justify-content:center; }
.wcl-timer-digit { display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:46px; padding:0 6px; border-radius:10px; background:#1f2937; color:#fff; font-size:32px; font-weight:700; font-variant-numeric:tabular-nums; position:relative; overflow:hidden; }
.wcl-timer-digit::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.16); }
.wcl-timer-sep { background:transparent; color:#1f2937; min-width:10px; font-size:28px; }
.wcl-timer-ctl { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.wcl-timer-btn { border:1px solid #f9c4cc; background:#fff; color:#b91c1c; border-radius:999px; padding:6px 14px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; line-height:1; }
.wcl-timer-btn:hover { background:#fff1f2; }
.wcl-timer-btn.wcl-timer-adj { min-width:34px; justify-content:center; font-size:16px; font-weight:700; }
.wcl-timer-btn.wcl-timer-go { background:#e11d48; border-color:#e11d48; color:#fff; padding:6px 16px; font-weight:600; }
.wcl-timer.running .wcl-timer-btn.wcl-timer-go { background:#475569; border-color:#475569; }
.wcl-timer.done .wcl-timer-clock { animation:wcl-timer-blink 1s steps(2,start) infinite; }
@keyframes wcl-timer-blink { 50% { opacity:.35; } }
.wcl-timer.done .wcl-timer-clock .wcl-timer-digit { background:#b91c1c; }
.wcl-ub-ico { flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:#ffe4e6; color:#e11d48; }
.wcl-ub-ico svg { width:22px; height:22px; }
.wcl-ub-img { width:26px; height:26px; object-fit:contain; }
/* 工单 O4：Emoji 图标 —— 尺寸调小（34→26px）、彻底无底色、与标题同行垂直居中 */
.wcl-ub-emoji { font-size:26px; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; min-width:34px; min-height:34px; background:transparent; }
.wcl-ub-ico:has(.wcl-ub-emoji) { background:transparent !important; width:auto; height:auto; min-width:34px; }
/* O4 返工：ico + 标题同行包裹（Emoji 对着标题行中心，不再是整卡中心） */
.wcl-ub-hd { display:flex; align-items:center; flex-direction:row; gap:12px; margin-bottom:8px; min-width:0; }
.wcl-ub-hd .wcl-ub-t { margin-bottom:0; flex:1 1 auto; min-width:0; }
.wcl-ub-bd { flex:1 1 auto; min-width:0; }
.wcl-ub-t { font-size:28px; font-weight:800; color:#9f1239; margin-bottom:6px; } /* S3：全区块标题统一 28px */
.wcl-ub-x { font-size:26px; line-height:1.5; color:#1f2937; } /* S3：全区块正文统一 26px；#1215：取消全局首行缩进，仅 .wcl-body-2p（正文≥2段）才缩进 */
/* #1215 曾为「正文 ≥2 段才首行缩进 2em + 两端对齐」；#1225c 老师明确不要首行缩进 → 缩进归零，
   只保留两端对齐。段与段的区隔改由富文本多段落（<p class="pr-p"> 自带 0.6em 间距）负责。 */
.wcl-body-2p { text-indent:0; text-align:justify; }
/* P6 返工：无边框块内正文继承 26px（压过全局 .wcl-ub-x clamp 22px）；#1215：无边框正文恒不缩进 */
.wcl-ub-frameless .wcl-ub-x { font-size:inherit; line-height:1.5; }
/* #1215：无边框的纯文本块（.wcl-ub-text 默认带缩进）也强制不缩进 */
.wcl-ub-frameless.wcl-ub-text { text-indent:0; text-align:left; }
/* 调节宽度后文字自动换行 + 高度实时自适应：绝不横向溢出画布/被截断 */
.wcl-ub-x, .wcl-ub-text, .wcl-full-body, .wcl-topic-body { overflow-wrap:anywhere; word-break:break-word; }
/* 课堂端「点击揭晓」卡：初始只显示占位，点一下翻出答案 */
.wcl-ub-x-reveal .wcl-ub-ans { display:none; }
.wcl-ub-x-reveal .wcl-ub-ph { display:inline-flex; align-items:center; gap:6px; color:#c3b3b7; letter-spacing:3px; cursor:pointer; }
.wcl-ub-x-reveal .wcl-ub-ph::before { content:''; width:8px; height:8px; border-radius:50%; background:#f43f5e; }
.wcl-ub-x-reveal.wcl-ub-x-on .wcl-ub-ph { display:none; }
/* P0（2026-08-13 揭晓卡泄漏修复·课堂端保险）：编辑器注入的全局 <style> 曾因 .pe-wcl 命中课堂
 * 幻灯片而把 .wcl-ub-ans 强制 display:block（答案直接暴露）。现编辑端规则已限定 .pe-root，
 * 此处再以课堂根 .wcl-overlay 为作用域显式声明"初始隐藏答案 + 显示占位、点击 .wcl-ub-x-on 揭示"，
 * 与编辑器样式彻底解耦（.wcl-overlay 下绝无 .pe-root 祖先，编辑器规则永不命中），保证展示端
 * 100% 不漏答案。优先级 (0,3,0) 高于共享基础规则 (0,2,0)。 */
.wcl-overlay .wcl-ub-x-reveal .wcl-ub-ans { display:none; }
.wcl-overlay .wcl-ub-x-reveal .wcl-ub-ph { display:inline-flex; align-items:center; gap:6px; color:#c3b3b7; letter-spacing:3px; cursor:pointer; }
.wcl-overlay .wcl-ub-x-reveal.wcl-ub-x-on .wcl-ub-ph { display:none; }
.wcl-overlay .wcl-ub-x-reveal.wcl-ub-x-on .wcl-ub-ans { display:block; }

/* ===== 多媒体区块：图片 / 视频 / 网页 =====================================
 * 编辑画布与课堂展示共用这一套内部样式（外层尺寸由 presentation-media 的
 * boxStyle 算成内联 style，两端同一函数），改这里两边一起变。
 * 工单硬要求：默认只有极淡灰底，绝不带有色边框和填充 —— 所以要把 .wcl-ub 的
 * 白底 + 粉描边 + 投影整套覆盖掉；老师想加轮廓/填充自己去区块样式面板加。 */
.wcl-ub-media { display:block; padding:0; overflow:visible; min-height:80px;
  background:#f7f7f8; border:0; box-shadow:none; border-radius:10px; }
/* 内容（图片/视频/iframe）由内层裁圆角；外壳 overflow:visible 让左上角组合工具栏
 * （.pe-ub-bar 在块外 left:-14px/top:-38px）不被裁掉（工单：媒体块缺工具栏的真因） */
.wcl-ub-media > .pe-media-in { width:100%; height:100%; overflow:hidden; border-radius:10px; }
/* 工单 #1102 方案 A：导入课件里的照片只是点缀，不该撑满画布。imageBlock 已把
 * 内联 width 设为 45%（presentation-media.boxStyle 据此生成 width:45%），这里再补
 * 居中 + 高度上限，让照片缩成一块居中的小图、区块本身随之变小。仅 importedImg 标记
 * 的块生效，老师自己在编辑器里插入/拖宽的图片不受此限。 */
/* 工单 #1104：导入照片用 object-fit:cover 填满 45% 外框，消除两侧留白；
 * 内层固定 240px 高相框，任意尺寸外部图片都等比裁切铺满，不再留白。仅 importedImg 标记生效。 */
.wcl-ub-impimg { width:45% !important; max-width:45% !important; margin:8px auto; }
.wcl-ub-impimg > .pe-media-in { width:100%; height:240px; border-radius:10px; overflow:hidden; }
.wcl-ub-impimg .pe-media-img { width:100%; height:100%; object-fit:cover; max-width:none; }
.pe-media-in { position:relative; display:block; }
/* 工单 AA1：图片缩放自适应 —— 内部容器改 flex 居中 + 图片 `max-width/max-height:100% + object-fit:contain`。
 * 旧实现 `img{width:100%;height:auto}`：外层被拖成非原图比例（压扁/拉长）时 height:auto 溢出容器，
 * 由 .pe-media-in{overflow:hidden} 截断 → 图片被裁切（用户报的截断真因）。
 * 新实现：无论外框缩放到何形状，图片都完整等比例 contain 在容器内（居中、无截断、不变形）。
 * 默认 h=0 时容器高度由图片撑开（max-width:100% 限宽），原比例不变。 */
.pe-media-in-image { line-height:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.pe-media-img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
/* 视频：max-width:100% 防原生尺寸溢出撑开行容器（工单：视频撑大画布的真因防线）；
 * object-fit:contain 保证被多列压缩时不拉伸变形（待勘察） */
.pe-media-vid { display:block; width:100%; max-width:100%; height:100%; object-fit:contain; background:#000; }
.pe-media-frame { display:block; width:100%; height:100%; max-height:100%; min-height:120px; border:0; background:#fff; }
/* 工单 AA2：iframe 高度 max-height:100% 兜底 —— 某些浏览器 UA 对 iframe 有默认高度，
   缩放后 height:100% 计算可能溢出容器几像素 → 底部（滚动条区）被 overflow:hidden 裁掉。 */
/* 网页区块内部滚动条由 iframe 自带（scrolling=yes），外层只负责不裁掉它。
   工单 AA2：移除 min-height:200px —— 该最小高让 iframe 至少 200px，容器被拖矮时
   iframe 溢出被 .pe-media-in{overflow:hidden} 裁掉底部（滚动条区）。height:100% 已够。 */
.pe-media-page { min-height:120px; }
/* 空 / 加载失败 / 被 X-Frame 拦截：三种占位面板共用一副骨架，只有配色文案不同 */
.pe-media-empty, .pe-media-fail, .pe-media-blocked {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  width:100%; height:100%; min-height:120px; padding:20px; box-sizing:border-box;
  text-align:center; line-height:1.5; }
.pe-media-empty { color:#94a3b8; }
.pe-media-empty-ico { font-size:26px; line-height:1; }
.pe-media-empty-t { font-size:14px; font-weight:600; color:#64748b; }
.pe-media-empty-s { font-size:12px; color:#a0aab8; }
.pe-media-fail, .pe-media-blocked { background:#fffbeb; color:#b45309; }
.pe-media-fail-ico, .pe-media-blocked-ico { font-size:24px; line-height:1; }
.pe-media-fail-t, .pe-media-blocked-t { font-size:15px; font-weight:700; color:#92400e; }
.pe-media-fail-s, .pe-media-blocked-s { font-size:12.5px; color:#b45309; opacity:.9; overflow-wrap:anywhere; }
.pe-media-openbtn { margin-top:4px; display:inline-block; font-size:12.5px; font-weight:600;
  padding:7px 14px; border-radius:8px; text-decoration:none;
  background:#fff; border:1px solid #f0c987; color:#b45309; }
.pe-media-openbtn:hover { background:#b45309; border-color:#b45309; color:#fff; }
.pe-media-pending { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-size:12px; color:#94a3b8; }
.wcl-ub-x-reveal.wcl-ub-x-on .wcl-ub-ans { display:block; }
/* 窄屏：教师区块网格退化为单列，内容不重叠 */
@media (max-width:639px) {
  .wcl-ub-grid { grid-template-columns:1fr !important; }
}

.wcl-exq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px; }
.wcl-exq { display:flex; flex-direction:column; align-items:stretch; gap:10px; text-align:left; font-family:inherit; cursor:pointer;
  background:#fff; border:1px solid #F3DDE1; border-radius:18px; padding:18px 22px; box-shadow:0 6px 18px rgba(244,63,94,.06);
  transition:transform 240ms var(--wcl-ease), box-shadow 240ms var(--wcl-ease), border-color 240ms var(--wcl-ease);
  animation:wclReveal 420ms var(--wcl-ease) backwards; animation-delay:calc(var(--wgi,0) * 120ms);
  -webkit-font-smoothing:antialiased; backface-visibility:hidden; }
.wcl-exq:hover, .wcl-exq:focus-visible { transform:translateY(-2px); border-color:#f9a8b4; box-shadow:0 12px 28px rgba(244,63,94,.12); outline:none; }
/* 已揭晓卡片回归静态，避免 hover 位移与内部叠层产生闪影 */
.wcl-exq.on:hover, .wcl-exq.on:focus-visible { transform:none; box-shadow:0 10px 26px rgba(244,63,94,.10); }
.wcl-exq-k { display:flex; align-items:center; gap:8px; font-size:clamp(18px,1.5vw,20px); font-weight:800; color:#e11d48; }
.wcl-exq-k i { font-style:normal; letter-spacing:1px; }
/* 占位与答案叠在同一格：卡片一开始就是最终高度，揭示时零布局跳变
   答案放大到 23–26px，槽位预留两行高度，卡片高度恒定不截断 */
.wcl-exq-slot { display:grid; min-height:clamp(70px,10vh,98px); align-content:center; }
.wcl-exq-slot > * { grid-area:1/1; align-self:center; }
.wcl-exq-ph { font-size:var(--wcl-hint); color:#c3b3b7; letter-spacing:3px; opacity:1; transition:opacity 200ms var(--wcl-ease); }
.wcl-exq-v { font-size:clamp(23px,2vw,26px); font-weight:700; color:#1f2937; line-height:1.45; opacity:0; transform:translateY(8px);
  transition:opacity 420ms var(--wcl-ease), transform 420ms var(--wcl-ease); }
.wcl-exq.on { border-color:#f9a8b4; box-shadow:0 10px 26px rgba(244,63,94,.10); }
/* 揭晓后占位层立刻从渲染树移除，避免 opacity 过渡期间与答案层叠成重影 */
.wcl-exq.on .wcl-exq-ph { opacity:0; visibility:hidden; }
.wcl-exq.on .wcl-exq-v { opacity:1; transform:translateY(0); }

.wcl-tags { display:flex; flex-wrap:wrap; gap:10px; }
.wcl-tag { font-size:var(--wcl-hint); font-weight:600; color:#9f1239; background:#ffe4e6; border:1px solid #fecdd3; padding:8px 16px; border-radius:999px; }

/* 写作要求 */
.wcl-num { display:flex; align-items:flex-start; gap:16px; padding:18px 22px; background:#fff; border:1px solid #F1E3E5; border-left:5px solid #f43f5e; border-radius:14px; box-shadow:0 4px 14px rgba(244,63,94,.05); }
.wcl-num-i { flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:#f43f5e; color:#fff; font-weight:800; font-size:18px; display:flex; align-items:center; justify-content:center; }
.wcl-num-t { flex:1 1 auto; font-size:var(--wcl-body); line-height:1.7; color:#1f2937; padding-top:3px; }
.wcl-exp-wrap { display:flex; flex-direction:column; gap:12px; }
.wcl-exp { font-size:var(--wcl-body); line-height:1.7; color:#334155; padding-left:2px; white-space:pre-wrap; }
.wcl-exp-ref { display:block; margin-top:4px; font-size:var(--wcl-label); color:#94a3b8; }
/* 易漏点提醒（需求：小标题浅橙 Highlight 22–24px/700，正文 21–23px，图标垂直居中）
   冒号前小标题 = .wcl-m-risk 浅橙底深橙字、4–6px 圆角、不整行铺色；无冒号时整条即小标题 */
.wcl-risk-panel { background:#FFFBF4; border-color:#F6E3C8; }
.wcl-risk-panel .wcl-panel-h { color:#b45309; font-size:clamp(28px,2.35vw,32px); margin-bottom:20px; }
.wcl-risk-panel .wcl-panel-h svg { color:#f59e0b; width:clamp(26px,2.1vw,30px); height:clamp(26px,2.1vw,30px); }
.wcl-risk-wrap { display:flex; flex-direction:column; gap:16px; }
.wcl-risk { display:flex; align-items:center; gap:12px; font-size:clamp(21px,1.75vw,23px); line-height:1.7; color:#92400e; }
.wcl-ub-req .pe-wcl-fill { flex:1 1 auto; min-width:0; white-space:pre-wrap; }
.wcl-risk svg { flex:0 0 auto; color:#f59e0b; width:clamp(20px,1.7vw,22px); height:clamp(20px,1.7vw,22px); }
.wcl-risk-txt { display:inline-flex; align-items:center; flex-wrap:wrap; gap:0 4px; }
.wcl-m-risk { background:#FEF0DB; color:#B45309; border-radius:5px; padding:1px 8px; font-weight:700;
  font-size:clamp(22px,1.8vw,24px); line-height:1.55; white-space:normal;
  -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.wcl-risk-body { font-size:clamp(21px,1.75vw,23px); color:#78350F; }

/* 写作支架 */
.wcl-sc { padding:24px 28px; background:#fff; border:1px solid #F1E3E5; border-radius:18px; box-shadow:0 6px 20px rgba(244,63,94,.05); }
.wcl-sc-label { display:inline-block; font-size:var(--wcl-label); font-weight:800; color:#e11d48; background:#ffe4e6; padding:5px 16px; border-radius:999px; margin-bottom:16px; }
.wcl-sc-body { font-family:var(--wcl-serif); font-size:var(--wcl-body); line-height:2.0; color:#1f2937; }
.wcl-full-wrap { display:grid; grid-template-columns:1fr; gap:16px; }
.wcl-full-block { position:relative; padding:20px 24px; background:#fff; border:1px solid #F1E3E5; border-left:5px solid #fb7185; border-radius:14px; cursor:zoom-in; transition:transform 240ms var(--wcl-ease), box-shadow 240ms var(--wcl-ease); height:auto; overflow:visible; }
.wcl-full-block:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(244,63,94,.12); }
/* 支架连接线：分块之间的顺承提示，单次延展，不循环 */
.wcl-full-wrap .wcl-full-block + .wcl-full-block::before { content:''; position:absolute; left:-1px; top:-16px; width:5px; height:0; background:#f9a8b4; border-radius:3px; animation:wclLink 320ms var(--wcl-ease) 120ms both; }
@keyframes wclLink { from { height:0; } to { height:16px; } }
/* P0+（2026-08-13 批量微调）：标签「开头/主体/结尾」= 富文本淡紫胶囊高亮（purple+hlShape capsule，
 * 36px 红粗，底色由 mark 自绘）→ 容器清掉旧的粉底/内边距/圆角，避免双胶囊叠加；
 * 旧纯文本标签（无 mark）退化为红字无背景。 */
/* 🐛 工单 2026-08-14：完整支架段落标签（开头/主体/结尾）= **纯文字**，彻底废除粉底胶囊——
 * background 透明 + padding/border-radius 归零（不再画任何胶囊容器），红色加粗 28px。 */
.wcl-full-label { display:inline-block; font-size:28px; font-weight:800; color:#e11d48; background:transparent; padding:0; border-radius:0; margin-bottom:12px; line-height:1.4; }
/* P0+（2026-08-13 重做版 v2·工单 4）：胶囊标签「开头/主体/结尾」内部 .prs-block.pe-editable 默认编辑器会给
   可编辑块加 #dbeafe 淡蓝底（提示"可点击编辑"），但这与红色胶囊底色叠加变成视觉上的"蓝色脏高亮"——
   用户的「蓝色」其实不是 mark 脏高亮，是 contenteditable 视觉提示。展示端/编辑端都强制 transparent：
   hover/focus 子元素全部透明，让胶囊只有一层粉红底 + 深红字，无任何蓝底叠加。 */
.wcl-full-label .prs-block.pe-editable,
.wcl-full-label .prs-block.pe-editable:hover,
.wcl-full-label .prs-block.pe-editable:focus,
.wcl-full-label .prs-block.pe-editable * ,
.wcl-full-label .pe-block-wrap:hover,
.wcl-full-label .pe-block-wrap:focus-within{ background:transparent !important; box-shadow:none !important; outline:none !important }
.wcl-full-label mark,
.wcl-full-label .pr-hl,
.wcl-full-label [class^="pr-hl-"],
.wcl-full-label .pr-anno{ background:transparent !important; box-shadow:none !important }
/* P0+（2026-08-13 工单）：标签 = 单一干净粉色胶囊 —— 富文本不再套 highlight/hlShape，
 * 旧 deck 残留的 mark 高亮（紫胶囊/圆形）一律透明化，只留容器胶囊；字号统一 32px。 */
.wcl-full-label mark, .wcl-full-label .pr-hl, .wcl-full-label [class^="pr-hl-"], .wcl-full-label [class*=" pr-hl-"] { background:transparent !important; box-shadow:none !important; }
.wcl-full-label * { font-size:28px !important; line-height:1.4; }
/* P0+（2026-08-13 批量微调）：支架卡片正文默认 32px（覆盖 var(--wcl-body) 的 26px 上限），读起来舒展清晰 */
.wcl-full-body { font-family:var(--wcl-serif); font-size:26px; line-height:1.7; color:#1f2937; min-width:0; flex:1 1 auto; white-space:pre-wrap; }
/* P0+（2026-08-13 工单）：支架结尾段落款（Yours, Li Hua 等）右下对齐 —— 从正文拆分渲染为独立行 */
.wcl-full-body .wcl-signature { text-align:right; margin-top:12px; font-weight:400; }
/* P0+（2026-08-13 批量微调）：写作支架页（基础/提高）内容垂直分布均衡 —— slide-body 纵向 flex，
 * 支架网格 flex:1 撑满 + align-content:space-between → 三张支架卡上/中/下分布，消除底部大片留白；
 * 内容超高时多余空间为 0，space-between 自然退化为正常排列、不裁切。 */
.wcl-slide.wcl-slide-sc-full > .wcl-slide-body { display:flex; flex-direction:column; }
.wcl-slide-sc-full, .pe-wcl.pe-wcl-k-sc-full .wcl-scaffold-grid { flex:1 1 auto; align-content:space-between; row-gap:24px; }   /* 🐛 2026-08-14：三卡最小垂直间距 24px，绝不紧贴 */

/* 填空横线 */
.wcl-slide .w-blank { color:#e11d48; font-weight:700; border-bottom:2px solid #fbb6c1; padding:0 4px; }
.wcl-slide .w-blank-hint, .wcl-slide .w-hint { color:#94a3b8; font-size:.9em; }

/* 语言支持：主题词汇 */
.wcl-point, .wcl-fn { padding:22px 26px; background:#fff; border:1px solid #F1E3E5; border-radius:18px; box-shadow:0 6px 20px rgba(244,63,94,.05); }
/* P0+（2026-08-13 工单 #3 根治「外大内小」）：当 .wcl-point/.wcl-fn 在 .wcl-ub（display:flex）内时，
 * 改为 flex:1 1 auto 撑满主轴（关键根因：旧版 flex 子项无 flex-grow → 宽=max-content → 小卡片），
 * 自身的白底/边框/阴影/圆角去掉（让外层 .wcl-ub 自己当卡片），内层仅作 padding 占位。 */
.wcl-ub > .wcl-point, .wcl-ub > .wcl-fn { flex:1 1 auto; min-width:0;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; padding:0; }
.wcl-cat { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.wcl-cat-i { flex:0 0 auto; font-size:32px; font-weight:800; color:#fff; background:#f43f5e; padding:4px 12px; border-radius:999px; }
.wcl-cat-n { font-size:28px; font-weight:800; color:#e11d48; }
.wcl-pw-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
/* 工单 B2：中英文对照两端对齐 —— 英文 1fr 占满剩余宽度（可换行不溢出）、
   中文 auto 贴右缘，内容一多一少都不再留下单边大留白（此前 50% 绝对等宽造成空洞）。 */
/* P0+（2026-08-13 工单 #1 主题词汇）：英文上/中文下严格分行 —— 1 列布局、英文加粗、中文居左 32px。 */
.wcl-pw { display:grid; grid-template-columns:1fr; align-items:baseline; gap:4px; padding:8px 0; border-bottom:1px dashed #F4E5E8; }
.wcl-pw-en { font-family:var(--wcl-serif); font-size:28px; font-weight:700; color:#1f2937; min-width:0; overflow-wrap:anywhere; line-height:1.5; }
.wcl-pw-cn { font-size:28px; color:#1f2937; text-align:left; min-width:0; overflow-wrap:anywhere; line-height:1.5; }
/* P0+（2026-08-13 工单 #1 主题词汇英中分行）：editable 容器 .pe-wcl-fill 被渲染成 .prs-block（wrapClass→pp- 前缀），
   改用 flex column → wcl-pw-en（行 1）+ wcl-pw-cn（行 2）严格堆叠（span 不会自动换行） */
.wcl-slide-lang-phrases, .pe-wcl.pe-wcl-k-lang-phrases .wcl-pw > .prs-block { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.wcl-pw-empty { color:#a1aab8; font-size:var(--wcl-label); border-bottom:none; }

/* P0+（2026-08-13）：主题词汇页（基础/提高）—— 上下排列（1 列占满行，工单 #5）+ titlecard 左红 6 档描边 + 32px 字号规范
 * + 卡片内部英文上/中文下严格分行（grid 1 列，wcl-pw-en bold 700 32px，wcl-pw-cn 32px 左对齐）。
 * 课堂端 wrapper class = wcl-slide-lang-phrases（wclKind）；编辑端与课堂端共用同一份 renderSlide 输出。 */
.wcl-slide-lang-phrases .wcl-cat-i, .pe-wcl.pe-wcl-k-lang-phrases .wcl-cat-i { font-size:28px; font-weight:800; padding:6px 18px; }
.wcl-slide-lang-phrases .wcl-cat-n, .pe-wcl.pe-wcl-k-lang-phrases .wcl-cat-n { font-size:28px; font-weight:800; color:#e11d48; }
.wcl-slide-lang-phrases .wcl-cat, .pe-wcl.pe-wcl-k-lang-phrases .wcl-cat { margin-bottom:14px; }
.wcl-slide-lang-phrases .wcl-pw-en, .pe-wcl.pe-wcl-k-lang-phrases .wcl-pw-en { font-size:26px; line-height:1.5; }
.wcl-slide-lang-phrases .wcl-pw-cn, .pe-wcl.pe-wcl-k-lang-phrases .wcl-pw-cn { font-size:26px; color:#1f2937; line-height:1.5; }
.wcl-slide-lang-phrases .wcl-point, .pe-wcl.pe-wcl-k-lang-phrases .wcl-point { padding:24px 28px; }
/* 组卡外层（.wcl-ub）是 peStyle 描边载体，内层 .wcl-point 才是内容容器 —— 外层 padding 归零避免双层留白 */
.wcl-slide-lang-phrases .wcl-ub-lang, .pe-wcl.pe-wcl-k-lang-phrases .wcl-ub-lang { padding:0; }
/* 内容少时垂直均匀分布（紧凑 + 滚动弹性底线）：slide-body 纵向 flex，网格 flex:1 撑满 + space-evenly；
 * 内容超高时多余空间为 0，space-evenly 自然退化为正常排列、不裁切（stage 滚动）。 */
.wcl-slide.wcl-slide-lang-phrases > .wcl-slide-body { display:flex; flex-direction:column; }
.wcl-slide-lang-phrases .wcl-ub-grid, .pe-wcl.pe-wcl-k-lang-phrases .wcl-ub-grid { flex:1 1 auto; align-content:space-evenly; }

/* P0+（2026-08-13）：实用句型页（lang-patterns 基础/提高）—— 每模块独立纯文字区块（可拖拽组卡）、
 * 小标题 28px 红粗、例句正文 26px；例句核心短语高亮走 annotations（pattern→purple 胶囊，与范文标注版一致）。 */
.wcl-slide-lang-patterns .wcl-cat-n, .pe-wcl.pe-wcl-k-lang-patterns .wcl-cat-n { font-size:28px; font-weight:800; color:#e11d48; background:transparent; padding:0; border-radius:0; display:inline; }
.wcl-slide-lang-patterns .wcl-cat, .pe-wcl.pe-wcl-k-lang-patterns .wcl-cat { margin-bottom:14px; }
.wcl-slide-lang-patterns .wcl-pat-c, .pe-wcl.pe-wcl-k-lang-patterns .wcl-pat-c { font-size:26px; line-height:1.6; }
.wcl-slide-lang-patterns .wcl-pat, .pe-wcl.pe-wcl-k-lang-patterns .wcl-pat { padding:14px 18px; }
.wcl-slide-lang-patterns .wcl-point, .pe-wcl.pe-wcl-k-lang-patterns .wcl-point { padding:24px 28px; }
.wcl-slide-lang-patterns .wcl-ub-lang, .pe-wcl.pe-wcl-k-lang-patterns .wcl-ub-lang { padding:0; }
/* P0+（2026-08-13 工单 #3 脏高亮清理）：实用句型内**所有**高亮统一为干净红色胶囊（浅红底 #ffe4e6 + 深红字 #be123c），
 * 旧嵌套/紫色/蓝色 mark 全被压成同一底色 —— 彻底消除「高亮套高亮」视觉污染。 */
.wcl-slide-lang-patterns .wcl-pat mark,
.wcl-slide-lang-patterns .wcl-pat .pr-hl,
.wcl-slide-lang-patterns .wcl-pat [class*="pr-hl-"],
.pe-wcl.pe-wcl-k-lang-patterns .wcl-pat mark,
.pe-wcl.pe-wcl-k-lang-patterns .wcl-pat .pr-hl,
.pe-wcl.pe-wcl-k-lang-patterns .wcl-pat [class*="pr-hl-"] { background:#ffe4e6 !important; color:#be123c !important; box-shadow:none !important; font-weight:800 !important; }
.wcl-slide.wcl-slide-lang-patterns > .wcl-slide-body { display:flex; flex-direction:column; }
.wcl-slide-lang-patterns .wcl-ub-grid, .pe-wcl.pe-wcl-k-lang-patterns .wcl-ub-grid { flex:1 1 auto; align-content:space-evenly; }
/* P0+（2026-08-13 工单 #2）：实用句型核心短语高亮（annotations → pr-hl-purple）强制加粗 */
.wcl-slide-lang-patterns .wcl-pat mark, .pe-wcl.pe-wcl-k-lang-patterns .wcl-pat mark { font-weight:800 !important; }

/* P0+（2026-08-13）：连接词页（lang-connectors 基础/提高）—— 上下排列（1 列占满行，工单 #5）、
 * 分类名小标题 28px 红粗 + 连接词词条胶囊（统一红底白字 32px 加粗，**清除旧紫套蓝重叠**）。 */
.wcl-slide-lang-connectors .wcl-cat-n, .pe-wcl.pe-wcl-k-lang-connectors .wcl-cat-n { font-size:28px; font-weight:800; color:#e11d48; background:transparent; padding:0; border-radius:0; display:inline; }
.wcl-slide-lang-connectors .wcl-cat, .pe-wcl.pe-wcl-k-lang-connectors .wcl-cat { margin-bottom:14px; }
.wcl-slide-lang-connectors .wcl-conn, .pe-wcl.pe-wcl-k-lang-connectors .wcl-conn { font-size:32px; font-weight:800; color:#fff; background:#e11d48; padding:4px 16px; border-radius:999px; display:inline-block; margin:2px 0; }
.wcl-slide-lang-connectors .wcl-conn-items, .pe-wcl.pe-wcl-k-lang-connectors .wcl-conn-items { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.wcl-slide-lang-connectors .wcl-point, .pe-wcl.pe-wcl-k-lang-connectors .wcl-point { padding:24px 28px; }

/* 工单 B（2026-08-14）：亮点解析重构 —— 大标题(frameless 40px 红粗) / 三分类小标题(frameless 28px 红粗)
 * 各自独立成行；内容项各为独立 .wcl-ub-anal 卡（左边六档描红 + 干净白底，绝无粉红外壳）；
 * 长难句卡内含「原句(上,加粗+紫胶囊) + 解析(下,26px 黑,多行自然段落)」；英文词组高亮为绿胶囊。 */
.wcl-slide-essay-analysis .wcl-anal-wrap,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-anal-wrap { width:100%; }
/* 大标题 / 分类小标题：无边框纯文字（userBlockHtml frameless 输出），与内容间保留充足垂直间距 */
.wcl-slide-essay-analysis .wcl-anal-wrap > .pe-wcl-row-single:first-child,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-anal-wrap > .pe-wcl-row-single:first-child { margin-bottom:10px; }
.wcl-slide-essay-analysis .wcl-anal-wrap .wcl-ub-frameless,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-anal-wrap .wcl-ub-frameless { margin:0 0 8px; }
/* 内容项卡：干净白底 + 左红 6 档（peStyle 内联已给 border-left，这里兜底视觉与间距） */
.wcl-slide-essay-analysis .wcl-ub-anal,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal { background:#fff; box-shadow:0 6px 18px rgba(244,63,94,.05); }
/* 长难句卡内部：原句在上(加粗)、解析在下(26px 黑,多行自然段落) */
.wcl-slide-essay-analysis .wcl-ub-anal .wcl-ub-ls-wrap,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal .wcl-ub-ls-wrap { display:flex; flex-direction:column; gap:12px; width:100%; }
.wcl-slide-essay-analysis .wcl-ub-anal .wcl-ub-ls-orig,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal .wcl-ub-ls-orig { font-size:26px; font-weight:700; line-height:1.6; }
.wcl-slide-essay-analysis .wcl-ub-anal .wcl-ub-ls-note,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal .wcl-ub-ls-note { font-size:26px; line-height:1.7; color:#1f2937; }
.wcl-slide-essay-analysis .wcl-ub-anal .wcl-ub-ls-note p,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal .wcl-ub-ls-note p { margin:0 0 6px; }
.wcl-slide-essay-analysis .wcl-ub-anal .wcl-ub-ls-note p:last-child,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-anal .wcl-ub-ls-note p:last-child { margin-bottom:0; }
/* 工单 B·#4/#5：英文词组高亮(绿)/长难句原句(紫) 渲染为圆润胶囊（annotation 不挂 hlShape → 无默认胶囊类，这里强制圆角）；
   2026-08-14 续：英文词组与原句统一加粗 */
.wcl-slide-essay-analysis .wcl-anal-wrap .pr-hl-green,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-anal-wrap .pr-hl-green,
.wcl-slide-essay-analysis .wcl-anal-wrap .pr-hl-purple,
.pe-wcl.pe-wcl-k-essay-analysis .wcl-anal-wrap .pr-hl-purple { border-radius:999px !important; padding:.1em .55em !important; font-weight:700 !important; }
.wcl-slide.wcl-slide-essay-analysis > .wcl-slide-body { display:flex; flex-direction:column; }
.wcl-slide-essay-analysis .wcl-ub-grid, .pe-wcl.pe-wcl-k-essay-analysis .wcl-ub-grid { flex:1 1 auto; align-content:space-evenly; }

/* 语言支持：实用句型 */
.wcl-pat-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.wcl-pat { padding:14px 18px; background:#FDF8F8; border:1px solid #F4E5E8; border-radius:12px; }
.wcl-pat-c { font-family:var(--wcl-serif); font-size:var(--wcl-body); line-height:1.7; color:#1f2937; }
.wcl-pat-note { margin-top:6px; font-size:var(--wcl-label); color:#94a3b8; }

/* 语言支持：连接词（统一雾蓝，不再按功能着色） */
.wcl-conn-grp { padding:20px 24px; background:#fff; border:1px solid #F1E3E5; border-radius:18px; box-shadow:0 6px 20px rgba(244,63,94,.05); }
.wcl-conn-fn { font-size:var(--wcl-h3); font-weight:800; color:#9f1239; margin-bottom:14px; }
.wcl-conn-items { display:flex; flex-wrap:wrap; gap:12px; }
.wcl-conn { font-family:var(--wcl-serif); font-size:var(--wcl-hint); font-weight:600; padding:8px 16px; border-radius:999px; cursor:pointer; background:#DBEAFE; color:#1D4ED8; border:1px solid rgba(29,78,216,.18); transition:transform .18s var(--wcl-ease), box-shadow .18s var(--wcl-ease); }
.wcl-conn:hover { transform:translateY(-1px); }
.wcl-conn.active { box-shadow:0 0 0 3px rgba(29,78,216,.22); }
.wcl-conn-eg { margin-top:16px; padding:16px 20px; background:#FDF8F8; border:1px solid #F4E5E8; border-radius:12px; font-size:var(--wcl-hint); line-height:1.7; color:#334155; }
.wcl-conn-eg b { color:#e11d48; }

/* ---------- 参考范文 ---------- */
.wcl-essay { display:flex; flex-direction:column; gap:18px; }
.wcl-pg { display:flex; gap:16px; align-items:flex-start; }
.wcl-pg-l { flex:0 0 auto; font-size:var(--wcl-label); font-weight:800; color:#e11d48; background:#ffe4e6; padding:5px 14px; border-radius:999px; margin-top:6px; }
.wcl-pg p { margin:0; flex:1 1 auto; font-family:var(--wcl-serif); font-size:var(--wcl-body); line-height:1.95; color:#1f2937; }
/* 教学标注页范文分段朗读按钮（标签右侧，间距 6–8px；Lucide Volume2/Pause，无 Emoji） */
.wcl-speech-btn { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  margin:5px 0 0 -9px; border-radius:50%; border:1px solid rgba(148,163,184,.4); background:rgba(255,255,255,.7); color:#475569;
  cursor:pointer; position:relative; transition:transform 160ms var(--wcl-ease), box-shadow 200ms var(--wcl-ease), background 200ms var(--wcl-ease), color 200ms var(--wcl-ease); }
.wcl-speech-btn svg { width:19px; height:19px; stroke-width:1.9; }
.wcl-speech-btn:hover { transform:translateY(-1.5px); box-shadow:0 6px 18px rgba(244,63,94,.18); color:#e11d48; background:#fff; }
.wcl-speech-btn:active { transform:scale(.96); }
.wcl-speech-btn.speaking { color:#fff; background:#f43f5e; border-color:#f43f5e; box-shadow:0 4px 16px rgba(244,63,94,.4); }
.wcl-speech-btn.paused { color:#f43f5e; background:#fff1f2; border-color:#fecdd3; }
/* 完整范文朗读按钮：放在 wordCount 左侧，与 pill 高度协调 */
.wcl-speech-btn-full { margin:0 0 0 0; width:32px; height:32px; background:rgba(255,255,255,.95); color:#e11d48; border-color:#fda4af; }
.wcl-speech-btn-full svg { width:18px; height:18px; }
.wcl-speech-btn-full:hover { background:#fff; color:#e11d48; box-shadow:0 6px 18px rgba(244,63,94,.22); }
/* 播放中：轻微声波（柔和环形波纹，非持续发光） */
.wcl-speech-btn.speaking::after { content:''; position:absolute; inset:-3px; border-radius:50%; border:2px solid rgba(244,63,94,.5); animation:wclSoundPulse 1.1s var(--wcl-ease) infinite; }
@keyframes wclSoundPulse { 0% { transform:scale(.85); opacity:.8; } 70%,100% { transform:scale(1.25); opacity:0; } }
[data-theme="dark"] .wcl-speech-btn { background:rgba(35,43,61,.6); border-color:rgba(148,163,184,.35); color:#cbd5e1; }
[data-theme="dark"] .wcl-speech-btn:hover { background:#2b3448; color:#fda4af; box-shadow:0 6px 18px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-speech-btn.speaking { background:#f43f5e; border-color:#f43f5e; color:#fff; }
[data-theme="dark"] .wcl-speech-btn.paused { background:rgba(244,63,94,.18); border-color:rgba(251,113,133,.45); color:#fda4af; }
.wcl-essay-clean p { text-indent:0; }

/* ---------- 三层教学标注（连接词 → 积累表达 → 高级句式） ----------
   底色只覆盖文字中下部（linear-gradient 由下往上 62%），同色细下划线；
   多行不断色用 box-decoration-break:clone；左→右 520ms 揭示，同层每项错开 75ms。 */
.wcl-m {
  --wmi:0;
  padding:0 4px; border-radius:5px;
  color:inherit; font-weight:inherit;
  background-color:transparent;   /* 关键：清除浏览器默认 <mark> 黄色背景，任何状态下都不透黄 */
  background-image:linear-gradient(to top, var(--wmb,transparent) 62%, transparent 62%);
  background-repeat:no-repeat; background-position:left center; background-size:0 100%;
  box-shadow:inset 0 -2px 0 0 transparent;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size 520ms var(--wcl-ease), color 320ms var(--wcl-ease), box-shadow 320ms var(--wcl-ease), font-weight 320ms var(--wcl-ease);
  transition-delay:calc(var(--wmi) * 75ms);
}
/* 教学标注页：高亮词改为圆润「胶囊型」背景块（2026-08-14 工单 Item1）—— 保留 连接词蓝 / 积累表达绿 /
   高级句式紫 三色，仅把「底部 62% 细下划线」改为「整词实心圆角胶囊」；揭示动画沿用 background-size 左→右擦入。
   作用域限定 .wcl-essay-hl，不波及其他课堂 mark（如易漏点浅橙）。 */
.wcl-essay-hl .wcl-m {
  padding:2px 10px;
  border-radius:999px;
  background-color:transparent;
  background-image:linear-gradient(var(--wmb,transparent), var(--wmb,transparent));
  background-repeat:no-repeat; background-position:left center; background-size:0 100%;
  box-shadow:none;
  transition:background-size 520ms var(--wcl-ease), color 320ms var(--wcl-ease), font-weight 320ms var(--wcl-ease);
  transition-delay:calc(var(--wmi) * 75ms);
}
/* 课堂展示容器级兜底：任何 <mark> 都不许出现浏览器默认黄色背景（内联 style 优先级更高，不受影响）；
   易漏点浅橙 mark（.wcl-m-risk）显式恢复橙色，避免被兜底规则覆盖 */
.wcl-overlay mark { background-color:transparent; }
.wcl-overlay mark.wcl-m-risk { background-color:#FEF0DB; }
.wcl-essay-hl.wcl-pass-conn .wcl-m-conn { --wmb:#DBEAFE; color:#1D4ED8; font-weight:600; background-size:100% 100%; }
.wcl-essay-hl.wcl-pass-expr .wcl-m-expr { --wmb:#D1FAE5; color:#047857; font-weight:600; background-size:100% 100%; }
.wcl-essay-hl.wcl-pass-gram .wcl-m-gram { --wmb:#EDE9FE; color:#6D28D9; font-weight:600; background-size:100% 100%; }

/* P0+（2026-08-13）：教学标注页段落 = 独立 TTS 区块 —— 垂直排布、块间 20px 留白（编辑端 .wcl-ub-tts / 课堂端 .wcl-essay-tts）。 */
.wcl-essay-hl .wcl-ub-tts, .wcl-essay-hl .wcl-essay-tts { margin-bottom:20px; }
.wcl-essay-hl .wcl-ub-tts:last-child, .wcl-essay-hl .wcl-essay-tts:last-child { margin-bottom:0; }
.wcl-essay-tts { background:#fff; border-radius:14px; padding:18px 24px; }

/* 图例：随层点亮（同步指示灯） */
.wcl-hl-legend { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.wcl-hl-chip { display:inline-flex; align-items:center; gap:8px; font-size:32px; font-weight:700; color:#94a3b8; background:#F5F5F6; border:1px solid #E7E7EA; padding:6px 16px; border-radius:999px; opacity:.55; transition:opacity 280ms var(--wcl-ease), color 280ms var(--wcl-ease), background 280ms var(--wcl-ease), border-color 280ms var(--wcl-ease), transform 280ms var(--wcl-ease); }
.wcl-hl-chip i { width:12px; height:12px; border-radius:3px; background:#cbd5e1; transition:background 280ms var(--wcl-ease); }
.wcl-hl-chip.on { opacity:1; transform:translateY(-1px); }
.wcl-hl-chip-conn.on { color:#1D4ED8; background:#DBEAFE; border-color:rgba(29,78,216,.28); }
.wcl-hl-chip-conn.on i { background:#1D4ED8; }
.wcl-hl-chip-expr.on { color:#047857; background:#D1FAE5; border-color:rgba(4,120,87,.28); }
.wcl-hl-chip-expr.on i { background:#047857; }
.wcl-hl-chip-gram.on { color:#6D28D9; background:#EDE9FE; border-color:rgba(109,40,217,.28); }
.wcl-hl-chip-gram.on i { background:#6D28D9; }

/* ---------- 教学标注页 Highlight 解释面板（js/app.js wclHlPanel*） ---------- */
/* 可点击 Highlight：Hover 只显示 pointer + 轻微提亮 + 底线，不自动弹出 */
.wcl-m-link { cursor:pointer; }
.wcl-m-link:hover, .wcl-m-link.wcl-m-active { filter:brightness(1.10); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:currentColor; }
.wcl-m-link:focus-visible { outline:2px solid currentColor; outline-offset:2px; border-radius:5px; }

/* 面板容器：Portal 到 overlay，position:fixed 不占流、不受范文容器 overflow 裁切 */
.wcl-hl-panel { position:fixed; z-index:10050; display:flex; flex-direction:column; max-width:70vw; max-height:45vh;
  background:#FFFDFA; border:1px solid #EDE4DE; border-radius:18px; box-shadow:0 18px 50px rgba(15,23,42,.20);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity 200ms var(--wcl-ease), transform 200ms var(--wcl-ease), visibility 0s linear 200ms; }
.wcl-hl-panel.show { opacity:1; visibility:visible; transform:translateY(0); transition:opacity 200ms var(--wcl-ease), transform 200ms var(--wcl-ease); }
.wcl-hl-panel-conn { width:clamp(360px,38vw,440px); }
.wcl-hl-panel-expr { width:clamp(420px,46vw,560px); }
.wcl-hl-panel-gram { width:clamp(520px,56vw,680px); }
/* 小箭头：指向当前 Highlight（--wcl-arr-x 由 JS 按 target 中心计算） */
.wcl-hl-panel::before { content:''; position:absolute; width:12px; height:12px; background:#FFFDFA;
  border-style:solid; border-color:#EDE4DE; transform:rotate(45deg); }
.wcl-hl-panel:not(.up)::before { top:-6px; left:var(--wcl-arr-x,40px); border-width:1px 0 0 1px; border-radius:3px 0 0 0; }
.wcl-hl-panel.up::before { bottom:-6px; left:var(--wcl-arr-x,40px); border-width:0 1px 1px 0; border-radius:0 0 3px 0; }
/* 顶栏：分类色条 + 分类名 + 关闭按钮（固定不随内容滚动） */
.wcl-hl-p-h { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 14px 10px 18px; border-bottom:1px dashed #F1E8E2; }
.wcl-hl-p-cat { display:inline-flex; align-items:center; gap:9px; font-size:clamp(16px,1.3vw,18px); font-weight:800; letter-spacing:1px; }
.wcl-hl-p-cat::before { content:''; width:14px; height:14px; border-radius:4px; flex:none; }
.wcl-hl-panel-conn .wcl-hl-p-cat { color:#1D4ED8; }
.wcl-hl-panel-conn .wcl-hl-p-cat::before { background:#DBEAFE; box-shadow:inset 0 0 0 1.5px rgba(29,78,216,.55); }
.wcl-hl-panel-expr .wcl-hl-p-cat { color:#047857; }
.wcl-hl-panel-expr .wcl-hl-p-cat::before { background:#D1FAE5; box-shadow:inset 0 0 0 1.5px rgba(4,120,87,.55); }
.wcl-hl-panel-gram .wcl-hl-p-cat { color:#6D28D9; }
.wcl-hl-panel-gram .wcl-hl-p-cat::before { background:#EDE9FE; box-shadow:inset 0 0 0 1.5px rgba(109,40,217,.55); }
.wcl-hl-panel-x { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:none; border-radius:9px; background:transparent; color:#94a3b8; cursor:pointer; transition:background 160ms var(--wcl-ease), color 160ms var(--wcl-ease); }
.wcl-hl-panel-x:hover { background:#F3EDE8; color:#475569; }
.wcl-hl-panel-x svg { width:17px; height:17px; }
/* 内容滚动区（45vh 内滚动，禁止缩小字体） */
.wcl-hl-p-scroll { overflow-y:auto; padding:4px 18px 14px; min-height:0; }
.wcl-hl-p-en { font-family:var(--wcl-serif); font-size:clamp(23px,1.9vw,26px); font-weight:600; line-height:1.65; color:#1f2937; padding:10px 0 8px; }
.wcl-hl-p-row { display:grid; grid-template-columns:clamp(96px,9vw,120px) 1fr; gap:12px; padding:8px 0; align-items:baseline; border-top:1px dashed #F1E8E2; }
.wcl-hl-p-k { font-size:clamp(16px,1.35vw,18px); font-weight:700; color:#7c7f8f; white-space:nowrap; }
.wcl-hl-p-v { font-size:clamp(19px,1.55vw,21px); line-height:1.7; color:#1f2937; }
.wcl-hl-p-cn { font-size:clamp(20px,1.6vw,22px); }
/* 暗色 */
[data-theme="dark"] .wcl-hl-panel { background:#1b2334; border-color:#3b4663; box-shadow:0 18px 50px rgba(0,0,0,.5); }
[data-theme="dark"] .wcl-hl-panel::before { background:#1b2334; border-color:#3b4663; }
[data-theme="dark"] .wcl-hl-panel-conn .wcl-hl-p-cat { color:#BFDBFE; }
[data-theme="dark"] .wcl-hl-panel-conn .wcl-hl-p-cat::before { background:rgba(29,78,216,.42); box-shadow:inset 0 0 0 1.5px rgba(191,219,254,.7); }
[data-theme="dark"] .wcl-hl-panel-expr .wcl-hl-p-cat { color:#A7F3D0; }
[data-theme="dark"] .wcl-hl-panel-expr .wcl-hl-p-cat::before { background:rgba(4,120,87,.42); box-shadow:inset 0 0 0 1.5px rgba(167,243,208,.7); }
[data-theme="dark"] .wcl-hl-panel-gram .wcl-hl-p-cat { color:#DDD6FE; }
[data-theme="dark"] .wcl-hl-panel-gram .wcl-hl-p-cat::before { background:rgba(109,40,217,.42); box-shadow:inset 0 0 0 1.5px rgba(221,214,254,.7); }
[data-theme="dark"] .wcl-hl-p-h, [data-theme="dark"] .wcl-hl-p-row { border-color:#2d3650; }
[data-theme="dark"] .wcl-hl-p-en { color:#F4F7FC; }
[data-theme="dark"] .wcl-hl-p-v { color:#d7deea; }
[data-theme="dark"] .wcl-hl-p-k { color:#8b97b3; }
[data-theme="dark"] .wcl-hl-panel-x { color:#8b97b3; }
[data-theme="dark"] .wcl-hl-panel-x:hover { background:#262f43; color:#F4F7FC; }
.wcl-hl-tip { margin-top:18px; font-size:var(--wcl-label); color:#94a3b8; }

/* 句型页的核心结构轻标注：并入薰衣草紫体系，去掉黄色 */
.wcl-slide .w-hl-core, .wcl-slide mark.w-hl-core { background:#EDE9FE !important; color:#6D28D9 !important; border-radius:5px; padding:1px 5px; font-weight:600; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* 工单 B（2026-08-14）：原「第12页·亮点解析放大版」旧类(w-card/w-anal-*/w-expr*/w-ls*)已随 kAnalysis 重构删除，
   新样式见上方 .wcl-ub-anal / .wcl-ub-ls-orig / .wcl-ub-ls-note 区块。 */

/* ==========================================================================
   第 10 页 · 开始写作（需求 #5）
   纯前端倒计时：默认 25 分钟，＋/－ 5 分钟一档，开始 / 暂停 / 重置 / 全屏。
   全屏 = 纯黑底 + 居中巨大白色翻页时钟；Esc 只退出全屏，计时继续。
   ========================================================================== */
/* 整页自定义排版页（开始写作 / 完结页）：内容区高度 = 视口 - 顶栏 - 底栏，双轴居中，1366×768 不裁切 */
.wcl-slide-plain { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:calc(100dvh - 176px); padding-bottom:8px; }
.wcl-ws { position:relative; width:100%; padding:12px 0 4px; }
.wcl-ws-glow { position:absolute; inset:-4% -5%; z-index:0; pointer-events:none; border-radius:34px;
  background:linear-gradient(135deg, rgba(255,241,242,.92), rgba(255,247,237,.72) 46%, rgba(238,242,255,.86)); }
.wcl-ws-inner { position:relative; z-index:1; text-align:center; max-width:920px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
/* 单个精致钢笔图标 56–64px */
.wcl-ws-ico { display:inline-flex; align-items:center; justify-content:center; width:60px; height:60px; border-radius:20px; background:#fff; border:1px solid #F3DDE1; color:#f43f5e; box-shadow:0 8px 22px rgba(244,63,94,.10); margin-bottom:16px; }
.wcl-ws-title { margin:0; font-size:var(--wcl-h2); font-weight:900; letter-spacing:1px; color:#9f1239; }
.wcl-ws-cn { margin:12px auto 0; max-width:none; white-space:nowrap; font-size:clamp(20px,1.9vw,24px); line-height:1.5; color:#334155; }
.wcl-ws-en { margin:8px 0 0; font-family:var(--wcl-serif); font-size:clamp(17px,1.4vw,21px); letter-spacing:1px; color:#94a3b8; }

/* 开始写作页（精简版 · 需求 #2）：题目卡（复用审题速览 .wcl-topic 样式）+ 英文 en + 紧凑倒计时，无页面内大标题 */
.wcl-ws-start { padding:14px 0 6px; }
.wcl-ws-start .wcl-topic { padding:14px 20px; }
.wcl-ws-start .wcl-topic-h { font-size:clamp(20px,1.65vw,24px); margin-bottom:10px; }
.wcl-ws-start .wcl-topic-body { max-height:clamp(150px,24vh,220px); overflow-y:auto; padding-right:6px; }   /* 长题目不撑高，内部滚动 */
.wcl-ws-start .wcl-ws-en { margin:10px 0 0; }
/* 开始写作页主标题「开始写吧！」：36-44px/800、打字机逐字出现 + 光标闪烁 2 次后停止 */
.wcl-ws-start .wcl-ws-ico { margin-bottom:12px; animation:wclWsIco 1000ms var(--wcl-ease) both; }   /* 柔和上移一次，不弹跳不旋转 */
@keyframes wclWsIco { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.wcl-ws-type { position:relative; margin:0; font-size:clamp(36px,3vw,44px); font-weight:800; letter-spacing:2px; color:#9f1239; line-height:1.35; min-height:1.35em; }
.wcl-ws-type::after { content:''; display:inline-block; width:4px; height:1em; margin-left:4px; vertical-align:-0.18em; background:currentColor; border-radius:2px; }
.wcl-ws-type.typing::after { animation:wclCur 0.55s steps(1) infinite; }
.wcl-ws-type.done::after { display:none; }   /* 打字完成后隐藏光标（用户反馈：不要保留 "|" 符号） */
@keyframes wclCur { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes wclCurBlink { 0%,100%{opacity:1} 50%{opacity:0} }
[data-theme="dark"] .wcl-ws-type { color:#fecdd3; }
[data-theme="dark"] .wcl-ws-start .wcl-ws-ico { background:#1f2738; border-color:#37314f; color:#fda4af; box-shadow:0 8px 22px rgba(0,0,0,.35); }
/* 计时器整体缩小约 15–20%：紧凑卡片 + 翻牌数字略小 + 控件紧凑 */
.wcl-ws-start .wcl-tmr { margin:16px auto 0; max-width:500px; padding:12px 18px 10px; }
.wcl-ws-start .wcl-tmr-hd { margin-bottom:8px; }
.wcl-ws-start .wcl-tmr-clock .wcl-flip { min-width:60px; padding:9px 6px; font-size:clamp(34px,3.7vw,52px); }
.wcl-ws-start .wcl-tmr-clock .wcl-flip-sep { font-size:clamp(28px,3vw,44px); }
.wcl-ws-start .wcl-tmr-note { min-height:22px; margin-top:6px; font-size:clamp(16px,1.3vw,20px); }
.wcl-ws-start .wcl-tmr-ctl { gap:7px; margin-top:2px; }
.wcl-ws-start .wcl-tmr-b { padding:8px 13px; font-size:clamp(13px,1.1vw,15px); }
.wcl-ws-start .wcl-tmr-main { min-width:100px; }

/* 倒计时：时钟视觉中心，控制按钮紧凑排列在时钟下方 */
.wcl-tmr { margin:20px auto 0; max-width:560px; padding:16px 22px 14px; background:#fff; border:1px solid #F3DDE1; border-radius:22px; box-shadow:0 10px 30px rgba(244,63,94,.08); }
.wcl-tmr-hd { display:flex; align-items:center; justify-content:center; gap:8px; font-size:var(--wcl-label); font-weight:700; color:#94a3b8; margin-bottom:10px; }
.wcl-tmr-hd svg { color:#f43f5e; }
.wcl-tmr-hd b { color:#e11d48; font-variant-numeric:tabular-nums; }
.wcl-tmr-clock { display:flex; align-items:center; justify-content:center; gap:10px; }
/* 翻页时钟：数字卡 + 中缝分割线；换位时纵向位移淡入（不做 3D 翻转） */
.wcl-flip { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:78px; padding:12px 8px; border-radius:14px; background:#1f2937; color:#fff; overflow:hidden;
  font-variant-numeric:tabular-nums; font-size:clamp(40px,4.4vw,64px); font-weight:800; line-height:1; }
.wcl-flip::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(255,255,255,.16); }
.wcl-flip i { font-style:normal; display:block; }
.wcl-flip.tick i { animation:wclFlipIn 260ms var(--wcl-ease) both; }
@keyframes wclFlipIn { from { opacity:.15; transform:translateY(-36%); } to { opacity:1; transform:translateY(0); } }
.wcl-flip-sep { font-size:clamp(32px,3.4vw,52px); font-weight:800; color:#9f1239; }
.wcl-tmr.done .wcl-flip { background:#9f1239; }
.wcl-tmr-note { min-height:26px; margin-top:8px; font-size:clamp(18px,1.5vw,22px); font-weight:800; letter-spacing:1px; color:#e11d48; opacity:0; transition:opacity 320ms var(--wcl-ease); }
.wcl-tmr-note.on { opacity:1; }
.wcl-tmr-ctl { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:2px; }
.wcl-tmr-b { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; font-family:inherit; font-size:var(--wcl-label); font-weight:700; line-height:1; border-radius:13px; border:1px solid #F3DDE1; background:#fff; color:#9f1239; cursor:pointer;
  transition:transform 180ms var(--wcl-ease), background 180ms var(--wcl-ease), box-shadow 180ms var(--wcl-ease); }
.wcl-tmr-b:hover { transform:translateY(-2px); background:#FFF5F6; box-shadow:0 8px 18px rgba(244,63,94,.12); }
.wcl-tmr-b:active { transform:scale(.97); }
.wcl-tmr-main { min-width:118px; justify-content:center; background:#f43f5e; border-color:#f43f5e; color:#fff; box-shadow:0 6px 16px rgba(244,63,94,.24); }
.wcl-tmr-main:hover { background:#e11d48; box-shadow:0 10px 24px rgba(244,63,94,.3); }

/* 全屏计时层：纯黑底、居中巨大白色时钟 */
.wcl-tmr-fs { position:fixed; inset:0; z-index:10020; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:min(4vh,34px); background:#000; opacity:0; transition:opacity 260ms var(--wcl-ease); }
.wcl-tmr-fs.show { opacity:1; }
.wcl-tmr-fs-clock { display:flex; align-items:center; justify-content:center; gap:clamp(8px,1.4vw,22px); }
.wcl-tmr-fs-clock .wcl-flip { min-width:min(20vw,32vh); padding:min(3vh,3vw) 0; border-radius:min(3vw,28px); background:#0b0b0b; color:#fff; font-size:min(16vw,28vh); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.wcl-tmr-fs-clock .wcl-flip::after { background:rgba(255,255,255,.12); }
.wcl-tmr-fs-clock .wcl-flip-sep { color:#fff; font-size:min(9vw,16vh); }
.wcl-tmr-fs.done .wcl-flip { background:#160406; }
.wcl-tmr-fs-note { min-height:38px; font-size:clamp(22px,2.4vw,34px); font-weight:800; letter-spacing:3px; color:#fff; opacity:0; transition:opacity 320ms var(--wcl-ease); }
.wcl-tmr-fs-note.on { opacity:1; }
.wcl-tmr-fs-ctl { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.wcl-tmr-fs-ctl .wcl-tmr-b { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); color:#fff; }
.wcl-tmr-fs-ctl .wcl-tmr-b:hover { background:rgba(255,255,255,.18); box-shadow:none; }
.wcl-tmr-fs-ctl .wcl-tmr-main { background:#f43f5e; border-color:#f43f5e; }
.wcl-tmr-fs-ctl .wcl-tmr-main:hover { background:#e11d48; }

/* ==========================================================================
   第 14 页 · 完结页（需求 #6）：钢笔线性图标 + 柔光 + 浅纸纹，居中排版
   ========================================================================== */
/* 完结页：标题 / 中文 / 英文三层垂直居中；指定中文一行显示（clamp + nowrap），减小左右留白不缩字 */
.wcl-fin { position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:calc(100dvh - 176px); padding:24px 8px; }
.wcl-fin-paper { position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:28px; background-color:#FFFDFC;
  background-image:linear-gradient(rgba(159,18,57,.045) 1px, transparent 1px); background-size:100% 34px; }
.wcl-fin-glow { position:absolute; inset:-8% -6%; z-index:0; pointer-events:none; filter:blur(2px);
  background:radial-gradient(42% 48% at 50% 26%, rgba(244,63,94,.13), transparent 72%),
             radial-gradient(38% 44% at 80% 82%, rgba(167,139,250,.10), transparent 72%); }
.wcl-fin-inner { position:relative; z-index:1; text-align:center; width:100%; max-width:1040px; margin:0 auto; }
.wcl-fin-ico { display:inline-flex; align-items:center; justify-content:center; width:88px; height:88px; border-radius:50%; background:#fff; border:1px solid #F3DDE1; color:#e11d48;
  box-shadow:0 0 0 10px rgba(244,63,94,.06), 0 14px 34px rgba(244,63,94,.14); }
.wcl-fin-title { margin:20px 0 0; font-size:var(--wcl-h1); font-weight:900; letter-spacing:2px; color:#9f1239; }
.wcl-fin-cn { margin:14px auto 0; max-width:none; white-space:nowrap; font-size:clamp(20px,1.9vw,24px); line-height:1.6; color:#334155; }
.wcl-fin-en { margin:10px 0 0; font-family:var(--wcl-serif); font-size:clamp(17px,1.4vw,21px); letter-spacing:1px; color:#94a3b8; }
.wcl-fin-acts { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:24px; }
.wcl-fin-b { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; font-family:inherit; font-size:clamp(15px,1.2vw,18px); font-weight:700; line-height:1; border-radius:14px; border:1px solid #F3DDE1; background:#fff; color:#9f1239; cursor:pointer; box-shadow:0 6px 18px rgba(244,63,94,.08);
  transition:transform 180ms var(--wcl-ease), background 180ms var(--wcl-ease), box-shadow 180ms var(--wcl-ease); }
.wcl-fin-b:hover { transform:translateY(-2px); background:#FFF5F6; box-shadow:0 12px 26px rgba(244,63,94,.14); }
.wcl-fin-b:active { transform:scale(.97); }
.wcl-fin-b-exit { background:#FFF1F0; border-color:#F6D4CF; color:#C4645B; }
.wcl-fin-b-exit:hover { background:#FDE7E4; }

/* ---------- 完整支架放大层 ---------- */
.wcl-zoom-layer { position:fixed; inset:0; z-index:10010; display:flex; align-items:center; justify-content:center; padding:5vh 6vw; background:rgba(15,23,42,.55); opacity:0; transition:opacity 240ms var(--wcl-ease); cursor:zoom-out; }
.wcl-zoom-layer.show { opacity:1; }
.wcl-zoom-inner { width:100%; max-width:940px; max-height:90vh; overflow:auto; transform:scale(.985); transition:transform 240ms var(--wcl-ease); cursor:default; border-left-width:6px; }
.wcl-zoom-layer.show .wcl-zoom-inner { transform:scale(1); }
.wcl-zoom-inner .wcl-full-body { font-size:clamp(22px,2vw,32px); line-height:1.8; }
.wcl-zoom-inner::before { display:none !important; }

/* ---------- 底部操作栏：5 个「图标 + 两字」 ---------- */
/* 三列 grid：left=上页(桌面hidden) / center=回退+揭示+基础/提高胶囊(居中) / right=退出(最右) */
.wcl-bar { flex:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:12px 24px calc(12px + env(safe-area-inset-bottom,0)); border-top:1px solid var(--wcl-line); background:rgba(255,255,255,.94);
  transition:transform 360ms var(--wcl-ease), height 360ms var(--wcl-ease), padding 360ms var(--wcl-ease), opacity 260ms var(--wcl-ease), border-color 360ms var(--wcl-ease); }
.wcl-bar-left { display:flex; gap:10px; justify-self:start; align-items:center; }
.wcl-bar-center { display:flex; gap:10px; justify-self:center; align-items:center; }
.wcl-bar-right { display:flex; gap:10px; justify-self:end; align-items:center; }
/* 隐藏：操作栏滑出屏幕底部，内容区（stage）自动扩展 */
.wcl-overlay.wcl-bar-hidden .wcl-bar { transform:translateY(120%); height:0; padding-top:0; padding-bottom:0; border-top-color:transparent; opacity:0; overflow:hidden; }

/* 展开/隐藏胶囊拉手（需求）：贴在操作栏下沿中央，不占按钮行 */
.wcl-handle {
  position:fixed; left:50%; transform:translateX(-50%); z-index:10060;
  width:60px; height:26px; padding:0; border-radius:999px;
  background:rgba(255,255,255,.75); border:1px solid #F3DDE1; box-shadow:0 2px 10px rgba(15,23,42,.10);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#9f1239;
  transition:bottom 340ms var(--wcl-ease), transform 340ms var(--wcl-ease), border-color 180ms var(--wcl-ease), box-shadow 180ms var(--wcl-ease), background 180ms var(--wcl-ease);
}
.wcl-handle svg { width:18px; height:18px; stroke-width:2; }
.wcl-handle:hover { transform:translateX(-50%) translateY(-2px); border-color:#f9a8b4; box-shadow:0 6px 16px rgba(244,63,94,.20); background:rgba(255,255,255,.96); }
.wcl-handle:active { transform:translateX(-50%) scale(.96); }
/* Hover Tooltip（默认只显示图标） */
.wcl-handle::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  padding:5px 10px; border-radius:8px; background:rgba(31,41,55,.94); color:#fff; font-size:12px; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 160ms var(--wcl-ease), transform 160ms var(--wcl-ease);
}
.wcl-handle:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }
[data-theme="dark"] .wcl-handle { background:rgba(35,43,61,.8); border-color:rgba(251,113,133,.35); color:#fda4af; box-shadow:0 2px 10px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-handle:hover { border-color:#fda4af; background:rgba(43,52,72,.95); }
.wcl-btn { position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; font-family:inherit; font-size:var(--wcl-label); font-weight:700; line-height:1; border-radius:14px; border:1px solid #F3DDE1; background:#fff; color:#9f1239; cursor:pointer; white-space:nowrap; transition:transform 180ms var(--wcl-ease), background 180ms var(--wcl-ease), box-shadow 180ms var(--wcl-ease), opacity 180ms var(--wcl-ease); }
.wcl-btn:hover:not(:disabled) { transform:translateY(-2px); background:#FFF5F6; box-shadow:0 8px 20px rgba(244,63,94,.12); }
.wcl-btn:active:not(:disabled) { transform:scale(.97); }
.wcl-btn:disabled { opacity:.38; cursor:not-allowed; }
.wcl-btn-i { display:inline-flex; align-items:center; }
.wcl-btn-i svg { width:22px; height:22px; }
.wcl-btn-t { letter-spacing:2px; }
.wcl-btn-primary { background:#f43f5e; border-color:#f43f5e; color:#fff; box-shadow:0 6px 16px rgba(244,63,94,.24); }
.wcl-btn-primary:hover:not(:disabled) { background:#e11d48; box-shadow:0 10px 24px rgba(244,63,94,.3); }

/* 左侧竖向翻页导航（需求 #2）：固定页面左侧中部，上=上页、下=下页，Hover 右侧 Tooltip */
.wcl-sidenav { position:fixed; left:12px; top:50%; transform:translateY(-50%); z-index:10050; display:flex; flex-direction:column; gap:11px; }
.wcl-side-btn {
  position:relative; width:44px; height:44px; padding:0; border-radius:50%;
  border:1px solid #F3DDE1; background:rgba(255,255,255,.85); color:#9f1239; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(15,23,42,.08);
  transition:transform 180ms var(--wcl-ease), box-shadow 200ms var(--wcl-ease), color 200ms var(--wcl-ease), border-color 200ms var(--wcl-ease);
}
.wcl-side-btn svg { width:24px; height:24px; stroke-width:1.9; }
.wcl-side-btn:hover:not(:disabled) { transform:translateY(-2px); border-color:#f9a8b4; color:#e11d48; box-shadow:0 8px 18px rgba(244,63,94,.16); }
.wcl-side-btn:active:not(:disabled) { transform:scale(.96); }
.wcl-side-btn:disabled { opacity:.4; cursor:not-allowed; }
.wcl-side-btn::after {
  content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%) translateX(-4px);
  padding:5px 10px; border-radius:8px; background:rgba(31,41,55,.94); color:#fff; font-size:12px; font-weight:600; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 160ms var(--wcl-ease), transform 160ms var(--wcl-ease);
}
.wcl-side-btn:hover::after { opacity:1; transform:translateY(-50%) translateX(0); }
[data-theme="dark"] .wcl-side-btn { background:rgba(35,43,61,.8); border-color:rgba(251,113,133,.35); color:#fda4af; box-shadow:0 4px 12px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-side-btn:hover:not(:disabled) { border-color:#fda4af; background:rgba(43,52,72,.95); }
/* 底部操作栏只保留核心按钮：上页/下页默认隐藏（桌面走左侧导航），窄屏（空间不足）恢复到底部 */
.wcl-bar-nav { display:none; }
@media (min-width:1151px) {
  .wcl-stage { padding-left:84px; }   /* 内容区预留左侧安全距离，避免与导航重叠 */
}
@media (max-width:1150px) {
  .wcl-sidenav { display:none; }
  .wcl-bar-nav { display:inline-flex; }
  .wcl-stage { padding-left:40px; padding-right:40px; }
}

.wcl-btn-exit { background:#FFF1F0; border-color:#F6D4CF; color:#C4645B; }
.wcl-btn-exit:hover:not(:disabled) { background:#FDE7E4; box-shadow:0 8px 20px rgba(196,100,91,.16); }
/* 快捷键说明：hover 气泡，不占版面 */
.wcl-btn::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px); padding:6px 12px; border-radius:9px; background:rgba(31,41,55,.94); color:#fff; font-size:13px; font-weight:600; letter-spacing:0; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity 160ms var(--wcl-ease), transform 160ms var(--wcl-ease); }
.wcl-btn:hover:not(:disabled)::after, .wcl-btn:focus-visible::after { opacity:1; transform:translate(-50%,0); }

/* ---------- 减少动态效果 ---------- */
.wcl-reduced .wcl-stage { scroll-behavior:auto; }
.wcl-reduced .wcl-slide { animation:wclReducedIn 300ms ease both !important; }   /* 简短淡入（需求 #4） */
.wcl-reduced .wcl-group.show,
.wcl-reduced .wcl-topic,
.wcl-reduced .wcl-exq,
.wcl-reduced .wcl-flip.tick i,
.wcl-reduced .wcl-full-wrap .wcl-full-block + .wcl-full-block::before { animation:none !important; }
@keyframes wclReducedIn { from { opacity:0; } to { opacity:1; } }
.wcl-reduced .wcl-m, .wcl-reduced .wcl-hl-chip, .wcl-reduced .wcl-progbar i,
.wcl-reduced .wcl-exq-ph, .wcl-reduced .wcl-exq-v,
.wcl-reduced .wcl-tmr-note, .wcl-reduced .wcl-tmr-fs, .wcl-reduced .wcl-tmr-fs-note,
.wcl-reduced .wcl-zoom-layer, .wcl-reduced .wcl-zoom-inner, .wcl-reduced .wcl-hl-panel { transition:none !important; }
.wcl-reduced .wcl-speech-btn.speaking::after { display:none !important; }
.wcl-reduced .wcl-bar, .wcl-reduced .wcl-handle { transition:opacity 240ms ease !important; }   /* 操作栏收起：取消滑动，仅淡入淡出 */

/* ---------- 响应式：移动端（仅图标） ---------- */
@media (max-width:900px) {
  .wcl-top { padding:12px 16px; gap:10px; }
  .wcl-top-c { gap:12px; }
  .wcl-prog:not(.wcl-prog-all) { display:none; }
  .wcl-stage { padding:18px 16px; }
  .wcl-slide.wcl-ghost { left:50%; right:auto; width:calc(100% - 32px); top:18px; }
  .wcl-pw-list { grid-template-columns:1fr 1fr; }
  .wcl-anal-wrap .w-expr-grid { grid-template-columns:1fr; }
  .wcl-exq-grid { grid-template-columns:1fr; gap:12px; }
  .wcl-topic { padding:18px 18px; border-radius:16px; }
  .wcl-topic-body { max-height:32vh; }
  .wcl-exq { padding:15px 18px; border-radius:16px; }
  .wcl-slide-plain { min-height:auto; }
  .wcl-ws { padding:22px 0 6px; }
  .wcl-ws-cn { white-space:normal; font-size:clamp(17px,1.4vw,21px); }
  .wcl-ws-ico { width:52px; height:52px; border-radius:16px; }
  .wcl-tmr { padding:18px 16px 14px; border-radius:18px; }
  .wcl-flip { min-width:56px; padding:8px 4px; font-size:38px; }
  .wcl-tmr-fs-clock { gap:6px; }
  .wcl-tmr-fs-clock .wcl-flip { min-width:19vw; font-size:15vw; border-radius:14px; }
  .wcl-tmr-fs-clock .wcl-flip-sep { font-size:9vw; }
  .wcl-fin { padding:28px 0 18px; }
  .wcl-fin-cn { white-space:normal; font-size:clamp(16px,1.35vw,20px); }
  .wcl-fin-ico { width:70px; height:70px; }
  .wcl-bar { gap:6px; padding:10px 10px calc(10px + env(safe-area-inset-bottom,0)); grid-template-columns:auto 1fr auto; }
  .wcl-btn { padding:10px 12px; border-radius:12px; }
  .wcl-btn-t { display:none; }
  .wcl-btn::after { display:none; }
  /* 手机端竖屏：翻页按钮（上页/下页）必须清晰可见且可点击 */
  .wcl-bar-nav { display:inline-flex !important; width:46px; height:42px; padding:0; justify-content:center; }
  .wcl-bar-nav svg { width:22px; height:22px; }
  .wcl-bar-center { gap:6px; }
}

/* ---------- 课堂展示 · 夜间模式 ---------- */
[data-theme="dark"] .w-classroom-btn { background:rgba(244,63,94,.16); border-color:rgba(251,113,133,.4); color:#fda4af; }
[data-theme="dark"] .w-classroom-btn:hover { background:rgba(244,63,94,.26); }
[data-theme="dark"] .wcl-overlay { background:#141a2b; color:#F4F7FC; --wcl-line:#2d3650; }
[data-theme="dark"] .wcl-overlay:fullscreen { background:#141a2b; }
[data-theme="dark"] .wcl-top { background:rgba(20,26,43,.86); }
[data-theme="dark"] .wcl-chapter { color:#fda4af; }
[data-theme="dark"] .wcl-dot { color:#7f5560; }
[data-theme="dark"] .wcl-pagename { color:#cbd5e1; }
[data-theme="dark"] .wcl-prog { color:#9aa6c4; }
[data-theme="dark"] .wcl-prog b { color:#fda4af; }
[data-theme="dark"] .wcl-prog-all b { color:#F4F7FC; }
[data-theme="dark"] .wcl-progbar i { background:linear-gradient(90deg,#fb7185,#f43f5e); }
[data-theme="dark"] .wcl-slide-body { color:#d7deea; }
[data-theme="dark"] .wcl-subhead { color:#fecdd3; }
[data-theme="dark"] .wcl-hint-sm, [data-theme="dark"] .wcl-hl-tip, [data-theme="dark"] .wcl-pat-note, [data-theme="dark"] .wcl-exp-ref, [data-theme="dark"] .wcl-empty, [data-theme="dark"] .wcl-empty-sm { color:#8b97b3; }
[data-theme="dark"] .wcl-core-dot { background:rgba(109,40,217,.35); border-color:rgba(196,181,253,.5); }
[data-theme="dark"] .wcl-wc { color:#fda4af; background:rgba(244,63,94,.14); border-color:rgba(251,113,133,.35); }

/* 卡片面板 */
[data-theme="dark"] .wcl-panel, [data-theme="dark"] .wcl-num, [data-theme="dark"] .wcl-sc, [data-theme="dark"] .wcl-full-block, [data-theme="dark"] .wcl-point, [data-theme="dark"] .wcl-fn, [data-theme="dark"] .wcl-conn-grp { background:#1f2738; border-color:#37314f; box-shadow:0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .wcl-panel-h, [data-theme="dark"] .wcl-cat-n, [data-theme="dark"] .wcl-conn-fn { color:#fecdd3; }
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-panel,
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-sc,
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-point,
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-fn,
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-conn-grp,
[data-theme="dark"] .wcl-group.show:last-of-type > .wcl-num { border-color:rgba(251,113,133,.55); box-shadow:0 14px 34px rgba(0,0,0,.45); }
[data-theme="dark"] .wcl-num-t, [data-theme="dark"] .wcl-sc-body, [data-theme="dark"] .wcl-full-body, [data-theme="dark"] .wcl-pw-en, [data-theme="dark"] .wcl-pat-c, [data-theme="dark"] .wcl-pg p { color:#e8ecf5; }
/* 审题速览：题目卡 + 5 张揭示卡 */
[data-theme="dark"] .wcl-topic, [data-theme="dark"] .wcl-exq { background:#1f2738; border-color:#37314f; box-shadow:0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .wcl-topic-h { color:#fecdd3; }
[data-theme="dark"] .wcl-topic-body { color:#e8ecf5; }
[data-theme="dark"] .wcl-topic-body::-webkit-scrollbar-thumb { background:#3b4560; }
[data-theme="dark"] .wcl-exq:hover, [data-theme="dark"] .wcl-exq:focus-visible, [data-theme="dark"] .wcl-exq.on { border-color:rgba(251,113,133,.55); box-shadow:0 12px 28px rgba(0,0,0,.45); }
[data-theme="dark"] .wcl-exq-k { color:#fda4af; }
[data-theme="dark"] .wcl-exq-ph { color:#6d7690; }
[data-theme="dark"] .wcl-exq-v { color:#F4F7FC; }
[data-theme="dark"] .wcl-tag { color:#fda4af; background:rgba(244,63,94,.16); border-color:rgba(251,113,133,.35); }
[data-theme="dark"] .wcl-num { border-left-color:#f43f5e; }
[data-theme="dark"] .wcl-exp { color:#c7cfdd; }
[data-theme="dark"] .wcl-overlay mark.wcl-m-risk { background-color:rgba(245,158,11,.18); }
[data-theme="dark"] .wcl-risk-panel { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.3); }
[data-theme="dark"] .wcl-risk-panel .wcl-panel-h { color:#fbbf24; }
[data-theme="dark"] .wcl-risk { color:#fcd9a8; }
[data-theme="dark"] .wcl-m-risk { background:rgba(245,158,11,.18); color:#FCD34D; }
[data-theme="dark"] .wcl-risk-body { color:#FDE68A; }
[data-theme="dark"] .wcl-sc-label, [data-theme="dark"] .wcl-pg-l { color:#fda4af; background:rgba(244,63,94,.18); }
/* P0+（2026-08-13）：dark 下支架标签背景交由胶囊 mark 自绘（淡紫 #D8CEDE 仍可读），容器不再叠加粉底 */
[data-theme="dark"] .wcl-full-label { color:#fda4af; background:transparent; }
[data-theme="dark"] .wcl-full-block { border-left-color:#fb7185; }
[data-theme="dark"] .wcl-full-wrap .wcl-full-block + .wcl-full-block::before { background:#fb7185; }
[data-theme="dark"] .wcl-cat-i { background:#f43f5e; }
[data-theme="dark"] .wcl-pw { border-bottom-color:#2d3650; }
[data-theme="dark"] .wcl-pw-cn { color:#9aa6c4; }
[data-theme="dark"] .wcl-pat, [data-theme="dark"] .wcl-conn-eg { background:rgba(255,255,255,.03); border-color:#2d3650; }
[data-theme="dark"] .wcl-conn-eg { color:#c7cfdd; }
[data-theme="dark"] .wcl-conn-eg b { color:#fda4af; }
[data-theme="dark"] .wcl-conn { background:rgba(29,78,216,.28); color:#BFDBFE; border-color:rgba(147,197,253,.35); }
[data-theme="dark"] .wcl-conn.active { box-shadow:0 0 0 3px rgba(147,197,253,.3); }
[data-theme="dark"] .wcl-slide .w-blank { color:#fda4af; border-bottom-color:rgba(251,182,193,.5); }
/* 三层标注：夜间用深色底 + 浅色字，避免浅底浅字 */
[data-theme="dark"] .wcl-essay-hl.wcl-pass-conn .wcl-m-conn { --wmb:rgba(29,78,216,.42); color:#BFDBFE; }
[data-theme="dark"] .wcl-essay-hl.wcl-pass-expr .wcl-m-expr { --wmb:rgba(4,120,87,.42); color:#A7F3D0; }
[data-theme="dark"] .wcl-essay-hl.wcl-pass-gram .wcl-m-gram { --wmb:rgba(109,40,217,.42); color:#DDD6FE; }
[data-theme="dark"] .wcl-slide .w-hl-core, [data-theme="dark"] .wcl-slide mark.w-hl-core { background:rgba(109,40,217,.36) !important; color:#DDD6FE !important; }
[data-theme="dark"] .wcl-hl-chip { color:#8b97b3; background:rgba(255,255,255,.05); border-color:#2d3650; }
[data-theme="dark"] .wcl-hl-chip i { background:#4b5563; }
[data-theme="dark"] .wcl-hl-chip-conn.on { color:#BFDBFE; background:rgba(29,78,216,.32); border-color:rgba(147,197,253,.45); }
[data-theme="dark"] .wcl-hl-chip-conn.on i { background:#BFDBFE; }
[data-theme="dark"] .wcl-hl-chip-expr.on { color:#A7F3D0; background:rgba(4,120,87,.32); border-color:rgba(110,231,183,.45); }
[data-theme="dark"] .wcl-hl-chip-expr.on i { background:#A7F3D0; }
[data-theme="dark"] .wcl-hl-chip-gram.on { color:#DDD6FE; background:rgba(109,40,217,.32); border-color:rgba(196,181,253,.45); }
[data-theme="dark"] .wcl-hl-chip-gram.on i { background:#DDD6FE; }
/* 亮点解析 */
[data-theme="dark"] .wcl-anal-wrap .w-card { border-color:#37314f; box-shadow:0 6px 20px rgba(0,0,0,.3); }
[data-theme="dark"] .wcl-anal-wrap .w-expr { background:rgba(255,255,255,.03); border-color:rgba(4,120,87,.32); box-shadow:none; }
[data-theme="dark"] .wcl-anal-wrap .w-expr mark { background:rgba(4,120,87,.42) !important; color:#A7F3D0 !important; }
[data-theme="dark"] .wcl-anal-wrap .w-expr-cn { color:#9aa6c4; }
[data-theme="dark"] .wcl-anal-wrap .w-ls { background:rgba(255,255,255,.03); border-color:#2d3650; }
[data-theme="dark"] .wcl-anal-wrap .w-ls-orig mark.w-hl-gram { background:rgba(109,40,217,.42) !important; color:#DDD6FE !important; }
[data-theme="dark"] .wcl-anal-wrap .w-ls-orig mark.w-hl-conn { background:rgba(29,78,216,.42) !important; color:#BFDBFE !important; }
/* 开始写作页 · 倒计时 */
[data-theme="dark"] .wcl-ws-glow { background:linear-gradient(135deg, rgba(244,63,94,.10), rgba(245,158,11,.07) 46%, rgba(109,40,217,.12)); }
[data-theme="dark"] .wcl-ws-ico { background:#1f2738; border-color:#37314f; color:#fda4af; box-shadow:0 8px 22px rgba(0,0,0,.35); }
[data-theme="dark"] .wcl-ws-title { color:#fecdd3; }
[data-theme="dark"] .wcl-ws-cn { color:#d7deea; }
[data-theme="dark"] .wcl-ws-en, [data-theme="dark"] .wcl-fin-en, [data-theme="dark"] .wcl-tmr-hd { color:#8b97b3; }
[data-theme="dark"] .wcl-tmr { background:#1f2738; border-color:#37314f; box-shadow:0 10px 30px rgba(0,0,0,.35); }
[data-theme="dark"] .wcl-tmr-hd b { color:#fda4af; }
[data-theme="dark"] .wcl-flip { background:#0f1522; color:#F4F7FC; }
[data-theme="dark"] .wcl-flip-sep { color:#fda4af; }
[data-theme="dark"] .wcl-tmr.done .wcl-flip { background:#3a0d1a; }
[data-theme="dark"] .wcl-tmr-note { color:#fda4af; }
[data-theme="dark"] .wcl-tmr-b { background:#232b3d; border-color:rgba(251,113,133,.32); color:#fda4af; }
[data-theme="dark"] .wcl-tmr-b:hover { background:#2b3448; box-shadow:0 8px 18px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-tmr-main, [data-theme="dark"] .wcl-tmr-fs-ctl .wcl-tmr-main { background:#f43f5e; border-color:#f43f5e; color:#fff; }
[data-theme="dark"] .wcl-tmr-fs-ctl .wcl-tmr-b { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.24); color:#fff; }
/* 完结页 */
[data-theme="dark"] .wcl-fin-paper { background-color:#171E2E; background-image:linear-gradient(rgba(251,113,133,.07) 1px, transparent 1px); }
[data-theme="dark"] .wcl-fin-glow { background:radial-gradient(42% 48% at 50% 26%, rgba(244,63,94,.20), transparent 72%), radial-gradient(38% 44% at 80% 82%, rgba(167,139,250,.16), transparent 72%); }
[data-theme="dark"] .wcl-fin-ico { background:#1f2738; border-color:rgba(251,113,133,.35); color:#fda4af; box-shadow:0 0 0 10px rgba(244,63,94,.10), 0 14px 34px rgba(0,0,0,.45); }
[data-theme="dark"] .wcl-fin-title { color:#fecdd3; }
[data-theme="dark"] .wcl-fin-cn { color:#d7deea; }
[data-theme="dark"] .wcl-fin-b { background:#1f2738; border-color:rgba(251,113,133,.32); color:#fda4af; box-shadow:0 6px 18px rgba(0,0,0,.32); }
[data-theme="dark"] .wcl-fin-b:hover { background:#262f43; box-shadow:0 12px 26px rgba(0,0,0,.45); }
[data-theme="dark"] .wcl-fin-b-exit { background:rgba(196,100,91,.18); border-color:rgba(246,212,207,.28); color:#f3b7b0; }
[data-theme="dark"] .wcl-fin-b-exit:hover { background:rgba(196,100,91,.26); }
/* 底部操作栏 */
[data-theme="dark"] .wcl-bar { background:rgba(20,26,43,.94); }
[data-theme="dark"] .wcl-btn { background:#1f2738; border-color:rgba(251,113,133,.32); color:#fda4af; }
[data-theme="dark"] .wcl-btn:hover:not(:disabled) { background:#262f43; box-shadow:0 8px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-btn.active { background:#f43f5e; border-color:#f43f5e; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.4); }
[data-theme="dark"] .wcl-btn.active:hover:not(:disabled) { background:#e11d48; }
[data-theme="dark"] .wcl-btn:not(.active)[data-wclact="route-basic"], [data-theme="dark"] .wcl-btn:not(.active)[data-wclact="route-advanced"] { background:#1f2738; color:#fda4af; }
[data-theme="dark"] .wcl-btn-primary { background:#f43f5e; border-color:#f43f5e; color:#fff; }
[data-theme="dark"] .wcl-btn-primary:hover:not(:disabled) { background:#e11d48; }
[data-theme="dark"] .wcl-btn-exit { background:rgba(196,100,91,.18); color:#F0A9A1; border-color:rgba(240,169,161,.3); }
[data-theme="dark"] .wcl-btn::after { background:rgba(244,247,252,.94); color:#141a2b; }
[data-theme="dark"] .wcl-zoom-layer { background:rgba(0,0,0,.6); }

/* ---------- 词汇故事课堂展示 + TTS ---------- */
.vui-story-act { display:flex; gap:10px; flex-wrap:wrap; }
.vui-story-act .vui-btn { display:inline-flex; align-items:center; gap:6px; }
.vsclass-overlay {
  position:fixed; inset:0; z-index:10000; display:flex; flex-direction:column; background:#fffdf5; color:#1f2937;
  /* 课堂阅读字体体系：英文正文 Source Serif 4→Georgia；标题/UI Manrope；中文 MiSans；音标 Noto Sans(完整 IPA) */
  --vs-ui:'Manrope','Inter','MiSans','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --vs-serif:'Source Serif 4',Georgia,'Times New Roman',serif;
  --vs-cn:'MiSans','HarmonyOS Sans SC','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --vs-ipa:'Noto Sans','Source Sans 3','Arial Unicode MS',Arial,sans-serif;
  --vs-ease:cubic-bezier(0.22,1,0.36,1);
  font-family:var(--vs-ui);
}
.vsclass-overlay:fullscreen { background:#fffdf5; }
.vsclass-top { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 28px; border-bottom:1px solid #fde68a; background:rgba(255,255,255,.72); backdrop-filter:blur(6px); }
.vsclass-title { font-size:18px; font-weight:700; color:#92400e; }
.vsclass-progress { font-size:22px; font-weight:800; color:#d97706; font-variant-numeric:tabular-nums; }
.vsclass-stage { position:relative; flex:1 1 auto; overflow:auto; padding:32px; display:flex; align-items:center; justify-content:center; }
.vsclass-slide { width:100%; max-width:1080px; }
.vsclass-fade-in { animation:vsclassFadeIn 200ms ease-out; }
@keyframes vsclassFadeIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* 封面 */
.vsclass-slide-cover { position:relative; text-align:center; padding:40px 30px; }
.vsclass-cover-deco { display:none; }   /* 已移除：巨型 "S" 在暗色下与词卡重叠产生视觉伪影 */
.vsclass-cover-main { position:relative; z-index:1; }
.vsclass-cover-label { display:inline-block; font-size:15px; font-weight:800; color:#b45309; background:#fef3c7; padding:6px 18px; border-radius:999px; margin-bottom:18px; }
.vsclass-cover-title { font-size:clamp(36px,5.5vw,64px); font-weight:900; color:#78350f; line-height:1.2; margin:0 0 14px; }
.vsclass-cover-title .vsclass-title-mark { background:linear-gradient(180deg,rgba(253,230,138,0) 58%,#fde68a 58%); padding:0 8px; border-radius:4px; }
.vsclass-cover-theme { font-size:clamp(18px,2.4vw,26px); color:#92400e; margin-bottom:22px; }
.vsclass-cover-legend { display:flex; justify-content:center; gap:14px; margin-bottom:28px; }
/* 统一蓝色图例：单词与短语不再区分颜色 */
.vsclass-legend-item { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:999px; font-size:15px; font-weight:700; background:#dbeafe; color:#1e40af; }
.vsclass-legend-item::before { content:""; width:10px; height:10px; border-radius:50%; background:#1e40af; }
.vsclass-words { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:900px; margin:0 auto; }
.vsclass-word { display:inline-flex; flex-direction:column; align-items:center; gap:4px; padding:14px 20px; background:#fff; border:1px solid #bfdbfe; border-radius:14px; box-shadow:0 6px 18px rgba(30,64,175,.08); }
.vsclass-word-en { font-size:clamp(20px,2.6vw,30px); font-weight:800; color:#1e40af; }
.vsclass-word-note { font-size:clamp(14px,1.6vw,18px); color:#475569; }
.vsclass-cover-hint { margin-top:34px; font-size:clamp(16px,2vw,20px); color:#d97706; }
.vsclass-cover-hint::before { content:"▸ "; }

/* 故事正文：课堂阅读排版（英文 Source Serif 4→Georgia 28-32px；行高随释义状态 1.8-2.2；左右对齐） */
.vsclass-slide-story { padding:18px 10px; }
.vsclass-story-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:26px; }
.vsclass-story-head-t { flex:1; min-width:0; }
.vsclass-story-title { font-family:var(--vs-ui); font-size:clamp(26px,3.6vw,42px); font-weight:900; color:#78350f; margin-bottom:6px; line-height:1.2; }
.vsclass-story-theme { font-family:var(--vs-cn); font-size:clamp(15px,1.8vw,20px); color:#92400e; }
/* 释义开关胶囊（故事页右上角） */
.vsclass-notes-btn { display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; padding:9px 16px; border-radius:999px;
  border:1px solid #bfdbfe; background:#eff6ff; color:#1e40af; font-family:var(--vs-ui); font-size:15px; font-weight:700; cursor:pointer;
  transition:background .18s var(--vs-ease), border-color .18s var(--vs-ease), transform .18s var(--vs-ease); }
.vsclass-notes-btn:hover { background:#dbeafe; border-color:#93c5fd; transform:translateY(-1px); }
.vsclass-notes-btn:active { transform:scale(.97); }
.vsclass-notes-btn .cls-btn-i { display:inline-flex; }
.vsclass-notes-btn.vsclass-notes-hidden { background:#f5f3ff; border-color:#ddd6fe; color:#6d28d9; }
.vsclass-notes-btn.vsclass-notes-hidden:hover { background:#ede9fe; border-color:#c4b5fd; }
.vsclass-story-body { background:#fff; border:1px solid #fde68a; border-radius:20px; padding:clamp(24px,4vw,46px); box-shadow:0 14px 40px rgba(217,119,6,.10); max-width:920px; margin:0 auto; }
.vsclass-para { font-family:var(--vs-serif); font-size:clamp(28px,2.9vw,32px); font-weight:500; line-height:var(--vs-lh,2.1); color:#1f2937;
  margin:0 0 22px; text-align:justify; text-justify:inter-word; text-align-last:left; transition:line-height 260ms var(--vs-ease); }
.vsclass-para:last-child { margin-bottom:0; }
.vsclass-no-notes .vsclass-para { --vs-lh:1.85; }
/* 句容器：无黄色；朗读强调走雾紫 */
.vsclass-sentence { display:inline; border-radius:5px; transition:background-color 180ms var(--vs-ease); }
.vsclass-sentence.vs-reading-sentence { background:#EDE9FE; color:#5B21B6; box-shadow:inset 0 -2px 0 rgba(91,33,182,.55); }
.vsclass-sentence.vs-reading-tint { background:rgba(237,233,254,.4); }
/* 目标词 ruby：英文词在行内，音标/词性/中文释义用 rt 放该词下方行间（ruby-position:under，禁 absolute 悬浮） */
.vsclass-story-body .vui-story-w { display:ruby; ruby-position:under; -webkit-ruby-position:after; margin:0 1px; vertical-align:baseline; line-height:inherit; ruby-align:center; }
.vsclass-story-body .vui-story-w > rb { display:ruby-base; }
.vsclass-story-body .vui-story-t { display:ruby-base; font-weight:600; padding:1px 6px; border-radius:5px; color:#1E40AF;
  background:#DBEAFE; border-bottom:2px solid #60A5FA;
  transition:background-color 180ms var(--vs-ease), color 180ms var(--vs-ease), box-shadow 180ms var(--vs-ease), border-color 180ms var(--vs-ease); }
.vsclass-story-body .vui-story-w rt { display:ruby-text; font-family:var(--vs-cn); color:#64748B; text-align:center; white-space:nowrap; line-height:1.5;
  font-size:clamp(15px,1.5vw,18px); background:rgba(219,234,254,.4); border-radius:8px; padding:2px 8px;
  opacity:1; transition:opacity 240ms var(--vs-ease); }
.vsclass-story-body .vui-story-w rt { font-family:var(--vs-cn); color:#64748B; text-align:center; white-space:nowrap; line-height:1.5;
  font-size:clamp(15px,1.5vw,18px); background:rgba(219,234,254,.4); border-radius:8px; padding:2px 8px;
  opacity:1; transition:opacity 240ms var(--vs-ease); }
.vsclass-story-body .vui-story-w rt .vs-note-ipa { font-family:var(--vs-ipa); font-size:clamp(16px,1.6vw,18px); }
.vsclass-story-body .vui-story-w rt .vs-note-pos { font-weight:600; font-size:clamp(15px,1.5vw,17px); color:#7C8BA1; }
.vsclass-story-body .vui-story-w rt .vs-note-cn { font-size:clamp(17px,1.7vw,20px); color:#5B6472; }
/* 释义隐藏：先淡出再折叠行高（JS 250ms 后加 .vsclass-notes-collapsed） */
.vsclass-no-notes .vui-story-w rt { opacity:0; }
.vsclass-notes-collapsed .vui-story-w rt { display:none; }
/* 普通词：TTS 朗读按词强调（雾紫 + 2px 紫底线，box-shadow 不改变布局） */
.vsclass-story-body .vs-word { border-radius:4px; transition:background-color 180ms var(--vs-ease), color 180ms var(--vs-ease), box-shadow 180ms var(--vs-ease); }
.vsclass-story-body .vs-word.vs-reading { background:#EDE9FE; color:#5B21B6; box-shadow:0 2px 0 #7C3AED; }
/* 目标词朗读：保留蓝色标识，叠加紫外轮廓 + 柔和底部光带 */
.vsclass-story-body .vui-story-w.vs-reading .vui-story-t { box-shadow:0 0 0 2px #A78BFA, 0 4px 8px rgba(139,92,246,.30); }

/* 启发 */
.vsclass-slide-insp { text-align:center; padding:40px 30px; }
.vsclass-insp-ic { width:84px; height:84px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#f59e0b,#fbbf24); border-radius:50%; box-shadow:0 10px 30px rgba(245,158,11,.25); }
.vsclass-insp-ic svg { width:44px; height:44px; }
.vsclass-insp-label { font-size:clamp(18px,2.4vw,24px); font-weight:800; color:#b45309; margin-bottom:18px; }
.vsclass-insp-q { font-size:clamp(24px,3.6vw,40px); font-weight:800; color:#78350f; line-height:1.45; margin-bottom:18px; }
.vsclass-insp-c { font-size:clamp(18px,2.4vw,26px); color:#92400e; }

/* 底栏 */
.vsclass-bar { flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:12px; padding:14px 22px; border-top:1px solid #fde68a; background:rgba(255,255,255,.92); flex-wrap:wrap; }
.vsclass-btn { padding:11px 20px; font-size:16px; border-radius:10px; border:1px solid #fbbf24; background:#fffbeb; color:#b45309; font-weight:700; cursor:pointer; transition:background .15s,transform .15s; }
.vsclass-btn:hover:not(:disabled) { background:#fef3c7; transform:translateY(-1px); }
.vsclass-btn-primary { background:#f59e0b; color:#fff; border-color:#f59e0b; }
.vsclass-btn-primary:hover:not(:disabled) { background:#d97706; }
.vsclass-btn-exit { background:#fee2e2; color:#dc2626; border-color:#fecaca; }
.vsclass-btn-exit:hover:not(:disabled) { background:#fecaca; }
.vsclass-tts-progress { font-size:15px; font-weight:700; color:#92400e; min-width:50px; text-align:center; }
.vsclass-tts-active { animation:vsclassPulse 1.6s ease-in-out infinite; }
@keyframes vsclassPulse { 0%,100% { box-shadow:0 0 0 0 rgba(245,158,11,.35); } 50% { box-shadow:0 0 0 8px rgba(245,158,11,0); } }
/* 播放中按钮图标轻微声波呼吸（不变形、不闪烁） */
.vsclass-tts-active .cls-btn-i { animation:vsclassWave 1.6s var(--vs-ease) infinite; }
@keyframes vsclassWave { 0%,100% { transform:scale(1); } 50% { transform:scale(1.1); } }

@media (max-width:900px) {
  .vsclass-stage { padding:18px 16px; }
  .vsclass-top { padding:12px 16px; }
  .vsclass-bar { gap:8px; padding:12px 14px; }
  .vsclass-btn { padding:9px 13px; font-size:14px; }
  .vsclass-word { padding:10px 14px; }
  .vsclass-story-body { padding:20px; }
  .vsclass-notes-btn { padding:7px 12px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsclass-fade-in, .vsclass-sentence, .vsclass-tts-active, .vsclass-tts-active .cls-btn-i,
  .vsclass-para, .vsclass-story-body .vui-story-t, .vsclass-story-body .vs-word,
  .vsclass-story-body .vui-story-w rt { animation:none !important; transition:none !important; }
}

/* 课堂展示强制日间亮色：vsclass 不跟随系统暗色（投影场景永远明亮清晰） */

/* ==========================================================================
   课堂展示 · 通用底部操作栏按钮（词汇 vclass- / 词汇故事 vsclass-）
   与写作课堂 .wcl-btn 视觉同构：图标 + 两字；hover 轻微抬升、点击轻微缩放；
   快捷键说明只走 hover 气泡（data-tip），不占版面；移动端仅显示图标。
   新增课堂模式请直接复用 .cls-btn，不要再另写一套按钮样式。
   ========================================================================== */
.vclass-bar, .vsclass-bar { gap:10px; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0)); }
.cls-btn { position:relative; display:inline-flex; align-items:center; gap:8px; padding:10px 18px; line-height:1; border-radius:14px; white-space:nowrap; cursor:pointer;
  transition:transform 180ms cubic-bezier(0.22,1,0.36,1), background 180ms cubic-bezier(0.22,1,0.36,1), box-shadow 180ms cubic-bezier(0.22,1,0.36,1), opacity 180ms cubic-bezier(0.22,1,0.36,1); }
.cls-btn-i { display:inline-flex; align-items:center; }
.cls-btn-i .cls-ico { display:block; width:22px; height:22px; }
.cls-btn-t { font-size:15px; font-weight:700; letter-spacing:2px; }
.cls-btn:hover:not(:disabled) { transform:translateY(-2px); }
.cls-btn:active:not(:disabled) { transform:scale(.97); }
.cls-btn:disabled { opacity:.38; cursor:not-allowed; }
.cls-btn::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px); padding:6px 12px; border-radius:9px; background:rgba(31,41,55,.94); color:#fff; font-size:13px; font-weight:600; letter-spacing:0; white-space:nowrap; opacity:0; pointer-events:none; z-index:5; transition:opacity 160ms ease, transform 160ms ease; }
.cls-btn:hover:not(:disabled)::after, .cls-btn:focus-visible::after { opacity:1; transform:translate(-50%,0); }
.vclass-btn.cls-btn { background:#fff; border-color:#DDD3F7; color:#6d28d9; }
.vclass-btn.cls-btn:hover:not(:disabled) { background:#F7F4FF; box-shadow:0 8px 20px rgba(109,40,217,.14); }
.vclass-btn-primary.cls-btn { background:#7c3aed; border-color:#7c3aed; color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.24); }
.vclass-btn-primary.cls-btn:hover:not(:disabled) { background:#6d28d9; box-shadow:0 10px 24px rgba(124,58,237,.3); }
.vclass-btn-exit.cls-btn { background:#FFF1F0; border-color:#F6D4CF; color:#C4645B; }
.vclass-btn-exit.cls-btn:hover:not(:disabled) { background:#FDE7E4; box-shadow:0 8px 20px rgba(196,100,91,.16); }
.vsclass-btn.cls-btn { background:#fff; border-color:#F6E0B4; color:#b45309; }
.vsclass-btn.cls-btn:hover:not(:disabled) { background:#FFFAF0; box-shadow:0 8px 20px rgba(180,83,9,.14); }
.vsclass-btn-primary.cls-btn { background:#f59e0b; border-color:#f59e0b; color:#fff; box-shadow:0 6px 16px rgba(245,158,11,.24); }
.vsclass-btn-primary.cls-btn:hover:not(:disabled) { background:#d97706; box-shadow:0 10px 24px rgba(245,158,11,.3); }
.vsclass-btn-exit.cls-btn { background:#FFF1F0; border-color:#F6D4CF; color:#C4645B; }
.vsclass-btn-exit.cls-btn:hover:not(:disabled) { background:#FDE7E4; box-shadow:0 8px 20px rgba(196,100,91,.16); }
[data-theme="dark"] .cls-btn::after { background:rgba(244,247,252,.94); color:#141a2b; }
[data-theme="dark"] .vclass-btn.cls-btn { background:#1f2738; border-color:rgba(167,139,250,.32); color:#d9c8f7; }
[data-theme="dark"] .vclass-btn.cls-btn:hover:not(:disabled) { background:#262f43; box-shadow:0 8px 20px rgba(0,0,0,.4); }
[data-theme="dark"] .vclass-btn-primary.cls-btn { background:#7c3aed; border-color:#7c3aed; color:#fff; }
[data-theme="dark"] .vclass-btn-exit.cls-btn { background:rgba(196,100,91,.18); border-color:rgba(240,169,161,.3); color:#F0A9A1; }
/* vsclass 课堂展示强制日间亮色：不跟随系统暗色（投影场景），底部操作栏保持浅色 */
@media (max-width:900px) {
  .vclass-bar, .vsclass-bar { gap:8px; padding:10px 10px calc(10px + env(safe-area-inset-bottom,0)); }
  .cls-btn { padding:10px 12px; border-radius:12px; }
  .cls-btn-t { display:none; }
  .cls-btn::after { display:none; }
}

/* ============================================================== *
 * 第五轮（2026-08-08）：课堂展示端富文本样式同步（编辑器字号/颜色/高亮生效）+ 轻量 WPS 动画
 *  - wSafeHtml 把 data.userBlocks / 段落里的 pr-c-* / pr-fs-* / pr-hl-* / <strong>/<em>/<u> 保留下来
 *  - 课堂展示页面、所有可点/可读容器内的富文本 marks 都用这套样式生效
 *  - 入场动画 fade-in-up + 错峰 stagger，给正文段落、关键块加入场感
 * ============================================================== */

/* 字号（教师在编辑器用：sm/常规/大/特大 + 精确 px 档） */
.pr-fs-sm { font-size:0.85em; }
.pr-fs-base { font-size:1em; }
.pr-fs-lg { font-size:1.18em; font-weight:500; }
.pr-fs-xl { font-size:1.36em; font-weight:600; }
/* 精确字号（px）：A+/A- 步进 ±2，覆盖 8–96 所有偶数档（wSafeHtml 保留 pr-fs-* 类） */
.pr-fs-8{font-size:8px}.pr-fs-10{font-size:10px}.pr-fs-12{font-size:12px}.pr-fs-14{font-size:14px}
.pr-fs-16{font-size:16px}.pr-fs-18{font-size:18px}.pr-fs-20{font-size:20px}.pr-fs-22{font-size:22px}
.pr-fs-24{font-size:24px}.pr-fs-26{font-size:26px}.pr-fs-28{font-size:28px}.pr-fs-30{font-size:30px}
.pr-fs-32{font-size:32px}.pr-fs-34{font-size:34px}.pr-fs-36{font-size:36px}.pr-fs-38{font-size:38px}
.pr-fs-40{font-size:40px}.pr-fs-42{font-size:42px}.pr-fs-44{font-size:44px}.pr-fs-46{font-size:46px}
.pr-fs-48{font-size:48px}.pr-fs-50{font-size:50px}.pr-fs-52{font-size:52px}.pr-fs-54{font-size:54px}
.pr-fs-56{font-size:56px}.pr-fs-58{font-size:58px}.pr-fs-60{font-size:60px}.pr-fs-62{font-size:62px}
.pr-fs-64{font-size:64px}.pr-fs-66{font-size:66px}.pr-fs-68{font-size:68px}.pr-fs-70{font-size:70px}
.pr-fs-72{font-size:72px}.pr-fs-74{font-size:74px}.pr-fs-76{font-size:76px}.pr-fs-78{font-size:78px}
.pr-fs-80{font-size:80px}.pr-fs-82{font-size:82px}.pr-fs-84{font-size:84px}.pr-fs-86{font-size:86px}
.pr-fs-88{font-size:88px}.pr-fs-90{font-size:90px}.pr-fs-92{font-size:92px}.pr-fs-94{font-size:94px}
.pr-fs-96{font-size:96px}
/* 字色（调色板 8 色） */
.pr-c-red { color:#e11d48; }
.pr-c-orange { color:#ea580c; }
.pr-c-amber { color:#d97706; }
.pr-c-green { color:#16a34a; }
.pr-c-teal { color:#0d9488; }
.pr-c-blue { color:#2563eb; }
.pr-c-purple { color:#7c3aed; }
.pr-c-pink { color:#db2777; }
.pr-c-slate { color:#475569; }
.pr-c-black { color:#0f172a; }
/* 高亮（4 色背景 + 加粗）—— 第六轮升级为低饱和莫兰迪色系（柔和、耐看） */
.pr-hl-yellow { background:#fef3c7; color:#92400e; padding:0 3px; border-radius:3px; }
.pr-hl-pink { background:#fce7f3; color:#9d174d; padding:0 3px; border-radius:3px; }
.pr-hl-green { background:#CDD9C4; color:#4C6143; padding:0 3px; border-radius:3px; }
.pr-hl-blue { background:#C9D8E6; color:#3F5B78; padding:0 3px; border-radius:3px; }
.pr-hl-purple { background:#D8CEDE; color:#5D4E6E; padding:0 3px; border-radius:3px; }
.pr-hl-orange { background:#E6D5C3; color:#7A5C3A; padding:0 3px; border-radius:3px; }
/* 加强粗 / 斜体 / 下划线 */
strong { font-weight:700; }
em { font-style:italic; }
u { text-decoration:underline; text-underline-offset:2px; }

/* WPS 风格入场动画（轻量现代）：fade-in-up + 错峰 stagger
 * 给所有课堂展示页正文段落、关键块加入场感；prefers-reduced-motion 全静态降级 */
@keyframes wclFadeInUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes wclFadeIn { from { opacity:0; } to { opacity:1; } }
.wcl-slide-body .wcl-pg,
.wcl-slide-body .wcl-full-block,
.wcl-slide-body .wcl-point,
.wcl-slide-body .wcl-fn,
.wcl-slide-body .wcl-conn-grp,
.wcl-slide-body .wcl-exp-card,
.wcl-slide-body .wcl-user-block,
.wcl-slide-body .wcl-exq,
.wcl-slide-body .wcl-num-item,
.wcl-slide-body .wcl-tag,
.wcl-slide-body .w-risk,
.wcl-slide-body .wcl-essay > div { animation:wclFadeInUp 480ms var(--wcl-ease, ease) both; animation-delay:calc(var(--wgi, 0) * 80ms + var(--wcl-delay, 0ms)); }
@media (prefers-reduced-motion: reduce) {
  .wcl-slide-body .wcl-pg, .wcl-slide-body .wcl-full-block, .wcl-slide-body .wcl-point, .wcl-slide-body .wcl-fn, .wcl-slide-body .wcl-conn-grp, .wcl-slide-body .wcl-exp-card, .wcl-slide-body .wcl-user-block, .wcl-slide-body .wcl-exq, .wcl-slide-body .wcl-num-item, .wcl-slide-body .wcl-tag, .wcl-slide-body .w-risk, .wcl-slide-body .wcl-essay > div { animation:none; }
}

/* 教师在编辑器加的高亮块在展示端的「轻微脉冲」强调（可选，不抢戏） */
@keyframes wclPulse { 0%, 100% { box-shadow:0 0 0 0 rgba(217,119,6,.4); } 50% { box-shadow:0 0 0 4px rgba(217,119,6,0); } }
.pr-hl-yellow[style*="animation"], .wcl-pg .pr-hl-yellow { animation:wclFadeInUp 480ms var(--wcl-ease) both; }
.wcl-slide-body mark.pr-hl-yellow:not(:hover) { animation:wclFadeInUp 480ms var(--wcl-ease) both; }

/* 第五轮（2026-08-08）：教师自建内容页（+ 新增幻灯片）— 标题 + 富文本块 + 增加区块 */
.wcl-slide-uc-head, .pe-wcl.pe-wcl-k-uc-head, .pe-wcl.pe-wcl-k-uc-head { display:flex; align-items:center; gap:14px; padding-bottom:14px; margin-bottom:18px; border-bottom:2px solid var(--wcl-line); }
.wcl-slide-uc-tag, .pe-wcl.pe-wcl-k-uc-tag, .pe-wcl.pe-wcl-k-uc-tag { font-size:11px; font-weight:700; color:#fff; background:#7c3aed; padding:3px 10px; border-radius:999px; letter-spacing:.5px; }
.wcl-slide-uc-title, .pe-wcl.pe-wcl-k-uc-title, .pe-wcl.pe-wcl-k-uc-title { font-size:clamp(22px,2.4vw,32px); font-weight:900; color:#1e293b; letter-spacing:.5px; margin:0; flex:1; min-width:0; }
.wcl-user-content { display:flex; flex-direction:column; gap:14px; }
.wcl-user-content-block { font-size:clamp(15px,1.4vw,19px); line-height:1.7; color:#1e293b; padding:12px 16px; background:#fff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 1px 3px rgba(15,23,42,.04); min-height:36px; }
.wcl-user-content-block:empty::before { content:'点击编辑器编辑该区块'; color:#94a3b8; font-style:italic; }
.wcl-slide-body .wcl-user-content .pr-fs-sm { font-size:0.85em; }
.wcl-slide-body .wcl-user-content .pr-fs-lg { font-size:1.18em; font-weight:500; }
.wcl-slide-body .wcl-user-content .pr-fs-xl { font-size:1.36em; font-weight:600; }

/* 第五轮：编辑器插入的图片 / 视频在课堂展示端的呈现。
   清洗后媒体容器降级成 <span>（在 <p> 里用 div 会被解析器提前闭合，把范文拆两截），故须显式转块级 */
.wcl-slide-body .pr-media { display:block; margin:10px 0; text-align:center; line-height:0; }
.wcl-slide-body .pr-media img.pr-media-img, .wcl-slide-body .pr-media img { max-width:100%; max-height:360px; border-radius:14px; box-shadow:0 6px 18px rgba(15,23,42,.12); object-fit:contain; }
.wcl-slide-body .pr-media video.pr-media-vid, .wcl-slide-body .pr-media video { width:100%; max-width:680px; max-height:380px; border-radius:14px; background:#0b1220; box-shadow:0 6px 18px rgba(15,23,42,.15); }
.wcl-slide-body .pr-media iframe.pr-media-frame, .wcl-slide-body .pr-media iframe { width:100%; max-width:680px; height:380px; border:0; border-radius:14px; background:#0b1220; box-shadow:0 6px 18px rgba(15,23,42,.15); }

/* ===== 工单 AB：课堂展示端区块入场动画 + 页面切换效果 ===== */
/* P0+（2026-08-13 工单）：动画 GPU 硬件加速 —— will-change:transform,opacity 促发合成层 +
 * keyframes 首帧 translateZ(0) 提升图层，保证 60fps 丝滑无顿挫；animation-delay 一律 0s（点击即播）。 */
@keyframes prAnimAppear { from { opacity:0; transform:translateY(12px) translateZ(0); } to { opacity:1; transform:translateY(0) translateZ(0); } }
@keyframes prAnimGlide { from { opacity:0; transform:translateY(28px) translateZ(0); } to { opacity:1; transform:translateY(0) translateZ(0); } }
@keyframes prAnimShutter { 0% { opacity:0; clip-path:inset(0 0 100% 0); } 60% { opacity:1; } 100% { opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes prAnimPulse { 0%,100% { transform:scale(1) translateZ(0); } 50% { transform:scale(1.06) translateZ(0); } }
@keyframes prAnimSwirl { from { opacity:0; transform:translateY(-20px) rotate(-16deg) translateZ(0); } to { opacity:1; transform:translateY(0) rotate(0deg) translateZ(0); } }
.pr-anim-appear, .pr-anim-glide, .pr-anim-shutter, .pr-anim-swirl, .pr-anim-pulse { opacity:0 !important; will-change:transform,opacity; animation-delay:0s !important; }
.pr-anim-appear.pr-anim-run { animation:prAnimAppear var(--pr-anim-dur,.1s) ease both; }
.pr-anim-glide.pr-anim-run { animation:prAnimGlide var(--pr-anim-dur,.1s) cubic-bezier(.22,.61,.36,1) both; }
.pr-anim-shutter.pr-anim-run { animation:prAnimShutter var(--pr-anim-dur,.1s) ease both; }
.pr-anim-pulse.pr-anim-run { animation:prAnimPulse var(--pr-anim-dur,.1s) ease both; }
.pr-anim-swirl.pr-anim-run { animation:prAnimSwirl var(--pr-anim-dur,.1s) cubic-bezier(.22,.61,.36,1) both; }

@keyframes prTransFade { from { opacity:0; } to { opacity:1; } }
@keyframes prTransPushLeft { from { transform:translateX(30px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes prTransPushRight { from { transform:translateX(-30px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes prTransPushUp { from { transform:translateY(26px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes prTransPushDown { from { transform:translateY(-26px); opacity:.3; } to { transform:none; opacity:1; } }
@keyframes prTransCover { from { clip-path:inset(0 0 100% 0); opacity:.4; } to { clip-path:inset(0 0 0 0); opacity:1; } }
.wcl-stage .wcl-slide.pr-trans-fade.pr-trans-go { animation:prTransFade var(--pr-trans-dur,.7s) ease both; }
.wcl-stage .wcl-slide.pr-trans-push-left.pr-trans-go { animation:prTransPushLeft var(--pr-trans-dur,.7s) ease both; }
.wcl-stage .wcl-slide.pr-trans-push-right.pr-trans-go { animation:prTransPushRight var(--pr-trans-dur,.7s) ease both; }
.wcl-stage .wcl-slide.pr-trans-push-up.pr-trans-go { animation:prTransPushUp var(--pr-trans-dur,.7s) ease both; }
.wcl-stage .wcl-slide.pr-trans-push-down.pr-trans-go { animation:prTransPushDown var(--pr-trans-dur,.7s) ease both; }
.wcl-stage .wcl-slide.pr-trans-cover.pr-trans-go { animation:prTransCover var(--pr-trans-dur,.7s) ease both; }

/* ============ 问小桂 · 课堂展示端 AI 答疑面板（2026-08-12） ============ */
.wcl-btn-xd { background:#f5f3ff; border-color:#ddd6fe; color:#7c3aed; }
.wcl-btn-xd:hover:not(:disabled) { background:#ede9fe; box-shadow:0 8px 20px rgba(124,58,237,.16); }
.wcl-btn-xd.active { background:#7c3aed; border-color:#7c3aed; color:#fff; box-shadow:0 6px 16px rgba(124,58,237,.3); }
.wcl-btn-xd.active svg { stroke:#fff; }

/* 悬浮面板：桌面端为右侧浮窗，小屏改为底部抽屉，均不挤占课件布局 */
.wcl-xd { position:fixed; top:50%; right:24px; z-index:10070;
  width:420px; max-width:calc(100vw - 48px); height:min(720px,calc(100vh - 120px)); max-height:86vh;
  background:#fff; border:1px solid rgba(124,58,237,.12); border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.22); display:flex; flex-direction:column; overflow:hidden;
  transform:translateY(-50%) translateX(calc(100% + 60px)); opacity:0; visibility:hidden; pointer-events:none;
  transition:transform 260ms var(--wcl-ease, ease), opacity 200ms ease, visibility 200ms; }
.wcl-xd.open { transform:translateY(-50%) translateX(0); opacity:1; visibility:visible; pointer-events:auto; }
.wcl-xd-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--wcl-line,#eee);
  background:linear-gradient(120deg,#7c3aed,#a855f7); color:#fff; }
.wcl-xd-avatar { width:40px !important; height:40px !important; min-width:40px !important; min-height:40px !important; max-width:40px !important; max-height:40px !important; border-radius:50% !important; overflow:hidden !important; flex:0 0 auto !important;
  background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }
.wcl-xd-avatar img { width:100% !important; height:100% !important; object-fit:cover !important; }
.wcl-xd-h-txt { min-width:0; }
.wcl-xd-title { font-weight:800; font-size:16px; line-height:1.2; }
.wcl-xd-desc { font-size:12px; opacity:.88; margin-top:2px; }
.wcl-xd-close { margin-left:auto; width:32px; height:32px; border:none; border-radius:9px; background:rgba(255,255,255,.2);
  color:#fff; font-size:20px; line-height:1; cursor:pointer; flex:0 0 auto; }
.wcl-xd-close:hover { background:rgba(255,255,255,.32); }
.wcl-xd-body { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.wcl-xd-greet { padding:14px 16px 0; display:flex; justify-content:center; flex:0 0 auto; }
.wcl-xd-greet-video { width:100%; max-width:360px; height:auto; aspect-ratio:4/3; object-fit:contain; border-radius:14px; background:#f5f3ff; box-shadow:0 4px 16px rgba(124,58,237,.18); }
.wcl-xd-greet.hidden { display:none !important; }
.wcl-xd-msgs { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.wcl-xd-msg { display:flex; }
.wcl-xd-msg-user { justify-content:flex-end; }
.wcl-xd-msg-ai { justify-content:flex-start; }
.wcl-xd-msg-in { max-width:88%; padding:10px 14px; border-radius:14px; font-size:15px; line-height:1.65; word-break:break-word; }
.wcl-xd-msg-user .wcl-xd-msg-in { background:#7c3aed; color:#fff; border-bottom-right-radius:5px; }
.wcl-xd-msg-ai .wcl-xd-msg-in { background:#f4f5f8; color:#1f2738; border-bottom-left-radius:5px; }
.wcl-xd-msg-in p { margin:0 0 8px; } .wcl-xd-msg-in p:last-child { margin:0; }
/* 🆕 2026-08-14：AI 答复 Markdown 渲染样式（与课堂端共享） */
.wcl-xd-msg-in h1,.wcl-xd-msg-in h2,.wcl-xd-msg-in h3,.wcl-xd-msg-in h4,.wcl-xd-msg-in h5,.wcl-xd-msg-in h6{margin:14px 0 6px;font-weight:700;line-height:1.35}
.wcl-xd-msg-in h1{font-size:18px}.wcl-xd-msg-in h2{font-size:17px}.wcl-xd-msg-in h3{font-size:16px;color:#0f172a}
.wcl-xd-msg-in h4,.wcl-xd-msg-in h5,.wcl-xd-msg-in h6{font-size:15px;color:#334155}
.wcl-xd-msg-in hr{border:0;border-top:1px solid rgba(148,163,184,.4);margin:12px 0}
/* 工单 #1110：问小桂 AI 结果里的 --- 分页符（渲染成 <hr>）隐藏，不再显示多余分隔线 */
.pe-xd-out-content hr, .wcl-xd-msg-in hr { display:none !important; }
.wcl-xd-msg-in ul,.wcl-xd-msg-in ol{margin:6px 0 10px;padding-left:24px}
.wcl-xd-msg-in li{margin:0 0 4px}
.wcl-xd-msg-in code{font-family:Menlo,Consolas,monospace;background:rgba(15,23,42,.07);padding:1px 5px;border-radius:4px;font-size:13px}
.wcl-xd-msg-in em{font-style:italic;color:#475569}
.wcl-xd-msg-in strong{font-weight:700;color:#0f172a}
.wcl-xd-msg-in ul { margin:4px 0 8px; padding-left:20px; } .wcl-xd-msg-in li { margin:3px 0; }
.wcl-xd-msg-in hr { border:none; border-top:1px solid rgba(0,0,0,.08); margin:8px 0; }
.wcl-xd-msg-in strong { color:#7c3aed; }
.wcl-xd-msg-ai .wcl-xd-msg-in strong { color:#b45309; }
.wcl-xd-msg-in code { background:rgba(124,58,237,.12); padding:1px 6px; border-radius:6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
.wcl-xd-loading { display:inline-flex; align-items:center; gap:8px; color:#6b7280; }
.wcl-xd-dot { width:8px; height:8px; border-radius:50%; background:#a855f7; animation:wclXdPulse 1s infinite ease-in-out; }
@keyframes wclXdPulse { 0%,100% { opacity:.3; transform:scale(.8); } 50% { opacity:1; transform:scale(1.2); } }
.wcl-xd-err { color:#dc2626; font-size:14px; }
.wcl-xd-ans-actions { margin-top:8px; display:flex; gap:8px; }
.wcl-xd-quick { display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px; border-top:1px solid var(--wcl-line,#eee); }
.wcl-xd-quick button { padding:6px 12px; border-radius:999px; border:1px solid #e9d5ff; background:#faf5ff; color:#7c3aed;
  font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; }
.wcl-xd-quick button:hover { background:#f3e8ff; }
.wcl-xd-input { padding:10px 14px 14px; border-top:1px solid var(--wcl-line,#eee); display:flex; flex-direction:column; gap:8px; }
.wcl-xd-input textarea { width:100%; resize:none; border:1px solid var(--wcl-line,#ddd); border-radius:12px; padding:10px 12px;
  font:inherit; font-size:15px; line-height:1.5; color:#1f2738; outline:none; }
.wcl-xd-input textarea:focus { border-color:#a855f7; box-shadow:0 0 0 3px rgba(168,85,247,.14); }
.wcl-xd-input-bar { display:flex; justify-content:flex-end; gap:8px; }
.wcl-xd-send { padding:9px 22px; border-radius:12px; border:none; background:#7c3aed; color:#fff; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.wcl-xd-send:disabled { opacity:.5; cursor:not-allowed; }
.wcl-xd-mini { padding:7px 14px; border-radius:10px; border:1px solid var(--wcl-line,#ddd); background:#fff; color:#475569;
  font-weight:600; font-size:13px; cursor:pointer; font-family:inherit; }
.wcl-xd-clear { padding:7px 16px; border-radius:10px; border:1px solid #e9d5ff; background:#faf5ff; color:#7c3aed; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; }
.wcl-xd-clear:hover { background:#f3e8ff; }
.wcl-xd-mini:hover { background:#f8fafc; }
.wcl-xd-stop { border-color:#fecaca; color:#dc2626; background:#fff5f5; }

/* 🎤 按住说话：麦克风按钮（输入框左侧，与文本域同一行） */
.wcl-xd-input-row { display:flex; align-items:stretch; gap:8px; }
.wcl-xd-input-row textarea { flex:1 1 auto; width:auto; min-width:0; }
.wcl-xd-mic { position:relative; overflow:hidden; flex:0 0 auto; width:46px; border:1px solid var(--wcl-line,#ddd);
  border-radius:14px; background:#f8fafc; color:#64748b; cursor:pointer; user-select:none; -webkit-user-select:none;
  touch-action:none; -webkit-tap-highlight-color:transparent; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; padding:4px 0; font-family:inherit;
  transition:background .15s, color .15s, border-color .15s; }
.wcl-xd-mic:hover { background:#f1f5f9; color:#475569; }
.wcl-xd-mic:active { background:#ede9fe; color:#7c3aed; }
.wcl-xd-mic-ico { display:flex; align-items:center; justify-content:center; line-height:0; }
.wcl-xd-mic-timer { font-size:11px; font-weight:700; line-height:1; }
.wcl-xd-mic.unsupported { opacity:.4; cursor:not-allowed; }
.wcl-xd-mic.unsupported:hover { background:#f8fafc; color:#64748b; }
/* 录音中：紫色高亮 + 波纹动效 */
.wcl-xd-mic.recording { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.wcl-xd-mic.recording .wcl-xd-mic-ico { animation:wcl-xd-mic-pulse 1s ease-in-out infinite; }
.wcl-xd-mic.recording::after { content:''; position:absolute; left:50%; top:50%; width:10px; height:10px;
  border-radius:50%; background:rgba(255,255,255,.45); transform:translate(-50%,-50%); animation:wcl-xd-mic-ripple 1.1s ease-out infinite; pointer-events:none; }
@keyframes wcl-xd-mic-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }
@keyframes wcl-xd-mic-ripple { 0% { width:8px; height:8px; opacity:.6; } 100% { width:64px; height:64px; opacity:0; } }

/* 划词浮标（非遮挡，贴选区上方/下方） */
.wcl-xd-tip { position:fixed; z-index:10080; display:none; align-items:center; gap:5px; padding:8px 14px; border-radius:999px;
  background:#7c3aed; color:#fff; font-size:14px; font-weight:700; box-shadow:0 8px 22px rgba(124,58,237,.34);
  cursor:pointer; user-select:none; white-space:nowrap; }

/* 答案放大窗（独立于面板，保持会话） */
.wcl-xd-zoom { position:fixed; inset:0; z-index:10090; display:flex; align-items:center; justify-content:center;
  background:rgba(15,20,34,.5); padding:24px; }
.wcl-xd-zoom-box { width:min(820px,92vw); max-height:86vh; background:#fff; border-radius:18px; display:flex;
  flex-direction:column; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.3); }
.wcl-xd-zoom-head { display:flex; align-items:center; gap:10px; padding:16px 22px; background:#7c3aed; color:#fff;
  font-weight:800; font-size:18px; }
.wcl-xd-zoom-body { flex:1; overflow:auto; padding:24px 28px; font-size:22px; line-height:1.75; color:#1f2738; }
.wcl-xd-zoom-body p { margin:0 0 14px; } .wcl-xd-zoom-body p:last-child { margin:0; }
.wcl-xd-zoom-body ul { margin:6px 0 14px; padding-left:26px; } .wcl-xd-zoom-body li { margin:5px 0; }
.wcl-xd-zoom-body hr { border:none; border-top:1px solid rgba(0,0,0,.1); margin:14px 0; }
.wcl-xd-zoom-body strong { color:#b45309; }
.wcl-xd-zoom-body code { background:rgba(124,58,237,.12); padding:1px 7px; border-radius:6px; font-family:ui-monospace,Menlo,monospace; font-size:.9em; }
.wcl-xd-zoom-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--wcl-line,#eee); }
.wcl-xd-zoom-close { padding:9px 18px; border-radius:10px; border:none; background:rgba(255,255,255,.22); color:#fff;
  font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.wcl-xd-zoom-close:hover { background:rgba(255,255,255,.34); }
.wcl-xd-zoom-x { background:#7c3aed; }

/* 小屏：面板改为底部抽屉，占满一定高度，并带明显底部关闭按钮 */
@media (max-width:760px) {
  .wcl-xd { top:auto; bottom:0; left:0; right:0; width:100%; max-width:100%; height:82%; max-height:82vh;
    transform:translateY(110%); border-radius:22px 22px 0 0; opacity:1; }
  .wcl-xd.open { transform:translateY(0); }
  .wcl-xd-zoom-body { font-size:18px; }
}
.wcl-xd-mobile-foot { display:none; padding:10px 16px calc(14px + env(safe-area-inset-bottom,0)); border-top:1px solid var(--wcl-line,#eee); justify-content:center; }
@media (max-width:760px) { .wcl-xd-mobile-foot { display:flex; } }
.wcl-xd-mobile-close { padding:11px 32px; border-radius:12px; border:none; background:#f1f5f9; color:#475569; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; }
.wcl-xd-mobile-close:hover { background:#e2e8f0; }

/* 暗色主题 */
[data-theme="dark"] .wcl-btn-xd { background:rgba(124,58,237,.18); border-color:rgba(167,139,250,.4); color:#c4b5fd; }
[data-theme="dark"] .wcl-btn-xd:hover:not(:disabled) { background:rgba(124,58,237,.28); }
[data-theme="dark"] .wcl-btn-xd.active { background:#7c3aed; border-color:#7c3aed; color:#fff; }
[data-theme="dark"] .wcl-xd { background:#161c2e; box-shadow:-14px 0 44px rgba(0,0,0,.5); }
[data-theme="dark"] .wcl-xd-head { border-bottom-color:rgba(255,255,255,.1); }
[data-theme="dark"] .wcl-xd-msg-ai .wcl-xd-msg-in { background:#222a3f; color:#e6eaf3; }
[data-theme="dark"] .wcl-xd-msg-in strong { color:#c4b5fd; }
[data-theme="dark"] .wcl-xd-msg-ai .wcl-xd-msg-in strong { color:#fbbf24; }
[data-theme="dark"] .wcl-xd-quick { border-top-color:rgba(255,255,255,.1); }
[data-theme="dark"] .wcl-xd-quick button { border-color:rgba(167,139,250,.34); background:rgba(124,58,237,.16); color:#c4b5fd; }
[data-theme="dark"] .wcl-xd-input { border-top-color:rgba(255,255,255,.1); }
[data-theme="dark"] .wcl-xd-input textarea { background:#0f1422; border-color:rgba(255,255,255,.14); color:#e6eaf3; }
[data-theme="dark"] .wcl-xd-input-row textarea { background:#0f1422; border-color:rgba(255,255,255,.14); color:#e6eaf3; }
[data-theme="dark"] .wcl-xd-mic { background:#1f2738; border-color:rgba(255,255,255,.16); color:#94a3b8; }
[data-theme="dark"] .wcl-xd-mic:hover { background:#262f43; color:#cbd5e1; }
[data-theme="dark"] .wcl-xd-mic:active { background:rgba(124,58,237,.3); color:#c4b5fd; }
[data-theme="dark"] .wcl-xd-mic.recording { background:#7c3aed; border-color:#7c3aed; color:#fff; }
[data-theme="dark"] .wcl-xd-mini { border-color:rgba(255,255,255,.16); background:#1f2738; color:#cbd5e1; }
[data-theme="dark"] .wcl-xd-mini:hover { background:#262f43; }
[data-theme="dark"] .wcl-xd-mobile-foot { border-top-color:rgba(255,255,255,.1); }
[data-theme="dark"] .wcl-xd-mobile-close { background:#1f2738; color:#cbd5e1; }
[data-theme="dark"] .wcl-xd-mobile-close:hover { background:#262f43; }
[data-theme="dark"] .wcl-xd-zoom-box { background:#161c2e; }
[data-theme="dark"] .wcl-xd-zoom-body { color:#e6eaf3; }
[data-theme="dark"] .wcl-xd-zoom-body strong { color:#fbbf24; }

/* Request3 · 画布橡皮筋框选（与 js/presentation-editor.js PE_CSS 双真相源同步）：
   原子块(.wcl-ub)多选复用与主区块一致的实描边；selprev=拖拽中实时预览；pe-sel-rect=覆盖层。 */
.wcl-ub.pe-wrap-selected{box-shadow:0 0 0 2px var(--pe-accent);border-radius:8px}
.pe-block-wrap.pe-wrap-selprev{box-shadow:0 0 0 2px var(--pe-accent-soft);background:var(--pe-active-bg-soft)}
.wcl-ub.pe-wrap-selprev{box-shadow:0 0 0 2px var(--pe-accent-soft);border-radius:8px}
.pe-sel-rect{position:fixed;left:0;top:0;width:0;height:0;display:none;border:1.5px solid var(--pe-accent);background:rgba(79,70,229,.10);border-radius:3px;pointer-events:none;z-index:99999}

/* ==========================================================================
   入口首页（2026-09-23 新增）：两张卡片 —— ① 我的课件 ② 教学工具
   层级 900：盖住平台外壳（.sidebar z-index:100），低于 .modal-overlay（1000）→ 弹窗仍在上层。
   ⚠️ 新增组件必须补 [data-theme="dark"] 覆盖，否则夜间出白块（见本文件末尾暗色段）。
   ========================================================================== */
.entry-home {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    overflow: auto;
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.22), transparent 60%),
        radial-gradient(1000px 620px at 88% 108%, rgba(192, 38, 211, 0.16), transparent 62%),
        var(--bg-page);
}
/* 子元素 margin:auto —— 内容高于视口时，配合父级 overflow:auto 才不会截掉顶部 */
.entry-inner { width: 100%; max-width: 880px; margin: auto; }

.entry-head { text-align: center; margin-bottom: 34px; }
.entry-logo {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}
.entry-title {
    font-family: var(--font-intro);
    font-size: 34px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    margin: 0 0 8px;
}
.entry-sub { margin: 0; font-size: 14px; color: var(--text-secondary); }

.entry-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.entry-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 26px 24px 22px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.entry-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 34%, var(--border-color));
}
.entry-card:active { transform: translateY(-1px); }
.entry-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
/* 图标 = SVG 线性图标 + 圆角底色块（替代 emoji，跨平台渲染一致、可跟随品牌色） */
.entry-card-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, #ffffff);
}
.entry-card-ico svg { width: 28px; height: 28px; }
.entry-card-primary .entry-card-ico { color: #fff; background: rgba(255, 255, 255, 0.18); }
.entry-card-name { font-size: 20px; font-weight: 800; color: var(--text-primary); }
.entry-card-desc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.entry-card-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}
.entry-card-go i { font-style: normal; transition: transform var(--transition); }
.entry-card:hover .entry-card-go i { transform: translateX(4px); }

/* 第二个卡片（教学工具）= 主入口：品牌渐变底 + 白字 */
.entry-card-primary {
    background: var(--brand-gradient);
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}
.entry-card-primary .entry-card-name { color: #fff; }
.entry-card-primary .entry-card-desc { color: rgba(255, 255, 255, 0.86); }
.entry-card-primary .entry-card-go { color: #fff; }
.entry-card-primary:hover { border-color: transparent; }

/* 平台外壳里的 logo 变成「返回入口首页」的按钮 */
.sidebar-header .logo { cursor: pointer; }
.sidebar-header .logo:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 8px; }

@media (max-width: 768px) {
    .entry-home { padding: 26px 18px; }
    .entry-cards { grid-template-columns: 1fr; gap: 14px; }
    .entry-title { font-size: 26px; }
    .entry-head { margin-bottom: 24px; }
    .entry-card { padding: 20px 18px 18px; }
    .entry-card-ico { width: 44px; height: 44px; border-radius: 13px; margin-bottom: 10px; }
    .entry-card-ico svg { width: 24px; height: 24px; }
    .entry-card-name { font-size: 18px; }
}

/* ---------- 入口首页 · 夜间模式 ---------- */
[data-theme="dark"] .entry-home {
    background:
        radial-gradient(1200px 600px at 12% -8%, rgba(99, 102, 241, 0.18), transparent 60%),
        radial-gradient(1000px 620px at 88% 108%, rgba(192, 38, 211, 0.14), transparent 62%),
        #10131f;
}
[data-theme="dark"] .entry-title { color: #e6eaf3; }
[data-theme="dark"] .entry-sub { color: #94a3b8; }
[data-theme="dark"] .entry-card { background: #171c2b; border-color: rgba(255, 255, 255, 0.09); }
[data-theme="dark"] .entry-card:hover { border-color: rgba(167, 139, 250, 0.45); }
[data-theme="dark"] .entry-card-name { color: #e6eaf3; }
[data-theme="dark"] .entry-card-desc { color: #94a3b8; }
[data-theme="dark"] .entry-card-go { color: #a78bfa; }
[data-theme="dark"] .entry-card-primary { background: var(--brand-gradient); border-color: transparent; }
[data-theme="dark"] .entry-card-primary .entry-card-name { color: #fff; }
[data-theme="dark"] .entry-card-primary .entry-card-desc { color: rgba(255, 255, 255, 0.88); }
[data-theme="dark"] .entry-card-primary .entry-card-go { color: #fff; }
[data-theme="dark"] .entry-card-ico { background: rgba(124, 58, 237, 0.18); color: #c4b5fd; }
[data-theme="dark"] .entry-card-primary .entry-card-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* ==========================================================================
   返回入口首页（侧栏显式入口，2026-09-23）
   ========================================================================== */
.sidebar-home-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 20px);
    margin: 10px 10px 2px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.sidebar-home-item svg { flex: 0 0 auto; color: var(--primary); }
.sidebar-home-item:hover {
    background: color-mix(in srgb, var(--primary) 8%, #ffffff);
    border-color: color-mix(in srgb, var(--primary) 30%, var(--border-color));
}
.sidebar.collapsed .sidebar-home-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .sidebar-home-item span { display: none; }
[data-theme="dark"] .sidebar-home-item { background: #171c2b; border-color: rgba(255, 255, 255, 0.1); color: #e6eaf3; }
[data-theme="dark"] .sidebar-home-item svg { color: #a78bfa; }
[data-theme="dark"] .sidebar-home-item:hover { background: rgba(124, 58, 237, 0.18); border-color: rgba(167, 139, 250, 0.4); }

/* ==========================================================================
   我的课件 · 文件管理（分类栏 + 列表，2026-09-23）
   数据：文件夹定义与归属全部存 localStorage「gy_cw_folders」，
        **不碰 IndexedDB 存储层与 deck 文档模型**，对已有课件零影响。
   ========================================================================== */
.courseware-modal.cw-with-rail { width: 780px; }
.courseware-body.cw-body-split {
    display: flex;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

/* 左：分类栏 */
.cw-rail {
    flex: 0 0 206px;
    width: 206px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 8px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--primary) 3%, #fbfcff);
}
.cw-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 0; }
.cw-rail-title { font-size: 12px; font-weight: 800; letter-spacing: 0.4px; color: var(--text-muted); }
.cw-rail-new {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.cw-rail-new:hover { background: var(--primary-light); border-color: color-mix(in srgb, var(--primary) 34%, var(--border-color)); }
.cw-folder-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-folder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: background var(--transition);
}
.cw-folder:hover { background: rgba(67, 56, 202, 0.07); }
.cw-folder.active { background: var(--primary-light); color: var(--primary); font-weight: 700; }
.cw-folder-ico { flex: 0 0 auto; display: inline-flex; color: currentColor; }
.cw-folder-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-folder-n { font-size: 11.5px; color: var(--text-muted); }
.cw-folder-acts { display: none; gap: 2px; flex: 0 0 auto; }
.cw-folder:hover .cw-folder-acts { display: inline-flex; }
.cw-folder-act {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}
.cw-folder-act:hover { background: rgba(0, 0, 0, 0.07); color: var(--text-primary); }
.cw-folder-input {
    width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid var(--primary);
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    outline: none;
}
.cw-rail-tip { margin-top: auto; padding: 8px 6px 2px; font-size: 11.5px; line-height: 1.6; color: var(--text-muted); }

/* 右：列表 */
.cw-main { flex: 1; min-width: 0; overflow-y: auto; padding: 8px 12px 12px; }
.cw-main-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 4px 6px; }
.cw-main-title { font-size: 13.5px; font-weight: 800; color: var(--text-primary); }
.cw-main-count { font-size: 12px; color: var(--text-muted); }
.cw-move { position: relative; display: inline-flex; }
.cw-move-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 5;
    min-width: 156px;
    max-height: 216px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}
.cw-move-item {
    padding: 7px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    text-align: left;
    font-family: inherit;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.cw-move-item:hover { background: var(--primary-light); color: var(--primary); }
.cw-move-item.cur { color: var(--primary); font-weight: 700; }
.cw-move-empty { padding: 7px 10px; font-size: 12px; color: var(--text-muted); }
.courseware-foot-right { display: inline-flex; align-items: center; gap: 8px; }

/* 夜间模式 */
[data-theme="dark"] .cw-rail { background: #141a28; border-right-color: rgba(255, 255, 255, 0.1); }
[data-theme="dark"] .cw-rail-new { background: #1f2738; border-color: rgba(255, 255, 255, 0.14); color: #c4b5fd; }
[data-theme="dark"] .cw-rail-new:hover { background: rgba(124, 58, 237, 0.24); }
[data-theme="dark"] .cw-folder:hover { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .cw-folder.active { background: rgba(124, 58, 237, 0.24); color: #c4b5fd; }
[data-theme="dark"] .cw-folder-act:hover { background: rgba(255, 255, 255, 0.1); color: #e6eaf3; }
[data-theme="dark"] .cw-folder-input { background: #0f1422; border-color: #7c3aed; color: #e6eaf3; }
[data-theme="dark"] .cw-main-title { color: #e6eaf3; }
[data-theme="dark"] .cw-move-menu { background: #171c2b; border-color: rgba(255, 255, 255, 0.12); }
[data-theme="dark"] .cw-move-item { color: #cbd5e1; }
[data-theme="dark"] .cw-move-item:hover { background: rgba(124, 58, 237, 0.22); color: #c4b5fd; }

/* ==========================================================================
   ICP 备案信息（2026-09-23 上线）：入口页底部 + 侧栏底部
   备案核查要求：网站底部须展示备案号，并链接到工信部 beian.miit.gov.cn
   ========================================================================== */
.entry-foot {
    margin-top: 30px;
    text-align: center;
    font-size: 12.5px;
    color: var(--text-muted);
}
.entry-foot a { color: var(--text-muted); text-decoration: none; }
.entry-foot a:hover { color: var(--primary); text-decoration: underline; }

.sidebar-icp {
    padding: 6px 14px 12px;
    text-align: center;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.sidebar-icp a { color: var(--text-muted); text-decoration: none; }
.sidebar-icp a:hover { color: var(--primary); text-decoration: underline; }
.sidebar.collapsed .sidebar-icp { display: none; }
[data-theme="dark"] .entry-foot,
[data-theme="dark"] .entry-foot a,
[data-theme="dark"] .sidebar-icp,
[data-theme="dark"] .sidebar-icp a { color: #64748b; }
[data-theme="dark"] .entry-foot a:hover,
[data-theme="dark"] .sidebar-icp a:hover { color: #a78bfa; }

/* 「管理分类」模式：重命名/删除按钮常显（触屏无 hover，必须给常显入口） */
.cw-rail.cw-managing .cw-folder-acts { display: inline-flex; }
/* 「移动」按钮：与其它操作按钮同风格 */
.courseware-item-move { white-space: nowrap; }

/* 窄屏：分类栏折到上方横向排列 */
@media (max-width: 720px) {
    .courseware-modal.cw-with-rail { width: calc(100% - 24px); }
    .courseware-body.cw-body-split { flex-direction: column; }
    .cw-rail {
        flex: 0 0 auto;
        width: auto;
        max-height: 34vh;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }
    .cw-folder-list { flex-direction: row; flex-wrap: wrap; }
    .cw-rail-tip { display: none; }
}