/* ============================================================
   观里信息平台 — 宣纸色系全局样式
   响应式设计 · 移动优先 · 微交互
   ============================================================ */

/* ---------- OPPO Sans 字体加载 ---------- */
@font-face {
    font-family: "OPPO Sans";
    src: url("/static/fonts/OPPO_Sans_4.0.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- CSS 变量 · Stripe × 宣纸色系 ---------- */
:root {
    /* D1128：主背景全白，侧边栏保留灰底 */
    --bg-primary: #FFFFFF;
    --bg-secondary: #EBE4D5;
    --bg-elevated: #FFFFFF;
    --bg-hover: rgba(44, 36, 22, 0.04);
    --bg-active: rgba(44, 36, 22, 0.08);

    /* 墨色文字 */
    --text-primary: #2C2416;
    --text-secondary: #5C5242;
    --text-tertiary: #8C8068;
    --text-inverse: #EBE4D5;

    /* 朱砂红点缀 */
    --accent: #c23b2e;
    --accent-hover: #a33226;
    --accent-active: #78362E;
    --accent-light: rgba(140, 66, 56, 0.10);
    --accent-glow: rgba(140, 66, 56, 0.30);

    /* 金色 */
    --gold: #c9a227;

    /* 状态色 · 学习进度统一语言 */
    --success: #2e7d32;
    --success-soft: rgba(46, 125, 50, 0.12);
    --warning: #b9770a;
    --warning-soft: rgba(245, 158, 11, 0.16);

    /* 边框 · 暖色系 */
    --border-light: rgba(44, 36, 22, 0.06);
    --border-medium: rgba(44, 36, 22, 0.12);
    --border-strong: rgba(44, 36, 22, 0.18);

    /* 阴影 · 暖色调多层叠加（Stripe 风格） */
    --shadow-sm: 0 1px 2px rgba(44,36,22,0.04), 0 1px 4px rgba(44,36,22,0.06);
    --shadow-md: 0 1px 2px rgba(44,36,22,0.04), 0 3px 10px rgba(44,36,22,0.08), 0 0 0 1px rgba(44,36,22,0.04);
    --shadow-lg: 0 2px 4px rgba(44,36,22,0.06), 0 6px 20px rgba(44,36,22,0.10), 0 0 0 1px rgba(44,36,22,0.05);
    --shadow-xl: 0 4px 8px rgba(44,36,22,0.08), 0 12px 40px rgba(44,36,22,0.12), 0 0 0 1px rgba(44,36,22,0.06);

    /* 深墨沉浸区 */
    --color-dark-bg: #1E1A12;
    --color-dark-surface: #2A251B;
    --color-dark-border: #3D3628;
    --color-dark-text: #FDFAF3;
    --color-dark-text-secondary: #C4BBA8;

    /* 圆角 */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* 顶栏 */
    --header-bg: rgba(255, 255, 255, 0.92);
    --header-text: #2C2416;
    --header-text-dim: #5C5242;
    --font-heading: "Noto Serif SC", "Source Han Serif SC", "SimSun", "STSong", "Songti SC", "KaiTi", serif;
    --font-body: "OPPO Sans", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, sans-serif;
    /* 宋体（衬线）——D392 侧边栏专用。
       首选「思源宋体」：Source Han Serif SC / Noto Serif SC 为 Adobe × Google 开源字体，
       采用 **SIL Open Font License 1.1**，允许免费商用、允许自托管嵌入，是本站点唯一"敢打包进站"的宋体。
       其后 SimSun / STSong / Songti SC 属**本机已装字体**回退——CSS 仅按名引用、不分发字体文件，
       未装任何宋体的机器最终落到通用 serif。 */
    --font-song: "Source Han Serif SC", "Noto Serif SC", "Source Han Serif CN", "SimSun", "STSong", "Songti SC", serif;

    /* 布局 */
    --content-max: 1200px;
    --content-padding: 24px;
    --header-height: 64px;

    /* 过渡 */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 0.15s;
    --duration-normal: 0.25s;
    --duration-slow: 0.4s;
}

/* ============================================================
   暗色模式
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1E1A12;
        --bg-secondary: #2A251B;
        --bg-elevated: #2A251B;
        --bg-hover: rgba(253, 250, 243, 0.06);
        --bg-active: rgba(253, 250, 243, 0.10);

        --text-primary: #FDFAF3;
        --text-secondary: #C4BBA8;
        --text-tertiary: #8C8068;
        --text-inverse: #2C2416;

        --accent: #d45a4a;
        --accent-hover: #e06a5a;
        --accent-active: #c23b2e;
        --accent-light: rgba(212, 90, 74, 0.15);
        --accent-glow: rgba(212, 90, 74, 0.30);

        --gold: #d4b84a;

        /* 状态色 · 暗色模式适配 */
        --success: #5cb85c;
        --success-soft: rgba(92, 184, 92, 0.18);
        --warning: #e0a64b;
        --warning-soft: rgba(224, 166, 75, 0.20);

        --border-light: rgba(253, 250, 243, 0.08);
        --border-medium: rgba(253, 250, 243, 0.15);
        --border-strong: rgba(253, 250, 243, 0.25);

        --shadow-sm: 0 1px 2px rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 1px 2px rgba(0,0,0,0.2), 0 3px 10px rgba(0,0,0,0.3), 0 0 0 1px rgba(253,250,243,0.04);
        --shadow-lg: 0 2px 4px rgba(0,0,0,0.25), 0 6px 20px rgba(0,0,0,0.35), 0 0 0 1px rgba(253,250,243,0.05);
        --shadow-xl: 0 4px 8px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(253,250,243,0.06);

        --header-bg: rgba(30, 26, 18, 0.92);
        --header-text: #FDFAF3;
        --header-text-dim: #C4BBA8;
    }
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--font-body);
    font-size: 17px;
    /* ⚠️ 临时试验（2026-09-16 作者要求"先注释掉，刷新看效果"）：
       原值 zoom: 1.25 —— 桌面（>1024px）整体放大 1.25×，≤1024px 由 L1342 的 zoom:1 复位。
       注掉后桌面有效基准字号由 21.3px 降为 17px，全站内容约小 20%。
       若效果不好，恢复此行即可（L1342 的 zoom:1 为复位，无需改动）。 */
    /* zoom: 1.25; */
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
    background-color: var(--bg-primary);
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover, a:focus-visible {
    color: var(--accent-hover);
}
a:active { color: var(--accent-active); }

