:root {
    --home-bg: #061a3a;
    --home-panel: rgba(8, 34, 72, 0.92);
    --home-panel-soft: rgba(12, 48, 92, 0.76);
    --home-line: rgba(93, 175, 236, 0.2);
    --home-text: #eff8ff;
    --home-muted: rgba(205, 225, 245, 0.66);
    --home-cyan: #50d4f3;
    --home-blue: #168bff;
}

html { scroll-padding-top: 88px; }
/* 深色滚动条（2026-10-19 用户反馈「灰白滚动标识不美观」）：浏览器默认的浅灰轨道压在深蓝面板 / 页面上很扎眼，
   统一换成半透明细条 —— 轨道透明，直接透出容器的深色底；滑块 2px 内缩、圆头，不贴边。
   ⚠️ `scrollbar-color` 是继承属性但 `scrollbar-width` 不是，所以滚动容器要逐个列出来（否则内层仍是默认宽度）。 */
:is(html, .quick-link-menu, .weekly-notice-list, .home-notice-dialog, .work-preview-body, .experiment-directory) {
    scrollbar-width: thin;
    scrollbar-color: rgba(104, 186, 238, .42) transparent;
}
/* 旧 Chromium / Safari 不认上面两个标准属性 → 走 -webkit- 伪元素（不加前缀选择器 = 全页生效） */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
    border: 2px solid transparent; border-radius: 999px;
    background-color: rgba(104, 186, 238, .42); background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(126, 228, 245, .68); }
