/* ================================================================
   QSAR 专题 · Hansch 方法 —— 样式表
   浅色主题 · 药学专业风格 · 响应式（骨架沿产品线通用样式）
   ================================================================ */

:root {
    --ink: #0f172a;
    --ink2: #334155;
    --muted: #64748b;
    --line: #e2e8f0;
    --line2: #eef3f7;
    --bg: #ffffff;
    --bg-alt: #f5fafc;
    --bg-soft: #f8fafc;

    --cyan: #0891b2;
    --cyan-d: #0e7490;
    --cyan-l: #e6f7fb;
    --teal: #0d9488;
    --teal-l: #e3f8f4;
    --purple: #7c3aed;
    --purple-l: #f2ecff;
    --orange: #ea580c;
    --orange-l: #fff1e6;
    --blue: #2563eb;
    --blue-l: #e9efff;
    --red: #dc2626;
    --red-l: #fdeced;
    --green: #16a34a;
    --green-l: #e8f8ee;

    --r: 12px;
    --r-lg: 18px;
    --sh: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .12);
    --sh-lg: 0 4px 12px rgba(15, 23, 42, .06), 0 24px 48px -20px rgba(15, 23, 42, .18);
    --serif: "Cambria Math", "Latin Modern Math", Cambria, Georgia, "Times New Roman", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", Roboto, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    font-size: 15.5px;
}

img, svg { max-width: 100%; }

a { color: var(--cyan-d); text-decoration: none; }
a:hover { text-decoration: underline; }

b, strong { font-weight: 700; }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.mt { margin-top: 56px; }

/* ---------------- 阅读进度条 ---------------- */
.read-bar {
    position: fixed; top: 0; left: 0; height: 3px; width: 0;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    z-index: 200; transition: width .1s linear;
}

/* ---------------- 顶部导航 ---------------- */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
}

.tb-inner {
    max-width: 1240px; margin: 0 auto; padding: 0 24px;
    height: 64px; display: flex; align-items: center; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; }

.brand-logo {
    width: 38px; height: 38px; border-radius: 11px;
    background: linear-gradient(135deg, var(--cyan), var(--teal));
    color: #fff; font-weight: 800; font-size: 15px;
    display: grid; place-items: center; letter-spacing: .5px;
    box-shadow: 0 4px 12px -4px rgba(8, 145, 178, .55);
}

.brand-logo.sm { width: 26px; height: 26px; font-size: 11px; border-radius: 7px; display: inline-grid; vertical-align: -6px; }

.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: 15px; color: var(--ink); }
.brand-text em { font-style: normal; font-size: 11.5px; color: var(--muted); }

.nav { margin-left: auto; }
.nav ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; }

.nav-link {
    display: block; padding: 8px 13px; border-radius: 9px;
    font-size: 14px; color: var(--ink2); text-decoration: none;
    transition: .16s; white-space: nowrap;
}

.nav-link:hover { background: var(--bg-soft); color: var(--cyan-d); text-decoration: none; }
.nav-link.active { background: var(--cyan-l); color: var(--cyan-d); font-weight: 600; }

.nav-toggle {
    display: none; margin-left: auto; background: none; border: 1px solid var(--line);
    border-radius: 9px; padding: 7px 12px; font-size: 17px; cursor: pointer; color: var(--ink2);
}

/* ---------------- Hero ---------------- */
.hero {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #f2fbfd 0%, #eef7fb 45%, #f6fbfa 100%);
    border-bottom: 1px solid var(--line);
    padding: 76px 24px 44px;
}

.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

.hb-formula {
    position: absolute; font-family: var(--serif); font-style: italic;
    color: rgba(8, 145, 178, .09); white-space: nowrap; font-weight: 600;
}
.hb-formula.f1 { font-size: 46px; top: 8%; left: -2%; transform: rotate(-6deg); }
.hb-formula.f2 { font-size: 54px; top: 52%; right: 2%; transform: rotate(4deg); }
.hb-formula.f3 { font-size: 34px; bottom: 12%; left: 34%; transform: rotate(-3deg); color: rgba(13, 148, 136, .09); }
.hb-formula.f4 { font-size: 30px; top: 18%; right: 16%; transform: rotate(7deg); color: rgba(124, 58, 237, .075); }

.hb-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
.hb-blob.b1 { width: 380px; height: 380px; background: #b6e8f5; top: -140px; right: -80px; }
.hb-blob.b2 { width: 300px; height: 300px; background: #c9f0e6; bottom: -160px; left: -60px; }

.hero-inner { position: relative; max-width: 1040px; margin: 0 auto; }

.hero-title {
    font-size: 3.4rem; line-height: 1.12; margin: 0 0 10px;
    font-weight: 800; letter-spacing: -.5px;
    background: linear-gradient(120deg, #0f172a 20%, #0e7490 90%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

.hero-sub {
    font-family: var(--serif); font-style: italic; font-size: 1.1rem;
    color: var(--cyan-d); opacity: .8; margin-bottom: 24px;
}

.hero-intro {
    font-size: 16.5px; color: var(--ink2); max-width: 780px;
    margin: 0 0 30px; line-height: 1.9;
}

.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; margin-bottom: 30px; }
.hs { display: flex; flex-direction: column; }
.hs-num {
    font-size: 2.1rem; font-weight: 800; line-height: 1;
    color: var(--cyan-d); font-variant-numeric: tabular-nums;
}
.hs-label { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-outline {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: rgba(255, 255, 255, .72); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 16px 20px; backdrop-filter: blur(8px);
}

.ho-item { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; color: var(--ink2); }
.ho-item b {
    font-family: var(--serif); font-style: italic; color: var(--cyan-d);
    font-size: 15px; font-weight: 700;
}
.ho-arrow { color: #a5c6d2; font-size: 14px; }

/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 20px; border-radius: 10px; border: 1px solid transparent;
    font-size: 14.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; transition: .18s; text-decoration: none; line-height: 1.4;
    background: #fff; color: var(--ink2);
}

.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.btn-primary {
    background: linear-gradient(135deg, var(--cyan), var(--cyan-d));
    color: #fff; box-shadow: 0 4px 14px -6px rgba(8, 145, 178, .8);
}
.btn-primary:hover { box-shadow: 0 8px 20px -6px rgba(8, 145, 178, .75); }

.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink2); }
.btn-ghost:hover { border-color: #bfd4de; background: var(--bg-soft); color: var(--cyan-d); }

.btn-lg { padding: 13px 26px; font-size: 15.5px; border-radius: 12px; }
.btn-sm { padding: 6px 13px; font-size: 13px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn.danger { color: var(--red); border-color: #f3c7cb; }
.btn.danger:hover { background: var(--red-l); }

/* ---------------- 通用 section ---------------- */
.sec { padding: 72px 24px; }
.sec.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wrap { max-width: 1240px; margin: 0 auto; }

.sec-label {
    font-size: 11.5px; letter-spacing: 2.2px; font-weight: 700;
    color: var(--cyan); margin-bottom: 10px;
}

.sec-h2 {
    font-size: 2rem; margin: 0 0 12px; font-weight: 800;
    letter-spacing: -.3px; color: var(--ink);
}

.sec-desc { color: var(--muted); margin: 0 0 36px; max-width: 860px; font-size: 15px; }

/* ---------------- 学习目标 ---------------- */
.aim-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(266px, 1fr)); gap: 18px; }

.aim-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 20px 22px; box-shadow: var(--sh); position: relative; overflow: hidden;
}
.aim-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--cyan), var(--teal));
}

.aim-mod {
    font-weight: 700; font-size: 14.5px; color: var(--cyan-d);
    margin-bottom: 12px; padding-left: 4px;
}

.aim-card ul { margin: 0; padding-left: 20px; }
.aim-card li { font-size: 14px; color: var(--ink2); margin-bottom: 8px; line-height: 1.7; }
.aim-card li::marker { color: var(--cyan); }

/* ---------------- 知识地图 ---------------- */
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; }

.map-card {
    display: block; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 22px; text-decoration: none;
    box-shadow: var(--sh); transition: .22s; position: relative; overflow: hidden;
}
.map-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--sh-lg); }

.mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mc-icon {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    font-size: 20px; font-weight: 700; font-family: var(--serif);
}
.mc-num { font-family: var(--serif); font-style: italic; font-size: 20px; font-weight: 700; opacity: .35; }
.mc-title { font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.mc-points { list-style: none; margin: 0 0 16px; padding: 0; }
.mc-points li {
    font-size: 13px; color: var(--ink2); padding: 4px 0 4px 16px; position: relative;
}
.mc-points li::before {
    content: ''; position: absolute; left: 2px; top: 12px;
    width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35;
}
.mc-foot {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 12px;
}
.mc-go { font-weight: 600; }

.m-cyan .mc-icon { background: var(--cyan-l); color: var(--cyan-d); }
.m-cyan .mc-go { color: var(--cyan-d); }
.m-orange .mc-icon { background: var(--orange-l); color: var(--orange); }
.m-orange .mc-go { color: var(--orange); }
.m-teal .mc-icon { background: var(--teal-l); color: var(--teal); }
.m-teal .mc-go { color: var(--teal); }
.m-purple .mc-icon { background: var(--purple-l); color: var(--purple); }
.m-purple .mc-go { color: var(--purple); }

/* ---------------- 讲义布局 ---------------- */.content-wrap { display: grid; grid-template-columns: 224px 1fr; gap: 44px; align-items: start; }

.content-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 3px; }

.cn-item {
    display: flex; gap: 10px; align-items: baseline; padding: 9px 12px;
    border-radius: 9px; font-size: 13.5px; color: var(--ink2); text-decoration: none;
    border-left: 2px solid transparent; transition: .16s; line-height: 1.5;
}
.cn-item:hover { background: #fff; text-decoration: none; color: var(--cyan-d); }
.cn-item.active {
    background: #fff; border-left-color: var(--cyan); color: var(--cyan-d);
    font-weight: 600; box-shadow: var(--sh);
}
.cn-num { font-family: var(--serif); font-style: italic; font-weight: 700; opacity: .7; flex-shrink: 0; }
.cn-text { flex: 1; min-width: 0; }

/* 卡片（公式/例题/提示/临床）作为定位容器 */
.formula-box, .note-box, .clinic-box, .example-box { position: relative; }

.content-main { min-width: 0; }

.ch-section { margin-bottom: 68px; scroll-margin-top: 90px; }

.sec-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 20px; }

.sec-num {
    font-family: var(--serif); font-style: italic; font-size: 2.6rem; font-weight: 700;
    line-height: 1; color: transparent;
    background: linear-gradient(135deg, var(--cyan), var(--teal));
    -webkit-background-clip: text; background-clip: text; flex-shrink: 0;
}

.sec-title { font-size: 1.6rem; margin: 0 0 6px; font-weight: 800; letter-spacing: -.2px; line-height: 1.35; }
.sec-en { font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--muted); }

.sec-lead {
    font-size: 15.5px; color: var(--ink2); background: #fff;
    border-left: 3px solid var(--cyan); border-radius: 0 var(--r) var(--r) 0;
    padding: 16px 20px; margin: 0 0 28px; box-shadow: var(--sh);
}

.ch3 {
    font-size: 1.2rem; font-weight: 700; margin: 40px 0 14px;
    padding-left: 14px; border-left: 4px solid var(--teal); line-height: 1.5;
    scroll-margin-top: 90px;
}

.cp { margin: 0 0 16px; color: var(--ink2); line-height: 1.95; text-align: justify; }

.cp-list { margin: 0 0 18px; padding-left: 24px; color: var(--ink2); }
.cp-list li { margin-bottom: 8px; line-height: 1.85; }
.cp-list li::marker { color: var(--cyan); }

/* ---------------- 公式框 ---------------- */
.formula-box {
    background: linear-gradient(135deg, #f7fdff, #f2fbf9);
    border: 1px solid #d8ecf2; border-left: 4px solid var(--cyan);
    border-radius: var(--r); padding: 18px 22px; margin: 0 0 20px;
}

.fb-label {
    font-size: 12.5px; font-weight: 700; color: var(--cyan-d);
    letter-spacing: .4px; margin-bottom: 12px;
}

.fb-body { text-align: center; padding: 4px 0 8px; overflow-x: auto; }

.fb-note {
    font-size: 13.5px; color: var(--ink2); line-height: 1.8;
    border-top: 1px dashed #cfe7ee; padding-top: 12px; margin-top: 4px;
}

/* ---------------- 数学排版 ---------------- */
.m-inline, .m-display {
    font-family: var(--serif); font-style: italic;
    font-size: 1.06em; color: #0b3a4a; white-space: nowrap;
}
.m-display { display: inline-block; font-size: 1.32em; }
.m-inline sup, .m-inline sub, .m-display sup, .m-display sub { font-size: .68em; font-style: normal; }
.m-display sup, .m-display sub { font-size: .62em; }

.m-frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 .18em; }
.m-frac .m-num { padding: 0 .3em .06em; border-bottom: 1.2px solid currentColor; }
.m-frac .m-den { padding: .06em .3em 0; }

.m-sqrt { display: inline-flex; align-items: flex-start; }
.m-sqrt .m-rad { border-top: 1.2px solid currentColor; padding: 0 .12em; margin-top: .1em; }
.m-rootidx { font-size: .6em; }

.m-overline { border-top: 1.2px solid currentColor; padding-top: 1px; }
.m-underline { border-bottom: 1.2px solid currentColor; }
.m-op { margin: 0 .24em; }
.m-text { font-style: normal; font-family: var(--sans); font-size: .92em; }
.m-nbsp { display: inline-block; width: .28em; }
.m-wide { display: inline-block; width: .9em; }
.m-grp { display: inline; }
.m-unknown { color: var(--red); font-size: .9em; }

/* ---------------- 表格 ---------------- */
.fig-table { margin: 0 0 22px; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }

.data-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 520px; }
.data-tbl th {
    background: linear-gradient(180deg, #f4fafc, #eef6f9);
    color: var(--ink); font-weight: 700; text-align: left;
    padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line2); color: var(--ink2); vertical-align: top; }
.data-tbl tbody tr:last-child td { border-bottom: none; }
.data-tbl tbody tr:hover { background: #fbfeff; }
.data-tbl tfoot td { background: #f6fbfd; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }
.data-tbl.compact th, .data-tbl.compact td { padding: 7px 9px; font-size: 12.5px; }
.data-tbl .ta-c { text-align: center; }
.data-tbl .ta-ok { background: var(--green-l); color: #15803d; font-weight: 700; }
.data-tbl .ta-bad { background: var(--red-l); color: #b91c1c; font-weight: 700; }

figcaption {
    font-size: 12.5px; color: var(--muted); text-align: center;
    margin-top: 10px; line-height: 1.7;
}

/* ---------------- 例题 ---------------- */
.example-box {
    border: 1px solid #dfe9f0; border-radius: var(--r); overflow: hidden;
    margin: 0 0 22px; background: #fff; box-shadow: var(--sh);
}

.ex-head {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #f0f7fb, #eef8f5);
    padding: 12px 18px; font-weight: 700; font-size: 14.5px; color: var(--cyan-d);
    border-bottom: 1px solid #e3eef3;
}

.ex-badge {
    width: 24px; height: 24px; border-radius: 7px; background: var(--cyan-d); color: #fff;
    display: grid; place-items: center; font-size: 12px; font-weight: 800; flex-shrink: 0;
}

.ex-stem {
    padding: 16px 18px; font-size: 14.5px; color: var(--ink); line-height: 1.9;
    background: #fdfefe; border-bottom: 1px dashed var(--line);
}

.ex-body { padding: 16px 18px 18px; }

.ex-title {
    font-size: 11.5px; letter-spacing: 3px; font-weight: 700;
    color: var(--muted); margin-bottom: 12px;
}

.ex-steps { margin: 0 0 16px; padding-left: 22px; font-size: 14px; color: var(--ink2); }
.ex-steps li { margin-bottom: 9px; line-height: 1.9; }
.ex-steps li::marker { color: var(--teal); font-weight: 700; }

.ex-answer {
    background: linear-gradient(135deg, #eefbf6, #f2fbfd);
    border: 1px solid #cfeee4; border-radius: 10px; padding: 13px 16px;
    font-size: 14.5px; color: #0f5132; line-height: 1.9;
}
.ex-answer b { color: var(--teal); margin-right: 10px; }

/* ---------------- 提示框 ---------------- */
.note-box {
    background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b;
    border-radius: var(--r); padding: 16px 20px; margin: 0 0 22px;
}
.nb-head { font-weight: 700; color: #b45309; font-size: 14px; margin-bottom: 10px; }
.note-box ul { margin: 0; padding-left: 20px; }
.note-box li { font-size: 14px; color: #78350f; margin-bottom: 8px; line-height: 1.8; }
.note-box li::marker { color: #f59e0b; }

.clinic-box {
    background: linear-gradient(135deg, #f5f3ff, #faf8ff);
    border: 1px solid #ddd6fe; border-left: 4px solid var(--purple);
    border-radius: var(--r); padding: 16px 20px; margin: 0 0 22px;
}
.cb-head {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; color: #5b21b6; font-size: 14px; margin-bottom: 10px;
}
.cb-icon {
    width: 22px; height: 22px; border-radius: 6px; background: var(--purple); color: #fff;
    display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
.cb-text { font-size: 14px; color: #4c1d95; line-height: 1.95; }

.key-box {
    background: linear-gradient(135deg, #f0fdfa, #f2fbfd);
    border: 1px solid #ccf0e7; border-left: 4px solid var(--teal);
    border-radius: var(--r); padding: 18px 22px; margin: 26px 0 0;
}
.kb-head { font-size: 12.5px; letter-spacing: 3px; font-weight: 700; color: var(--teal); margin-bottom: 12px; }
.kb-list { margin: 0; padding-left: 22px; }
.kb-list li { font-size: 14px; color: #134e4a; margin-bottom: 9px; line-height: 1.85; }
.kb-list li::marker { color: var(--teal); font-weight: 700; }

.aim-box {
    background: var(--bg-soft); border: 1px dashed var(--line);
    border-radius: var(--r); padding: 14px 18px; font-size: 14px; color: var(--ink2);
}

/* ---------------- 示意图 ---------------- */
.fig-svg {
    margin: 26px 0 26px; background: #fff; border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: 18px 16px 12px; box-shadow: var(--sh);
}
.fig-svg svg { display: block; height: auto; }
.fig-missing { padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }
.fig-img img { display: block; height: auto; width: 100%; max-width: 760px; margin: 0 auto; border-radius: 10px; }
.fig-img { position: relative; cursor: zoom-in; }
.fig-img:hover::after {
    content: '🔍 点击放大';
    position: absolute; top: 26px; right: 26px; font-size: 12px; color: #334155;
    background: rgba(241,245,249,.94); border: 1px solid #cbd5e1; border-radius: 12px;
    padding: 3px 10px; pointer-events: none;
}
.lb-ov {
    position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.86);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s;
    cursor: zoom-out;
}
.lb-ov.lb-on { opacity: 1; visibility: visible; }
.lb-ov img {
    max-width: 96vw; max-height: 96vh; border-radius: 10px;
    box-shadow: 0 24px 70px rgba(0,0,0,.55);
    transform: scale(.95); transition: transform .18s ease;
}
.lb-ov.lb-on img { transform: scale(1); }
.lb-x {
    position: fixed; top: 14px; right: 20px; width: 38px; height: 38px;
    border-radius: 50%; border: none; background: rgba(255,255,255,.14);
    color: #fff; font-size: 18px; cursor: pointer;
}
.lb-x:hover { background: rgba(255,255,255,.3); }
.lb-tip { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); font-size: 12.5px; color: #cbd5e1; }

/* ================================================================
   计算与 AI
   ================================================================ */
.panel-note {
    background: var(--cyan-l); border: 1px solid #cbe9f1; border-radius: var(--r);
    padding: 13px 18px; font-size: 13.5px; color: #0b4a5c; line-height: 1.85; margin-bottom: 22px;
}
.panel-note b { color: var(--cyan-d); }

.tool-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

.tool-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px; border-radius: 11px; cursor: pointer;
    border: 1px solid var(--line); background: #fff;
    font-size: 14.5px; font-weight: 600; color: var(--ink2); font-family: inherit;
    transition: .18s;
}
.tool-tab b {
    width: 20px; height: 20px; border-radius: 6px; background: var(--bg-soft);
    display: grid; place-items: center; font-size: 11.5px; color: var(--muted);
}
.tool-tab:hover { border-color: #bfd4de; color: var(--cyan-d); }
.tool-tab.active {
    background: linear-gradient(135deg, var(--cyan), var(--cyan-d)); color: #fff;
    border-color: transparent; box-shadow: 0 6px 16px -8px rgba(8, 145, 178, .9);
}
.tool-tab.active b { background: rgba(255, 255, 255, .25); color: #fff; }

.tool-pane { display: none; }
.tool-pane.active { display: block; animation: fadeUp .3s ease; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.calc-grid { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; }

.calc-form, .calc-out {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; box-shadow: var(--sh);
}
.calc-out { min-height: 220px; }

.cf-row { margin-bottom: 16px; }
.cf-row > label {
    display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 7px;
}
.cf-row .unit { font-weight: 400; color: var(--muted); font-size: 12px; }

.cf-row input[type="text"], .cf-row select, .cls-form input[type="text"], .cls-form select,
.ai-input-col textarea, .os-row input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px;
    font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
    transition: .16s; outline: none;
}
.cf-row input:focus, .cf-row select:focus, .cls-form input:focus, .cls-form select:focus,
.ai-input-col textarea:focus, .os-row input:focus {
    border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, .12);
}

.cf-fields { display: flex; flex-direction: column; gap: 0; }
.cf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.unit-row { display: grid; grid-template-columns: 1fr 128px; gap: 8px; }
.unit-row select { font-size: 12.5px; padding: 9px 8px; }

.cf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.cf-hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

.cf-presets {
    margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line);
    display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
}
.cfp-label { font-size: 12.5px; color: var(--muted); margin-right: 2px; }

.chip {
    padding: 6px 13px; border-radius: 100px; border: 1px solid var(--line);
    background: #fff; font-size: 12.5px; color: var(--ink2); cursor: pointer;
    font-family: inherit; transition: .16s;
}
.chip:hover { border-color: var(--cyan); color: var(--cyan-d); background: var(--cyan-l); }
.chip.active { background: var(--cyan-l); border-color: var(--cyan); color: var(--cyan-d); font-weight: 600; }

.calc-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--muted); padding: 40px 20px; min-height: 220px;
}
.ce-icon {
    width: 56px; height: 56px; border-radius: 16px; background: var(--bg-soft);
    display: grid; place-items: center; font-size: 24px; font-family: var(--serif);
    font-style: italic; color: var(--cyan); margin-bottom: 16px;
}
.calc-empty p { margin: 0 0 14px; font-size: 14px; line-height: 1.85; }

.ai-demo { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; width: 100%; max-width: 400px; }
.ai-demo-step {
    background: var(--bg-soft); border: 1px solid var(--line); border-radius: 9px;
    padding: 9px 14px; font-size: 12.5px; color: var(--ink2); text-align: left;
}
.ai-demo-step b { color: var(--cyan-d); margin-right: 8px; }

.calc-formula {
    background: linear-gradient(135deg, #f7fdff, #f2fbf9); border: 1px solid #d8ecf2;
    border-radius: 10px; padding: 12px 16px; margin-bottom: 18px; text-align: center;
}
.cf-label {
    display: block; font-size: 11.5px; font-weight: 700; color: var(--cyan-d);
    letter-spacing: .5px; margin-bottom: 6px;
}

.calc-steps { margin: 0 0 20px; padding-left: 22px; font-size: 13.8px; color: var(--ink2); }
.calc-steps li { margin-bottom: 10px; line-height: 1.9; }
.calc-steps li::marker { color: var(--cyan); font-weight: 700; }

.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }

.res-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 14px 16px; transition: .16s;
}
.res-card.hi { border-color: #a8dcec; background: linear-gradient(135deg, #f8fdfe, #f2fbf9); }
.res-card.v-ok { border-left: 4px solid var(--green); }
.res-card.v-warn { border-left: 4px solid var(--orange); background: #fffbf6; }
.res-card.v-danger { border-left: 4px solid var(--red); background: #fff8f8; }

.res-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.res-value { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.55; word-break: break-word; }
.res-note { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.65; }

.calc-tip {
    background: var(--bg-soft); border: 1px dashed var(--line); border-radius: 10px;
    padding: 12px 16px; font-size: 13px; color: var(--ink2); line-height: 1.8;
}

.calc-verdict {
    border-radius: var(--r); padding: 14px 18px; font-size: 13.8px; line-height: 1.9;
    margin-top: 6px;
}
.calc-verdict ul { margin: 8px 0 0; padding-left: 20px; }
.calc-verdict li { margin-bottom: 6px; }
.calc-verdict.ok { background: var(--green-l); border: 1px solid #c3ecd2; color: #14532d; }
.calc-verdict.warn { background: #fff7ed; border: 1px solid #fddfb5; color: #7c2d12; }
.calc-verdict.danger { background: var(--red-l); border: 1px solid #f5c1c5; color: #7f1d1d; }

/* 渗透浓度工具 */
.osmo-layout { display: grid; grid-template-columns: 420px 1fr; gap: 24px; align-items: start; }
.of-title { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 12px; }

.os-head {
    display: grid; grid-template-columns: 1fr 74px 60px 44px 28px; gap: 8px;
    font-size: 11.5px; color: var(--muted); padding: 0 0 6px; text-align: center;
}
.os-head span:first-child { text-align: left; }

.os-row {
    display: grid; grid-template-columns: 1fr 74px 60px 44px 28px; gap: 8px;
    margin-bottom: 8px; align-items: center;
}
.os-row input { padding: 7px 9px; font-size: 13px; text-align: center; }
.os-row input.os-name { text-align: left; }

.os-del {
    width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line);
    background: #fff; color: var(--muted); cursor: pointer; font-size: 15px;
    line-height: 1; display: grid; place-items: center; transition: .16s;
}
.os-del:hover { border-color: #f3c7cb; background: var(--red-l); color: var(--red); }

/* AI 工具 */
.ai-layout { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }
.ai-input-col {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; box-shadow: var(--sh);
}
.ai-input-col textarea { resize: vertical; line-height: 1.8; margin-bottom: 4px; }

.ai-samples { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.ai-sample {
    display: block; width: 100%; text-align: left; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px;
    font-size: 12.5px; color: var(--ink2); cursor: pointer; font-family: inherit;
    margin-bottom: 8px; line-height: 1.7; transition: .16s;
}
.ai-sample:hover { border-color: var(--cyan); color: var(--cyan-d); background: var(--cyan-l); }

.ai-parse {
    margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line);
}
.parse-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.pchip {
    background: var(--cyan-l); border: 1px solid #cbe9f1; border-radius: 100px;
    padding: 4px 12px; font-size: 12px; color: var(--cyan-d);
}
.parse-type { font-size: 12.5px; color: var(--ink2); margin-top: 6px; }
.parse-type b { color: var(--cyan-d); }

.ai-answer-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
    padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ai-badge {
    background: linear-gradient(135deg, var(--cyan), var(--teal)); color: #fff;
    padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 700;
}
.ai-badge.gen { background: linear-gradient(135deg, var(--purple), #a855f7); }
.ai-type { font-size: 13px; color: var(--muted); }

.ai-sec-title {
    font-size: 12.5px; letter-spacing: 2.5px; font-weight: 700;
    color: var(--muted); margin: 22px 0 12px; padding-bottom: 8px;
    border-bottom: 1px dashed var(--line);
}

.ai-tips { margin: 0; padding-left: 22px; }
.ai-tips li { font-size: 13.5px; color: var(--ink2); margin-bottom: 9px; line-height: 1.85; }
.ai-tips li::marker { color: var(--orange); }

.ai-next { margin-top: 22px; }

.ai-quiz-q {
    font-size: 15px; color: var(--ink); line-height: 1.95; background: var(--bg-soft);
    border: 1px solid var(--line); border-left: 4px solid var(--purple);
    border-radius: var(--r); padding: 16px 20px; margin-bottom: 18px;
}

/* ================================================================
   学生练习
   ================================================================ */
.prac-setup { display: grid; grid-template-columns: 1fr 1fr 320px; gap: 20px; align-items: start; }

.prac-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 22px; box-shadow: var(--sh);
}
.prac-card h3 {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; margin: 0 0 18px; font-weight: 700; color: var(--ink);
}
.prac-card h3 i {
    width: 24px; height: 24px; border-radius: 7px; background: var(--cyan-l);
    color: var(--cyan-d); display: grid; place-items: center;
    font-style: normal; font-size: 12.5px; font-weight: 800;
}

.tag-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-picker.compact { gap: 6px; }

.tag-opt {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px;
    font-size: 13px; color: var(--ink2); background: #fff; transition: .16s; user-select: none;
}
.tag-opt:hover { border-color: #bfd4de; }
.tag-opt input { display: none; }
.tag-opt span { display: flex; align-items: center; gap: 6px; }
.tag-opt em { font-style: normal; font-size: 11px; color: var(--muted); }
.tag-opt:has(input:checked) {
    background: var(--cyan-l); border-color: var(--cyan); color: var(--cyan-d); font-weight: 600;
}
.tag-opt:has(input:checked) em { color: var(--cyan); }

.prac-opts { display: flex; flex-direction: column; gap: 16px; }
.po-row > label { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 9px; }
.po-btns { display: flex; flex-wrap: wrap; gap: 7px; }

.prac-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.prac-pool { font-size: 12.5px; color: var(--muted); }
.prac-pool b { color: var(--cyan-d); }

.prac-side { display: flex; flex-direction: column; gap: 20px; }

.wb-stat { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.wb-num { font-size: 2.2rem; font-weight: 800; color: var(--orange); line-height: 1; }
.wb-label { font-size: 13px; color: var(--muted); }

.wb-actions { display: flex; gap: 8px; margin-bottom: 14px; }

.wb-list { display: flex; flex-direction: column; gap: 7px; }
.wb-item {
    display: flex; flex-direction: column; gap: 3px; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 9px; cursor: pointer; transition: .16s;
    background: var(--bg-soft);
}
.wb-item:hover { border-color: var(--orange); background: #fffaf5; }
.wb-tag { font-size: 11px; color: var(--orange); font-weight: 600; }
.wb-stem { font-size: 12.5px; color: var(--ink2); line-height: 1.6; }

.hist-list { display: flex; flex-direction: column; }
.hist-item {
    display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center;
    padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px;
}
.hist-item:last-child { border-bottom: none; }
.hi-score {
    font-weight: 800; font-size: 16px; color: var(--orange); text-align: center;
    font-variant-numeric: tabular-nums;
}
.hi-score.pass { color: var(--green); }
.hi-info { color: var(--ink2); }
.hi-time { color: var(--muted); font-size: 11.5px; }

/* 练习答题界面 */
.prac-run-head {
    display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 16px 22px; margin-bottom: 22px; box-shadow: var(--sh);
}
.prh-left { display: flex; flex-direction: column; gap: 2px; }
.prac-clock { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--cyan-d); }
.prac-progress-text { font-size: 12px; color: var(--muted); }
.prh-track { height: 7px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.prh-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--teal)); border-radius: 100px; transition: width .3s; }
.prh-right { display: flex; gap: 9px; }

.prac-run-body { display: grid; grid-template-columns: 1fr 240px; gap: 22px; align-items: start; }
.prac-main { min-width: 0; }

.prac-aside {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 18px; box-shadow: var(--sh); position: sticky; top: 88px;
}
.pa-title { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 12px; }

.pa-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.pa-cell {
    aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: #fff;
    font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
    font-family: inherit; transition: .14s;
}
.pa-cell:hover { border-color: var(--cyan); }
.pa-cell.answered { background: var(--cyan-l); border-color: #a8dcec; color: var(--cyan-d); }
.pa-cell.current { background: var(--cyan-d); border-color: var(--cyan-d); color: #fff; }

.pa-legend { display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); margin-bottom: 14px; }
.pa-legend span { display: flex; align-items: center; gap: 4px; }
.dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.dot.answered { background: var(--cyan-l); border: 1px solid #a8dcec; }
.dot.current { background: var(--cyan-d); }
.dot.blank { background: #fff; border: 1px solid var(--line); }

.pa-actions { display: flex; gap: 7px; margin-bottom: 16px; }
.pa-actions .btn { flex: 1; }

.pa-help { border-top: 1px dashed var(--line); padding-top: 14px; }
.kb { font-size: 11.5px; color: var(--muted); margin-bottom: 5px; }

.q-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh); }
.q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.q-index { font-size: 13px; font-weight: 700; color: var(--cyan-d); }
.q-tag {
    font-size: 11.5px; background: var(--cyan-l); color: var(--cyan-d);
    padding: 3px 10px; border-radius: 100px; font-weight: 600;
}
.q-diff { font-size: 11.5px; padding: 3px 10px; border-radius: 100px; font-weight: 600; }
.q-diff.d1 { background: var(--green-l); color: #15803d; }
.q-diff.d2 { background: var(--orange-l); color: #c2410c; }
.q-diff.d3 { background: var(--red-l); color: #b91c1c; }

.q-stem { font-size: 16px; line-height: 1.95; color: var(--ink); margin-bottom: 22px; }

.q-options { display: flex; flex-direction: column; gap: 10px; }
.q-option {
    display: flex; align-items: flex-start; gap: 13px; text-align: left;
    padding: 14px 18px; border: 1.5px solid var(--line); border-radius: var(--r);
    background: #fff; cursor: pointer; font-family: inherit; font-size: 14.5px;
    color: var(--ink2); transition: .16s; line-height: 1.75;
}
.q-option:hover { border-color: #a8dcec; background: #fbfeff; }
.q-option.chosen { border-color: var(--cyan); background: var(--cyan-l); color: var(--cyan-d); font-weight: 600; }
.q-letter {
    width: 26px; height: 26px; border-radius: 8px; background: var(--bg-soft);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
    flex-shrink: 0; color: var(--muted);
}
.q-option.chosen .q-letter { background: var(--cyan-d); color: #fff; }

/* 练习结果 */
.prac-result { display: flex; flex-direction: column; gap: 26px; }

.pr-head {
    display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 28px 32px; box-shadow: var(--sh);
}

.pr-ring, .sr-ring { position: relative; width: 180px; height: 180px; }
.pr-ring svg, .sr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line2); stroke-width: 14; }
.ring-fg { fill: none; stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }

.pr-ring-text {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; transform: none;
}
.pr-ring-text b { font-size: 3rem; font-weight: 800; line-height: 1; color: var(--ink); }
.pr-ring-text span { font-size: 13px; color: var(--muted); }

.pr-grade, .sr-grade { font-size: 1.7rem; font-weight: 800; margin-bottom: 6px; }
.pr-msg, .sr-msg { font-size: 14.5px; color: var(--ink2); margin: 0 0 18px; line-height: 1.85; }

.pr-stats, .sr-stats { display: flex; gap: 30px; flex-wrap: wrap; margin-bottom: 20px; }
.pr-stat, .sr-stats > div { display: flex; flex-direction: column; }
.pr-stat b, .sr-stats b {
    font-size: 1.35rem; font-weight: 800; color: var(--ink); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pr-stat span, .sr-stats span { font-size: 12px; color: var(--muted); margin-top: 5px; }

.pr-actions, .sr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.pr-tags { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--sh); }
.pr-tag-row { display: grid; grid-template-columns: 118px 1fr 108px; gap: 14px; align-items: center; margin-bottom: 11px; }
.pr-tag-name { font-size: 13px; color: var(--ink2); font-weight: 600; }
.pr-tag-bar { height: 9px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.pr-tag-bar i { display: block; height: 100%; border-radius: 100px; transition: width .8s; }
.pr-tag-bar i.good { background: linear-gradient(90deg, var(--teal), #34d399); }
.pr-tag-bar i.mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.pr-tag-bar i.bad { background: linear-gradient(90deg, #dc2626, #f87171); }
.pr-tag-val { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.pr-detail-head { display: flex; align-items: center; justify-content: space-between; }
.pr-filter { font-size: 13px; color: var(--ink2); display: flex; align-items: center; gap: 7px; cursor: pointer; }

.pr-detail-list { display: flex; flex-direction: column; gap: 16px; }

.pr-detail {
    background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--line);
    border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh);
}
.pr-detail.ok { border-left-color: var(--green); }
.pr-detail.bad { border-left-color: var(--red); }

.prd-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.prd-no {
    width: 26px; height: 26px; border-radius: 8px; background: var(--bg-soft);
    display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: var(--ink2);
}
.prd-tag { font-size: 11.5px; background: var(--cyan-l); color: var(--cyan-d); padding: 3px 10px; border-radius: 100px; font-weight: 600; }
.prd-mark { margin-left: auto; font-size: 13px; font-weight: 700; }
.pr-detail.ok .prd-mark { color: var(--green); }
.pr-detail.bad .prd-mark { color: var(--red); }

.prd-stem { font-size: 15px; color: var(--ink); line-height: 1.9; margin-bottom: 14px; }

.prd-options { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.prd-opt {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 13px;
    border-radius: 9px; background: var(--bg-soft); font-size: 13.5px;
    color: var(--ink2); line-height: 1.7;
}
.prd-letter {
    width: 21px; height: 21px; border-radius: 6px; background: #fff; border: 1px solid var(--line);
    display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0;
}
.prd-opt.right { background: var(--green-l); color: #14532d; }
.prd-opt.right .prd-letter { background: var(--green); border-color: var(--green); color: #fff; }
.prd-opt.wrong { background: var(--red-l); color: #7f1d1d; }
.prd-opt.wrong .prd-letter { background: var(--red); border-color: var(--red); color: #fff; }
.prd-opt em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; opacity: .8; white-space: nowrap; }

.prd-note { font-size: 12.5px; color: var(--orange); margin-bottom: 10px; font-weight: 600; }

.prd-exp {
    font-size: 13.8px; color: #134e4a; line-height: 1.95;
    background: linear-gradient(135deg, #f2fdfa, #f4fbfd);
    border: 1px solid #d5eee7; border-radius: 10px; padding: 14px 17px;
}
.prd-exp b { color: var(--teal); }

.prd-actions { margin-top: 12px; }
.prd-wb {
    padding: 6px 14px; border-radius: 100px; border: 1px solid var(--line);
    background: #fff; font-size: 12.5px; color: var(--ink2); cursor: pointer; font-family: inherit;
    transition: .16s;
}
.prd-wb:hover { border-color: var(--orange); color: var(--orange); background: #fffaf5; }

/* 模态框 */
.modal-ov {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45); backdrop-filter: blur(3px);
    z-index: 300; display: grid; place-items: center; padding: 24px;
    animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
    background: #fff; border-radius: var(--r-lg); padding: 26px 28px;
    max-width: 720px; width: 100%; max-height: 82vh; overflow-y: auto;
    box-shadow: var(--sh-lg); animation: popIn .22s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes popIn { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }

.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-tag { font-size: 12px; background: var(--cyan-l); color: var(--cyan-d); padding: 4px 12px; border-radius: 100px; font-weight: 600; }
.modal-x {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; cursor: pointer; font-size: 17px; color: var(--muted); line-height: 1;
}
.modal-x:hover { background: var(--bg-soft); }
.modal-stem { font-size: 15px; line-height: 1.9; margin-bottom: 16px; color: var(--ink); }

/* Toast */
.toast {
    position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px);
    background: #0f172a; color: #fff; padding: 12px 22px; border-radius: 100px;
    font-size: 13.5px; opacity: 0; transition: .28s; z-index: 400;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .6); pointer-events: none;
    max-width: 82vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: #0d9488; }
.toast.warn { background: #ea580c; }
.toast.bad { background: #dc2626; }
#toastBox .toast { position: static; transform: translateY(16px); margin-top: 10px; display: block; }
#toastBox .toast.show { transform: none; }
#toastBox {
    position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; z-index: 400; pointer-events: none;
}

/* ================================================================
   课堂模式
   ================================================================ */
.net-banner {
    border-radius: var(--r); padding: 11px 18px; font-size: 13.5px; font-weight: 600;
    margin-bottom: 22px; border: 1px solid;
}
.net-banner.ok { background: var(--green-l); border-color: #c3ecd2; color: #14532d; }
.net-banner.bad { background: #fff7ed; border-color: #fddfb5; color: #7c2d12; }

.cls-role { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; }

.role-card {
    text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 30px; cursor: pointer; font-family: inherit; transition: .22s;
    box-shadow: var(--sh); position: relative; overflow: hidden;
}
.role-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: #a8dcec; }
.role-card.student:hover { border-color: #cbb4f7; }

.rc-icon {
    width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
    font-size: 22px; font-weight: 800; margin-bottom: 18px; color: #fff;
}
.role-card.teacher .rc-icon { background: linear-gradient(135deg, var(--cyan), var(--teal)); }
.role-card.student .rc-icon { background: linear-gradient(135deg, var(--purple), #a855f7); }

.rc-title { font-size: 1.25rem; font-weight: 800; margin-bottom: 12px; color: var(--ink); }
.rc-desc { font-size: 13.5px; color: var(--ink2); line-height: 1.95; margin-bottom: 18px; }
.rc-foot { font-size: 13.5px; font-weight: 700; color: var(--cyan-d); }
.role-card.student .rc-foot { color: var(--purple); }

.cls-role-tip {
    margin-top: 22px; background: var(--bg-soft); border: 1px dashed var(--line);
    border-radius: var(--r); padding: 15px 20px; font-size: 13.5px; color: var(--ink2); line-height: 1.85;
}

.cls-panel {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh); overflow: hidden;
}
.cls-panel.narrow { max-width: 640px; margin: 0 auto; }

.cls-panel-head {
    padding: 18px 26px; border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, #f5fbfd, #f3faf8);
}
.cls-panel-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; }
.back-link {
    background: none; border: none; color: var(--cyan-d); font-size: 13px;
    cursor: pointer; padding: 0 0 8px; font-family: inherit; display: block;
}
.back-link:hover { text-decoration: underline; }

.cls-form { padding: 26px; }
.cls-form .cf-row > label { font-size: 13px; }

.code-input {
    font-family: var(--mono); font-size: 22px !important; letter-spacing: 9px;
    text-align: center; font-weight: 700; color: var(--cyan-d);
}

.cls-preview {
    background: var(--cyan-l); border: 1px solid #cbe9f1; border-radius: 10px;
    padding: 12px 16px; font-size: 13.5px; color: #0b4a5c;
}
.cls-preview b { color: var(--cyan-d); }

.cls-hint { font-size: 12.5px; color: var(--muted); margin-top: 16px; line-height: 1.8; }

/* 教师仪表盘 */
.cls-board { display: flex; flex-direction: column; gap: 22px; }

.board-top { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }

.code-banner {
    flex: 1; min-width: 320px; display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
    background: linear-gradient(135deg, #eefafe, #eefaf6); border: 1px solid #cbe9f1;
    border-radius: var(--r-lg); padding: 18px 26px;
}
.cb-left { display: flex; flex-direction: column; }
.cb-label { font-size: 12px; color: var(--muted); letter-spacing: 1px; }
.cb-code {
    font-family: var(--mono); font-size: 2.6rem; font-weight: 800; letter-spacing: 8px;
    color: var(--cyan-d); line-height: 1.15;
}
.cb-right { flex: 1; min-width: 200px; }
.cb-tip { font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin-bottom: 8px; }
.cb-mode { font-size: 13px; color: var(--muted); }
.cb-mode b { color: var(--cyan-d); }

.board-head-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }

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

.sync-bar {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    background: linear-gradient(135deg, #faf5ff, #f5f3ff); border: 1px solid #e0d5fb;
    border-radius: var(--r-lg); padding: 16px 24px;
}
.sb-left { display: flex; align-items: baseline; gap: 12px; }
.sb-title { font-size: 13px; font-weight: 700; color: var(--purple); }
.sb-counter { font-size: 13px; color: var(--ink2); }
.sb-mid { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 220px; }
.sb-track { flex: 1; height: 7px; background: #eae1fb; border-radius: 100px; overflow: hidden; }
.sb-fill { height: 100%; background: linear-gradient(90deg, var(--purple), #a855f7); border-radius: 100px; transition: width .3s; }
.sb-timer { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--purple); min-width: 56px; text-align: right; }
.sb-right { display: flex; gap: 8px; }

.board-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bs-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 16px 18px; box-shadow: var(--sh); text-align: center;
}
.bs-num { font-size: 1.85rem; font-weight: 800; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.bs-num.cy { color: var(--cyan-d); }
.bs-num.gr { color: var(--green); }
.bs-num.or { color: var(--orange); }
.bs-label { font-size: 12px; color: var(--muted); margin-top: 7px; }

.board-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }

.board-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh); overflow: hidden;
}
.bc-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 15px 22px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fbfefe, #f7fbfd); flex-wrap: wrap;
}
.bc-head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.bc-sub { font-size: 11.5px; color: var(--muted); }
.bc-body { padding: 16px 22px; }
.bc-body.qa-body { max-height: 620px; overflow-y: auto; }

.bc-empty { text-align: center; color: var(--muted); font-size: 13.5px; padding: 36px 12px; }

.stu-row {
    display: grid; grid-template-columns: 100px 1fr 54px 62px 46px;
    gap: 11px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line);
}
.stu-row:last-child { border-bottom: none; }
.stu-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stu-bar { height: 8px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.stu-bar i { display: block; height: 100%; border-radius: 100px; transition: width .4s; }
.stu-bar i.cy { background: linear-gradient(90deg, var(--cyan), #22d3ee); }
.stu-bar i.gr { background: linear-gradient(90deg, var(--teal), #34d399); }
.stu-bar i.or { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stu-bar i.gy { background: #cbd5e1; }
.stu-prog { font-size: 12px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.stu-status { font-size: 11.5px; font-weight: 600; text-align: center; }
.stu-status.cy { color: var(--cyan-d); }
.stu-status.gr { color: var(--green); }
.stu-status.or { color: var(--orange); }
.stu-status.gy { color: var(--muted); }
.stu-score {
    font-size: 15px; font-weight: 800; text-align: right; color: var(--line);
    font-variant-numeric: tabular-nums;
}
.stu-score.show { color: var(--cyan-d); }

.rank-row {
    display: grid; grid-template-columns: 34px 1fr auto 52px; gap: 10px; align-items: center;
    padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px;
}
.rank-row:last-child { border-bottom: none; }
.rk-medal { font-size: 15px; text-align: center; font-weight: 700; color: var(--muted); }
.rank-row.r1 .rk-medal, .rank-row.r2 .rk-medal, .rank-row.r3 .rk-medal { font-size: 18px; }
.rk-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-detail { font-size: 11.5px; color: var(--muted); }
.rk-score { font-weight: 800; color: var(--cyan-d); text-align: right; font-variant-numeric: tabular-nums; }
.rank-row.r1 { background: linear-gradient(90deg, #fffbeb, transparent); }
.rank-row.r2 { background: linear-gradient(90deg, #f8fafc, transparent); }
.rank-row.r3 { background: linear-gradient(90deg, #fff7ed, transparent); }

.qa-item { padding: 14px 0; border-bottom: 1px dashed var(--line); }
.qa-item:last-child { border-bottom: none; }
.qa-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.qa-no { font-size: 12.5px; font-weight: 700; color: var(--cyan-d); }
.qa-tag { font-size: 11px; background: var(--cyan-l); color: var(--cyan-d); padding: 2px 9px; border-radius: 100px; }
.qa-stem { font-size: 12.5px; color: var(--ink2); flex: 1; min-width: 140px; }
.qa-rate { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.qa-rate.good { background: var(--green-l); color: #15803d; }
.qa-rate.mid { background: var(--orange-l); color: #c2410c; }
.qa-rate.bad { background: var(--red-l); color: #b91c1c; }
.qa-rate.na { background: var(--bg-soft); color: var(--muted); }
.qa-count { font-size: 11.5px; color: var(--muted); }

.qa-bars { display: flex; flex-direction: column; gap: 5px; }
.qa-bar-row { display: grid; grid-template-columns: 46px 1fr 34px; gap: 10px; align-items: center; }
.qa-letter { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.qa-letter.std { color: var(--green); }
.qa-bar { height: 9px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.qa-bar i { display: block; height: 100%; background: #cbd5e1; border-radius: 100px; transition: width .4s; }
.qa-bar i.std { background: linear-gradient(90deg, var(--teal), #34d399); }
.qa-num { font-size: 11.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.know-row {
    display: grid; grid-template-columns: 118px 1fr 108px 82px; gap: 14px;
    align-items: center; margin-bottom: 11px;
}
.know-name { font-size: 13px; font-weight: 600; color: var(--ink2); }
.know-bar { height: 9px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.know-bar i { display: block; height: 100%; border-radius: 100px; transition: width .8s; }
.know-bar i.good { background: linear-gradient(90deg, var(--teal), #34d399); }
.know-bar i.mid { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.know-bar i.bad { background: linear-gradient(90deg, #dc2626, #f87171); }
.know-val { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.know-advice { font-size: 11.5px; font-weight: 600; color: var(--cyan-d); text-align: right; }

/* 侧面板 */
.side-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: 460px; max-width: 94vw;
    background: #fff; box-shadow: -12px 0 40px -18px rgba(15, 23, 42, .35);
    transform: translateX(102%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 250; display: flex; flex-direction: column;
}
.side-panel.wide { width: 720px; }
.side-panel.show { transform: none; }

.sp-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.sp-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.sp-x {
    width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line);
    background: #fff; cursor: pointer; font-size: 17px; color: var(--muted); line-height: 1;
}
.sp-x:hover { background: var(--bg-soft); }

.sp-body { flex: 1; overflow-y: auto; padding: 22px 24px; }
.sp-desc { font-size: 13px; color: var(--ink2); line-height: 1.85; margin: 0 0 16px; }

.key-bulk { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.key-count { font-size: 12.5px; color: var(--orange); font-weight: 600; }

.key-list { display: flex; flex-direction: column; gap: 14px; }

.key-item {
    border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; background: #fff;
}
.key-item.changed { border-color: var(--orange); background: #fffbf6; }

.ki-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ki-no {
    width: 22px; height: 22px; border-radius: 6px; background: var(--cyan-l); color: var(--cyan-d);
    display: grid; place-items: center; font-size: 11.5px; font-weight: 700;
}
.ki-tag { font-size: 11px; color: var(--muted); }
.ki-badge {
    margin-left: auto; font-size: 10.5px; background: var(--orange-l); color: var(--orange);
    padding: 2px 8px; border-radius: 100px; font-weight: 700;
}
.ki-stem { font-size: 12.5px; color: var(--ink2); line-height: 1.7; margin-bottom: 10px; }

.ki-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ki-opt {
    text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line);
    background: #fff; font-size: 11.5px; color: var(--ink2); cursor: pointer;
    font-family: inherit; transition: .14s; line-height: 1.5;
}
.ki-opt b { color: var(--muted); margin-right: 4px; }
.ki-opt:hover { border-color: #a8dcec; }
.ki-opt.on { background: var(--cyan-l); border-color: var(--cyan); color: var(--cyan-d); font-weight: 600; }
.ki-opt.on b { color: var(--cyan-d); }

.ki-default { font-size: 11.5px; color: var(--muted); }
.ki-default b { color: var(--ink2); }

.sp-foot { padding: 16px 24px; border-top: 1px solid var(--line); background: #fbfdfe; }

/* 投影层 */
.proj-layer {
    position: fixed; inset: 0; background: rgba(255, 255, 255, .98); z-index: 350;
    display: none; place-items: center; padding: 5vh 5vw; overflow-y: auto;
}
.proj-layer.show { display: grid; }
.proj-x {
    position: fixed; top: 20px; right: 26px; width: 40px; height: 40px; border-radius: 12px;
    border: 1px solid var(--line); background: #fff; font-size: 21px; cursor: pointer;
    color: var(--muted); line-height: 1;
}
.proj-inner { max-width: 1080px; width: 100%; }
.proj-no { font-size: 15px; color: var(--cyan-d); font-weight: 700; margin-bottom: 20px; letter-spacing: .5px; }
.proj-stem { font-size: 2.1rem; line-height: 1.7; font-weight: 700; color: var(--ink); margin-bottom: 34px; }
.proj-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.proj-opt {
    display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px;
    border: 2px solid var(--line); border-radius: var(--r-lg); font-size: 1.35rem; color: var(--ink2);
    line-height: 1.6; background: #fff;
}
.proj-opt b {
    width: 34px; height: 34px; border-radius: 10px; background: var(--cyan-l); color: var(--cyan-d);
    display: grid; place-items: center; font-size: 1.05rem; flex-shrink: 0;
}
.proj-tip { margin-top: 30px; font-size: 14px; color: var(--muted); text-align: center; }

/* 历史记录 */
.hist-list-box { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.hist-card {
    display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
    border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px; background: #fff;
}
.hc-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.hc-meta { font-size: 12px; color: var(--ink2); }
.hc-meta b { color: var(--cyan-d); font-family: var(--mono); }
.hc-time { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.hc-stat { display: flex; gap: 16px; text-align: center; }
.hc-stat > div { display: flex; flex-direction: column; align-items: center; }
.hc-stat b { font-size: 1.25rem; font-weight: 800; color: var(--cyan-d); line-height: 1; }
.hc-stat span { font-size: 11px; color: var(--muted); margin-top: 3px; }
.hc-actions { display: flex; flex-direction: column; gap: 6px; }

.hist-detail { border-top: 1px solid var(--line); padding-top: 18px; }
.hist-detail h4 { margin: 0 0 6px; font-size: 15px; }
.hd-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.hd-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* 学生等待 */
.student-wait {
    padding: 48px 32px; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.student-wait h3 { margin: 12px 0 0; font-size: 1.2rem; font-weight: 700; }
.wait-anim { display: flex; gap: 9px; }
.wait-anim span {
    width: 12px; height: 12px; border-radius: 50%; background: var(--cyan);
    animation: bounce 1.2s infinite ease-in-out;
}
.wait-anim span:nth-child(2) { animation-delay: .15s; background: var(--teal); }
.wait-anim span:nth-child(3) { animation-delay: .3s; background: var(--purple); }
@keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-12px); opacity: 1; } }
.wait-tips {
    display: flex; flex-direction: column; gap: 8px; margin: 22px 0;
    font-size: 13.5px; color: var(--ink2);
}

/* 学生答题 */
.sq-wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.sq-top {
    display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 15px 22px; box-shadow: var(--sh);
}
.sq-left { display: flex; flex-direction: column; gap: 3px; }
.sq-badge {
    font-size: 11px; font-weight: 700; color: var(--purple); background: var(--purple-l);
    padding: 3px 10px; border-radius: 100px; text-align: center;
}
.sq-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.sq-mid { display: flex; flex-direction: column; gap: 6px; }
.sq-progress { font-size: 12.5px; color: var(--muted); }
.sq-track { height: 6px; background: var(--line2); border-radius: 100px; overflow: hidden; }
.sq-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--teal)); border-radius: 100px; transition: width .3s; }
.sq-timer {
    font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--cyan-d);
    min-width: 74px; text-align: right;
}
.sq-timer.urgent { color: var(--red); animation: pulse .8s infinite; }
.sq-timer.free { font-family: var(--sans); font-size: 13px; color: var(--muted); font-weight: 500; }
@keyframes pulse { 50% { opacity: .4; } }

.sq-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--sh); }
.sq-head { display: flex; gap: 10px; margin-bottom: 16px; }
.sq-stem { font-size: 17px; line-height: 1.95; color: var(--ink); margin-bottom: 22px; }

.sq-options { display: flex; flex-direction: column; gap: 11px; }
.sq-opt {
    display: flex; align-items: flex-start; gap: 14px; text-align: left;
    padding: 15px 19px; border: 1.5px solid var(--line); border-radius: var(--r);
    background: #fff; cursor: pointer; font-family: inherit; font-size: 15px;
    color: var(--ink2); transition: .16s; line-height: 1.75;
}
.sq-opt:hover:not(:disabled) { border-color: #a8dcec; background: #fbfeff; }
.sq-opt.on { border-color: var(--cyan); background: var(--cyan-l); color: var(--cyan-d); font-weight: 600; }
.sq-opt:disabled { cursor: not-allowed; opacity: .75; }
.sq-letter {
    width: 28px; height: 28px; border-radius: 9px; background: var(--bg-soft);
    display: grid; place-items: center; font-weight: 700; font-size: 13.5px;
    flex-shrink: 0; color: var(--muted);
}
.sq-opt.on .sq-letter { background: var(--cyan-d); color: #fff; }

.sq-lock-tip { margin-top: 16px; font-size: 13px; color: var(--orange); font-weight: 600; }

.sq-foot { display: flex; gap: 12px; justify-content: center; }
.sq-sync-hint { text-align: center; font-size: 12.5px; color: var(--muted); }

/* 学生结果 */
.sq-result { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.sr-card {
    display: grid; grid-template-columns: 200px 1fr; gap: 32px; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 28px 32px; box-shadow: var(--sh);
}
.sr-top3 {
    font-size: 13px; color: var(--ink2); background: var(--bg-soft);
    border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; line-height: 1.8;
}
.sr-top3 b { color: var(--cyan-d); }

/* 课堂使用说明 */
.cls-usage { margin-top: 40px; }
.cu-title { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: var(--ink); }
.cu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cu-item {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 18px 20px; box-shadow: var(--sh);
}
.cu-item b { display: block; font-size: 14px; color: var(--cyan-d); margin-bottom: 8px; }
.cu-item p { margin: 0; font-size: 13px; color: var(--ink2); line-height: 1.85; }

/* ---------------- 页脚 ---------------- */
.footer {
    background: #0f172a; color: #cbd5e1; padding: 56px 24px 26px;
}
.foot-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; }
/* 后台端页脚仍是三列（说明 / 课堂 / 切换） */
.page-teacher .foot-inner { grid-template-columns: 1.6fr repeat(2, 1fr); }
.foot-brand { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.foot-desc { font-size: 12.5px; line-height: 1.9; color: #94a3b8; margin: 0; }
.foot-col h4 { font-size: 13px; color: #fff; margin: 0 0 14px; font-weight: 700; }
.foot-col a {
    display: block; font-size: 12.5px; color: #94a3b8; padding: 4px 0; text-decoration: none;
}
.foot-col a:hover { color: #67e8f9; }
.foot-bottom {
    max-width: 1240px; margin: 40px auto 0; padding-top: 22px;
    border-top: 1px solid #1e293b; display: flex; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; font-size: 12px; color: #64748b;
}
.foot-kv { font-family: var(--serif); font-style: italic; }

/* ---------------- 返回顶部 ---------------- */
.back-to-top {
    position: fixed; right: 26px; bottom: 26px; width: 44px; height: 44px;
    border-radius: 14px; border: 1px solid var(--line); background: #fff;
    color: var(--cyan-d); font-size: 19px; cursor: pointer; z-index: 90;
    box-shadow: var(--sh); opacity: 0; pointer-events: none; transition: .25s;
}
.back-to-top.show { opacity: 1; pointer-events: auto; }
.back-to-top:hover { background: var(--cyan-l); transform: translateY(-2px); }

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 1120px) {
    .board-stats { grid-template-columns: repeat(3, 1fr); }
    .calc-grid { grid-template-columns: 330px 1fr; }
    .osmo-layout, .ai-layout { grid-template-columns: 1fr; }
    .prac-setup { grid-template-columns: 1fr 1fr; }
    .prac-side { grid-column: 1 / -1; flex-direction: row; }
    .prac-side .prac-card { flex: 1; }
    .foot-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav {
        position: absolute; top: 64px; left: 0; right: 0;
        background: #fff; border-bottom: 1px solid var(--line);
        display: none; padding: 12px 24px 18px;
    }
    .nav ul#navList { flex-direction: column; gap: 2px; }
    #navList.open, .nav:has(#navList.open) { display: block; }
    .nav-link { padding: 11px 14px; }

    .content-wrap { grid-template-columns: 1fr; gap: 20px; }
    .content-nav {
        position: static; flex-direction: row; overflow-x: auto; gap: 8px;
        padding-bottom: 10px; border-bottom: 1px solid var(--line);
    }
    .cn-item { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
    .cn-item.active { border-left: none; border-bottom-color: var(--cyan); box-shadow: none; }

    .calc-grid, .prac-setup, .board-grid { grid-template-columns: 1fr; }
    .pr-head, .sr-card { grid-template-columns: 1fr; text-align: center; justify-items: center; }
    .pr-stats, .sr-stats { justify-content: center; }
    .pr-actions, .sr-actions { justify-content: center; }
    .pr-tag-row, .know-row { grid-template-columns: 96px 1fr 92px; }
    .know-advice { display: none; }
    .prac-run-body { grid-template-columns: 1fr; }
    .prac-aside { position: static; }
    .pa-grid { grid-template-columns: repeat(8, 1fr); }
    .proj-opts { grid-template-columns: 1fr; }
    .proj-stem { font-size: 1.5rem; }
    .side-panel, .side-panel.wide { width: 100%; }
    .foot-inner { grid-template-columns: 1fr; gap: 26px; }
    .hero-title { font-size: 2.4rem; }
    .sync-bar { flex-direction: column; align-items: stretch; }
    .stu-row { grid-template-columns: 86px 1fr 46px; }
    .stu-status, .stu-score { display: none; }
    .code-banner { flex-direction: column; gap: 12px; }
    .board-head-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 560px) {
    body { font-size: 15px; }
    .sec { padding: 52px 18px; }
    .hero { padding: 56px 18px 34px; }
    .hero-title { font-size: 1.95rem; }
    .hero-stats { gap: 24px; }
    .hs-num { font-size: 1.6rem; }
    .board-stats { grid-template-columns: repeat(2, 1fr); }
    .pa-grid { grid-template-columns: repeat(6, 1fr); }
    .cf-grid2 { grid-template-columns: 1fr; }
    .ki-opts { grid-template-columns: 1fr; }
    .pr-tag-row, .know-row { grid-template-columns: 1fr; gap: 6px; }
    .pr-tag-val, .know-val { text-align: left; }
    .hero-outline { display: none; }
    .ho-arrow { display: none; }
    .sec-title { font-size: 1.35rem; }
}

/* ================================================================
   第二部：多页面 / 动画 / 教师端学情分析 / 学生报告
   （学生端、教师端共用本文件）
   ================================================================ */

/* ---------------- 动画关键帧 ---------------- */
@keyframes ch-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ch-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ch-slide-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ch-pop { 0% { opacity: 0; transform: scale(.9); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ch-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .82; } }
@keyframes ch-flash { 0% { background: #fef3c7; } 100% { background: transparent; } }
@keyframes ch-ring { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes ch-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes ch-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ch-spin { to { transform: rotate(360deg); } }
@keyframes ch-drop { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
                    100% { transform: translate(var(--dx, 0), 150px) rotate(320deg); opacity: 0; } }
@keyframes ch-bar-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.rv { opacity: 0; }
.rv.rv-in { animation: ch-fade-up .58s cubic-bezier(.22, .9, .28, 1) both; }
.pane-in { animation: ch-fade-up .34s ease-out both; }
.slide-in { animation: ch-slide-in .42s cubic-bezier(.22, .9, .28, 1) both; }
.pulse { animation: ch-pulse .42s ease-out; }
.flash { animation: ch-flash .9s ease-out; }

@media (prefers-reduced-motion: reduce) {
    .rv, .rv.rv-in, .pane-in, .slide-in, .pulse, .flash { animation: none !important; opacity: 1 !important; }
    html { scroll-behavior: auto; }
}

/* ---------------- 身份条（学生端） ---------------- */
.idbar {
    position: sticky; top: 62px; z-index: 38;
    background: linear-gradient(180deg, #f0fbfd, #eaf7fb);
    border-bottom: 1px solid #d5edf4;
}
.idbar-inner {
    max-width: 1220px; margin: 0 auto; padding: 9px 24px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.idb-state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.idb-state.ok { color: var(--cyan-d); }
.idb-dot { width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; flex: none; }
.idb-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
.idb-form { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.idb-form input {
    padding: 7px 11px; border: 1px solid var(--line); border-radius: 8px;
    font-size: 13px; font-family: inherit; width: 128px; background: #fff;
}
.idb-form input:disabled { background: #f1f5f9; color: var(--muted); }
.idb-form input:focus { outline: 2px solid rgba(8, 145, 178, .25); border-color: var(--cyan); }
.idb-sync {
    font-size: 12px; color: var(--green); opacity: 0; transition: opacity .3s;
    display: flex; align-items: center; gap: 4px;
}
.idb-sync.on { opacity: 1; }
.idb-sync.on::before { content: '✓'; font-weight: 700; }

/* ---------------- 角色徽标 ---------------- */
.role-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
    letter-spacing: .04em; flex: none;
}
.role-chip.teacher { background: var(--purple-l); color: var(--purple); border: 1px solid #d8caff; }

/* ---------------- 入口门户 ---------------- */
.page-portal { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.portal-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.portal-bg::before {
    content: ''; position: absolute; inset: 0;
    background:
        radial-gradient(900px 460px at 12% -6%, rgba(8, 145, 178, .10), transparent 62%),
        radial-gradient(760px 420px at 88% 6%, rgba(124, 58, 237, .09), transparent 62%),
        radial-gradient(680px 420px at 50% 106%, rgba(13, 148, 136, .08), transparent 62%);
}
.pb-formula {
    position: absolute; font-family: var(--serif); font-style: italic;
    color: rgba(8, 145, 178, .13); font-size: 26px; white-space: nowrap;
    animation: ch-float 9s ease-in-out infinite;
}
.pb-formula.f1 { top: 13%; left: 5%; animation-delay: 0s; }
.pb-formula.f2 { top: 24%; right: 7%; animation-delay: 1.3s; color: rgba(124, 58, 237, .12); font-size: 23px; }
.pb-formula.f3 { bottom: 22%; left: 10%; animation-delay: 2.4s; color: rgba(13, 148, 136, .13); font-size: 24px; }
.pb-formula.f4 { bottom: 13%; right: 12%; animation-delay: 3.2s; font-size: 22px; }
.pb-formula.f5 { top: 46%; left: 47%; animation-delay: 4.1s; color: rgba(234, 88, 12, .11); font-size: 21px; }
.pb-blob { position: absolute; border-radius: 50%; filter: blur(58px); opacity: .42; }
.pb-blob.b1 { width: 340px; height: 340px; background: #bae6fd; top: -110px; left: -70px; animation: ch-float 13s ease-in-out infinite; }
.pb-blob.b2 { width: 280px; height: 280px; background: #ddd6fe; bottom: -90px; right: -60px; animation: ch-float 15s ease-in-out infinite reverse; }
.pb-blob.b3 { width: 220px; height: 220px; background: #99f6e4; top: 52%; left: 58%; animation: ch-float 18s ease-in-out infinite; }

.portal {
    position: relative; z-index: 1; flex: 1;
    max-width: 1080px; width: 100%; margin: 0 auto;
    padding: 66px 24px 30px;
}
.portal-head { text-align: center; opacity: 0; animation: ch-fade-up .6s ease-out .05s both; }
.portal-head.in { opacity: 1; }
.portal-chapter {
    display: inline-block; padding: 5px 15px; border-radius: 999px;
    background: rgba(8, 145, 178, .1); color: var(--cyan-d);
    font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
}
.portal-title {
    font-size: clamp(2.1rem, 5.4vw, 3.05rem); margin: 18px 0 6px;
    letter-spacing: .02em; font-weight: 800; color: var(--ink);
}
.portal-sub {
    font-family: var(--serif); font-style: italic; color: var(--muted);
    font-size: 1.02rem; letter-spacing: .04em;
}
.portal-intro {
    max-width: 660px; margin: 20px auto 0; color: var(--ink2);
    font-size: 15px; line-height: 1.95;
}

.portal-cards {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    margin: 44px 0 0;
}
.portal-card {
    position: relative; display: block; overflow: hidden;
    padding: 30px 28px 24px; border-radius: 20px;
    background: #fff; border: 1px solid var(--line);
    box-shadow: var(--sh); color: inherit;
    opacity: 0; animation: ch-fade-up .62s cubic-bezier(.22, .9, .28, 1) both;
    transition: transform .32s cubic-bezier(.22, .9, .28, 1), box-shadow .32s, border-color .32s;
    text-decoration: none !important;
}
.portal-card:hover { transform: translateY(-7px); box-shadow: var(--sh-lg); }
.portal-card.student:hover { border-color: #a5e3ef; }
.portal-card.teacher:hover { border-color: #d5c7ff; }
.pc-glow {
    position: absolute; inset: -40% -10% auto; height: 210px;
    opacity: 0; transition: opacity .38s; pointer-events: none;
}
.portal-card.student .pc-glow { background: radial-gradient(closest-side, rgba(8, 145, 178, .18), transparent); }
.portal-card.teacher .pc-glow { background: radial-gradient(closest-side, rgba(124, 58, 237, .17), transparent); }
.portal-card:hover .pc-glow { opacity: 1; }
.pc-icon {
    position: relative; width: 54px; height: 54px; border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 17px;
}
.portal-card.student .pc-icon { background: linear-gradient(135deg, #06b6d4, #0e7490); }
.portal-card.teacher .pc-icon { background: linear-gradient(135deg, #a78bfa, #6d28d9); }
.pc-head { display: flex; align-items: baseline; gap: 10px; position: relative; }
.pc-head h2 { margin: 0; font-size: 1.42rem; font-weight: 800; }
.pc-en { font-family: var(--serif); font-style: italic; font-size: 12px; color: var(--muted); letter-spacing: .12em; }
.pc-list { list-style: none; margin: 16px 0 20px; padding: 0; position: relative; }
.pc-list li {
    position: relative; padding: 5px 0 5px 19px; font-size: 13.8px; color: var(--ink2);
}
.pc-list li::before {
    content: ''; position: absolute; left: 3px; top: 14px;
    width: 5px; height: 5px; border-radius: 50%; background: var(--cyan);
}
.portal-card.teacher .pc-list li::before { background: var(--purple); }
.pc-foot {
    display: flex; align-items: center; justify-content: space-between; position: relative;
    padding-top: 15px; border-top: 1px dashed var(--line);
    font-weight: 700; font-size: 14px;
}
.portal-card.student .pc-foot { color: var(--cyan-d); }
.portal-card.teacher .pc-foot { color: var(--purple); }
.pc-arrow { transition: transform .3s; }
.portal-card:hover .pc-arrow { transform: translateX(6px); }

.portal-meta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 40px 0 0; flex-wrap: wrap;
}
.pm-item {
    text-align: center; padding: 0 20px;
    opacity: 0; animation: ch-fade-up .5s ease-out both;
}
.pm-item b { display: block; font-size: 1.55rem; font-weight: 800; color: var(--cyan-d); line-height: 1.2; }
.pm-item span { font-size: 12px; color: var(--muted); }
.pm-sep { width: 1px; height: 26px; background: var(--line); }
.portal-note {
    margin: 36px auto 0; max-width: 800px; padding: 16px 20px;
    background: rgba(255, 255, 255, .78); border: 1px solid var(--line);
    border-left: 3px solid var(--cyan); border-radius: 10px;
    font-size: 13.5px; color: var(--ink2); line-height: 1.9;
    backdrop-filter: blur(6px); animation: ch-fade-in .7s ease-out .5s both;
}
.portal-foot {
    position: relative; z-index: 1; display: flex; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; max-width: 1080px; width: 100%;
    margin: 0 auto; padding: 20px 24px 26px;
    font-size: 12px; color: var(--muted); border-top: 1px solid var(--line);
}

/* ---------------- 教师端 KPI 条 ---------------- */
.kpi-strip {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
    margin: 34px 0 24px;
}
.kpi {
    background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
    border-radius: var(--r); padding: 15px 14px; text-align: center;
    box-shadow: var(--sh); transition: transform .26s, box-shadow .26s, border-color .26s;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: #cfe9f2; }
.kpi-num { font-size: 1.62rem; font-weight: 800; color: var(--cyan-d); line-height: 1.15; }
.kpi-num.live { color: var(--green); }
.kpi-label {
    font-size: 11.8px; color: var(--muted); margin-top: 4px;
    display: flex; align-items: center; justify-content: center; gap: 5px;
}
.hero-note {
    margin-top: 16px; font-size: 12.5px; color: var(--muted);
    display: flex; align-items: center; gap: 7px;
}
.live-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .5);
    animation: ch-ring 1.8s ease-out infinite; flex: none; position: relative;
}
.live-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: var(--green); animation: ch-ring 1.8s ease-out infinite;
}
.live-pill {
    display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
    padding: 3px 11px; border-radius: 999px; background: var(--green-l);
    color: #15803d; font-size: 12px; font-weight: 700;
}
.live-pill.off { background: #f1f5f9; color: var(--muted); }
.live-pill.off .live-dot, .live-pill.off .live-dot::after { animation: none; background: #94a3b8; }

/* ---------------- 工具条 ---------------- */
.toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin: 22px 0 16px;
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.seg {
    display: inline-flex; background: #f1f5f9; border-radius: 9px; padding: 3px; gap: 2px;
}
.seg-btn {
    border: 0; background: transparent; font-family: inherit; font-size: 12.8px;
    padding: 6px 13px; border-radius: 7px; cursor: pointer; color: var(--muted);
    transition: background .2s, color .2s, box-shadow .2s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: #fff; color: var(--cyan-d); font-weight: 700; box-shadow: 0 1px 4px rgba(15, 23, 42, .1); }
.search {
    padding: 8px 13px; border: 1px solid var(--line); border-radius: 9px;
    font-family: inherit; font-size: 13px; width: 190px; background: #fff;
}
.search:focus { outline: 2px solid rgba(8, 145, 178, .22); border-color: var(--cyan); }
.btn-sm { padding: 7px 14px; font-size: 12.8px; }
.btn-danger { background: var(--red-l); color: var(--red); border: 1px solid #f6c9cc; }
.btn-danger:hover { background: #fbd5d7; }
.switch { display: inline-flex; align-items: center; gap: 7px; font-size: 12.8px; color: var(--ink2); cursor: pointer; }
.switch input { accent-color: var(--cyan); }
.btn-ghost.active { background: var(--cyan-l); color: var(--cyan-d); border-color: #b6e6f0; }

/* ---------------- 学情分析 ---------------- */
.ana-kpis {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 20px;
}
.ana-kpi {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 15px; text-align: center; box-shadow: var(--sh);
}
.ana-kpi b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--cyan-d); line-height: 1.2; }
.ana-kpi span { font-size: 11.8px; color: var(--muted); }
.ana-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.ana-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 20px 22px; box-shadow: var(--sh); margin-bottom: 18px;
}
.ana-grid .ana-card { margin-bottom: 0; }
.ac-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.ac-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.ac-sub { font-size: 12px; color: var(--muted); }
.ac-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 12px; color: var(--muted); }
.ana-empty {
    text-align: center; padding: 46px 26px; background: #fff;
    border: 1px dashed var(--line); border-radius: var(--r-lg); color: var(--ink2);
}
.ae-icon { font-size: 34px; margin-bottom: 10px; }
.ana-empty h3 { margin: 0 0 8px; font-size: 1.06rem; color: var(--ink); }
.ana-empty p { margin: 0 auto; max-width: 520px; font-size: 13.6px; line-height: 1.9; }
.card-empty { padding: 24px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.chart-empty { padding: 34px; text-align: center; color: var(--muted); font-size: 13px; }

/* 条形图 */
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 138px 1fr 88px; gap: 11px; align-items: center; }
.bar-label {
    font-size: 12.6px; color: var(--ink2); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { height: 9px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.bar-fill {
    display: block; height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--bar-c, var(--cyan)), color-mix(in srgb, var(--bar-c, var(--cyan)) 62%, #fff));
}
.bar-val { font-size: 12.4px; color: var(--ink2); text-align: right; white-space: nowrap; }
.bar-val b { font-weight: 700; }
.bar-val span { color: var(--muted); font-size: 11.6px; }

/* 柱状图 */
.cols { display: flex; align-items: flex-end; gap: 10px; height: 176px; padding-top: 8px; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.col-top { font-size: 12.6px; font-weight: 700; color: var(--ink2); height: 20px; }
.col-track {
    flex: 1; width: 100%; max-width: 46px; display: flex; align-items: flex-end;
    background: #f8fafc; border-radius: 7px 7px 3px 3px; overflow: hidden;
}
.col-fill {
    display: block; width: 100%; height: 0; border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, var(--bar-c, var(--cyan)), color-mix(in srgb, var(--bar-c, var(--cyan)) 70%, #fff));
}
.col-label { font-size: 11.4px; color: var(--muted); margin-top: 7px; text-align: center; }

/* 折线图 */
.line-chart { width: 100%; height: 168px; display: block; }

/* 热力格 */
.heat { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 11px; }
.heat-cell {
    border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px;
    background: #fff; border-left: 3px solid var(--hc, var(--cyan));
    transition: transform .24s, box-shadow .24s;
}
.heat-cell:hover { transform: translateY(-2px); box-shadow: var(--sh); }
.hc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hc-tag { font-size: 12.8px; font-weight: 700; color: var(--ink); }
.hc-pct { font-size: 14.6px; font-weight: 800; color: var(--hc, var(--cyan)); }
.hc-bar { height: 5px; background: #f1f5f9; border-radius: 999px; margin: 8px 0 7px; overflow: hidden; }
.hc-fill { display: block; height: 100%; width: 0; background: var(--hc, var(--cyan)); border-radius: 999px; }
.hc-meta { font-size: 11.6px; color: var(--muted); }

/* 进度环 */
.ring-wrap { position: relative; width: var(--ring-size, 96px); height: var(--ring-size, 96px); }
.ring { display: block; }
.ring-mid {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1px;
}
.ring-num { font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1; }
.ring-label { font-size: 10.5px; color: var(--muted); }

/* 错题排行 */
.wrong-top { list-style: none; margin: 0; padding: 0; }
.wrong-top li {
    display: grid; grid-template-columns: 62px 92px 1fr auto; gap: 10px;
    align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line2);
    font-size: 12.8px;
}
.wrong-top li:last-child { border-bottom: 0; }
.wt-qid { font-family: var(--mono); font-size: 11.6px; color: var(--purple); font-weight: 700; }
.wt-tag {
    font-size: 11.4px; color: var(--cyan-d); background: var(--cyan-l);
    padding: 2px 8px; border-radius: 999px; text-align: center;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-stem { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-num { font-size: 11.8px; color: var(--red); font-weight: 700; white-space: nowrap; }

/* ---------------- 学生台账表格 ---------------- */
.tbl-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh); overflow: hidden;
}
.tbl-scroll { overflow-x: auto; }
.roster-tbl, .rank-tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 900px; }
.roster-tbl th, .rank-tbl th {
    background: #f8fafc; color: var(--muted); font-weight: 700; font-size: 11.9px;
    text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line);
    white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
.roster-tbl td, .rank-tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.roster-tbl .num, .rank-tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.roster-tbl tbody tr, .rank-tbl tbody tr { transition: background .18s; }
.roster-tbl tbody tr { cursor: pointer; }
.roster-tbl tbody tr:hover, .rank-tbl tbody tr:hover { background: #f6fbfd; }
.roster-tbl tbody tr {
    animation: ch-fade-up .4s ease-out both; animation-delay: var(--rt-delay, 0ms);
}
.rt-name { display: flex; align-items: center; gap: 9px; min-width: 150px; }
.rt-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: linear-gradient(135deg, #67e8f9, #0e7490); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}
.rt-who { display: flex; flex-direction: column; line-height: 1.35; }
.rt-who b { font-size: 13.2px; }
.rt-who em { font-style: normal; font-size: 11.4px; color: var(--muted); font-family: var(--mono); }
.rt-acc { min-width: 128px; }
.acc-pill {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.acc-pill.good { background: var(--green-l); color: #15803d; }
.acc-pill.mid { background: var(--orange-l); color: #c2410c; }
.acc-pill.bad { background: var(--red-l); color: var(--red); }
.acc-pill.none { background: #f1f5f9; color: var(--muted); }
.acc-bar { display: block; height: 4px; background: #f1f5f9; border-radius: 999px; margin-top: 5px; overflow: hidden; }
.acc-bar b { display: block; height: 100%; background: var(--cyan); border-radius: 999px; transition: width .8s cubic-bezier(.22, .9, .28, 1); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 999px; font-size: 11.8px; font-weight: 700; }
.pill.on { background: var(--green-l); color: #15803d; }
.pill.off { background: #f1f5f9; color: var(--muted); }
.rt-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.row-open {
    border: 0; background: transparent; color: var(--cyan-d); font-family: inherit;
    font-size: 12.4px; cursor: pointer; font-weight: 700; white-space: nowrap; padding: 4px 6px; border-radius: 6px;
}
.row-open:hover { background: var(--cyan-l); }
.tbl-foot { padding: 11px 14px; font-size: 12px; color: var(--muted); background: #fbfdfe; border-top: 1px solid var(--line2); }
.rk-no { font-style: normal; font-size: 11.4px; color: var(--muted); font-family: var(--mono); }
.rk-idx { font-weight: 800; color: var(--muted); }
.rk-idx.top1, .rk-idx.top2, .rk-idx.top3 { font-size: 15px; }
.rank-tbl { min-width: 760px; }

/* ---------------- 活动流水 ---------------- */
.feed-list { list-style: none; margin: 0; padding: 0; max-height: 560px; overflow-y: auto; }
.feed-item {
    display: grid; grid-template-columns: 96px 24px 148px 1fr; gap: 10px;
    align-items: center; padding: 9px 13px; border-radius: 9px;
    font-size: 12.9px; border-bottom: 1px dashed var(--line2);
    transition: background .2s;
}
.feed-item:hover { background: #f6fbfd; }
.feed-item.is-new { background: linear-gradient(90deg, rgba(8, 145, 178, .1), transparent); }
.fi-time { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fi-icon { text-align: center; font-size: 14px; }
.fi-who { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-who b { font-size: 12.9px; }
.fi-who em { font-style: normal; font-size: 11.2px; color: var(--muted); margin-left: 5px; font-family: var(--mono); }
.fi-who:hover b { color: var(--cyan-d); text-decoration: underline; }
.fi-text { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-text.neg { color: var(--red); }
.feed-item.cat-practice { border-left: 3px solid var(--cyan); }
.feed-item.cat-class { border-left: 3px solid var(--purple); }
.feed-item.cat-content { border-left: 3px solid var(--teal); }
.feed-item.cat-tool { border-left: 3px solid var(--orange); }
.feed-empty { text-align: center; padding: 52px 24px; background: #fff; border: 1px dashed var(--line); border-radius: var(--r-lg); position: relative; }
.feed-empty h3 { margin: 16px 0 8px; font-size: 1.03rem; }
.feed-empty p { margin: 0 auto; max-width: 480px; font-size: 13.4px; color: var(--ink2); }
.pulse-ring {
    display: inline-block; width: 32px; height: 32px; border-radius: 50%;
    border: 2px solid var(--cyan); position: relative;
}
.pulse-ring::after {
    content: ''; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--cyan); animation: ch-ring 1.9s ease-out infinite;
}

/* ---------------- 详情抽屉 ---------------- */
.drawer-mask {
    position: fixed; inset: 0; z-index: 200; background: rgba(15, 23, 42, .34);
    opacity: 0; transition: opacity .26s; display: flex; justify-content: flex-end;
}
.drawer-mask.open { opacity: 1; }
.drawer {
    width: min(560px, 96vw); height: 100%; background: #fff;
    box-shadow: -14px 0 44px rgba(15, 23, 42, .18);
    transform: translateX(28px); transition: transform .3s cubic-bezier(.22, .9, .28, 1);
    display: flex; flex-direction: column;
}
.drawer-mask.open .drawer { transform: none; }
.drawer-body { padding: 22px 24px 40px; overflow-y: auto; }
.drawer-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px;
}
.dr-who { display: flex; align-items: center; gap: 13px; }
.dr-avatar {
    width: 46px; height: 46px; border-radius: 13px; flex: none;
    background: linear-gradient(135deg, #67e8f9, #0e7490); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800;
}
.dr-who h3 { margin: 0 0 3px; font-size: 1.16rem; }
.dr-sub { font-size: 12.4px; color: var(--muted); }
.drawer-close {
    border: 0; background: #f1f5f9; width: 32px; height: 32px; border-radius: 9px;
    cursor: pointer; font-size: 15px; color: var(--muted); flex: none;
}
.drawer-close:hover { background: #e2e8f0; color: var(--ink); }
.drawer-tools { display: flex; justify-content: flex-end; margin: 0 0 16px; }
.drawer-tools .btn-sm { color: var(--red); border-color: #fecaca; }
.drawer-tools .btn-sm:hover { background: #fef2f2; }
/* 教师端口令闸门：读不到数据时给出输入框，而不是一片空白 */
.pwd-gate {
    max-width: 460px; margin: 24px auto; padding: 30px 28px; text-align: center;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh);
}
.pwd-gate h3 { margin: 0 0 10px; font-size: 1.1rem; color: var(--ink); }
.pwd-gate p { margin: 0 0 20px; font-size: .88rem; color: var(--muted); line-height: 1.7; }
.pwd-gate code {
    background: var(--bg-soft); padding: 1px 6px; border-radius: 5px;
    font-family: var(--mono); font-size: .84em; color: var(--cyan-d);
}
.pwd-row { display: flex; gap: 9px; }
.pwd-row input {
    flex: 1; min-width: 0; padding: 10px 13px; font-size: .92rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
    color: var(--ink); font-family: inherit;
}
.pwd-row input:focus { outline: 0; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-l); }
.pwd-err { min-height: 18px; margin-top: 12px; font-size: .84rem; color: var(--red); }
.drawer-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 20px; }
.dk { background: #f8fafc; border-radius: 10px; padding: 11px; text-align: center; }
.dk b { display: block; font-size: 1.14rem; font-weight: 800; color: var(--cyan-d); line-height: 1.2; }
.dk span { font-size: 11.2px; color: var(--muted); }
.drawer-sec { margin-bottom: 22px; }
.drawer-sec h4 {
    margin: 0 0 11px; font-size: .95rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.drawer-sub { font-size: 11.8px; color: var(--muted); margin-top: 8px; }
.drawer-err { padding: 40px; text-align: center; color: var(--ink2); }
.dh-list, .dc-list { list-style: none; margin: 0; padding: 0; }
.dh-item, .dc-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 0; border-bottom: 1px dashed var(--line2); font-size: 12.6px;
}
.dh-left { display: flex; align-items: center; gap: 10px; }
.dh-left b { font-size: 15px; font-weight: 800; min-width: 34px; }
.dh-left b.good { color: var(--green); }
.dh-left b.mid { color: var(--orange); }
.dh-left b.bad { color: var(--red); }
.dh-left em { font-style: normal; color: var(--muted); font-size: 12px; }
.dh-right, .dc-time { font-size: 11.6px; color: var(--muted); white-space: nowrap; }
.dc-code { font-family: var(--mono); font-size: 11.8px; color: var(--purple); font-weight: 700; }
.dc-title { flex: 1; color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-score { font-weight: 700; color: var(--cyan-d); }
.dw-list { list-style: none; margin: 0; padding: 0; }
.dw-item {
    display: grid; grid-template-columns: 86px 1fr auto; gap: 9px; align-items: center;
    padding: 7px 0; border-bottom: 1px dashed var(--line2); font-size: 12.4px;
}
.dw-tag { font-size: 11.2px; color: var(--cyan-d); background: var(--cyan-l); padding: 2px 7px; border-radius: 999px; text-align: center; }
.dw-stem { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dw-count { font-weight: 700; color: var(--red); font-size: 11.8px; }
.rc-badge {
    display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 999px;
    background: var(--cyan-l); color: var(--cyan-d); font-size: 11.4px; font-weight: 700;
}

/* ---------------- 历史课堂 ---------------- */
.hist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 16px; }
.hist-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 17px 18px; box-shadow: var(--sh); transition: transform .26s, box-shadow .26s;
}
.hist-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.hc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.hc-code { font-family: var(--mono); font-size: 15px; font-weight: 800; color: var(--purple); letter-spacing: .05em; }
.hc-mode { font-size: 11.4px; background: #f1f5f9; color: var(--muted); padding: 2px 9px; border-radius: 999px; }
.hc-title { font-weight: 700; font-size: .96rem; margin-bottom: 6px; }
.hc-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-bottom: 12px; }
.hc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 13px; }
.hc-stats > div { background: #f8fafc; border-radius: 9px; padding: 8px; text-align: center; }
.hc-stats b { display: block; font-size: 1.06rem; font-weight: 800; color: var(--cyan-d); }
.hc-stats span { font-size: 10.8px; color: var(--muted); }
.hc-actions { display: flex; gap: 8px; }
.hc-actions .btn { flex: 1; }

.modal-mask {
    position: fixed; inset: 0; z-index: 220; background: rgba(15, 23, 42, .38);
    display: flex; align-items: center; justify-content: center; padding: 24px;
    opacity: 0; transition: opacity .24s;
}
.modal-mask.open { opacity: 1; }
.modal {
    background: #fff; border-radius: var(--r-lg); width: min(920px, 96vw);
    max-height: 88vh; display: flex; flex-direction: column;
    box-shadow: var(--sh-lg); animation: ch-pop .3s cubic-bezier(.22, .9, .28, 1) both;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.modal-head h3 { margin: 0; font-size: 1.04rem; }
.modal-x { border: 0; background: #f1f5f9; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 18px 20px 24px; overflow-y: auto; }
.modal-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.modal-stats > div { background: #f8fafc; border-radius: 10px; padding: 10px; text-align: center; }
.modal-stats b { display: block; font-size: 1.12rem; font-weight: 800; color: var(--cyan-d); }
.modal-stats span { font-size: 11px; color: var(--muted); }

/* ---------------- 学生报告 ---------------- */
.rep-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; padding: 18px 22px; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-lg);
    box-shadow: var(--sh); margin-bottom: 18px;
}
.rep-who { display: flex; align-items: center; gap: 14px; }
.rep-avatar {
    width: 52px; height: 52px; border-radius: 15px;
    background: linear-gradient(135deg, #06b6d4, #0e7490); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 800;
}
.rep-name { font-size: 1.14rem; font-weight: 800; }
.rep-no { font-size: 12.3px; color: var(--muted); font-family: var(--mono); }
.rep-head-right { display: flex; align-items: center; gap: 12px; }
.rep-presence {
    display: inline-flex; align-items: center; gap: 7px; font-size: 12.3px;
    color: var(--muted); padding: 4px 12px; border-radius: 999px; background: #f8fafc;
}
.rep-presence.on { color: #15803d; background: var(--green-l); }
.rep-presence .live-dot { display: none; }
.rep-presence.on .live-dot { display: block; }
.rep-tip {
    padding: 13px 18px; border-radius: 11px; background: var(--cyan-l);
    border-left: 3px solid var(--cyan); color: var(--cyan-d);
    font-size: 13.3px; margin-bottom: 18px;
}
.rep-kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.rep-kpi {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    padding: 15px 12px; text-align: center; box-shadow: var(--sh);
    transition: transform .24s, box-shadow .24s;
}
.rep-kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.rk-num { display: block; font-size: 1.5rem; font-weight: 800; line-height: 1.15; }
.rk-num.cyan { color: var(--cyan-d); }
.rk-num.teal { color: var(--teal); }
.rk-num.green { color: var(--green); }
.rk-num.orange { color: var(--orange); }
.rk-num.red { color: var(--red); }
.rk-num.purple { color: var(--purple); }
.rk-num.blue { color: var(--blue); }
.rk-label { font-size: 11.6px; color: var(--muted); margin-top: 4px; }
.rep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.rep-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 20px 22px; box-shadow: var(--sh); margin-bottom: 18px;
}
.rep-grid .rep-card { margin-bottom: 0; }
.rc-title { font-size: 1rem; font-weight: 700; margin-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.rc-sub { margin-top: 13px; padding-top: 11px; border-top: 1px dashed var(--line); font-size: 12.2px; color: var(--muted); }
.rep-history { list-style: none; margin: 0; padding: 0; }
.rep-hi {
    display: grid; grid-template-columns: 82px 38px 1fr auto; gap: 10px; align-items: center;
    padding: 9px 0; border-bottom: 1px dashed var(--line2); font-size: 12.5px;
}
.rep-hi:last-child { border-bottom: 0; }
.rhi-date { font-size: 11.6px; color: var(--muted); }
.rhi-score { font-size: 15px; font-weight: 800; }
.rhi-score.good { color: var(--green); }
.rhi-score.mid { color: var(--orange); }
.rhi-score.bad { color: var(--red); }
.rhi-detail { color: var(--ink2); }
.rhi-tags i {
    font-style: normal; font-size: 10.8px; background: var(--cyan-l);
    color: var(--cyan-d); padding: 2px 7px; border-radius: 999px; margin-left: 4px;
}
.rep-wrongs { list-style: none; margin: 0; padding: 0; }
.rep-wrong { padding: 9px 0; border-bottom: 1px dashed var(--line2); }
.rep-wrong:last-child { border-bottom: 0; }
.rw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rw-tag { font-size: 11.2px; background: var(--cyan-l); color: var(--cyan-d); padding: 2px 8px; border-radius: 999px; }
.rw-count { font-size: 11.6px; color: var(--red); font-weight: 700; }
.rw-stem { font-size: 12.6px; color: var(--ink2); line-height: 1.6; }
.rep-timeline { list-style: none; margin: 0; padding: 0; }
.rep-timeline li {
    display: grid; grid-template-columns: 88px 16px 1fr; gap: 10px;
    align-items: center; padding: 6px 0; font-size: 12.6px;
}
.rt-time { font-size: 11.4px; color: var(--muted); white-space: nowrap; }
.rt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-l); border: 2px solid var(--cyan); justify-self: center; }
.rt-text { color: var(--ink2); }
.rep-empty {
    text-align: center; padding: 54px 26px; background: #fff;
    border: 1px dashed var(--line); border-radius: var(--r-lg);
}
.rep-empty-icon { font-size: 36px; margin-bottom: 12px; }
.rep-empty h3 { margin: 0 0 9px; font-size: 1.1rem; }
.rep-empty p { margin: 0 auto 18px; max-width: 480px; font-size: 13.6px; color: var(--ink2); line-height: 1.85; }
.rep-loading { padding: 8px 0; }

/* ---------------- 骨架屏 ---------------- */
.skl {
    background: linear-gradient(90deg, #f1f5f9 0%, #e8eef4 40%, #f1f5f9 80%);
    background-size: 420px 100%; animation: ch-shimmer 1.25s linear infinite;
    border-radius: 9px;
}
.skl-line { height: 15px; margin-bottom: 11px; }
.skl-line.short { width: 58%; }
.skl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.skl-card { height: 84px; }

/* ---------------- 彩带 ---------------- */
.confetti-bit {
    position: absolute; top: 0; width: 7px; height: 11px; border-radius: 2px;
    animation: ch-drop 1.4s ease-in forwards; pointer-events: none;
}

/* ---------------- 紧凑首页（学生端/教师端） ---------------- */
.hero.compact { padding: 52px 24px 38px; min-height: auto; }
.hero.compact .hero-title { font-size: clamp(1.9rem, 4.4vw, 2.5rem); }
.hero.compact .hero-intro { max-width: 780px; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1120px) {
    .kpi-strip, .ana-kpis, .rep-kpis { grid-template-columns: repeat(3, 1fr); }
    .ana-grid, .rep-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .portal-cards { grid-template-columns: 1fr; }
    .idbar { top: 56px; }
    .idbar-inner { padding: 9px 16px; }
    .idb-form { margin-left: 0; width: 100%; }
    .idb-form input { flex: 1; width: auto; }
    .drawer { width: 100%; }
    .feed-item { grid-template-columns: 78px 20px 1fr; }
    .feed-item .fi-text { grid-column: 1 / -1; padding-left: 4px; }
    .modal-stats { grid-template-columns: repeat(2, 1fr); }
    .bar-row { grid-template-columns: 104px 1fr 66px; }
    .portal-meta { gap: 4px; }
    .pm-sep { display: none; }
    .pm-item { padding: 0 14px; }
}
@media (max-width: 560px) {
    .kpi-strip, .ana-kpis, .rep-kpis { grid-template-columns: repeat(2, 1fr); }
    .portal { padding: 40px 16px 20px; }
    .portal-card { padding: 24px 20px 20px; }
    .rep-hi { grid-template-columns: 68px 34px 1fr; }
    .rhi-tags { grid-column: 1 / -1; padding-left: 0; }
    .wrong-top li { grid-template-columns: 54px 1fr; row-gap: 4px; }
    .wt-stem { grid-column: 1 / -1; }
    .wt-num { grid-column: 1 / -1; }
    .drawer-body { padding: 18px 16px 34px; }
    .drawer-kpis { grid-template-columns: repeat(3, 1fr); }
    .toolbar { gap: 10px; }
    .tb-right { width: 100%; }
    .search { flex: 1; width: auto; }
    .rep-timeline li { grid-template-columns: 74px 14px 1fr; }
    .idb-state { font-size: 12.4px; }
}


/* ================================================================
   QSAR 专题工具区新增样式（π 计算器 / 方程绘图器 / 参数速查）
   ================================================================ */
.calc-step {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 0;
    font-size: 14px;
    line-height: 1.7;
}
.calc-note {
    margin-top: 12px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}
.calc-verdict.good, .calc-verdict.ok {
    background: var(--green-l);
    border: 1px solid #c3ecd2;
    color: #14532d;
}
.calc-verdict.bad, .calc-verdict.warn {
    background: #fff7ed;
    border: 1px solid #fddfb5;
    color: #7c2d12;
}
.calc-verdict.mid, .calc-verdict.danger {
    background: var(--red-l);
    border: 1px solid #f5c1c5;
    color: #7f1d1d;
}
.pb-chart {
    width: 100%;
    height: auto;
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-top: 14px;
}
.ref-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.ref-card {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px;
    position: relative;
}
.ref-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 10px;
}
.ref-tag.t-疏水 { background: #f0fdfa; color: #0f766e; }
.ref-tag.t-电性 { background: #f5f3ff; color: #6d28d9; }
.ref-tag.t-立体 { background: #eff6ff; color: #1d4ed8; }
.ref-tag.t-辅助 { background: #fff7ed; color: #c2410c; }
.ref-name { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.ref-tex { text-align: center; margin: 6px 0 10px; }
.ref-pts { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink2); line-height: 1.8; }


/* ================================================================
   新增模块样式：实时测验 / 案例库 / 后台端 CMS
   ================================================================ */

/* ---------- 实时测验 ---------- */
.lq-idle {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-soft); border: 1px dashed var(--line);
    border-radius: 12px; padding: 16px 18px; color: var(--ink2); font-size: 14px;
}
.lq-idle-dot { width: 9px; height: 9px; border-radius: 50%; background: #9ca3af; flex: none; }
.lq-banner {
    border-radius: 14px; padding: 16px 20px; margin-bottom: 16px;
    display: flex; flex-direction: column; gap: 8px;
}
.lq-banner.live { background: var(--green-l); border: 1.5px solid #34d39955; }
.lq-banner.warn { background: #fff7ed; border: 1.5px solid #fdba7455; }
.lq-b-title { font-size: 16px; color: var(--ink); }
.lq-b-meta { display: flex; gap: 18px; align-items: center; font-size: 13.5px; color: var(--ink2); flex-wrap: wrap; }
.lq-timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 17px; color: #047857; }
.lq-timer.urgent { color: #dc2626; animation: lq-blink 1s infinite; }
@keyframes lq-blink { 50% { opacity: .45; } }
.lq-code { font-family: ui-monospace, monospace; font-size: 12.5px; background: #ffffffaa; border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; margin-left: 8px; }
.lq-done { background: #eef6ff; border: 1px solid #b6d4f5; border-radius: 12px; padding: 12px 16px; margin-bottom: 14px; font-size: 14px; color: #1e40af; }
.lq-q { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.lq-q-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lq-q-num { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.lq-q-tag { font-size: 12px; font-weight: 700; color: #6d28d9; background: #f5f3ff; border-radius: 999px; padding: 2px 10px; }
.lq-q-state { margin-left: auto; font-size: 13px; font-weight: 700; }
.lq-q-state.ok { color: #047857; } .lq-q-state.bad { color: #dc2626; }
.lq-q-stem { font-size: 15.5px; line-height: 1.7; color: var(--ink); margin-bottom: 12px; }
.lq-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 720px) { .lq-opts { grid-template-columns: 1fr; } }
.lq-opt {
    display: flex; gap: 10px; align-items: flex-start; text-align: left;
    background: #fff; border: 1.5px solid var(--line); border-radius: 10px;
    padding: 12px 14px; font-size: 14.5px; line-height: 1.6; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.lq-opt:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 2px 10px #0891b222; transform: translateY(-1px); }
.lq-opt:disabled { cursor: default; opacity: .82; }
.lq-opt b { color: var(--cyan); flex: none; }
.lq-opt.sel-ok { border-color: #10b981; background: var(--green-l); opacity: 1; }
.lq-opt.sel-bad { border-color: #ef4444; background: var(--red-l); opacity: 1; }
.lq-opt.is-answer { border-color: #10b981; }
.lq-exp { margin-top: 12px; background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; line-height: 1.7; }
.lq-actions { display: flex; justify-content: center; margin: 18px 0; }
.lq-ended .lq-e-head { font-size: 15px; margin-bottom: 12px; }
.lq-mine { background: var(--green-l); border: 1px solid #c3ecd2; border-radius: 10px; padding: 10px 16px; margin-bottom: 14px; font-size: 14.5px; }
.lq-mine.miss { background: #fff7ed; border-color: #fddfb5; }
.lq-ended tr.me td { background: var(--green-l); font-weight: 700; }
.lq-split { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; margin-top: 16px; }
@media (max-width: 900px) { .lq-split { grid-template-columns: 1fr; } }
.lq-col { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.lq-col-title { font-weight: 800; font-size: 14px; margin-bottom: 12px; color: var(--ink); }
.lq-pq { margin-bottom: 14px; }
.lq-pq-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin-bottom: 6px; }
.lq-pq-stem { flex: 1; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-pq-acc { color: var(--ink2); font-size: 12.5px; flex: none; }
.lq-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: #e5e7eb; }
.lq-bar-ok { background: #10b981; } .lq-bar-bad { background: #f87171; }
.lq-pq-ans { margin-top: 5px; font-size: 12.5px; color: var(--ink2); }
.lq-fin { font-size: 12px; color: #9ca3af; } .lq-fin.ok { color: #047857; font-weight: 700; }
.lq-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; }
.lq-f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink2); }
.lq-f input, .lq-f select { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; min-width: 130px; background: #fff; }
.lq-hist { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.lq-hist-head { display: flex; gap: 10px; align-items: center; font-size: 14.5px; flex-wrap: wrap; }
.lq-hist-meta { font-size: 13px; color: var(--ink2); margin-top: 6px; }

/* ---------- 交互式模拟器（讲义内嵌） ---------- */
.fig-sim { margin: 28px 0 32px; }
.sim-box { background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 18px; padding: 20px 22px; }
.sim-grid { display: grid; grid-template-columns: 296px 1fr; gap: 22px; align-items: start; }
.sim-ctrl { display: flex; flex-direction: column; gap: 16px; }
.sim-row label { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 13.5px; font-weight: 700; color: var(--ink2); margin-bottom: 6px; }
.sim-row label b { font-family: var(--mono); font-size: 15px; color: var(--cyan-d); }
.sim-row input[type="range"] { width: 100%; accent-color: #0891b2; cursor: pointer; }
.sim-hint { font-size: 12px; color: var(--ink2); margin-top: 4px; line-height: 1.6; }
.sim-out { min-width: 0; }
.sim-eq { margin: 0 0 14px; }
.sim-score { display: flex; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.ss-cell { flex: 1 1 150px; background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.ss-cell.dim { background: var(--bg-soft); }
.ss-num { font-size: 24px; font-weight: 800; color: var(--cyan-d); font-variant-numeric: tabular-nums; line-height: 1.15; }
.ss-cell.dim .ss-num { font-size: 20px; color: var(--ink2); }
.ss-lab { font-size: 12px; color: var(--ink2); }
.sim-chart { width: 100%; height: auto; display: block; margin: 6px 0 2px; }
.sim-draw { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
    .sim-draw { animation: simDraw 1.1s ease-out both; }
    @keyframes simDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
.sim-verdict { border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.75;
    border: 1px solid var(--line); background: #fff; }
.sim-verdict b { display: block; font-size: 15px; margin-bottom: 2px; }
.sim-verdict.good { border-color: #86efac; background: var(--green-l); }
.sim-verdict.bad { border-color: #fca5a5; background: #fef2f2; }
.sim-verdict.mid { border-color: #fde68a; background: #fffbeb; }
.sim-terms { list-style: none; margin: 12px 0 0; padding: 0; }
.sim-terms li { display: grid; grid-template-columns: 112px 78px 1fr; gap: 10px; align-items: baseline;
    padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.sim-terms li em { font-style: normal; font-weight: 700; color: var(--ink2); font-family: var(--mono); }
.sim-terms li span { font-weight: 800; color: var(--cyan-d); font-variant-numeric: tabular-nums; text-align: right; }
.sim-terms li i { font-style: normal; color: var(--ink2); font-size: 12.5px; }
.sim-terms li.sim-sum { border-bottom: none; border-top: 2px solid var(--cyan); margin-top: 6px; padding-top: 10px; }
.sim-gap { margin-top: 14px; font-size: 14px; line-height: 1.8; color: var(--ink); background: #fff;
    border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 0 12px 12px 0; padding: 12px 16px; }
@media (max-width: 880px) {
    .sim-grid { grid-template-columns: 1fr; }
    .sim-terms li { grid-template-columns: 96px 68px 1fr; font-size: 13px; }
}

/* ---------- 概念跟练（讲义内嵌自测，js/inlinequiz.js 判分） ---------- */
.iqz { border: 1px solid var(--line); border-left: 3px solid var(--purple); border-radius: var(--r);
    background: var(--bg); padding: 14px 18px 8px; margin: 20px 0; }
.iqz-head { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.iqz-tag { flex: none; font-size: 12px; font-weight: 500; color: var(--purple); background: var(--purple-l); border-radius: 999px; padding: 2px 10px; }
.iqz-reset { margin-left: auto; font-size: 12px; color: var(--purple); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.iqz-reset:hover { background: var(--purple-l); }
.iqz-item { padding: 10px 0 6px; }
.iqz-q { font-size: 14px; color: var(--ink); line-height: 1.75; margin-bottom: 10px; }
.iqz-no { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--purple-l); color: var(--purple); font-size: 12px; font-weight: 500; margin-right: 8px; flex: none; }
.iqz-opts { display: grid; gap: 8px; }
.iqz-opt { text-align: left; font-size: 14px; line-height: 1.65; color: var(--ink2); background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; cursor: pointer;
    transition: border-color .15s ease, background .15s ease; font-family: var(--sans); }
.iqz-opt:hover { border-color: var(--purple); background: var(--purple-l); }
.iqz-opt.sel { border-color: var(--purple); background: var(--purple-l); color: var(--ink); }
.iqz-submit { margin-left: auto; font-size: 12px; font-weight: 500; color: #fff; background: var(--purple); border: 1px solid var(--purple); border-radius: 8px; padding: 4px 12px; cursor: pointer; }
.iqz-submit:hover { filter: brightness(1.08); }
.iqz-item.done .iqz-opt { cursor: default; opacity: .6; }
.iqz-item.done .iqz-opt:hover { border-color: var(--line); background: var(--bg-soft); }
.iqz-item.done .iqz-opt.ok { opacity: 1; color: #14532d; background: var(--green-l); border-color: var(--green); }
.iqz-item.done .iqz-opt.bad { opacity: 1; color: var(--red); background: var(--red-l); border-color: var(--red); }
.iqz-why { margin: 10px 0 8px; padding: 10px 14px; border-radius: 10px; background: var(--bg-alt); border: 1px solid var(--line2);
    font-size: 13.5px; line-height: 1.8; color: var(--ink2); }
.iqz-why b { color: var(--purple); margin-right: 10px; }

/* ---------- 案例库 ---------- */
.case-card { background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 18px; padding: 26px 28px; margin-bottom: 26px; border-top: 4px solid var(--cyan); }
.case-card.m-purple { border-top-color: #8b5cf6; }
.case-card.m-teal { border-top-color: #14b8a6; }
.case-card.m-orange { border-top-color: #f97316; }
.case-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.case-chip { background: var(--cyan); color: #fff; font-weight: 800; font-size: 13px; border-radius: 999px; padding: 5px 14px; flex: none; }
.case-title { font-size: 20px; color: var(--ink); margin: 0; }
.case-sub { font-size: 13px; color: var(--ink2); margin-top: 3px; }
.case-intro { font-size: 14.5px; line-height: 1.8; color: var(--ink2); margin: 0 0 16px; }
.case-tbl tbody tr.case-row { cursor: pointer; transition: background .12s; }
.case-tbl tbody tr.case-row:hover { background: #0891b214; }
.case-tbl tbody tr.case-row.hl { background: var(--green-l); }
.case-points { margin-top: 14px; }
.case-point { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin-bottom: 8px; font-size: 14px; line-height: 1.75; }
.case-point.active { border-color: var(--cyan); box-shadow: 0 2px 12px #0891b222; }
.cp-badge { width: 22px; height: 22px; border-radius: 50%; background: var(--cyan); color: #fff; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.case-take { margin-top: 8px; }
.case-take-body { margin-top: 10px; background: var(--green-l); border: 1px solid #c3ecd2; border-radius: 12px; padding: 14px 18px; font-size: 14.5px; line-height: 1.8; font-weight: 600; color: #14532d; }

/* ---------- 教师端 CMS ---------- */
.cms-head { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
.cms-state { font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 999px; background: #e5e7eb; color: #4b5563; }
.cms-state.live { background: var(--green-l); color: #047857; }
.cms-count { font-size: 13px; color: var(--ink2); margin-left: auto; }
.cms-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.cms-pane { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.cms-pane-title { font-weight: 800; font-size: 15.5px; margin-bottom: 14px; color: var(--ink); }
.cms-item { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.cms-item summary { cursor: pointer; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ink); user-select: none; }
.cms-item summary:hover { background: var(--bg-soft); border-radius: 12px; }
.cms-body { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.cms-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.cms-body input, .cms-body select, .cms-body textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13.5px; font-family: inherit; background: #fff; color: var(--ink); }
.cms-body textarea { resize: vertical; line-height: 1.6; }
.cms-body textarea.cms-json { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.cms-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cms-row3 { display: grid; grid-template-columns: 1.2fr 1fr .6fr; gap: 10px; }
.cms-opt-row { flex-direction: row !important; align-items: center; gap: 8px !important; }
.cms-opt-row input[type=radio] { width: 16px; height: 16px; accent-color: #10b981; }
.cms-opt-row input:not([type=radio]) { flex: 1; }
.cms-json-state { font-size: 12px; font-weight: 700; }
.cms-json-state.ok { color: #047857; } .cms-json-state.bad { color: #dc2626; }
.sec-h3 { font-size: 17px; color: var(--ink); margin: 8px 0 12px; }

/* ================================================================
   第三部：3 次课 × 每次 2 节（课程安排 / 教学安排 / 讲义分组）
   ================================================================ */

/* [hidden] 必须真正生效：部分类自带 display，会盖掉浏览器默认的 [hidden] */
[hidden] { display: none !important; }

/* ---------------- 课程安排 / 教学安排 卡片 ---------------- */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; }
.plan-card {
    background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--cyan);
    border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh);
}
.plan-card.m-teal { border-top-color: var(--teal); }
.plan-card.m-purple { border-top-color: var(--purple); }
.pl-head { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px dashed var(--line); margin-bottom: 12px; }
.pl-when { flex: none; font-size: 12.5px; font-weight: 800; color: var(--cyan-d); background: var(--cyan-l); border-radius: 999px; padding: 4px 12px; }
.plan-card.m-teal .pl-when { color: #0f766e; background: var(--teal-l); }
.plan-card.m-purple .pl-when { color: #6d28d9; background: var(--purple-l); }
.pl-icon { font-size: 22px; line-height: 1; }
.pl-headtext { min-width: 0; }
.pl-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.pl-en { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pl-periods { display: flex; flex-direction: column; gap: 9px; }
.pl-period {
    display: flex; gap: 12px; align-items: baseline; background: var(--bg-soft);
    border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; text-decoration: none; transition: .16s;
}
.pl-period:not(.static):hover { border-color: var(--cyan); box-shadow: 0 2px 12px #0891b222; transform: translateY(-1px); }
.pl-no { flex: none; font-size: 12.5px; font-weight: 800; color: #fff; background: var(--cyan); border-radius: 6px; padding: 2px 8px; }
.plan-card.m-teal .pl-no { background: var(--teal); }
.plan-card.m-purple .pl-no { background: var(--purple); }
.pl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pl-body b { font-size: 14.5px; color: var(--ink); }
.pl-body em { font-size: 12.8px; color: var(--ink2); font-style: normal; line-height: 1.6; }
.pl-count { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pl-tip { margin-top: 14px; font-size: 12.8px; color: var(--cyan-d); background: var(--cyan-l); border-radius: 10px; padding: 9px 12px; }

/* ---------------- 讲义：侧栏列本页小节 ---------------- */
.cn-group { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 6px; padding: 0 12px; }
.cn-group:first-child { margin-top: 0; }
.cn-g-when { font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: var(--cyan-d); }
.cn-g-title { font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
.cn-dot {
    flex: none; width: 6px; height: 6px; border-radius: 50%;
    background: var(--cyan); opacity: .4; align-self: center; transition: .16s;
}
.cn-item.active .cn-dot { opacity: 1; transform: scale(1.3); }
.cases-inline { margin: 6px 0 4px; }
.cms-row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }

/* ================================================================
   第四部：讲义页配套样式
   ================================================================ */

/* hero 里的要点标签 */
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.ht-item {
    font-size: 12.5px; color: var(--cyan-d); background: rgba(255, 255, 255, .78);
    border: 1px solid #bae6fd; border-radius: 999px; padding: 5px 13px; line-height: 1.4;
}

/* 内容概览卡：小节标题在 b 里、摘要换行 */
.plan-card .pl-body b { display: block; margin-bottom: 3px; }
.plan-card .pl-body em { display: block; }
.pl-period.static { cursor: default; }

@media (max-width: 720px) {
    .plan-grid { grid-template-columns: 1fr; }
    .pl-count { display: none; }
    .cms-row4 { grid-template-columns: 1fr 1fr; }
}

.lec-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 16px 0;
    max-width: 1180px;
    margin: 0 auto;
}
.lec-item {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 999px;
    border: 1px solid var(--line, #d8e0e8);
    background: #fff;
    color: var(--ink, #1c2b36);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: box-shadow .15s, border-color .15s;
}
.lec-item:hover { border-color: var(--accent, #0e7490); box-shadow: 0 2px 8px rgba(14, 116, 144, .15); }
.lec-item.on {
    background: var(--accent, #0e7490);
    border-color: var(--accent, #0e7490);
    color: #fff;
}

.m6-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.m6-tab {
    display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line, #d8e0e8);
    background: #fff; color: var(--ink, #1c2b36); font-size: 13px; font-weight: 600;
    cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.m6-tab i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted, #6b7a87); }
.m6-tab:hover { border-color: var(--accent, #0e7490); box-shadow: 0 2px 8px rgba(14, 116, 144, .12); }
.m6-tab.on { background: var(--accent, #0e7490); border-color: var(--accent, #0e7490); color: #fff; }
.m6-tab.on i { color: rgba(255, 255, 255, .85); }
.m6-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 8px;
    max-height: 340px; overflow: auto; padding: 2px; }
.m6-card {
    border: 1px solid var(--line, #d8e0e8); border-radius: 10px; padding: 8px 10px;
    background: #fff; color: var(--ink, #1c2b36); font-size: 12.5px; font-weight: 600;
    cursor: pointer; text-align: left; line-height: 1.5; transition: border-color .15s, background .15s;
}
.m6-card b { display: block; }
.m6-card i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted, #6b7a87);
    font-variant-numeric: tabular-nums; }
.m6-card:hover { border-color: var(--accent, #0e7490); }
.m6-card.on { border-color: var(--accent, #0e7490); background: #ecfeff; }
.m6-card.on i { color: var(--cyan-d, #0e7490); }
.m6-vars { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
@media (max-width: 900px) {
    .sim-grid { grid-template-columns: 1fr; }
    .m6-cards { max-height: 260px; }
}