/* ---------- 排版 ---------- */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: var(--text-primary);
}

p { margin-bottom: 0.75em; }
p:last-child { margin-bottom: 0; }

/* ---------- 按钮系统 ---------- */
.btn,
button:not([class]),
.redbutton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.05em;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
    outline: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn:focus-visible,
button:not([class]):focus-visible,
.redbutton:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-light);
}

.btn-primary,
.redbutton {
    color: var(--bg-elevated);
    background-color: var(--accent);
}
.btn-primary:hover,
.redbutton:hover {
    background-color: var(--accent-hover);
    box-shadow: 0 4px 14px var(--accent-glow);
    transform: translateY(-1px);
}
.btn-primary:active,
.redbutton:active {
    background-color: var(--accent-active);
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
}
.btn-secondary:hover {
    background-color: var(--bg-hover);
    transform: translateY(-1px);
}
.btn-secondary:active {
    transform: translateY(0);
}

.btn-outline,
.pill-link {
    color: var(--accent);
    background-color: transparent;
    border: 1.5px solid var(--accent);
}
.btn-outline:hover,
.pill-link:hover {
    color: var(--bg-elevated);
    background-color: var(--accent);
    transform: translateY(-1px);
}
.btn-outline:active,
.pill-link:active {
    transform: translateY(0);
}

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

.btn-sm { padding: 6px 16px; font-size: 13px; }
.btn-lg { padding: 14px 32px; font-size: 17px; }

.btn:disabled,
button:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---------- 表单 ---------- */
.input-field,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
.input_style1,
.yanzhengma input,
textarea,
select {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}
.input-field:hover,
input:hover, textarea:hover, select:hover {
    background-color: var(--bg-hover);
}
.input-field:focus,
input:focus, textarea:focus, select:focus {
    background-color: var(--bg-elevated);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.input-field::placeholder,
input::placeholder, textarea::placeholder {
    color: var(--text-tertiary);
}

textarea {
    min-height: 100px;
    resize: vertical;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238C8068'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* ---------- 卡片系统 ---------- */
.card {
    background-color: var(--bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 20px;
    transition: box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.card:hover {
    box-shadow: var(--shadow-md);
}

.card-lg {
    background-color: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px;
    transition: box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.card-lg:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-flat {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* ---------- 顶部导航栏 ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-body) !important;
}

/* ---------- 应用壳（D109 全站 App 布局：左 20% 侧边栏 + 右上 8% 工具条 + 右下 92% 内容） ---------- */
html, body { height: 100%; }
body { overflow: hidden; }
.app-shell {
    display: flex;
    align-items: stretch;
    height: 100%;
    width: 100%;
}
.app-shell .app-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* 右上 8% 页面工具条：标题 + 面包屑 + 操作按钮 */
.app-toolbar {
    flex: 0 0 8vh;
    min-height: 52px;
    max-height: 72px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-light);
    z-index: 10;
}
.app-toolbar .tb-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-heading);
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}
.app-toolbar .tb-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-toolbar .tb-actions .tb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}
.app-toolbar .tb-actions .tb-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.app-toolbar .tb-actions .tb-recharge {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 600;
}
.app-toolbar .tb-actions .tb-recharge:hover {
    background: var(--accent-hover);
    color: #fff;
}
.app-toolbar .tb-actions .tb-auth { color: var(--accent); }
.app-toolbar .tb-actions .tb-auth:hover { background: var(--accent-light); color: var(--accent); }
/* 右下 92% 内容区（内部滚动） */
.app-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 20px;
}

/* 侧边栏：全站常驻 · Trae 深色 IDE 风（深墨底/浅字/图标高亮），宽度 20% */
.app-sidebar {
    width: 13%;
    min-width: 100px;
    max-width: 364px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #E8E8E8;
    color: #444444;
    /* D392：侧边栏用宋体（首选免费商用的思源宋体，见 :root --font-song）。
       设在容器上，后代自动继承；.sb-collapse/.sb-font 已声明 font-family:inherit，
       `<button>` 的 UA 默认字体不会漏出。 */
    font-family: var(--font-song);
    border-right: 1px solid rgba(0, 0, 0, .08);
    padding: 10px 8px 40px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: width var(--duration-normal) var(--ease-out);
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: var(--color-dark-border); border-radius: 4px; }
.app-sidebar .sb-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 10px 14px;
    margin-bottom: 10px;
}
.app-sidebar .sb-brand-link { display: flex; align-items: center; opacity: .95; }
.app-sidebar .sb-brand-link:hover { opacity: 1; }
.app-sidebar .sb-group {
    margin: 14px 10px 5px 20px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(68, 68, 68, .45);
    white-space: nowrap;
    text-align: left;
}
.app-sidebar .sb-group:first-of-type { margin-top: 2px; }
.app-sidebar .sb-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #444444;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
    white-space: nowrap;
    overflow: hidden;
}
.app-sidebar .sb-item:hover {
    background: rgba(0, 0, 0, .06);
    color: #111111;
}
.app-sidebar .sb-item.on {
    background: rgba(194, 59, 46, .16);
    color: #a33226;
    font-weight: 600;
}
.app-sidebar .sb-item.on .sb-ico { color: #ff7a6b; }
.app-sidebar .sb-item .sb-ico {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(68, 68, 68, .68);
}
/* 按钮 [图标+文字] 整体居中，但所有文字左对齐：min-width 统一内容块宽度，justify-content:center 居中该块 */
.app-sidebar .sb-label {
    min-width: 5em;
    text-align: left;
}
/* 侧边栏底部「界面控制」组（字体大小 + 收起侧边栏）：整体推到底部（左下角） */
.app-sidebar .sb-foot-ui {
    margin-top: auto;
    padding-top: 6px;
}
/* 底部组内的两个按钮（字体大小 / 收起侧边栏）——与上方 .sb-item **完全同款**。
   ⚠️ D385：这里必须是共享复位。`<button>` 的 UA 默认样式（width:auto、2px 边框、
   font-family 不继承、非对称内边距）会让 `[图标+文字]` 那个被 `justify-content:center`
   居中的块整体偏移——实测「字体大小」曾比其它项左偏 24px。新增按钮请一并列入本规则。 */
.app-sidebar .sb-collapse,
.app-sidebar .sb-font {
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}
/* 折叠按钮与上方「字体大小」之间留一点间距（上移到 sb-foot-ui 后的余额） */
.app-sidebar .sb-collapse {
    margin-top: 4px;
}
.app-sidebar .sb-collapse:hover { background: rgba(0, 0, 0, .06); color: #111111; }
/* 折叠态：56px 图标栏（Trae 活动栏样式），title 悬浮提示 */
.app-sidebar.collapsed { width: 56px; min-width: 56px; max-width: 56px; }
.app-sidebar.collapsed .sb-brand { justify-content: center; padding: 6px 0 14px; }
.app-sidebar.collapsed .sb-group { visibility: hidden; height: 0; margin: 0; padding: 0; }
.app-sidebar.collapsed .sb-item { justify-content: center; padding: 9px 0; }
.app-sidebar.collapsed .sb-item .sb-label { display: none; }
@media (max-width: 1000px) {
    .app-sidebar { display: none; }
    .app-shell .app-main { width: 100%; }
}

/* 移动端导航分组标题（D108：与侧边栏同分组） */
.mobile-nav .mnav-group {
    margin: 14px 14px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.mobile-nav .mnav-group:first-child { margin-top: 4px; }
.site-header *,
.site-header *::before,
.site-header *::after {
    font-family: inherit !important;
}

.header-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    font-family: var(--font-heading) !important;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--header-text);
    flex-shrink: 0;
}

.header-logo:hover {
    color: var(--gold);
    text-decoration: none;
}

/* 桌面端导航 */
.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    font-family: var(--font-body) !important;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--header-text-dim);
    border: none;
    border-radius: var(--radius-sm);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 48px;
    gap: 4px;
}

.header-nav a:hover {
    color: var(--header-text);
    background: rgba(44, 36, 22, 0.05);
    text-decoration: none;
    transform: translateY(-1px);
}

/* 导航活动态 */
.header-nav a.nav-active {
    color: #fff !important;
    background: var(--accent) !important;
    box-shadow: 0 2px 8px var(--accent-glow);
    font-weight: 600;
    transform: translateY(0);
}
.header-nav a.nav-active:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px var(--accent-glow);
}

.header-nav a.active {
    color: var(--header-text);
    background: rgba(44, 36, 22, 0.08);
}

/* AI教学按钮 - 橙色高亮 */
.header-nav a.ai-teaching {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    font-weight: 600;
}
.header-nav a.ai-teaching:hover {
    color: #ff8c5a;
    background: rgba(255, 107, 53, 0.15);
}

.nav-divider {
    color: var(--header-text-dim);
    margin: 0 8px;
    user-select: none;
}

/* 用户工具栏 */
.header-tools {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.header-tools a {
    color: var(--header-text-dim);
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    transition: all var(--duration-fast) var(--ease-out);
    border: 1px solid transparent;
}
.header-tools a:hover {
    color: var(--header-text);
    border-color: var(--header-text);
    background: rgba(44, 36, 22, 0.05);
    text-decoration: none;
}

/* ---------- 横幅区域 ---------- */
.banner-bar {
    width: 100%;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
}
.banner-bar-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--content-padding);
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    font-family: var(--font-heading);
}
.banner-bar-inner a {
    color: var(--accent);
}
.banner-bar-inner a:hover {
    text-decoration: underline;
}

/* ---------- 主内容区（D110：全高链路——app-content 滚动视口 → main-area 撑满 → content-wrapper 纵向填满） ---------- */
.main-area {
    min-height: 100%;
    background-color: var(--bg-primary);
    position: relative;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    max-width: var(--content-max);
    width: 100%;
    margin: 0 auto;
    padding: 28px var(--content-padding);
    position: relative;
    z-index: 1;
    flex: 1;
}
/* D110 Trae Work 化：App 页全幅模式（AI 对话/工作台），脱离 1200px 阅读限宽 */
.content-wrapper.fw {
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* D110：中和 table.css「#mainbody div{margin:auto}」对 fw 页 flex 弹性项的破坏
   （auto 外边距在弹性容器中吸收自由空间 → 子项居中塌缩；旧页块级流中 auto 为 0 故无害） */
#mainbody.fw .tw-chat,
#mainbody.fw .tw-chat-main,
#mainbody.fw .tw-panel,
#mainbody.fw .twp-head,
#mainbody.fw .twp-body,
#mainbody.fw .chat-header,
#mainbody.fw .msg-scroll,
#mainbody.fw .chat-input-area,
#mainbody.fw .wb-wrap,
#mainbody.fw .wb-main,
#mainbody.fw .wb-left,
#mainbody.fw .wb-divider,
#mainbody.fw .wb-right { margin: 0; }
#mainbody.fw .wb-bottom { margin: 14px 0 0; }
/* D251：stepcard（八步数据卡 /teaching/stepcard/）同类中和 —— 同样受 table.css 破坏：
   .sc-main/.sc-left/.sc-right 拿到 margin:auto 后，交叉轴上的 auto margin 优先级高于 align-self，
   静默覆盖模板写的 align-items:flex-start / align-self:flex-start，把两栏垂直居中
   （左栏内容矮于滚动容器则整体下沉，右栏八步表单超高则自由空间为负、auto 归零贴顶）
   → 左右两栏顶部出现数十至上百 px 落差，D250 的平齐效果被此规则吃掉。
   只中和「本身无自定义 margin」的 flex 项；.sc-card/.sc-step/.sc-gua-pin 有自定义外边距，不在此列。 */
#mainbody.fw .sc-wrap,
#mainbody.fw .sc-nav,
#mainbody.fw .sc-main,
#mainbody.fw .sc-left,
#mainbody.fw .sc-right,
#mainbody.fw .sc-actions { margin: 0; }
/* 顺带：.sc-main 在 column flex（.sc-wrap）中若被 auto margin 影响会收成 fit-content 居中，显式撑满 */
#mainbody.fw .sc-main { max-width: none; width: 100%; }

/* ---------- 底部状态栏（D110 Trae Work 化：IDE 细状态栏，合规链接常驻） ---------- */
.app-statusbar {
    flex: 0 0 30px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 14px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-light);
    font-size: 11.5px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
}
.app-statusbar .asb-item {
    color: var(--text-tertiary);
    text-decoration: none;
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: .02em;
}
.app-statusbar a.asb-item:hover { color: var(--accent); background: var(--bg-hover); }
.app-statusbar .asb-flex { flex: 1; }
.app-statusbar .asb-report { color: var(--accent); font-weight: 600; }

/* ---------- 回到顶部 ---------- */
.back-to-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 500;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: all var(--duration-normal) var(--ease-out);
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 14px var(--accent-glow);
}
.back-to-top:hover svg {
    stroke: #fff;
}
.back-to-top svg {
    width: 20px;
    height: 20px;
    stroke: var(--text-secondary);
    stroke-width: 2;
    fill: none;
    transition: stroke var(--duration-fast);
}

/* ============================================================
   移动端适配
   ============================================================ */

/* 汉堡按钮 */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    background: none;
    border: none;
    z-index: 1100;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--header-text);
    border-radius: 2px;
    transition: all 0.3s;
}
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* 移动端导航覆盖层 */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
}
.mobile-nav-overlay.show { display: block; }

.mobile-nav {
    display: none;
    position: fixed;
    top: 0; right: -300px;
    width: 280px;
    height: 100%;
    background: var(--bg-elevated);
    box-shadow: -4px 0 20px rgba(0,0,0,0.1);
    z-index: 1060;
    padding: 80px 24px 24px;
    overflow-y: auto;
    transition: right 0.3s var(--ease-out);
}
.mobile-nav.open { right: 0; }
.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    transition: all var(--duration-fast) var(--ease-out);
}
.mobile-nav a.ai-teaching { color: #ff6b35; font-weight: 600; }

/* 移动端导航活动态 */
.mobile-nav a.nav-active {
    background: var(--accent-light);
    color: var(--accent) !important;
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 12px;
}

/* ---------- 工具类 ---------- */
/* 文字 */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-accent    { color: var(--accent); }
.text-inverse   { color: var(--text-inverse); }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }

/* 字重 */
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

/* 字号 */
.text-xs  { font-size: 12px; }
.text-sm  { font-size: 14px; }
.text-base { font-size: 17px; }
.text-lg  { font-size: 20px; }
.text-xl  { font-size: 24px; }
.text-2xl { font-size: 32px; }
.text-3xl { font-size: 40px; }

/* Flexbox */
.flex           { display: flex; }
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.inline-flex    { display: inline-flex; }
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }
.gap-1    { gap: 8px; }
.gap-2    { gap: 16px; }
.gap-3    { gap: 24px; }
.gap-4    { gap: 32px; }
.gap-5    { gap: 48px; }

/* 间距 */
.m-0  { margin: 0; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }
.mb-5 { margin-bottom: 48px; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0  { padding: 0; }
.p-1  { padding: 8px; }
.p-2  { padding: 16px; }
.p-3  { padding: 24px; }
.p-4  { padding: 32px; }
.px-2 { padding-left: 16px; padding-right: 16px; }
.px-3 { padding-left: 24px; padding-right: 24px; }
.py-2 { padding-top: 16px; padding-bottom: 16px; }
.py-3 { padding-top: 24px; padding-bottom: 24px; }

/* 宽度 */
.w-full       { width: 100%; }
.max-w-sm     { max-width: 480px; }
.max-w-md     { max-width: 640px; }
.max-w-lg     { max-width: 800px; }
.max-w-980    { max-width: 980px; }
.max-w-1200   { max-width: 1200px; }

/* 背景 */
.bg-primary   { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-elevated  { background-color: var(--bg-elevated); }

/* 圆角 */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-pill); }

/* 边框 */
.border      { border: 1px solid var(--border-light); }
.border-b    { border-bottom: 1px solid var(--border-light); }
.border-t    { border-top: 1px solid var(--border-light); }

/* 阴影 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* 显示 */
.hidden       { display: none; }
.block        { display: block; }
.inline-block { display: inline-block; }

/* 溢出 */
.overflow-hidden { overflow: hidden; }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 定位 */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

/* 分隔线 */
.divider {
    width: 100%;
    height: 1px;
    background: var(--border-light);
    margin: 24px 0;
}

    /* 徽标 */
    .badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        background: var(--accent);
        border-radius: var(--radius-pill);
    }

    /* ---------- 状态色（学习进度统一语言 · 全站共用） ---------- */
    /* 变量统一声明于 :root（见上文 :root 块）；此处仅定义状态修饰规则 */

    /* 徽标状态修饰：覆盖 .badge 默认朱砂红，形成统一状态语言 */
    .badge.bg-success   { background-color: var(--success); color: #fff; }
    .badge.bg-warning   { background-color: var(--warning); color: #fff; }
    .badge.bg-secondary { background-color: var(--bg-secondary); color: var(--text-secondary); }

    /* 学习状态药丸（概念线 / 卦例线共用） */
    .pill-status {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        height: 24px;
        padding: 0 11px;
        font-size: 12.5px;
        font-weight: 600;
        border-radius: var(--radius-pill);
        border: 1px solid transparent;
        white-space: nowrap;
    }
    .pill-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
    .pill-status.done   { background: var(--success-soft); color: var(--success); border-color: var(--success-soft); }
    .pill-status.doing  { background: var(--warning-soft);  color: var(--warning);  border-color: var(--warning-soft); }
    .pill-status.todo   { background: transparent;          color: var(--text-tertiary); border-color: var(--border-medium); }
    .pill-status .tick  { font-size: 13px; line-height: 1; }

/* 空状态 */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--text-tertiary);
    text-align: center;
}
.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.4;
}
.empty-state p {
    font-size: 15px;
}

/* ---------- 动画 ---------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-fadeIn     { animation: fadeIn var(--duration-normal) var(--ease-out) both; }
.animate-fadeInUp   { animation: fadeInUp var(--duration-slow) var(--ease-out) both; }
.animate-fadeInScale{ animation: fadeInScale var(--duration-normal) var(--ease-out) both; }
.animate-slideIn    { animation: slideInLeft var(--duration-normal) var(--ease-out) both; }
.animate-pulse      { animation: pulse 2s ease-in-out infinite; }

/* 滚动显现 */
@keyframes revealUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-reveal {
    animation: revealUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 交错延迟 */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* 骨架屏 */
.skeleton {
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-elevated) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ---------- 微交互增强 ---------- */

/* 光标悬浮效果 */
.cursor-pointer { cursor: pointer; }

/* 点击涟漪效果 */
.btn, button, .card-lg, .card, a {
    position: relative;
    overflow: hidden;
}
.btn::after, button::after, .card-lg::after, .card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width var(--duration-normal), height var(--duration-normal);
}
.btn:active::after, button:active::after, .card-lg:active::after, .card:active::after {
    width: 200%;
    height: 200%;
}

