:root {
    --primary: #2c7a7b;
    --primary-dark: #205e5f;
    --accent: #ed8936;
    --bg: #f4f7f9;
    --ink: #23323f;
    --muted: #7b8a97;
    --line: #e3eaf0;
    --card: #ffffff;
    --danger: #c0392b;
    --ok: #1a7f37;
    --radius: 12px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    color: var(--ink);
    background: var(--bg);
    font-size: 14px;
}

a { color: var(--primary); text-decoration: none; }
h1, h2, h3 { margin: 0; }

.logo-dot {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #5fc3b1, var(--primary));
    box-shadow: 0 0 0 4px rgba(44, 122, 123, .15);
}

/* ============ 按钮 ============ */
.btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: 14px;
    cursor: pointer;
    background: #eef2f5;
    color: var(--ink);
    transition: .15s;
    line-height: 1.5;
}
.btn:hover { filter: brightness(.96); }
.btn.primary { background: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.7); color: var(--primary); border-color: var(--primary); }
.btn.danger { background: #fdf0ee; color: var(--danger); border-color: #f3cfc9; }
.btn.sm { padding: 4px 12px; font-size: 13px; border-radius: 6px; }
.btn.block { width: 100%; }

/* ============ 首页（全屏背景视频/图 · 墨蓝医疗风） ============ */
/* 配色：深海蓝 #063B63 / 墨蓝 #0B4F7A / 按钮蓝 #0F65B8 / 高亮蓝 #1E88E5 */
body.home { background: #063B63; min-height: 100vh; overflow-x: hidden; }

/* 背景层：当前为 SVG 占位图，换成 <video class="home-bg"> 也通用 */
.home-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;            /* <video> 用 */
    background-size: cover;       /* <div> 用 */
    background-position: center;
    will-change: transform;       /* 常驻合成层：俯冲/返回动画结束不降级重栅格，消除最后一帧抖动 */
    backface-visibility: hidden;
}
.home-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(244,250,253,.55) 0%,
        rgba(244,250,253,.00) 16%,
        rgba(244,250,253,.00) 72%,
        rgba(6,59,99,.16) 100%);
}

/* ===== 首页“单页内切换”到二级页：两条时间线并行（加 body.module-open 触发，去类即反向） =====
   时间线 A 背景：俯瞰图(.home-bg)朝被点连接点(--dive-x/--dive-y)变速俯冲放大 + 房间内景图(.room-bg)在其上淡入；
   时间线 B 元素：首页卡片(.hotspots)/提示退场（淡出+随俯冲掠出） + 二级内容图层(.module-layer)淡入升起。
   两线用同一个 .module-open 类同时切换 → 并行；去掉类时所有过渡自动反向，天然支持返回与浏览器前进后退。 */
.room-bg {
    position: fixed; inset: 0; z-index: 2;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; pointer-events: none;
    filter: blur(2px);            /* 镜头模糊（轻）：房间略退到背景，卡片更突出 */
    transform: scale(1.04);       /* 略放大盖住模糊产生的虚边 */
}
/* 房间动态背景视频（有 room-<key>.mp4 的模块）：紧贴内景图正上方、同位同风格；
   .on 由 JS 在“当前打开的模块有视频”时加，视频加载完成前下层内景图兜底 */
.room-bg-video {
    position: fixed; inset: 0; z-index: 2;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0; pointer-events: none;
    filter: blur(2px);
    transform: scale(1.04);
}
body.home.module-open .room-bg-video.on { opacity: 1; }
.room-overlay {
    position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
    background: linear-gradient(180deg, rgba(6,59,99,.42) 0%, rgba(6,59,99,.30) 32%, rgba(6,59,99,.58) 100%);
}
.module-layer {
    position: fixed; inset: 0; z-index: 10; overflow-y: auto;
    opacity: 0; pointer-events: none;   /* 容器只管显隐；标题/卡片的“升入”由各自 JS 动画负责 */
}

/* 进出动画改由 JS（Web Animations API，见 index.php runTransition）显式驱动，正反向严格对称；
   这里不放 CSS 过渡，避免“正向被浏览器跳过、反向却很长”的不对称。下面只定义两态的“到位”静止样式。 */