body {
    color: var(--home-text);
    background:
        radial-gradient(ellipse at 50% 0, rgba(17, 90, 157, 0.2), transparent 50%),
        var(--home-bg);
}
.home-dashboard { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; padding: 82px 28px 28px; }
.ambient-gallery { position: fixed; inset: 64px 0 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-gallery::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(6, 26, 58, 1) 24%, rgba(6, 26, 58, 0.9) 55%, rgba(6, 26, 58, 0.42) 100%);
}
.ambient-gallery-image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; filter: saturate(.55) brightness(.75) blur(2px);
    -webkit-mask-image: radial-gradient(ellipse at center, transparent 0 45%, rgba(0, 0, 0, .08) 63%, #000 100%);
    mask-image: radial-gradient(ellipse at center, transparent 0 45%, rgba(0, 0, 0, .08) 63%, #000 100%);
    transition: opacity 1.4s ease;
}
.ambient-gallery-image.is-active { opacity: .18; }
.navbar { height: 68px; background: rgba(4, 19, 43, .92); border-bottom: 1px solid rgba(94, 182, 244, .15); backdrop-filter: blur(16px); }
.navbar-container { max-width: 1480px; padding: 0 28px; justify-content: flex-start; }
.navbar .directory-toggle {
    position: relative; display: flex; flex: 0 0 42px; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin: 0 15px 0 0; padding: 0;
    border: 1px solid rgba(99, 192, 240, .19); border-radius: 11px;
    background: rgba(16, 67, 112, .24); transition: background .25s, border-color .25s, transform .25s;
}
.directory-toggle:hover, .directory-toggle:focus-visible {
    border-color: rgba(80, 212, 243, .72); background: rgba(22, 120, 179, .32); transform: translateY(-1px);
}
.directory-toggle span { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: #dff7ff; transition: transform .3s, width .3s, opacity .2s, top .3s; }
.directory-toggle span:nth-child(1) { transform: translateY(-6px); }
.directory-toggle span:nth-child(2) { width: 15px; transform: translateY(0); }
.directory-toggle span:nth-child(3) { transform: translateY(6px); }
.directory-toggle:hover span:nth-child(1) { transform: translate(-2px, -7px); }
.directory-toggle:hover span:nth-child(2) { width: 20px; }
.directory-toggle:hover span:nth-child(3) { transform: translate(2px, 7px); }
.directory-toggle.active span:nth-child(1) { transform: rotate(45deg); }
.directory-toggle.active span:nth-child(2) { opacity: 0; width: 0; }
.directory-toggle.active span:nth-child(3) { transform: rotate(-45deg); }
.logo { font-size: 17px; letter-spacing: 1.5px; white-space: nowrap; }
.logo i { color: var(--home-cyan); }
.nav-menu { gap: 18px; align-items: center; }
.nav-menu a { font-size: 13px; white-space: nowrap; }
.nav-menu a::after { bottom: -8px; }
.nav-right { margin-left: 12px; }
.nav-right .btn-login { font-size: 13px; }
.experiment-directory {
    position: fixed; top: 78px; left: max(18px, calc((100vw - 1480px) / 2 + 28px)); right: auto;
    z-index: 1100; display: block; width: min(390px, calc(100vw - 36px)); max-height: calc(100dvh - 94px);
    overflow: auto; padding: 19px; border: 1px solid rgba(93, 175, 236, .27); border-radius: 16px;
    background: rgba(4, 21, 47, .97); box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    backdrop-filter: blur(20px); visibility: hidden; opacity: 0; pointer-events: none;
    transform: translateY(-8px) scale(.985); transform-origin: top left;
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.experiment-directory.active { display: block; visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.directory-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 13px; border-bottom: 1px solid rgba(127, 187, 230, .17); }
.directory-heading strong { display: block; margin-top: 3px; color: #f0f9ff; font-size: 20px; }
.directory-heading > a { display: flex !important; align-items: center; gap: 7px; padding: 8px 10px !important; border: 1px solid rgba(80, 212, 243, .23) !important; border-radius: 8px; color: #7ee4f5 !important; font-size: 12px !important; white-space: nowrap; }
.directory-heading > a::after, .directory-footer a::after { display: none; }
.directory-heading > a:hover { background: rgba(28, 125, 174, .2) !important; }
.mobile-category-links { display: grid; gap: 4px; margin: 11px 0; }
.directory-category-item { overflow: hidden; border: 1px solid transparent; border-radius: 9px; transition: background .22s, border-color .22s; }
.directory-category-item.is-expanded { border-color: rgba(87, 179, 235, .14); background: rgba(15, 51, 88, .38); }
.directory-category {
    position: relative; display: grid; width: 100%; grid-template-columns: 29px minmax(0, 1fr) auto 15px;
    gap: 9px; align-items: center; padding: 11px 10px; border: 0; color: #e7f4ff;
    background: transparent; text-align: left; cursor: pointer;
}
.directory-category::before { content: ""; position: absolute; bottom: 0; left: 10px; width: calc(100% - 20px); height: 2px; background: linear-gradient(90deg, #35c9ef, #637eff); transform: scaleX(0); transform-origin: left; transition: transform .38s ease; }
.directory-category:hover::before, .directory-category:focus-visible::before, .directory-category-item.is-expanded .directory-category::before { transform: scaleX(1); }
.directory-category-index { color: #58d5f1; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.directory-category-name { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.directory-category-count { color: rgba(196, 222, 242, .53); font-size: 11px; white-space: nowrap; }
.directory-category > i { color: #63cfe9; font-size: 10px; transition: transform .22s; }
.directory-category-item.is-expanded .directory-category > i { transform: rotate(180deg); }
.directory-experiments { display: grid; gap: 2px; padding: 0 9px 8px 40px; animation: directoryOpen .2s ease both; }
.directory-experiments[hidden] { display: none; }
@keyframes directoryOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.experiment-directory .directory-experiment-link, .experiment-directory .directory-category-link { position: relative; display: block !important; overflow: hidden; padding: 8px 9px !important; border: 0 !important; border-radius: 6px; color: rgba(217, 237, 252, .78) !important; font-size: 13px !important; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; transition: color .2s, background .2s; }
.experiment-directory .directory-experiment-link::after { content: ""; position: absolute; right: 9px; bottom: 3px; left: 9px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #36c9ed, #6584ff); transform: scaleX(0); transform-origin: left; transition: transform .42s cubic-bezier(.2,.75,.25,1); }
.experiment-directory .directory-experiment-link:hover, .experiment-directory .directory-experiment-link:focus-visible, .experiment-directory .directory-category-link:hover { color: #fff !important; background: rgba(26, 102, 155, .22) !important; }
.experiment-directory .directory-experiment-link:hover::after, .experiment-directory .directory-experiment-link:focus-visible::after, .experiment-directory .directory-experiment-link.is-hovered::after { transform: scaleX(1); }
.experiment-directory .directory-category-link { color: #68d9ee !important; }
/* ===== 目录里的「轮次提醒」（2026-10-18） =====
   实验名 + 右侧圆角徽标（第 N 周 / 第 N 周 · 未开放）。链接改成 flex：
   名字可收缩走省略号，徽标不收缩 —— 否则徽标会把长实验名挤出面板。 */
.experiment-directory .directory-experiment-link { display: flex !important; align-items: center; gap: 8px; text-overflow: clip; }
.experiment-directory .directory-experiment-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.experiment-directory .directory-round {
    flex: 0 0 auto; padding: 1px 6px; border-radius: 999px; font-size: 10px; line-height: 1.5;
    color: rgba(150, 216, 240, .9); border: 1px solid rgba(95, 180, 230, .26); background: rgba(20, 70, 110, .42);
    white-space: nowrap;
}
.experiment-directory .directory-experiment-link.is-pending { color: rgba(206, 224, 240, .6) !important; }
.experiment-directory .directory-round.is-pending { color: #ffcf8a; border-color: rgba(255, 190, 120, .36); background: rgba(76, 46, 16, .5); }
.experiment-directory .directory-experiment-link.is-pending::after { background: linear-gradient(90deg, #ffb85d, #ff8a5d); }
#particle-canvas { opacity: .46; }
.hero.home-hero {
    position: relative; display: block; min-height: 0; overflow: visible; padding: 0; text-align: left;
}
.home-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(290px, .88fr); gap: 16px; align-items: stretch; }
/* 没有老师上传的 Hero（轮播被 JS 收起）时切单列：通知面板限宽 720px，保持可读又不留空白 */
.home-hero-grid.is-single { grid-template-columns: minmax(0, 720px); justify-content: start; }
.home-carousel {
    position: relative; min-width: 0; height: clamp(350px, 32vw, 440px); overflow: hidden;
    border: 1px solid rgba(74, 177, 243, .28); border-radius: 16px;
    background: #092d58; box-shadow: 0 18px 55px rgba(0, 0, 0, .24);
    touch-action: pan-y;
}
/* JS 在没有 Hero 内容时给本区块加 hidden —— 必须显式写死，别被上面的 display/position 规则盖掉 */
.home-carousel[hidden] { display: none !important; }
.home-carousel-track { position: relative; width: 100%; height: 100%; }
/* 幻灯片底：没有老师上传的 Hero 图时，用渐变底承载文字（原先垫的是两张演示用 hero 图，2026-10-18 撤掉）。
   有 <img> 时图片铺满并盖住这层渐变，行为与以前一致。 */
.home-carousel-slide {
    position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden;
    transition: opacity .65s ease, visibility .65s ease;
    background:
        radial-gradient(120% 90% at 84% 16%, rgba(86, 176, 255, .34), transparent 58%),
        linear-gradient(135deg, #071a33 0%, #0d3566 52%, #0a2648 100%);
}
.home-carousel-slide:nth-child(2) {
    background:
        radial-gradient(120% 90% at 16% 22%, rgba(122, 214, 255, .28), transparent 58%),
        linear-gradient(135deg, #08203c 0%, #123f74 55%, #08203c 100%);
}
.home-carousel-slide.is-active { opacity: 1; visibility: visible; }
.home-carousel-slide > img { width: 100%; height: 100%; object-fit: cover; object-position: center 47%; display: block; cursor: zoom-in; }
.home-carousel-slide:nth-child(2) > img { object-position: center 17%; }
/* 遮罩只压暗、不拦点击：否则点不到下面的图片（点击放大看原图靠它） */
.home-carousel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(4, 22, 49, .58), rgba(5, 25, 56, .26) 50%, rgba(3, 22, 48, 0) 82%), linear-gradient(0deg, rgba(3, 18, 39, .18), transparent 55%); }
.home-carousel-copy { position: absolute; left: clamp(24px, 4vw, 54px); right: 64px; bottom: clamp(28px, 4vw, 52px); max-width: 590px; }
.home-eyebrow { display: block; color: var(--home-cyan); font-size: 11px; font-weight: 700; letter-spacing: 2px; line-height: 1.5; }
.home-carousel-copy h1, .home-carousel-copy h2 {
    margin: 10px 0 6px;
    /* 蓝色渐变标题（与页面主色一致）：白→冰蓝→主蓝→浅蓝，配一层暗投影保证压在照片上也读得清 */
    background: linear-gradient(98deg, #e4f1ff 0%, #8ecbff 34%, #3f8dff 66%, #9fdcff 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 12px rgba(4, 22, 48, .6));
    font-size: clamp(25px, 3.1vw, 39px); line-height: 1.2; font-weight: 700; letter-spacing: .5px;
}
/* 副标题：白色（标题之下、段落之上的一行） */
.home-carousel-copy .home-carousel-subtitle { margin: 0 0 10px; color: #fff; font-size: 17px; font-weight: 600; letter-spacing: .4px; line-height: 1.5; text-shadow: 0 2px 10px rgba(4, 22, 48, .55); }
.home-carousel-copy p { margin: 0; color: rgba(240, 248, 255, .82); font-size: 16px; letter-spacing: .4px; line-height: 1.7; }
.home-carousel-arrow {
    position: absolute; top: 50%; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, .44); border-radius: 50%; color: #fff; background: rgba(4, 25, 53, .54);
    cursor: pointer; transform: translateY(-50%); transition: background .2s, border-color .2s;
}
.home-carousel-arrow:hover { background: rgba(15, 131, 217, .86); border-color: #83ddff; }
.home-carousel-prev { left: 14px; }
.home-carousel-next { right: 14px; }
.home-carousel-dots { position: absolute; z-index: 3; right: 26px; bottom: 17px; display: flex; gap: 7px; }
.home-carousel-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.45); cursor: pointer; transition: width .25s, background .25s; }
.home-carousel-dots button.is-active { width: 22px; background: var(--home-cyan); }
/* ===== Hero 原图放大（点轮播图看原图；教师裁剪后原图另存） ===== */
.hero-viewer {
    position: fixed; inset: 0; z-index: 1500; display: flex; align-items: center; justify-content: center;
    padding: 28px; background: rgba(2, 10, 24, .88); backdrop-filter: blur(5px);
}
.hero-viewer[hidden] { display: none !important; }
.hero-viewer-img {
    max-width: 92vw; max-height: 84vh; border-radius: 10px; background: #08182f;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.hero-viewer-close {
    position: absolute; top: 18px; right: 18px; display: grid; width: 38px; height: 38px; place-items: center;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; color: #eaf6ff;
    background: rgba(6, 26, 50, .7); cursor: pointer; font-size: 16px;
}
.hero-viewer-close:hover { background: rgba(22, 96, 156, .9); border-color: rgba(131, 221, 255, .8); }
.hero-viewer-caption { position: absolute; right: 0; bottom: 16px; left: 0; margin: 0; color: rgba(214, 235, 252, .7); font-size: 12px; text-align: center; }
@media (max-width: 600px) {
    .hero-viewer { padding: 12px; }
    .hero-viewer-img { max-height: 76vh; }
}
.home-panel {
    min-width: 0; color: var(--home-text); border: 1px solid var(--home-line); border-radius: 15px;
    background: linear-gradient(145deg, rgba(9, 37, 77, .96), rgba(7, 29, 63, .94));
    box-shadow: 0 14px 38px rgba(0, 0, 0, .16);
}
.weekly-notice { min-height: 350px; padding: 25px 23px 20px; display: flex; flex-direction: column; }
.home-panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.home-panel-heading h2 { margin: 4px 0 0; color: var(--home-text); font-size: 21px; line-height: 1.4; font-weight: 700; }
.home-panel-heading h2 > i { color: var(--home-cyan); margin-right: 7px; }
.home-live-badge { flex: none; padding: 4px 9px; border-radius: 999px; color: #83e9c5; background: rgba(43, 202, 156, .1); font-size: 11px; }
.home-live-badge i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: #50e1b1; box-shadow: 0 0 9px #50e1b1; }
.weekly-notice-tabs { display: flex; gap: 7px; margin-top: 12px; }
.weekly-notice-tabs[hidden] { display: none; }
.weekly-notice-tabs button { padding: 5px 10px; border: 1px solid rgba(141, 194, 234, .2); border-radius: 999px; background: transparent; color: rgba(224, 239, 253, .7); font: inherit; font-size: 11px; cursor: pointer; }
.weekly-notice-tabs button.is-active { border-color: rgba(80, 212, 243, .65); background: rgba(80, 212, 243, .12); color: #fff; }
.weekly-notice-tabs button span { display: inline-grid; min-width: 16px; height: 16px; margin-left: 3px; place-items: center; border-radius: 999px; background: rgba(80, 212, 243, .2); font-size: 10px; }
.weekly-notice-list { display: grid; gap: 0; max-height: 290px; overflow-y: auto; margin: 8px 0 0; padding: 0; list-style: none; }
.weekly-notice-list li { border-top: 1px solid rgba(141, 194, 234, .11); }
.weekly-notice-item { display: grid; width: 100%; grid-template-columns: 8px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 65px; padding: 9px 2px; border: 0; background: transparent; color: rgba(224, 239, 253, .82); text-align: left; font: inherit; font-size: 14px; line-height: 1.6; cursor: pointer; transition: color .2s; }
.weekly-notice-item:hover, .weekly-notice-item:focus-visible { color: #fff; }
.weekly-notice-item > span:last-child { min-width: 0; }
.notice-main { display: grid; gap: 3px; min-width: 0; }
.notice-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notice-date { color: rgba(141, 194, 234, .72); font-size: 11.5px; letter-spacing: .2px; }
.notice-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--home-cyan); box-shadow: 0 0 8px rgba(80,212,243,.6); }
.weekly-notice-empty { padding: 16px 2px; color: rgba(224, 239, 253, .55); font-size: 13px; }
.home-notice-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 13, 31, .72); }
.home-notice-modal[hidden] { display: none; }
body.home-notice-open { overflow: hidden; }
.home-notice-dialog { position: relative; width: min(620px, 100%); max-height: min(80vh, 720px); overflow: auto; padding: 28px; border: 1px solid rgba(125, 196, 242, .24); border-radius: 18px; background: linear-gradient(145deg, #09254d, #071d3f); color: #e0effd; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); }
.home-notice-close { position: absolute; top: 12px; right: 15px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #d7e9fa; font-size: 25px; cursor: pointer; }
.home-notice-dialog h2 { margin: 10px 36px 16px 0; color: #fff; font-size: 22px; line-height: 1.4; }
.home-notice-body { color: rgba(240, 248, 255, .88); font-size: 15px; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.home-notice-personal { display: grid; gap: 14px; margin-top: 16px; }
.home-notice-personal[hidden] { display: none; }
.home-notice-personal > div { padding: 12px 14px; border-left: 2px solid var(--home-cyan); border-radius: 0 9px 9px 0; background: rgba(255,255,255,.06); }
.home-notice-personal strong { color: #8be6f7; font-size: 12px; }
.home-notice-personal p { margin: 6px 0 0; color: rgba(240, 248, 255, .88); line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.home-notice-personal small { color: rgba(224, 239, 253, .55); }
.home-panel-more { color: #60d7f3; font-size: 14px; white-space: nowrap; }
.home-panel-more:hover { color: #fff; }
.weekly-notice > .home-panel-more { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(141, 194, 234, .11); }
/* 2026-10-19 二次调整：本行恢复「左栏 + 优秀作业」两列 —— 左栏权重仍是原来的 .78fr（宽度和原
   「快捷功能」那一栏一致），现在装「实验分类」；原来第三栏的 .72fr 让给优秀作业（1.9 + .72 = 2.62），
   于是「优秀作业」左侧边界与它原先在中间栏时相比只往右挪了一个左栏宽度，不会再变成整行铺满。
   快捷功能与友情链接仍在下方 .home-resources（物理公式之上）。 */
.home-showcase-grid { display: grid; grid-template-columns: minmax(250px, .78fr) minmax(0, 2.62fr); gap: 16px; margin-top: 18px; align-items: stretch; }
.quick-panel, .assignment-showcase, .category-panel { padding: 21px; }
.quick-panel { position: relative; z-index: 3; overflow: visible; }
.category-panel { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; }
/* 与「学习通知」面板同款：底部链接吸底（面板被优秀作业拉高时不留一片空底） */
.category-panel > .home-panel-more { margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(141, 194, 234, .11); font-size: 13px; }
/* 快捷功能现在嵌在「实验资源」面板里：不再自带内边距（外层 .home-resources 已有） */
.home-resources .quick-panel { padding: 0; }
.quick-panel .home-panel-heading, .assignment-showcase .home-panel-heading { margin-bottom: 17px; }
.category-panel .home-panel-heading { margin-bottom: 14px; }
.quick-panel .home-panel-heading h2, .assignment-showcase .home-panel-heading h2, .category-panel .home-panel-heading h2 { font-size: 20px; }
.quick-link-grid { display: grid; grid-template-columns: 1fr; gap: 9px; }
.quick-action { position: relative; min-width: 0; }
.quick-action:hover, .quick-action:focus-within, .quick-action.is-open { z-index: 20; }
.quick-link-card {
    position: relative; width: 100%; min-width: 0; min-height: 84px; padding: 12px;
    display: flex; flex-direction: row; align-items: center; gap: 11px; border: 1px solid rgba(105, 178, 235, .18);
    border-radius: 11px; background: linear-gradient(145deg, rgba(20, 63, 112, .88), rgba(10, 39, 81, .84));
    color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s;
}
.quick-link-card:hover { transform: translateY(-3px); border-color: rgba(91, 210, 249, .55); background: rgba(18, 76, 135, .9); color: #fff; }
.quick-link-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(140deg, #37b7fb, #1478dc); font-size: 16px; }
.quick-link-amber .quick-link-icon { background: linear-gradient(140deg, #ffc85d, #ed8f32); }
.quick-link-teal .quick-link-icon { background: linear-gradient(140deg, #44dfcc, #16aaac); }
.quick-link-violet .quick-link-icon { background: linear-gradient(140deg, #9a8aff, #6c63d8); }
.quick-link-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; }
.quick-link-card strong { color: #f3f9ff; font-size: 14px; }
.quick-link-card small { margin-top: 3px; color: var(--home-muted); font-size: 12px; line-height: 1.4; }
.quick-link-arrow { flex: none; margin-left: auto; color: rgba(131, 213, 247, .76); font-size: 10px; transition: transform .2s; }
.quick-action.is-open .quick-link-arrow { transform: rotate(180deg); }
/* ===== 快捷入口展开框：沿用左上角「实验目录」抽屉的视觉语言（2026-10-17 改） =====
   同一套面板（深蓝底 + 16px 圆角 + 大投影 + 头部 eyebrow/标题/数量徽标）、
   分类行（序号 / 名称 / 项数 / 箭头，展开时渐变下划线）、条目（悬停渐变下划线）。
   分类下的实验在【分类下方】内联展开（不再向右浮出），悬停/聚焦/点击分类即可展开。 */
.quick-link-menu {
    position: absolute; z-index: 25; top: 0; left: 100%; width: min(268px, calc(100vw - 100% - 48px));
    max-height: min(360px, 52vh); overflow-y: auto; padding: 15px;
    border: 1px solid rgba(93, 175, 236, .27); border-radius: 16px;
    background: rgba(4, 21, 47, .97); box-shadow: 0 24px 70px rgba(0, 0, 0, .48);
    backdrop-filter: blur(20px);
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
    transition: opacity .16s, transform .16s, visibility .16s;
}
.quick-action:hover .quick-link-menu, .quick-action:focus-within .quick-link-menu, .quick-action.is-open .quick-link-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
.quick-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 2px 11px; border-bottom: 1px solid rgba(127, 187, 230, .17); }
.quick-menu-eyebrow { display: block; color: rgba(126, 228, 245, .8); font-size: 9px; letter-spacing: 2px; }
.quick-menu-heading strong { display: block; margin-top: 3px; color: #f0f9ff; font-size: 15px; }
.quick-menu-total { flex: none; padding: 4px 8px; border: 1px solid rgba(80, 212, 243, .22); border-radius: 999px; color: #7ee4f5; font-size: 10px; white-space: nowrap; }
.quick-menu-category { position: relative; margin-top: 5px; overflow: visible; border: 1px solid transparent; border-radius: 9px; transition: background .22s, border-color .22s; }
.quick-menu-category:hover, .quick-menu-category:focus-within, .quick-menu-category.is-expanded { border-color: rgba(87, 179, 235, .14); background: rgba(15, 51, 88, .38); }
.quick-menu-category-trigger {
    position: relative; display: grid; width: 100%; grid-template-columns: 22px minmax(0, 1fr) auto 13px;
    gap: 8px; align-items: center; padding: 10px 9px; border: 0; border-radius: 9px;
    background: transparent; color: #e7f4ff; font: inherit; text-align: left; cursor: pointer;
}
.quick-menu-category-trigger::before { content: ""; position: absolute; bottom: 1px; left: 9px; width: calc(100% - 18px); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #35c9ef, #637eff); transform: scaleX(0); transform-origin: left; transition: transform .38s ease; }
.quick-menu-category-trigger:hover::before, .quick-menu-category-trigger:focus-visible::before, .quick-menu-category.is-expanded .quick-menu-category-trigger::before { transform: scaleX(1); }
.quick-menu-category-index { color: #58d5f1; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.quick-menu-category-name { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.quick-menu-category-count { color: rgba(196, 222, 242, .53); font-size: 10px; white-space: nowrap; }
.quick-menu-category-trigger > i { color: #63cfe9; font-size: 10px; transition: transform .22s; }
.quick-menu-category:hover .quick-menu-category-trigger > i, .quick-menu-category:focus-within .quick-menu-category-trigger > i, .quick-menu-category.is-expanded .quick-menu-category-trigger > i { transform: rotate(90deg); }
.quick-menu-submenu {
    display: none; margin: 0 8px 8px 30px; padding: 2px 0 2px 9px;
    border: 0; border-left: 1px solid rgba(99, 192, 240, .22);
    border-radius: 0; background: transparent;
}
.quick-menu-category:hover > .quick-menu-submenu, .quick-menu-category:focus-within > .quick-menu-submenu, .quick-menu-category.is-expanded > .quick-menu-submenu {
    display: block; animation: quickMenuOpen .18s ease both;
}
@keyframes quickMenuOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.quick-menu-item { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 7px; color: rgba(217, 237, 252, .8); font-size: 13px; line-height: 1.45; transition: color .2s, background .2s; }
.quick-menu-item:hover, .quick-menu-item:focus-visible { outline: none; color: #fff; background: rgba(26, 102, 155, .22); }
.quick-menu-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-menu-item i { flex: none; color: #72d9f5; font-size: 10px; }
.quick-menu-link::after { content: ""; position: absolute; right: 10px; bottom: 2px; left: 10px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #36c9ed, #6584ff); transform: scaleX(0); transform-origin: left; transition: transform .42s cubic-bezier(.2, .75, .25, 1); }
.quick-menu-link:hover::after, .quick-menu-link:focus-visible::after { transform: scaleX(1); }
.quick-menu-empty { margin: 0; padding: 13px 4px 5px; color: var(--home-muted); font-size: 12px; line-height: 1.6; }
.home-panel-note { color: rgba(183, 211, 235, .62); font-size: 12px; white-space: nowrap; }
/* ===== 优秀作业：中心主卡片 + 左右错位副卡片的层叠式轮播（2026-10-16 重做） =====
   起因：原来是「左图右文」的普通横向卡片，看不出前后景深。现改为封面工作台：
   主卡片居中、最大最亮；相邻两份缩略图向两侧错位、**被主卡片压掉一截**，形成层叠。
   切换靠 left + transform 的平滑过渡 —— 副卡片走进中央并放大成主卡片，连续成 Carousel。
   几何：舞台 aspect-ratio 决定主卡片高宽比（46% × 34%W ÷ …= 1.35，近 4:3）。
     主卡 left 27%、副卡 left -2% / 56%，副卡 scale .82 → 视觉盒 2.1%~39.9% / 60.1%~97.9%，
     两侧各被主卡压掉约 12.9% 舞台宽（= 主卡宽度的 28%），且都留在 0~100% 内不越出面板。 */
.work-carousel { position: relative; }
/* 窄屏时左右副卡的「视觉盒」会超出舞台（左 -8%/右 24% + 84% 宽），
   不裁剪就会越过面板圆角、一直顶到屏幕边缘。裁剪放在面板这一层：
   裁剪线正好是面板圆角，看起来像「卡片从面板边缘滑出去」，桌面端卡片本就在舞台内，视觉零变化。 */
.assignment-showcase { overflow: hidden; }
.work-stage { position: relative; aspect-ratio: 100 / 36; perspective: 1400px; }
/* 卡片 = 图片 + 深蓝信息栏（参考「优秀作业展示」版式）：
   图片占满剩余高度，底部固定一块信息栏放标题 / 实验名·学生 / 徽标·日期。
   2026-10-17：主卡加宽到 64%（宽幅横卡，1.78:1），左右卡只露约 18% 舞台宽。 */
.work-card {
    position: absolute; top: 0; left: 18%; width: 64%; height: 100%; border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid rgba(105, 178, 235, .2); cursor: pointer;
    background: linear-gradient(160deg, rgba(19, 55, 98, .94), rgba(8, 28, 60, .97));
    transition: left .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1),
                opacity .45s ease, border-color .3s ease, box-shadow .3s ease;
}
/* 玻璃质感：内描边 + 顶部高光带，而不是一味加阴影 */
.work-card::before {
    content: ''; position: absolute; z-index: 4; inset: 0 auto auto 0; width: 100%; height: 46%;
    background: linear-gradient(180deg, rgba(190, 228, 255, .1), transparent); pointer-events: none;
}
/* 悬停光效：主卡片四周的淡蓝辉光（单独一层，press 时不干扰封面） */
.work-card::after {
    content: ''; position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at 50% 45%, rgba(88, 200, 245, .16), transparent 68%);
    transition: opacity .3s ease;
}
.work-card.is-center { left: 18%; z-index: 3; transform: scale(1); opacity: 1; border: 2px solid rgba(226, 245, 255, .7); box-shadow: 0 18px 44px rgba(4, 28, 60, .46); }
.work-card.is-left, .work-card.is-right { z-index: 2; transform: scale(.8); opacity: .58; }
.work-card.is-left, .work-card.is-out-left { left: -6%; }
.work-card.is-right, .work-card.is-out-right { left: 42%; }
.work-card.is-out-left, .work-card.is-out-right { z-index: 1; transform: scale(.66); opacity: 0; pointer-events: none; }
/* 左右副卡片的视觉盒（scale .8，transform-origin 保持 center）：
   左卡 0~51.2%、右卡 48.8~100%（相对舞台宽），两侧各露约 18%，其余被主卡压住。 */
.work-card.is-center:hover {
    border-color: rgba(255, 255, 255, .92);
    box-shadow: 0 0 0 1px rgba(96, 215, 243, .28), 0 22px 50px rgba(5, 34, 70, .52), 0 0 38px rgba(58, 173, 235, .3);
}
.work-card.is-center:hover { transform: scale(1.034); }
.work-card.is-center:hover::after { opacity: 1; }
.work-card.is-left:hover, .work-card.is-right:hover { opacity: .82; }
.work-cover { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: block; }
/* object-position: top —— 报告第 1 页是竖版，裁切时优先留抬头（实验名/姓名/学号那几行）。
   ⚠️ z-index 必须给：图片是 JS 动态插进来的，若哪天又插到了兜底封面**前面**，靠 z-index 也压得住
   （真踩过：插到前面 → 真图被 .work-cover-gen 整块盖住，图片加载成功但屏幕上还是色块）。 */
.work-cover img { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity .4s ease; }
.work-cover img.is-ready { opacity: 1; }
.work-cover.is-loading img { opacity: 0; }
/* PPTX 首页封面（2026-10-19）：服务端取不到 docProps 缩略图时，用 pptx-preview 在浏览器里渲第 1 页，
   结果是一段 DOM（不是图片），按 contain 缩放塞进封面（四周留深蓝底，整页可见、不裁字）。
   ⚠️ z-index:2 与 .work-cover img 同级 —— 必须压住 z-index:1 的兜底封面（同上面那条注释的坑）。 */
.work-cover-slide { position: absolute; z-index: 2; inset: 0; overflow: hidden; background: #0a1b33; user-select: none; -webkit-user-select: none; }
.work-cover-slide > .pptx-preview-slide-wrapper { position: absolute; margin: 0 !important; box-shadow: none; }
/* 精选视频：封面中央的播放按钮（与实验页 video-play-card 的播放钮同款心智；
   pointer-events:none —— 点击由卡片本身接管，避免点在按钮上却不触发切换/打开） */
.work-play {
    position: absolute; z-index: 3; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
    display: grid; place-items: center; border-radius: 50%; color: #fff; pointer-events: none;
    background: rgba(22, 93, 255, .9); box-shadow: 0 6px 22px rgba(0, 0, 0, .42);
    transition: transform .2s ease, background .2s ease;
}
.work-play svg { width: 26px; height: 26px; margin-left: 3px; }
.work-card:hover .work-play, .work-card.is-center:hover .work-play { transform: scale(1.1); background: #165DFF; }
/* 取不到真实截图时的兜底封面：做成"一页报告"的样子（顶部色条 + 标题 + 模拟正文行 + 网格底纹），
   不是一块纯色 —— 但它始终只是兜底，正常应当由 pdf.js（报告）或 PPT 内嵌缩略图（汇报）顶上。 */
.work-cover-gen { position: absolute; z-index: 1; inset: 0; padding: 8% 9%; display: flex; flex-direction: column; overflow: hidden; }
.work-cover-report { background: linear-gradient(158deg, rgba(26, 71, 122, .96), rgba(9, 30, 64, .98)); }
.work-cover-preview { background: linear-gradient(158deg, rgba(84, 58, 24, .94), rgba(38, 24, 10, .98)); }
/* 精选视频（2026-10-18 加）：底色偏靛蓝，顶条用暖色，与「报告/汇报」一眼可分 */
.work-cover-video { background: linear-gradient(158deg, rgba(28, 60, 116, .96), rgba(10, 20, 48, .98)); }
.work-cover-gen::before {
    content: ''; position: absolute; inset: 0; opacity: .55; pointer-events: none;
    background-image: linear-gradient(rgba(126, 192, 240, .07) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(126, 192, 240, .07) 1px, transparent 1px);
    background-size: 24px 24px;
}
.work-cover-gen::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #37b7fb, #6c63d8);
}
.work-cover-preview::after { background: linear-gradient(90deg, #ffc85d, #ed8f32); }
.work-cover-video::after { background: linear-gradient(90deg, #ff8a70, #ff5d92); }
.wcg-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 3px 9px; border: 1px solid rgba(120, 205, 245, .28); border-radius: 999px; color: #8fdcf3; background: rgba(20, 60, 100, .5); font-size: 10px; letter-spacing: .4px; }
.work-cover-preview .wcg-badge { border-color: rgba(255, 190, 120, .3); color: #ffcb8a; background: rgba(76, 46, 16, .5); }
.work-cover-video .wcg-badge { border-color: rgba(255, 150, 170, .32); color: #ffb3c7; background: rgba(72, 24, 46, .5); }
.wcg-title { position: relative; margin: 8px 0 auto; color: #f0f7ff; font-size: 15px; font-weight: 700; line-height: 1.45; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wcg-lines { position: relative; display: grid; gap: 6px; margin-top: 10px; }
.wcg-lines i { display: block; height: 6px; border-radius: 3px; background: rgba(154, 202, 236, .17); }
.wcg-lines i:nth-child(2) { width: 86%; }
.wcg-lines i:nth-child(3) { width: 68%; }
.wcg-score { position: absolute; right: 8%; bottom: 7%; color: rgba(255, 209, 138, .88); font-size: 12px; font-weight: 700; letter-spacing: .3px; }
/* 封面正在准备（pdf.js 渲染 / 缩略图请求中）时的呼吸提示，切换时看得见"在动" */
.work-cover.is-pending::after {
    content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(140, 205, 245, .1) 50%, transparent 80%);
    animation: workShimmer 1.4s ease-in-out infinite;
}
@keyframes workShimmer { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
/* ===== 卡片信息栏（图片下方，参考「优秀作业展示」） ===== */
.work-card-info {
    position: relative; z-index: 5; flex: none; padding: 8px 12px;
    background: linear-gradient(180deg, rgba(15, 40, 76, .98), rgba(6, 22, 46, .99));
    border-top: 1px solid rgba(120, 190, 235, .18);
}
.work-card-title {
    display: block; overflow: hidden; color: #f2f9ff; font-size: 13.5px; font-weight: 700;
    line-height: 1.35; white-space: nowrap; text-overflow: ellipsis;
}
.work-card-meta {
    display: block; overflow: hidden; margin-top: 2px; color: rgba(178, 208, 232, .74);
    font-size: 10.5px; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis;
}
.work-card-score {
    display: inline-block; margin-left: 4px; padding: 0 6px; border: 1px solid rgba(255, 194, 102, .3);
    border-radius: 999px; color: #ffcf87; font-size: 10px; font-weight: 600;
}
.work-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(120, 190, 235, .12);
}
.work-card-badge { display: inline-flex; align-items: center; gap: 5px; color: #ffc766; font-size: 11px; font-weight: 600; letter-spacing: .5px; }
.work-card-badge i { font-size: 10px; }
.work-card-badge.is-preview { color: #ffb066; }
.work-card-badge.is-video { color: #ff9db4; }
.work-card-date { flex: none; color: rgba(168, 200, 226, .62); font-size: 11px; font-variant-numeric: tabular-nums; }
.work-detail { margin-top: 11px; }
.work-detail.is-swap { animation: workSwapIn .4s ease; }
@keyframes workSwapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.work-note { margin: 0; color: var(--home-muted); font-size: 12px; line-height: 1.7; }
.work-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 6px; color: rgba(190, 218, 240, .72); font-size: 12px; }
.work-meta[hidden] { display: none; }
.work-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.work-meta i { color: rgba(112, 208, 245, .75); font-size: 11px; }
.work-empty { margin: 0; padding: 26px 4px 34px; color: var(--home-muted); font-size: 13px; line-height: 1.8; }
.work-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
/* ⚠️ 这条必须留着：下面给了 display:flex，就会盖过 UA 的 [hidden]（同 .filters[hidden] 那个坑） */
.work-carousel-controls[hidden] { display: none; }
.work-nav { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(117, 185, 233, .27); border-radius: 50%; color: #c7eaff; background: rgba(20, 66, 111, .55); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.work-nav:hover { border-color: var(--home-cyan); color: #fff; background: rgba(28, 96, 150, .7); }
.work-dots { display: flex; align-items: center; gap: 7px; }
.work-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(150, 196, 230, .3); cursor: pointer; transition: width .25s ease, background .25s ease; }
.work-dots button:hover { background: rgba(150, 196, 230, .55); }
.work-dots button.is-active { width: 20px; background: linear-gradient(90deg, #37b7fb, #6fd0f5); }
/* ===== PPTX 在线预览（点开预习汇报卡片） ===== */
.work-preview-modal {
    position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: rgba(2, 12, 28, .74); backdrop-filter: blur(6px);
}
.work-preview-modal[hidden] { display: none; }
.work-preview-dialog {
    display: flex; flex-direction: column; width: min(1020px, 100%); max-height: calc(100dvh - 48px);
    border: 1px solid rgba(105, 178, 235, .28); border-radius: 14px; overflow: hidden;
    background: #08182f; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.work-preview-head {
    flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 15px; border-bottom: 1px solid rgba(120, 190, 235, .16);
}
.work-preview-head strong { min-width: 0; overflow: hidden; color: #f0f8ff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.work-preview-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.work-preview-download {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(80, 212, 243, .26);
    border-radius: 8px; color: #8fe6f7; font-size: 12px; text-decoration: none;
}
.work-preview-download:hover { background: rgba(28, 125, 174, .22); color: #fff; }
/* 上面这条 display:inline-flex 会盖掉 UA 的 [hidden]{display:none}（作者样式优先于 UA），
   不补这一条 JS 里设 link.hidden=true 就等于没设 —— 视频预览时「下载原文件」会照旧露出来。 */
.work-preview-download[hidden] { display: none; }
.work-preview-close {
    display: grid; width: 30px; height: 30px; place-items: center; padding: 0;
    border: 1px solid transparent; border-radius: 8px; color: #cfe8fa; background: transparent; cursor: pointer; font-size: 14px;
}
.work-preview-close:hover { border-color: rgba(120, 190, 235, .3); background: rgba(28, 125, 174, .18); color: #fff; }
.work-preview-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; background: #08182f; }
.work-preview-stage { margin: 0 auto; }
/* pptx-preview 默认给 wrapper 固定高度 + 内部 overflow-y:auto，会和弹层的滚动叠成两层。
   列表模式下让 wrapper 自然撑高，只保留 #workPreviewBody 这一层滚动。 */
.work-preview-stage .pptx-preview-wrapper {
    height: auto !important; max-height: none !important; overflow: visible !important;
}
.work-preview-pdf { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.work-preview-pdf-page { width: 100%; max-width: 960px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.work-preview-pdf-page canvas { display: block; width: 100%; height: auto; }
/* 精选视频（2026-10-18 加）：B站/YouTube 用内嵌播放器，mp4 直链用 <video>，
   两者都在同一个弹层里、上下左右自适应，不再跳出去开新标签页。 */
.work-preview-video { display: flex; justify-content: center; }
.work-preview-video iframe,
.work-preview-video video {
    display: block; width: min(960px, 100%); max-height: calc(90vh - 96px);
    border: 0; border-radius: 8px; background: #000;
}
.work-preview-video iframe { aspect-ratio: 16 / 9; height: auto; }
.work-preview-loading, .work-preview-error { padding: 54px 12px; color: rgba(190, 218, 240, .8); font-size: 13px; line-height: 1.8; text-align: center; }
.work-preview-error a { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 8px; color: #fff; background: rgba(22, 120, 179, .8); text-decoration: none; }
.work-preview-error a:hover { background: #167fe0; }
/* 学生/游客没有下载权时，预览失败的位置只给一句提示（不给链接） */
.work-preview-hint { display: block; margin-top: 10px; color: rgba(190, 218, 240, .62); font-size: 12px; line-height: 1.7; }
.home-resources { padding: 21px 18px; }
/* ===== 实验资源（2026-10-19）：左「快捷功能 + 实验分类」，右「友情链接」 ===== */
.home-resources-grid { display: grid; grid-template-columns: minmax(0, 1.42fr) minmax(230px, .72fr); gap: 24px; align-items: start; }
.resource-quick { position: relative; z-index: 3; min-width: 0; }
.resource-links { min-width: 0; }
/* 快捷卡片原先在窄侧栏里是单列，放进资源面板后排两列 */
.resource-quick .quick-link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* 实验分类目录：原「左上角三条杠」抽屉的内容原样内联（2026-10-19 起装在「优秀作业」左边的
   .category-panel 里）—— 去掉固定定位/深色底/阴影/滚动条，保留 .experiment-directory 下那套
   分类行与悬停展开的样式（轮次徽标也照旧，它的选择器是按 .experiment-directory 作用域的）。 */
.experiment-directory.is-inline {
    position: static; width: auto; max-height: none; overflow: visible; margin: 0;
    padding: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none; backdrop-filter: none;
    visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition: none;
}
.experiment-directory.is-inline .mobile-category-links { margin: 0; }
.resource-content .home-panel-heading h2 { font-size: 21px; }
.resource-caption { color: rgba(175, 207, 233, .62); font-size: 12px; }
.resource-desc { margin: 7px 0 14px; color: var(--home-muted); font-size: 13px; }
.resource-link-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.resource-link-list li { min-width: 0; }
.resource-link-action { display: flex !important; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 6px 1px !important; color: rgba(221, 238, 251, .86) !important; border: 0 !important; background: transparent !important; font-size: 13px !important; text-decoration: none; }
.resource-link-action:hover { color: #fff !important; background: transparent !important; }
.resource-link-icon { flex: none; width: 32px; height: 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(103, 186, 238, .2); border-radius: 8px; color: #64d4f4; background: rgba(25, 96, 154, .22); }
.resource-link-icon img { width: 22px; height: 22px; object-fit: contain; }
.resource-link-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-link-arrow { margin-left: auto; color: rgba(103, 195, 238, .65); font-size: 11px; }
/* 教师/管理员侧「点击统计徽标」（click_stats_badge.js 会把「链接 + 徽标」包进 .stat-cluster）：
   整条包成 flex、链接可收缩、名称走省略号 —— 否则徽标（19 次 · 9 人）会把窄列撑破，
   线上实测溢出 48px、徽标被面板边缘裁掉（2026-10-17 用户报障）。 */
.resource-link-list li { container-type: inline-size; }
.resource-link-list .stat-cluster { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; }
.resource-link-list .stat-cluster > .resource-link-action { flex: 1 1 auto; min-width: 0; gap: 7px; }
.resource-link-list .stat-cluster .resource-link-icon { width: 26px; height: 26px; }
/* 有徽标时省掉行尾外链箭头：它和徽标抢同一段空间，而开头的图标已经表达「外链」 */
.resource-link-list .stat-cluster .resource-link-arrow { display: none; }
.resource-link-list .stat-cluster > .stat-badge { flex: 0 0 auto; font-size: 11px; padding: 2px 5px; gap: 2px; }
/* 条目窄于 240px（多列布局 / 侧栏被压缩）时放不下徽标：整条收起，名称优先 */
@container (max-width: 240px) {
    .resource-link-list .stat-cluster > .stat-badge { display: none; }
}
.resource-empty { padding: 14px 0; color: var(--home-muted); font-size: 13px; }
.formula-exhibition { position: relative; z-index: 1; margin-top: 16px; padding: 24px 26px; }
.formula-exhibition > .home-panel-heading { margin-bottom: 16px; }
/* 标题走衬线斜体 + 冷色渐变：与「方程之美」这行小字一起把这块做成展览式的题头。
   ⚠️ 选择器必须带上 .formula-exhibition 前缀（0,2,0）：上面的
   `.home-panel-heading h2 { font-size: 21px; color: var(--home-text) }` 是 (0,1,1)，
   只用单个类名会被它按住 —— 字号卡在 21px、渐变被不透明的 color 盖掉。 */
.formula-exhibition .formula-exhibition-title {
    margin-top: 6px;
    font-family: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    font-size: clamp(21px, 2.2vw, 30px);
    font-style: italic; font-weight: 500; letter-spacing: .3px; line-height: 1.3;
    color: transparent;
    background: linear-gradient(96deg, #ffffff 0%, #d7ecff 30%, #7fd9f7 66%, #a89bff 100%);
    -webkit-background-clip: text; background-clip: text;
}
.formula-exhibition .formula-exhibition-subtitle {
    margin-top: 8px;
    font-size: 11px; letter-spacing: .52em; text-indent: .52em;
    color: rgba(164, 202, 230, .62);
}
.formula-exhibition .formula-stage {
    position: relative; inset: auto; z-index: 1; display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
    width: 100%; max-width: none; height: auto; margin: 0; padding: 0;
    pointer-events: auto;
}
.formula-exhibition .fc-slot {
    position: relative; inset: auto; width: 100%; min-width: 0;
    animation-duration: 11s;
}
.formula-exhibition .fc-body {
    height: 124px; padding: 10px 12px;
    border-color: rgba(120, 202, 244, .2);
    background: rgba(7, 35, 72, .28); opacity: .56;
}
.formula-exhibition .fc-name { font-size: 12px; }
.formula-exhibition .fc-tag { font-size: 9px; }
.formula-exhibition .fc-formula { font-size: 18px; }
.formula-exhibition .fc-plain { font-size: 13px; }
.formula-exhibition .fc-foot { font-size: 9px; }
.formula-exhibition .fc-slot:hover .fc-body,
.formula-exhibition .fc-slot:focus-visible .fc-body { opacity: .96; }
.footer-new { position: relative; z-index: 1; margin-top: 18px; padding: 24px; border-top: 1px solid rgba(94, 178, 231, .12); background: rgba(3, 15, 34, .85); }
.footer-new-desc { max-width: 570px; color: rgba(194, 219, 240, .58); font-size: 11px; }
.footer-new-right { color: rgba(194, 219, 240, .43); font-size: 10px; }
.footer-new-logo { color: #e8f7ff; font-size: 15px; }

.formula-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fc-slot { --fc-wmin: 132px; --fc-wmid: 15vw; --fc-wmax: 218px; }
.fc-body { height: 116px; padding: 10px 12px; border-color: rgba(120, 202, 244, .12); background: rgba(7, 35, 72, .3); opacity: .1; backdrop-filter: blur(5px); }
.fc-name { font-size: 11px; }.fc-tag { font-size: 9px; }.fc-formula { font-size: 16px; }.fc-plain { font-size: 12px; }.fc-foot { font-size: 8px; }
.fc-slot-0 { top: 8px; left: 1.2vw; }.fc-slot-1 { bottom: 8px; left: 2vw; }.fc-slot-2 { top: 16px; right: 1.2vw; }.fc-slot-3 { bottom: 8px; right: 2vw; }
.fc-slot:hover .fc-body, .fc-slot:focus-visible .fc-body { opacity: .9; }
.formula-controls { position: absolute; z-index: 4; top: 9px; right: 9px; gap: 5px; margin: 0; opacity: .56; }
.fc-btn { padding: 5px 9px; font-size: 10px; }

@media (max-width: 1200px) {
    .home-dashboard { padding-right: 20px; padding-left: 20px; }
    .nav-menu { gap: 12px; }
    .home-showcase-grid { grid-template-columns: minmax(240px, .78fr) minmax(0, 2.42fr); gap: 13px; }
    .assignment-showcase, .category-panel { padding: 18px; }
    .formula-exhibition .formula-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
    .nav-menu { gap: 10px; }
    .nav-menu a { font-size: 12px; }
    .nav-right .btn-login { margin-left: 8px; padding-left: 10px; }
    .home-hero-grid { grid-template-columns: minmax(0, 1.55fr) minmax(270px, .9fr); }
    .weekly-notice { padding: 22px 19px 17px; }
    .weekly-notice-item { min-height: 58px; font-size: 13px; }
    .home-showcase-grid { grid-template-columns: minmax(210px, .8fr) minmax(0, 1.4fr); }
    .home-resources-grid { grid-template-columns: 1fr; gap: 20px; }
    /* 资源面板变单列后，快捷卡片的悬浮菜单不能再往右飞（会飞出屏幕），改成从卡片下方展开 */
    .resource-quick .quick-link-menu { top: 100%; right: auto; left: 0; width: min(320px, 100%); }
    .resource-link-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px 16px; }
}
@media (max-width: 820px) {
    .nav-menu, .nav-right .btn-login { display: none; }
    .nav-right { margin-left: auto; }
    .home-dashboard { padding-top: 82px; }
    .home-hero-grid { grid-template-columns: 1fr; }
    .home-carousel { height: clamp(320px, 54vw, 410px); }
    .weekly-notice { min-height: auto; }
    .weekly-notice-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .weekly-notice-list li { border: 0; }
    .weekly-notice-item { grid-template-columns: 7px minmax(0, 1fr); align-items: start; min-height: 60px; padding-top: 10px; font-size: 13px; }
    .resource-link-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .formula-stage { position: absolute; inset: 0 0 auto; display: block; width: 100%; max-width: none; height: 290px; margin: 0; padding: 0; order: 0; }
    .fc-slot { position: absolute; top: auto; right: auto; bottom: auto; left: auto; width: clamp(108px, 22vw, 170px); animation: fcFloatMobile 9s ease-in-out infinite; }
    .fc-slot-0 { top: 6px; left: 6px; }
    .fc-slot-1 { top: 6px; right: 6px; }
    .fc-slot-2 { right: 6px; bottom: 6px; }
    .fc-body { height: 84px; padding: 8px 9px; }
}
@media (max-width: 600px) {
    .home-dashboard { padding: 76px 12px 18px; }
    .navbar { height: 62px; padding: 0 12px; }
    .navbar-container { padding: 0; }
    .directory-toggle { margin-right: 10px; }
    .logo { font-size: 14px; letter-spacing: 1px; }
    .logo i { font-size: 18px; }
    .experiment-directory { top: 70px; left: 12px; width: min(390px, calc(100vw - 24px)); max-height: calc(100dvh - 82px); padding: 16px; }
    .home-carousel { height: 330px; border-radius: 13px; }
    .home-carousel-copy { left: 22px; right: 42px; bottom: 43px; }
    .home-carousel-copy h1, .home-carousel-copy h2 { font-size: 28px; }
    .home-carousel-copy .home-carousel-subtitle { font-size: 15px; }
    .home-carousel-copy p { max-width: 300px; font-size: 14px; line-height: 1.65; }
    .home-carousel-arrow { width: 30px; height: 30px; }
    .home-carousel-prev { left: 8px; }.home-carousel-next { right: 8px; }
    .weekly-notice { padding: 19px 16px 15px; }
    .home-panel-heading h2 { font-size: 19px; }
    .weekly-notice-list { grid-template-columns: 1fr; gap: 0; }
    .weekly-notice-list li { border-top: 1px solid rgba(141, 194, 234, .11); }
    .weekly-notice-item { min-height: 52px; padding-top: 0; align-items: center; font-size: 13px; }
    .home-notice-modal { padding: 12px; }
    .home-notice-dialog { padding: 23px 19px; }
    .home-notice-dialog h2 { font-size: 19px; }
    .home-showcase-grid { grid-template-columns: 1fr; gap: 11px; margin-top: 11px; }
    .assignment-showcase, .home-resources, .category-panel { padding: 18px; }
    .resource-quick .quick-link-grid { grid-template-columns: 1fr; }
    .quick-panel .home-panel-heading, .assignment-showcase .home-panel-heading, .category-panel .home-panel-heading { margin-bottom: 15px; }
    .quick-link-card { min-height: 80px; padding: 12px; }
    .quick-link-card strong { font-size: 14px; }
    .quick-link-card small { font-size: 12px; }
    .quick-link-menu { position: fixed; top: auto; right: 12px; bottom: 12px; left: 12px; width: auto; max-height: min(52vh, 420px); padding: 15px; }
    .quick-menu-submenu { margin: 0 8px 8px 20px; padding: 2px 0 2px 8px; }
    .quick-menu-category:not(.is-expanded) > .quick-menu-submenu { display: none; }
    /* 优秀作业：手机上只露主卡 + 两侧一条"邻卡"（宽度 84%，两侧各约 8% 舞台宽） */
    .work-stage { aspect-ratio: 100 / 62; }
    .work-card { width: 84%; }
    .work-card.is-center { left: 8%; }
    .work-card.is-left, .work-card.is-out-left { left: -8%; }
    .work-card.is-right, .work-card.is-out-right { left: 24%; }
    .work-card.is-left, .work-card.is-right { transform: scale(.8); opacity: .5; }
    .work-detail { margin-top: 10px; }
    .work-card-info { padding: 9px 11px 8px; }
    .work-card-title { font-size: 13px; }
    .work-card-meta { font-size: 10px; }
    .work-note { font-size: 12px; }
    .work-meta { gap: 9px; font-size: 11px; }
    .work-play { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
    .work-play svg { width: 21px; height: 21px; }
    .work-preview-video iframe, .work-preview-video video { max-height: calc(90vh - 84px); }
    .work-carousel-controls { gap: 11px; margin-top: 12px; }
    .home-panel-note { font-size: 10px; }
    .resource-link-list { grid-template-columns: 1fr 1fr; }
    .footer-new { padding: 20px 14px; }
    .footer-new-container { flex-direction: column; text-align: center; }
    .formula-exhibition { padding: 18px 14px; }
    .formula-exhibition .formula-exhibition-title { font-size: 19px; }
    .formula-exhibition .formula-exhibition-subtitle { margin-top: 6px; letter-spacing: .42em; text-indent: .42em; }
    .formula-exhibition .formula-stage { grid-template-columns: 1fr; gap: 9px; }
    .formula-exhibition .fc-slot { width: 100%; }
    .formula-exhibition .fc-body { height: 96px; padding: 9px 11px; }
    .formula-exhibition .fc-name { font-size: 11px; }
    .formula-exhibition .fc-tag { display: inline; font-size: 8px; }
    .formula-exhibition .fc-formula { margin-top: 3px; font-size: 15px; }
    .formula-exhibition .fc-plain { font-size: 11px; }
    .formula-exhibition .fc-foot { margin-top: 3px; font-size: 8px; }
    .formula-controls { display: none; }
}
@media (max-width: 600px) and (hover: none) {
    .quick-action:hover .quick-link-menu, .quick-action:focus-within .quick-link-menu { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); }
    .quick-action.is-open .quick-link-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}
@media (min-width: 601px) and (max-width: 820px) {
    .quick-link-menu { width: 212px; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-gallery-image, .home-carousel-slide, .work-card, .quick-link-card { transition: none; }
    .work-cover.is-pending::after { animation: none; }
}