/* WCAG 2.1 AA 焦点环 */
:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* 导航跳过涟漪效果 */
.header-nav a::after,
.mobile-nav a::after {
    display: none;
}
/* 导航 SVG 图标对齐 */
.header-nav a svg,
.mobile-nav a svg {
    flex-shrink: 0;
    stroke: currentColor;
}
.header-nav a.nav-active svg {
    stroke: #fff;
}
.mobile-nav a.nav-active svg {
    stroke: var(--accent);
}

/* 聚焦环 */
input:focus, textarea:focus, select:focus, button:focus, a:focus {
    outline: none;
}
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-light), 0 0 0 1px var(--accent);
}

/* 平滑滚动容器 */
.scroll-smooth {
    scroll-behavior: smooth;
}

/* 卡片进入动画 */
.card-enter {
    animation: cardEnter var(--duration-slow) var(--ease-out) both;
}
@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 数字计数动画 */
@keyframes countUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.count-animate {
    display: inline-block;
    animation: countUp var(--duration-normal) var(--ease-out) both;
}

/* 加载指示器 */
.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-light);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 进度条动画 */
@keyframes progress {
    from { width: 0; }
}
.progress-animate {
    animation: progress var(--duration-slow) var(--ease-out) both;
}

/* 标签切换动画 */
.tab-active {
    animation: tabFadeIn var(--duration-fast) var(--ease-out) both;
}
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 下拉菜单动画 */
.dropdown-menu {
    opacity: 0;
    transform: translateY(-8px) scale(0.95);
    pointer-events: none;
    transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.dropdown-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* 工具提示动画 */
.tooltip-card {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--duration-fast), transform var(--duration-fast);
}
.tooltip-card.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* 文字选择颜色 */
::selection {
    background: var(--accent-light);
    color: var(--accent);
}

/* ---------- 响应式 ---------- */

/* 平板及以下 */
@media (max-width: 1024px) {
    :root {
        --content-padding: 20px;
        --header-height: 56px;
    }
    html { font-size: 16px; zoom: 1; }
}

/* 手机端 (≤ 768px) */
@media (max-width: 768px) {
    :root {
        --content-padding: 16px;
    }

    /* 导航：隐藏桌面导航，显示汉堡菜单 */
    .header-nav,
    .header-tools {
        display: none;
    }
    .hamburger {
        display: flex;
    }

    .content-wrapper {
        padding: 20px var(--content-padding);
    }

    /* D110 状态栏移动端：只留 © + 备案 + 举报（协议/隐私等已在移动抽屉内） */
    .app-statusbar { padding: 0 10px; }
    .app-statusbar .asb-link { display: none; }
    .app-statusbar .asb-report { display: inline; }

    .back-to-top {
        bottom: 20px;
        right: 20px;
    }

    /* 卡片紧凑 */
    .card-lg { padding: 16px; border-radius: 8px; }
    .card { padding: 14px; }

    /* 表格横滚 */
    table { display: block; overflow-x: auto; white-space: nowrap; }

    /* 网格单列 */
    .card-grid, .plan-grid { grid-template-columns: 1fr !important; }

    /* 按钮全宽 */
    .btn, .btn-submit, button:not([class]), .redbutton { width: 100%; justify-content: center; }

    /* 聊天页 - 左面板折叠 */
    .chat-sidebar { width: 100% !important; margin-bottom: 12px; }
    .chat-main { flex-direction: column !important; }
    .chat-main > div { width: 100% !important; }

    /* 列表页紧凑 */
    .teaching-list .card-lg { padding: 12px; }
    .teaching-list .flex { flex-direction: column; gap: 8px; }

    /* 输入框适配 */
    input, textarea, select { font-size: 16px !important; }
}

/* 小屏手机 (≤ 480px) */
@media (max-width: 480px) {
    :root { --content-padding: 12px; }
    html { font-size: 14px; }
    .header-logo { font-size: 17px; }
    h1 { font-size: 20px !important; }
    h2 { font-size: 17px !important; }
}