/* —— 二级态（两条时间线的“到位”状态，瞬时切换，动画交给 WAAPI） —— */
body.home.module-open { overflow: hidden; }
body.home.module-open .home-bg {
    transform: scale(2.6);                 /* 背景：俯冲扎入（原点由 JS 行内设到被点连接点）*/
    will-change: transform;
}
body.home.module-open .home-overlay { opacity: 0; }
body.home.module-open .room-bg     { opacity: 1; }   /* 背景：房间内景淡入盖住俯瞰图 */
body.home.module-open .room-overlay { opacity: 1; }
body.home.module-open .hotspots {
    opacity: 0; transform: scale(1.3); pointer-events: none;   /* 元素：首页卡片随俯冲掠出（原点由 JS 行内设置）*/
}
body.home.module-open .home-hint { opacity: 0; pointer-events: none; }
body.home.module-open .top-nav { opacity: 0; pointer-events: none; }   /* 二级页：隐藏右上登录/角色/导航，仅留左上 logo 作返回 */
body.home.module-open .module-layer { opacity: 1; pointer-events: auto; }   /* 容器显形；内容逐个错峰升入（JS）*/
/* 二级态顶栏品牌字转白（房间背景较深，与 module.php 直达页一致） */
body.home.module-open .brand-text strong { color: #fff; text-shadow: 0 2px 12px rgba(6,59,99,.7); }
body.home.module-open .brand-text strong em { color: #9fd2ff; }
body.home.module-open .brand-text small { color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(6,59,99,.6); }

/* 顶部：左侧标题 + 右侧四项入口 */
.site-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 18px 34px;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-logo {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1E88E5, #063B63);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 16px rgba(6,59,99,.35);
}
.brand-logo svg { width: 23px; height: 23px; fill: #fff; }
.brand-text strong {
    display: block;
    font-size: 21px; font-weight: 800; letter-spacing: .5px;
    color: #063B63;
    text-shadow: 0 1px 8px rgba(255,255,255,.7);
}
.brand-text strong em { font-style: normal; color: #0F65B8; }
.brand-text small {
    display: block;
    font-size: 12.5px; color: #2c5a78; margin-top: 3px;
    text-shadow: 0 1px 6px rgba(255,255,255,.7);
}

.top-nav { display: flex; align-items: flex-start; gap: 6px; }
.nav-welcome {
    display: flex; align-items: center; gap: 7px;
    margin: 0 6px 0 0; padding: 8px 14px;
    transform: translateY(calc(27px - 50%));   /* 中心对齐图标圆圈中心线：nav-item 顶部 padding 6 + 42/2 */
    background: rgba(255,255,255,.92);
    border-radius: 20px;
    color: #0B4F7A; font-size: 13px; font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(6,59,99,.18);
}
.nav-welcome .nw-ico { display: flex; width: 18px; height: 18px; }
.nav-welcome .nw-ico svg { width: 18px; height: 18px; fill: none; stroke: #0F65B8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    width: 78px; padding: 6px 4px;
    border-radius: 12px;
    color: #0B4F7A; font-size: 12px; text-align: center;
    transition: .15s;
}
.nav-item .ni-ico {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(6,59,99,.18);
    transition: .15s;
}
.nav-item .ni-ico svg { width: 21px; height: 21px; fill: none; stroke: #0F65B8; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: rgba(255,255,255,.55); }
.nav-item:hover .ni-ico { background: #0F65B8; box-shadow: 0 6px 16px rgba(15,101,184,.45); }
.nav-item:hover .ni-ico svg { stroke: #fff; }

/* 模块按钮：参考图卡片版（圆形图标 + 标题 + 一行小字），散落在背景上 */
.hotspots { position: relative; z-index: 5; height: 100vh; }
.hotspot {
    position: absolute;
    display: flex; align-items: center;
    width: 274px;
    padding: 12px 16px 12px 86px;   /* 左侧留白容纳探出的大图标 */
    --card-bg: rgba(255,255,255,.54);   /* 卡片底色 */
    border-radius: 16px;
    transition: margin-top .18s;
}
/* 卡片实体（磨砂底+描边+阴影）放到 ::after，使 .hotspot 本身不产生层叠上下文，
   连线层才能夹在“卡片背景之上、图标之下” */
.hotspot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--card-bg);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.5);
    box-shadow: 0 12px 30px rgba(6,59,99,.20);
    transition: background .25s, border-color .25s, box-shadow .25s;
}
.hotspot:hover { margin-top: -4px; }   /* 用 margin 抬升，避免 transform 产生层叠上下文 */
.hotspot:hover::after {
    background: rgba(255,255,255,.97);          /* 悬停时几乎不透明 */
    border-color: color-mix(in srgb, var(--accent) 45%, #ffffff);
    box-shadow: 0 18px 40px rgba(6,59,99,.30),
                0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, #ffffff),
                0 0 26px -4px var(--accent);    /* 主题色辉光 */
}
/* 悬停扫光：一道高光斜扫过卡片 */
.hotspot::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
    background-size: 250% 100%;
    background-position: 150% 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.hotspot:hover::before { animation: hsShine .8s ease; }
@keyframes hsShine {
    0%   { opacity: 0; background-position: 150% 0; }
    15%  { opacity: 1; }
    100% { opacity: 0; background-position: -60% 0; }
}
/* 文字/图标压在连线层(z-index:2)之上 */
.hs-text { position: relative; z-index: 3; }
.hs-ico { z-index: 3; }
/* 图标比卡片大、探出卡片左/上/下边缘 */
.hs-ico {
    position: absolute;
    left: -12px; bottom: 0;   /* 图标下边缘与卡片下边对齐，只向上探出 */
    width: 90px; height: 90px;
    border-radius: 24px;
    overflow: hidden;
    border: 6px solid transparent;
    /* 灰白带一点主题色的渐变描边：实色，偏浅 */
    background: #e6eaef border-box;   /* 不支持 color-mix 时的回退 */
    background: linear-gradient(140deg, #eef1f4, #dee3e9 52%, color-mix(in srgb, var(--accent) 44%, #e3e8ed)) border-box;
    box-shadow: 0 8px 18px rgba(6,59,99,.26);
}
.hs-ico img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hs-text { min-width: 0; }
.hs-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.hs-title { font-size: 15px; font-weight: 700; color: var(--ink, #063B63); white-space: nowrap; }
.hs-desc {
    font-size: 12px; color: #566570; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.9em;   /* 固定两行高度，卡片统一 */
}

/* 序号徽章 01-05（与标题同一行，用模块主题色） */
.hs-no {
    flex: 0 0 auto;
    min-width: 22px; height: 19px; padding: 0 6px;
    border-radius: 10px;
    background: var(--ink, #063B63); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 19px; text-align: center;
}

/* 连接线 + 定位点：锚定在背景图/视频，位置由 JS 按 cover 缩放计算（不随卡片移动） */
.scene-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }  /* 在 .hotspots 内：卡片背景之上、图标之下 */
/* 连接线：从卡片锚点连到场景定位点，JS 设 left/top/width/rotate */
.scene-line {
    position: absolute;
    height: 2px;
    margin-top: -1px;            /* 虚线竖直中心落在 (cx,cy)，左右对称 */
    background-image: repeating-linear-gradient(to right, var(--accent, #1E88E5) 0 6px, transparent 6px 11px);   /* 回退 */
    background-image: repeating-linear-gradient(to right, color-mix(in srgb, var(--accent, #1E88E5) 60%, transparent) 0 6px, transparent 6px 11px);
    transform-origin: 0 50%;     /* 绕中心-左旋转 */
    filter: drop-shadow(0 0 1px rgba(255,255,255,.45));
}
/* 卡片边缘连接点：径向渐变光晕 + screen 混合，像真实光融入背景 */
.scene-line::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 30px; height: 30px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(255,255,255,.95) 0%,
        rgba(255,255,255,.88) 10%,
        rgba(255,255,255,.5) 20%,
        rgba(255,255,255,.2) 40%,
        rgba(255,255,255,.07) 60%,
        rgba(255,255,255,.02) 81%,
        rgba(255,255,255,0) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
}
/* 定位点：发光圆点 + 脉冲光环，中心对准 JS 设的 (left,top) */
.scene-pin {
    position: absolute;
    width: 14px; height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--accent, #1E88E5);
    box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.scene-pin::before {
    content: "";
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid var(--accent, #1E88E5);
    animation: hsPulse 2s ease-out infinite;
}
@keyframes hsPulse {
    0%   { transform: scale(.5); opacity: .85; }
    100% { transform: scale(2.4); opacity: 0; }
}

/* ===== 管理员可视化编辑 ===== */
.edit-toolbar {
    position: fixed;
    left: 24px; bottom: 24px;
    z-index: 30;
    display: flex; align-items: center; gap: 10px;
}
.edit-fab {                       /* 左下角圆按钮 */
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none; cursor: pointer;
    background: linear-gradient(135deg, #1E88E5, #0B4F7A);
    color: #fff; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 20px rgba(6,59,99,.32);
}
.edit-fab:hover { filter: brightness(1.06); }
.edit-panel {
    display: none;
    align-items: center; gap: 8px;
    background: rgba(255,255,255,.95);
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(6,59,99,.22);
}
.edit-toolbar.open .edit-panel { display: flex; }
.edit-tip { font-size: 12px; color: #0B4F7A; white-space: nowrap; }
/* 编辑态：卡片/连接点可拖 */
body.editing .hotspot {
    cursor: move;
    outline: 2px dashed rgba(15,101,184,.75);
    outline-offset: 3px;
}
body.editing .hotspot::before { display: none; }   /* 编辑时关掉悬停扫光，避免干扰 */
body.editing .hotspot:hover { margin-top: 0; }
body.editing .scene-pin {
    pointer-events: auto;
    cursor: move;
    width: 18px; height: 18px;
    box-shadow: 0 0 0 4px rgba(15,101,184,.35), 0 2px 6px rgba(0,0,0,.35);
}

/* 散落坐标 + 每个模块的强调色 + 连线长度（避开顶部标题/导航） */
.pos-a { left: 6%;  top: 33%; --accent: #1E88E5; --ink: #1565C0; --drop: 60px; }   /* 全身认知导览 蓝 */
.pos-b { left: 22%; top: 57%; --accent: #14B8C4; --ink: #0E8A95; --drop: 42px; }   /* 智慧健康监测 青 */
.pos-c { left: 45%; top: 29%; --accent: #F2542D; --ink: #D23A18; --drop: 66px; }   /* 常见急症应急救护 橙红 */
.pos-d { left: 64%; top: 55%; --accent: #2FAE60; --ink: #1F8A48; --drop: 46px; }   /* 常见疾病预防和照护 绿 */
.pos-e { left: 78%; top: 35%; --accent: #C85B9E; --ink: #A83F80; --drop: 56px; }   /* 共情体验与生命关怀 粉紫 */

/* 右下角提示 */
.home-hint {
    position: fixed;
    right: 24px; bottom: 22px;
    z-index: 6;
    background: rgba(255,255,255,.85);
    color: #0B4F7A;
    font-size: 12px;
    padding: 8px 15px;
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(6,59,99,.16);
}

@media (max-width: 900px) {
    body.home { overflow-y: auto; }
    .site-header {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 14px 12px;
    }
    .brand { flex-direction: column; text-align: center; gap: 8px; }
    .top-nav { flex-wrap: wrap; justify-content: center; }

    .hotspots {
        height: auto;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        padding: 230px 20px 80px;
    }
    .hotspot { position: static; left: auto; top: auto; width: min(360px, 92%); }
    .scene-pins { display: none; }   /* 竖排时连接点无意义，隐藏 */

    .home-hint { position: static; display: block; width: max-content; margin: 8px auto 28px; }
}

/* ============ 系统管理端（独立于教师后台） ============ */
body.manage { background: #f4f7fb; }
.manage-top {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 28px;
    background: linear-gradient(135deg, #0B4F7A, #063B63);
    color: #fff;
}
.manage-brand { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.manage-brand small { font-weight: 400; font-size: 12px; opacity: .82; margin-left: 8px; }
.manage-user { font-size: 13px; display: flex; align-items: center; gap: 16px; }
.manage-user a { color: #cfe6ff; }
.manage-user a:hover { color: #fff; }
.manage-main { max-width: 1100px; margin: 34px auto; padding: 0 24px; }
.manage-main h1 { font-size: 22px; color: #063B63; }
.manage-note { color: var(--muted); margin-top: 10px; }

/* ============ 登录页 ============ */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #bfe0f5 0%, #eef8fd 45%, #cfe6c2 100%);
}
.login-card {
    width: 380px;
    background: rgba(255,255,255,.95);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(31, 78, 85, .18);
    padding: 36px 34px 26px;
    text-align: center;
}
.login-card h1 { font-size: 20px; line-height: 1.5; color: #1f4e55; margin: 12px 0 22px; }
.login-card form { text-align: left; }
.login-error {
    background: #fdf0ee;
    color: var(--danger);
    border: 1px solid #f3cfc9;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 13px;
}
.quick-login {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
}
.quick-login-label { display: block; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.quick-login-btns { display: flex; gap: 10px; }
.quick-login-btns .btn { flex: 1; }
.login-tip { color: var(--muted); font-size: 12px; margin-top: 18px; }
.login-back { font-size: 13px; }

/* ============ 表单 ============ */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 6px; color: #44535f; font-weight: 600; font-size: 13px; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d4dde4;
    border-radius: 8px;
    font-size: 14px;
    background: #fff;
    color: var(--ink);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(44,122,123,.12); }
.field .hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

/* 标准化老人编辑表单 */
.detail-actions { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.edit-form .efgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; }
.edit-form .field { margin-bottom: 0; }
.edit-form .field.full { grid-column: 1 / -1; }
.edit-form .field label { display: flex; align-items: baseline; gap: 8px; }
.edit-form .field label .hint { font-weight: 400; margin-top: 0; }
.edit-form textarea { min-height: 84px; resize: vertical; line-height: 1.7; font-family: inherit; overflow: hidden; }
.edit-form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(44,122,123,.12); }
.edit-actions { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0; background: linear-gradient(to top, var(--bg) 72%, transparent); }

/* ============ 后台布局 ============ */
body.admin { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #15393f, #0f2c33);
    color: #cfe3e0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 18px;
    font-weight: 700;
    color: #fff;
    font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar .brand small { display: block; font-weight: 400; color: #8fb5af; font-size: 11px; margin-top: 2px; }
.sidebar nav { flex: 1; padding: 12px 10px; overflow-y: auto; }
.sidebar nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #b9d2cd;
    padding: 11px 14px;
    border-radius: 9px;
    margin-bottom: 2px;
    font-size: 14px;
    transition: .15s;
}
.sidebar nav a:hover { background: rgba(255,255,255,.07); color: #fff; }
.sidebar nav a.active { background: var(--primary); color: #fff; font-weight: 600; }
.nav-icon { font-size: 16px; width: 20px; text-align: center; }
.back-home { padding: 16px 24px; color: #8fb5af; font-size: 13px; border-top: 1px solid rgba(255,255,255,.08); }
.back-home:hover { color: #fff; }

.main-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 14px 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topbar h1 { font-size: 18px; }
.top-user { color: var(--muted); font-size: 13px; }
.top-user a { margin-left: 14px; }

.content { padding: 24px 28px 48px; }

/* ============ 卡片/面板 ============ */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.card .stat-label { color: var(--muted); font-size: 13px; }
.card .stat-num { font-size: 30px; font-weight: 700; margin-top: 6px; color: #1f4e55; }
.card .stat-num small { font-size: 14px; font-weight: 400; color: var(--muted); }

.panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 22px;
}
.panel-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.panel-head h2 { font-size: 15px; }
.panel-head .sub { color: var(--muted); font-size: 12px; font-weight: 400; margin-left: 8px; }
.panel-body { padding: 18px 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1100px) { .grid2 { grid-template-columns: 1fr; } }

/* ============ 表格 ============ */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.tbl th { color: var(--muted); font-weight: 600; font-size: 13px; background: #fafcfd; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: #f8fbfc; }
.tbl .num { font-variant-numeric: tabular-nums; }

/* ============ 徽章 ============ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
}
.badge.ok { background: #e6f4ea; color: var(--ok); }
.badge.off { background: #f0f2f4; color: var(--muted); }
.badge.warn { background: #fdf3e7; color: #b9690f; }
.badge.info { background: #e8f1fb; color: #2d6cb5; }
.badge.purple { background: #f1ebfa; color: #7048b6; }

/* ============ 筛选条 ============ */
.filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.filters select, .filters input {
    padding: 7px 10px;
    border: 1px solid #d4dde4;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--ink);
}

/* ============ 进度条 ============ */
.bar-track { background: #edf1f4; border-radius: 6px; height: 8px; min-width: 80px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #51a8a0, var(--primary)); }
.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.bar-row .bar-label { width: 200px; font-size: 13px; color: #44535f; flex-shrink: 0; }
.bar-row .bar-num { width: 50px; text-align: right; color: var(--muted); font-size: 13px; }

/* ============ 工作台图表 ============ */
.chart-svg { display: block; width: 100%; height: auto; }
.chart-note { color: var(--muted); font-size: 12px; margin: 12px 0 0; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #44535f; }
.legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.legend .lg-num { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.donut-wrap { display: flex; align-items: center; gap: 24px; }
.donut-wrap .donut { width: 150px; flex-shrink: 0; }
.hist { display: flex; align-items: flex-end; gap: 16px; height: 178px; padding: 6px 4px 0; }
.hist .hcol { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.hist .hbar { width: 100%; max-width: 48px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #66b6ac, var(--primary)); }
.hist .hbar.fail { background: linear-gradient(180deg, #e2917f, var(--danger)); }
.hist .hcap { font-size: 12px; color: var(--muted); }
.hist .hval { font-size: 13px; font-weight: 600; color: #1f4e55; }
.radar-legend { display: flex; gap: 20px; justify-content: center; margin-top: 8px; font-size: 12px; color: var(--muted); }
.radar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.radar-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

/* ============ 对话气泡 ============ */
.chat { display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; flex-direction: column; max-width: 72%; }
.msg.elder { align-self: flex-start; }
.msg.student { align-self: flex-end; align-items: flex-end; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg .bubble {
    padding: 10px 14px;
    border-radius: 12px;
    line-height: 1.7;
    font-size: 14px;
}
.msg.elder .bubble { background: #f3f6f8; border: 1px solid var(--line); border-top-left-radius: 4px; }
.msg.student .bubble { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.emotion {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: #fdf3e7;
    color: #b9690f;
    font-size: 11px;
    border-radius: 10px;
}

/* ============ 键值表 ============ */
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; line-height: 1.7; }

/* ============ 弹窗 ============ */
.modal-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 44, 51, .45);
    z-index: 100;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal-mask.show { display: flex; }
.modal {
    background: #fff;
    border-radius: 14px;
    width: 640px;
    max-width: 100%;
    max-height: 86vh;
    overflow-y: auto;
    padding: 24px 26px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25);
}
.modal h3 { font-size: 17px; margin-bottom: 16px; }
.modal-close { float: right; cursor: pointer; color: var(--muted); font-size: 20px; line-height: 1; border: none; background: none; }

/* ============ Toast ============ */
.toast {
    position: fixed;
    left: 50%;
    bottom: 48px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20, 45, 52, .92);
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: 14px;
    opacity: 0;
    transition: .25s;
    z-index: 999;
    max-width: 80%;
    pointer-events: none;   /* 纯通知层：绝不拦截下方按钮（含返回钮）的点击——修复点完卡片后约3秒内返回钮点不到 */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============ 提示块 ============ */
.note {
    background: #f0f7f7;
    border: 1px solid #cfe5e4;
    border-radius: 10px;
    padding: 12px 16px;
    color: #2a5a62;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
}
.muted { color: var(--muted); }

/* 实训报告·成绩构成三区块（同一张表内：实操成绩 / 知识考核成绩 / 实训总成绩，列宽共享上下对齐） */
tr.score-band td { background: #f6f9fb; font-weight: 700; color: #0B4F7A; }
tr.score-band td > div { display: flex; justify-content: space-between; align-items: center; }
tr.score-band .num { font-weight: 700; }
.score-band-tag {
    display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
    background: #0F65B8; color: #fff; font-size: 12px; font-weight: 600;
    align-items: center; justify-content: center; margin-right: 8px; vertical-align: -3px;
}
tr.score-total td { background: #eef4f9; font-weight: 800; color: #063B63; font-size: 15px; padding-top: 13px; padding-bottom: 13px; }
tr.score-total td > div { display: flex; justify-content: space-between; align-items: center; }
.mb0 { margin-bottom: 0; }

/* ============ 标准化老人库（英雄图鉴 · 列表 + 沉浸档案） ============ */
.badge.danger { background: #fdecea; color: var(--danger); }
.badge.light  { background: rgba(255,255,255,.16); color: #eaf6f5; }

.field-lbl { font-weight: 700; color: var(--muted); font-size: 13px; margin-bottom: 6px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sect-list { list-style: none; margin: 6px 0 0; padding: 0; }
.sect-list li { position: relative; padding: 6px 0 6px 16px; border-bottom: 1px solid var(--line); color: #3c4a55; font-size: 13.5px; line-height: 1.7; }
.sect-list li:last-child { border-bottom: none; }
.sect-list li::before { content: '•'; position: absolute; left: 2px; color: var(--primary); font-weight: 700; }

/* 风险预警面板 */
.risk-panel { border-color: #f0c8c2; }
.risk-panel .panel-head { background: #fdecea; border-bottom-color: #f3cfc9; }
.risk-panel .panel-head h2 { color: var(--danger); }
.risk-panel .sect-list li::before { color: var(--danger); }

/* —— 前端 hero 头图 —— */
.lib-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px;
    background: linear-gradient(125deg, #063B63 0%, #0B4F7A 55%, #1a6699 100%); color: #fff; margin-bottom: 22px; }
.lib-hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); border-radius: 50%; }
.lib-hero h1 { font-size: 26px; letter-spacing: .5px; }
.lib-hero p { margin: 10px 0 0; max-width: 720px; font-size: 13.5px; line-height: 1.8; opacity: .82; }
.lib-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; position: relative; }
.lib-stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 10px 18px; }
.lib-stat b { display: block; font-size: 24px; line-height: 1; }
.lib-stat span { font-size: 12px; opacity: .75; }

/* —— 筛选工具条 —— */
.lib-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 18px; }
.lib-toolbar .grow { flex: 1; min-width: 180px; }
.lib-toolbar select, .lib-toolbar input { padding: 8px 12px; border: 1px solid #d4dde4; border-radius: 8px; background: #fff; font-size: 13px; color: var(--ink); font-family: inherit; }
.lib-toolbar input:focus, .lib-toolbar select:focus { outline: none; border-color: var(--primary); }
.lib-count { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; }

/* —— 英雄图鉴卡片墙 —— */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.hero-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; overflow: hidden; text-decoration: none; color: var(--ink);
    box-shadow: 0 2px 10px rgba(13,46,74,.05); transition: transform .25s, box-shadow .25s, border-color .25s;
    animation: heroIn .5s both; animation-delay: calc(var(--i, 0) * 45ms); }
.hero-card:hover { transform: translateY(-6px); border-color: transparent;
    box-shadow: 0 16px 34px rgba(13,46,74,.16), 0 0 0 2px var(--sys, #2c7a7b) inset; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hc-photo { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #e9eef2; }
.hc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform .5s ease; }
.hero-card:hover .hc-photo img { transform: scale(1.07); }
.hc-photo.is-ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sys, #2c7a7b), #1f3b50); }
.hc-ph-emoji { font-size: 86px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.hc-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,20,34,.82) 0%, rgba(7,20,34,.30) 38%, transparent 62%); }
.hc-risk { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; color: #fff; }
.hc-risk.r-high { background: rgba(192,57,43,.92); }
.hc-risk.r-mid  { background: rgba(224,123,42,.92); }
.hc-risk.r-low  { background: rgba(26,127,55,.9); }
.hc-key { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,.92); color: #b9690f; }
.hc-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; }
.hc-name { font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 7px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.hc-name em { font-style: normal; font-size: 12px; font-weight: 400; opacity: .82; }
.hc-sys { font-size: 12px; opacity: .92; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hc-info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.hc-cc { margin: 0; font-size: 13px; color: #46555f; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.hc-chips span { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eef2f6; color: #56707d; }
.hc-go { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--sys, #2c7a7b); }
.hc-go i { font-style: normal; display: inline-block; transition: transform .2s; }
.hero-card:hover .hc-go i { transform: translateX(4px); }
/* 详情：年轻时（英雄往事），暖纸引用带 */
.life-story { margin: 0 0 18px; padding: 16px 22px; border-left: 4px solid var(--sys, #2c7a7b);
    border-radius: 0 12px 12px 0; background: #f7f4ee; }
.life-story .ls-tag { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1px;
    color: var(--sys, #2c7a7b); margin-bottom: 6px; }
.life-story p { margin: 0; font-size: 14.5px; line-height: 1.9; color: #3a4750; }

/* —— 沉浸式人物档案头部 —— */
.profile-hero { position: relative; overflow: hidden; display: flex; gap: 24px; align-items: center;
    background: linear-gradient(125deg, var(--sys, #2c7a7b), #1f3b50); border-radius: 18px;
    padding: 26px 30px; color: #fff; margin-bottom: 22px; animation: heroIn .55s both; }
.profile-hero::after { content: ''; position: absolute; right: -60px; bottom: -80px; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); border-radius: 50%; }
.ph-portrait { width: 132px; height: 132px; flex-shrink: 0; border-radius: 16px; overflow: hidden;
    border: 3px solid rgba(255,255,255,.35); box-shadow: 0 10px 26px rgba(0,0,0,.3); position: relative; z-index: 1; }
.ph-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.ph-portrait.is-ph { display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.14); }
.ph-portrait.is-ph span { font-size: 64px; }
.ph-main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.ph-name { font-size: 24px; font-weight: 700; }
.ph-sub { font-size: 13px; font-weight: 400; opacity: .85; margin-left: 10px; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.ph-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 8px; margin-top: 16px; }
.phv { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; padding: 8px 6px; text-align: center; }
.phv-v { font-size: 13.5px; font-weight: 700; line-height: 1.25; word-break: break-all; }
.phv-l { font-size: 11px; opacity: .7; margin-top: 3px; }

/* —— 详情分区入场动效 —— */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 720px) {
    .profile-hero { flex-direction: column; text-align: center; }
    .ph-badges, .ph-vitals { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-card, .profile-hero { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .hero-card:hover .hc-photo img { transform: none; }
}

/* 前端浏览页外壳（学生/教师/管理员通用）：与内容等宽的顶部行 + 浅色内容区 */
body.lib { background: var(--bg); min-height: 100vh; }
.lib-head { max-width: 1200px; margin: 0 auto; padding: 20px 20px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lib-userbox { display: flex; align-items: center; gap: 14px; }
.lib-user { font-size: 13px; color: var(--muted); }
.lib-logout { font-size: 13px; color: var(--muted); }
.lib-logout:hover { color: var(--ink); }
.lib-content { max-width: 1200px; margin: 0 auto; padding: 16px 20px 60px; }

/* ============ 二级模块页（视频/图背景 · 复用墨蓝医疗风） ============ */
body.module { background: #063B63; min-height: 100vh; overflow-x: hidden; }

/* 背景层：复用首页背景图，换成 <video class="m-bg"> 也通用 */
.m-bg {
    position: fixed; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover; background-size: cover; background-position: center;
    filter: blur(2px);            /* 镜头模糊（轻）：直达页房间背景同样虚化 */
    transform: scale(1.04);       /* 略放大盖住模糊虚边 */
}
/* 比首页更深的遮罩，让玻璃卡片更清晰 */
.m-overlay {
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg,
        rgba(6,59,99,.42) 0%,
        rgba(6,59,99,.30) 32%,
        rgba(6,59,99,.58) 100%);
}

/* 顶栏复用首页 .site-header / .brand；二级页背景偏深，brand 文字改白色 */
body.module .brand-text strong { color: #fff; text-shadow: 0 2px 12px rgba(6,59,99,.7); }
body.module .brand-text strong em { color: #9fd2ff; }
body.module .brand-text small { color: rgba(255,255,255,.85); text-shadow: 0 1px 8px rgba(6,59,99,.6); }

/* 底部居中返回按钮 */
/* position+z-index：进场 transform 动画会把 .m-foot 提成合成层，静态定位时其命中区
   会钉死在“未滚动”坐标，滚动后返回钮看得见却点不到（与卡片不同：卡片是 position:relative，
   命中区随滚动重算）。补定位让它像卡片一样跟随滚动，根治“滚到底返回钮点不动”。 */
.m-foot { text-align: center; margin-top: 46px; position: relative; z-index: 1; }
.m-back {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 10px;
    background: rgba(255,255,255,.28);            /* 略提不透明度，补偿去掉模糊后的可读性 */
    border: 1.5px solid rgba(255,255,255,.55);    /* 纯白描边，不跟随模块主题色 */
    color: #fff; font-size: 14px; text-decoration: none;
    cursor: pointer;            /* 始终显示小手 */
    user-select: none;          /* 不被当成可选文本 */
    /* 不用 backdrop-filter：它会把按钮单独提成合成层，在可滚动的 .module-layer 里
       Chromium 按错误滚动偏移算命中区域 → 滚动后“看得见却点不到/无 hover”。
       去掉模糊即根除，按钮已有半透明白底+白描边，观感几乎无差。 */
    transition: .15s;
}
.m-back:hover { background: rgba(255,255,255,.38); }
.m-back svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 主体 */
.m-main { position: relative; z-index: 10; max-width: 1180px; margin: 0 auto; padding: 124px 40px 64px; }
.m-title { text-align: center; }
/* 标题衬底：只罩标题一行的深蓝径向光晕，四周羽化渐隐、无边界（客户反馈重点文字难识别；
   closest-side=渐变恰好在留白边缘归零；负 margin 抵消羽化留白，不改变原版式节奏 */
.m-title h1 {
    display: inline-block;
    padding: 18px 88px;
    margin: -18px 0 -14px;
    background: radial-gradient(ellipse closest-side,
        rgba(6,59,99,.60) 0%, rgba(6,59,99,.48) 55%, rgba(6,59,99,0) 98%);
    font-size: 32px; font-weight: 900; letter-spacing: 1px;
    /* 金琥珀色：深蓝光晕上金字分量最重，且与模块图标的主题色明显区分（不与图标同色，避免混在一起） */
    color: #FFC76B;
    text-shadow: 0 2px 18px rgba(6,59,99,.85), 0 1px 2px rgba(6,59,99,.55);
}
.m-title .m-rule {
    display: block; width: 64px; height: 4px; border-radius: 2px;
    margin: 16px auto 0; background: var(--accent, #1E88E5);
    box-shadow: 0 0 16px -2px var(--accent, #1E88E5);
}
.m-title .m-sub { display: inline-block; margin-top: 14px; font-size: 13.5px; color: rgba(255,255,255,.82); }

/* 实训卡片网格 */
.m-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);   /* 固定一行 4 个，末行不足由空白占位卡补齐 */
    gap: 22px; margin-top: 44px;
}
.m-card {
    --accent: #1E88E5;
    position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 30px 20px; border-radius: 16px; cursor: pointer; overflow: hidden;
    background: rgba(255,255,255,.32);         /* 白色磨砂再提亮一档（.10→.22→.32）：给深彩字当亮底 */
    border: 1.5px solid rgba(255,255,255,.55);   /* 纯白描边，不跟随模块主题色 */
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: #fff;
    transition: transform .2s, box-shadow .2s, background .2s, border-color .2s;
}
.m-card:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,.30);
    border-color: var(--accent);
    box-shadow: 0 16px 36px rgba(6,59,99,.45), 0 0 26px -6px var(--accent);
}
.m-card-ico {
    width: 72px; height: 72px; border-radius: 18px; margin-bottom: 16px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--accent), #063B63);                                  /* 回退：不支持 color-mix 时 */
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent), #000 28%)); /* 暗端=同色压暗 28%，鲜艳不偏灰 */
    box-shadow: 0 8px 20px -6px var(--accent);
    transition: transform .25s ease;
}
.m-card-ico svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.m-card-name {
    font-size: 17px; font-weight: 700; line-height: 1.55;
    /* 站点标准深藏青（首页配色表里的深海蓝）：不跟随模块主题色，与彩色图标自然区分 */
    color: #063B63;
    /* 1px 半透明白外描边（8 方向硬投影，不用 text-stroke——那是骑缝描边会吃字的笔画）+ 原柔光衬底；
       纯白描边偏硬，降到 .7 让边缘柔和些 */
    text-shadow:
        -1px -1px 0 rgba(255,255,255,.7), 1px -1px 0 rgba(255,255,255,.7),
        -1px  1px 0 rgba(255,255,255,.7), 1px  1px 0 rgba(255,255,255,.7),
        -1px  0   0 rgba(255,255,255,.7), 1px  0   0 rgba(255,255,255,.7),
         0   -1px 0 rgba(255,255,255,.7), 0    1px 0 rgba(255,255,255,.7),
         0    1px 6px rgba(255,255,255,.6);
    transition: transform .25s ease;
}
/* 悬停时图标与文字一起上移，给底部“进入学习”按钮让位、减少遮挡 */
.m-card:hover .m-card-ico,
.m-card:hover .m-card-name { transform: translateY(-10px); }
/* 悬停提示“进入学习”：按钮底融合——从卡片底边滑上来的整条按钮，
   背景“透明→主题色”渐变，盖到第二行文字时是柔和过渡而非硬遮挡 */
.m-card-go {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; align-items: flex-end; justify-content: center;
    height: 42px; padding-bottom: 8px;
    font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap;
    background: linear-gradient(180deg, transparent, var(--accent) 72%);
    transform: translateY(100%);
    transition: transform .25s ease;
    pointer-events: none;
}
.m-card:hover .m-card-go { transform: translateY(0); }

/* 末行不足 4 个时用空白占位卡补齐（不可点击、无内容、无悬停），避免末行孤零零一张 */
.m-card--ghost {
    cursor: default; pointer-events: none;
    background: rgba(255,255,255,.06);
    border: 1.5px dashed rgba(255,255,255,.16);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
}

@media (max-width: 640px) {
    .site-header { padding: 14px 18px; }
    .m-main { padding: 100px 18px 44px; }
    .m-title h1 { font-size: 24px; padding: 14px 52px; margin: -14px 0 -10px; }
    .m-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .m-card--ghost { display: none; }   /* 窄屏改为自适应列数，占位卡不再需要 */
}

/* ---- 二级页直达回退页（仅直接访问/刷新 /module.php?key=X 时）：内容柔和淡入 ---- */
/* 正常使用走首页“单页内切换”，不进本页；此处只为直达/刷新/无 JS 兜底，房间背景静止、标题与卡片快速淡现 */
@media (prefers-reduced-motion: no-preference) {
    body.module .m-title { animation: mRise .26s ease-out both; }
    body.module .m-card  { animation: mRise .26s ease-out both; animation-delay: calc(var(--i, 0) * .02s); }
}
@keyframes mRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }