/* =========================================================================
   玻璃液态 · checkin 生产覆盖层 v1
   -------------------------------------------------------------------------
   纯样式：只给已有类加/改外观，不新增 DOM、不改 JS、不改路由。
   接入方式：checkin/index.html <head> 末尾 1 行 <link>。
   回滚：删除本文件 + 删掉那 1 行 <link>，视觉即回到改造前（DOM/JS 零改动）。

   适配目标（来自 checkin/index.html 真实源码）：
     · token 体系 Ardot：--blue/--violet/--card/--card-solid/--bg/--grad
     · 深色模式选择器：html[data-theme="dark"]（js/study.js 设置 dataset.theme）
     · 真实类：.list-card .topic-card .app-card .dash-card .glass-card
              .btn-cta .btn-ghost .tab-bar/#tabbar .tab.active
              .app-header .status-bar .cal-grid .sub-bar .ci-hero .ci-lamp …
   ========================================================================= */

:root{
  --gl-white:rgba(255,255,255,.60);
  --gl-white-soft:rgba(255,255,255,.42);
  --gl-white-strong:rgba(255,255,255,.80);
  --gl-stroke:rgba(255,255,255,.74);
  --gl-stroke-soft:rgba(255,255,255,.44);
  --gl-blur:blur(22px) saturate(180%);
  --gl-blur-strong:blur(30px) saturate(200%);
  --gl-shadow:0 10px 34px rgba(41,52,98,.13),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(255,255,255,.30);
  --gl-shadow-lift:0 18px 52px rgba(41,52,98,.20),inset 0 1px 0 rgba(255,255,255,.95);
  --gl-accent:#3A52D6;          /* 靛蓝液态强调 */
  --gl-accent-2:#6270DE;
}

/* =========================================================================
   1. 背景：彩色液态光晕（玻璃要透出颜色才有折射感）
   ========================================================================= */
html,body{min-height:100%}
body{
  background-color:#EEF1FA;
  background-image:
    radial-gradient(760px 560px at 10% 4%,rgba(120,138,255,.38),transparent 62%),
    radial-gradient(620px 520px at 92% 10%,rgba(86,203,214,.30),transparent 60%),
    radial-gradient(720px 560px at 82% 92%,rgba(206,146,232,.28),transparent 62%),
    radial-gradient(560px 460px at 6% 94%,rgba(255,186,138,.26),transparent 60%),
    linear-gradient(155deg,#F3F5FD 0%,#EDF0FA 46%,#F8F3FA 100%);
  background-attachment:fixed;
}

/* =========================================================================
   2. 玻璃面：主卡片族（原 --card-solid 不透明 → 半透明白）
   ========================================================================= */
.list-card,.topic-card,.app-card,.dash-card,.auth-card,.ac-card,.hp-card,
.study-row,.wd-row,.btoc-list,.dt-words-panel,.sp-sheet,.day-sheet,
.lightbox .lb-inner,.cloud-modal .cm-card,.toc-row,.toc-list{
  background:var(--gl-white);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke);
  box-shadow:var(--gl-shadow);
}
/* 原本就半透明的 --card 族：只补磨砂与高光描边 */
.glass-card,.chart-box,.audio-summary,.rv-card,.rv-tool,.ls-card,.lp-card,.lc-card,
.cv-item,.cg-item,.pp-card,.pers-card,.ach-num,.ach-badge,.comm-publish,.comm-item,
.rank-item,.job-tab,.job-kpi,.job-qcard,.job-acard,.job-rec,.graph-stage,
.sp-input,.dt-sents,.dt-w,.dt-q,.dt-wr,.ci-lamp,.job-sc,.job-metric,.opt,.popt{
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke);
  box-shadow:var(--gl-shadow);
}
.list-card,.topic-card,.app-card,.dash-card{border-radius:var(--r-lg,28px)}
.toc-row,.toc-list{border-radius:var(--r,20px)}

/* =========================================================================
   3. 顶栏 / 状态栏 / 底部 TabBar / 导航
   ========================================================================= */
.app-header,.status-bar,.sub-bar,.nav#pcNav,.pc-nav-top{
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  background:var(--gl-white-soft);
  border-bottom:1px solid var(--gl-stroke-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}
.status-bar{background:rgba(255,255,255,.34)}

.tab-bar,#tabbar{
  margin:0 8px 8px;border-radius:22px;
  background:rgba(255,255,255,.54);
  -webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong);
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 -10px 34px rgba(41,52,98,.12),inset 0 1px 0 rgba(255,255,255,.88);
}
.tab{border-radius:14px}
.tab.active{background:rgba(58,82,214,.14)}

/* =========================================================================
   4. 按钮：液态胶囊
   ========================================================================= */
.btn-cta{
  border:1px solid rgba(255,255,255,.42);
  border-radius:14px;color:#fff;
  box-shadow:0 10px 26px rgba(47,95,224,.30),inset 0 1px 0 rgba(255,255,255,.48),inset 0 -1px 0 rgba(30,40,110,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.btn-cta:hover{filter:brightness(1.05)}
.btn-ghost{
  background:var(--gl-white-strong);border:1px solid var(--gl-stroke);
  border-radius:14px;box-shadow:var(--gl-shadow);color:var(--ink);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
}
.btn-ghost:hover{border-color:rgba(58,82,214,.5)}
.app-cta,.dt-btn.cta,.ci-enter,.quick-item,.hero-cta .btn-cta{
  border-radius:14px;
  box-shadow:0 10px 26px rgba(47,95,224,.28),inset 0 1px 0 rgba(255,255,255,.46);
}

/* =========================================================================
   5. 小组件 / 进度条 / 日历
   ========================================================================= */
.badge,.streak,.seg button,.toc-tabs button,.icon-btn{
  border-radius:999px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(255,255,255,.70);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}
.toc-tabs button.on,.seg button.on{
  background:linear-gradient(135deg,rgba(58,82,214,.92),rgba(98,112,222,.84));
  color:#fff;border-color:rgba(255,255,255,.42);
  box-shadow:0 6px 16px rgba(58,82,214,.22),inset 0 1px 0 rgba(255,255,255,.40);
}
.bar i,.ci-hero-bar i,.prog i,.progress i{
  background:linear-gradient(90deg,rgba(58,82,214,.88),rgba(120,136,236,.96));
  box-shadow:0 0 12px rgba(58,82,214,.34);
}
.cal-grid i.on,.lg.on{background:rgba(58,82,214,.22);border-color:rgba(58,82,214,.30)}
.cal-grid i.today,.lg.today{
  box-shadow:0 0 0 2px rgba(58,82,214,.55),0 0 12px rgba(58,82,214,.30);
}

/* =========================================================================
   6. 局部增强 · 首页（#screen-home）
   ========================================================================= */
#screen-home .hero-stats{
  margin-top:26px;padding:14px 18px;border-radius:18px;
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);
  box-shadow:var(--gl-shadow);
  gap:26px;
}
#screen-home .hero-stats > *{
  padding-right:26px;border-right:1px solid rgba(255,255,255,.55);
}
#screen-home .hero-stats > *:last-child{border-right:0;padding-right:0}
#screen-home .glass-card{
  -webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong);
  border-color:var(--gl-stroke);
  box-shadow:var(--gl-shadow-lift);
  position:relative;overflow:hidden;
}
/* 玻璃高光扫过（一次性，纯 CSS 动效模块） */
#screen-home .glass-card::after{
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:glSheen 1.5s cubic-bezier(.22,.61,.36,1) .35s 1 both;
}
@keyframes glSheen{0%{left:-60%}100%{left:130%}}
#screen-home .cal{margin-top:18px}
#screen-home .cal-head{
  padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.52);
  margin-bottom:12px;
}
#screen-home .topic-card{
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,background .22s ease;
}
#screen-home .topic-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--gl-shadow-lift);
  background:var(--gl-white-strong);
}

/* =========================================================================
   7. 局部增强 · 打卡页（#screen-checkin）
   ========================================================================= */
#screen-checkin .ci-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.74),rgba(255,255,255,.50));
  -webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong);
  border-color:var(--gl-stroke);
  box-shadow:var(--gl-shadow-lift);
}
#screen-checkin .ci-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,transparent,var(--gl-accent),var(--gl-accent-2),transparent);
  opacity:.75;
}
#screen-checkin .ci-hero-bar{
  height:8px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.7);
  box-shadow:inset 0 1px 3px rgba(41,52,98,.10);
}
#screen-checkin .ci-hero-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--gl-accent),#7888EC);
  box-shadow:0 0 12px rgba(58,82,214,.40);
  transition:width .5s cubic-bezier(.22,.61,.36,1);
}
/* 五步灯：玻璃珠，完成后带靛蓝辉光 */
#screen-checkin .ci-lamp{
  border-radius:999px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
#screen-checkin .ci-lamp.done{
  background:linear-gradient(135deg,rgba(58,82,214,.90),rgba(98,112,222,.82));
  border-color:rgba(255,255,255,.42);
  box-shadow:0 4px 14px rgba(58,82,214,.32),inset 0 1px 0 rgba(255,255,255,.45);
}
#screen-checkin .ci-cal-card,#screen-checkin .ci-record{
  background:var(--gl-white);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke);
  box-shadow:var(--gl-shadow);
}

/* =========================================================================
   8. 新动效模块（纯 CSS，无 JS 耦合）：屏幕内容分层浮入
   ========================================================================= */
.screen.active > *{animation:glRise .34s cubic-bezier(.22,.61,.36,1) both}
.screen.active > *:nth-child(1){animation-delay:0s}
.screen.active > *:nth-child(2){animation-delay:.05s}
.screen.active > *:nth-child(3){animation-delay:.10s}
.screen.active > *:nth-child(4){animation-delay:.15s}
.screen.active > *:nth-child(n+5){animation-delay:.18s}
@keyframes glRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* =========================================================================
   9. 深色模式（html[data-theme="dark"]，由 js/study.js 切换）
   ========================================================================= */
[data-theme="dark"] body{
  background-color:#0D1120;
  background-image:
    radial-gradient(760px 560px at 10% 4%,rgba(96,112,255,.40),transparent 62%),
    radial-gradient(620px 520px at 92% 10%,rgba(52,178,196,.28),transparent 60%),
    radial-gradient(720px 560px at 82% 92%,rgba(168,96,214,.28),transparent 62%),
    radial-gradient(560px 460px at 6% 94%,rgba(220,120,110,.20),transparent 60%),
    linear-gradient(155deg,#111528 0%,#0C1020 48%,#181226 100%);
}
[data-theme="dark"] .list-card,[data-theme="dark"] .topic-card,[data-theme="dark"] .app-card,
[data-theme="dark"] .dash-card,[data-theme="dark"] .auth-card,[data-theme="dark"] .ac-card,
[data-theme="dark"] .hp-card,[data-theme="dark"] .study-row,[data-theme="dark"] .wd-row,
[data-theme="dark"] .btoc-list,[data-theme="dark"] .dt-words-panel,[data-theme="dark"] .sp-sheet,
[data-theme="dark"] .day-sheet,[data-theme="dark"] .lightbox .lb-inner,[data-theme="dark"] .cloud-modal .cm-card,
[data-theme="dark"] .toc-row,[data-theme="dark"] .toc-list,
[data-theme="dark"] .app-header,[data-theme="dark"] .status-bar,[data-theme="dark"] .sub-bar,
[data-theme="dark"] .nav#pcNav,[data-theme="dark"] .pc-nav-top,
[data-theme="dark"] .tab-bar,[data-theme="dark"] #tabbar,
[data-theme="dark"] .btn-ghost,[data-theme="dark"] #screen-checkin .ci-cal-card,
[data-theme="dark"] #screen-checkin .ci-record,[data-theme="dark"] #screen-home .hero-stats{
  background:rgba(28,34,52,.58);
  border-color:rgba(255,255,255,.14);
  box-shadow:0 12px 38px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="dark"] .btn-ghost{color:var(--ink)}
[data-theme="dark"] .glass-card,[data-theme="dark"] .chart-box,[data-theme="dark"] .rv-card,
[data-theme="dark"] .rv-tool,[data-theme="dark"] .ls-card,[data-theme="dark"] .lp-card,
[data-theme="dark"] .lc-card,[data-theme="dark"] .player{
  background:linear-gradient(150deg,rgba(48,58,82,.70),rgba(30,36,54,.52));
  border-color:rgba(255,255,255,.14);
}
[data-theme="dark"] .tab.active{background:rgba(163,174,255,.16)}
[data-theme="dark"] .badge,[data-theme="dark"] .streak,[data-theme="dark"] .icon-btn,
[data-theme="dark"] .ci-lamp{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);
}
[data-theme="dark"] #screen-checkin .ci-lamp.done{
  background:linear-gradient(135deg,rgba(163,174,255,.92),rgba(140,154,250,.84));
  border-color:rgba(255,255,255,.30);
}
[data-theme="dark"] #screen-checkin .ci-hero{
  background:linear-gradient(160deg,rgba(48,58,82,.72),rgba(30,36,54,.52));
}
[data-theme="dark"] .cal-grid i.on,[data-theme="dark"] .lg.on{background:rgba(163,174,255,.22)}

/* =========================================================================
   10. 无 backdrop-filter 时降级实色，保证可读
   ========================================================================= */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body{background:#EEF1FA}
  .list-card,.topic-card,.app-card,.dash-card,.auth-card,.ac-card,.hp-card,
  .study-row,.wd-row,.btoc-list,.dt-words-panel,.sp-sheet,.day-sheet,
  .lightbox .lb-inner,.cloud-modal .cm-card,.toc-row,.toc-list,
  .app-header,.status-bar,.sub-bar,.nav#pcNav,.tab-bar,#tabbar,.btn-ghost{
    background:#FFFFFF;border-color:rgba(41,52,98,.12)}
}

/* =========================================================================
   11. 尊重「减弱动效」系统偏好
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  .screen.active > *{animation:none}
  #screen-home .glass-card::after{animation:none;display:none}
  #screen-checkin .ci-hero-bar i{transition:none}
}

/* ---------- 业务事件反馈：玻璃脉冲（由 glass-feedback.v1.js 触发） ---------- */
.gl-pulse{animation:glPulse .9s cubic-bezier(.22,.61,.36,1) 1}
@keyframes glPulse{
  0%{box-shadow:var(--gl-shadow)}
  35%{box-shadow:0 0 0 4px rgba(58,82,214,.28),0 14px 40px rgba(58,82,214,.30),inset 0 1px 0 rgba(255,255,255,.95)}
  100%{box-shadow:var(--gl-shadow)}
}
@media (prefers-reduced-motion:reduce){.gl-pulse{animation:none}}
/* =========================================================================
   7. 首页门户化 · 专项样式层（仅改样式，DOM/JS 零改动）
      移动端：hp-card 主卡 / quick-item 三色入口 / toc 行 / 报告卡
      PC 端：hero 徽章与渐变标题 / 日历 / 播放器 / 模块卡
      深色适配 + prefers-reduced-motion 全关
   ========================================================================= */

/* ---- 7.1 移动端 · 今日主卡（hp-card）---- */
#screen-home .hp-card{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.52) 58%,rgba(122,146,255,.20) 100%);
  -webkit-backdrop-filter:var(--gl-blur-strong);backdrop-filter:var(--gl-blur-strong);
  border:1px solid var(--gl-stroke);
  border-radius:24px;
  box-shadow:var(--gl-shadow-lift);
}
#screen-home .hp-card::before{          /* 顶部靛蓝液态光条 */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gl-accent),#7888EC 45%,#56CBD6);
  border-radius:24px 24px 0 0;opacity:.85;
}
#screen-home .hp-card::after{           /* 一次性高光扫过 */
  content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);pointer-events:none;
  animation:glSheen 1.4s cubic-bezier(.22,.61,.36,1) .4s 1 both;
}
#screen-home .hp-streak{
  background:rgba(224,158,61,.14);color:var(--amber);
  border:1px solid rgba(224,158,61,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
#screen-home .hp-bar{background:rgba(41,52,98,.10);box-shadow:inset 0 1px 2px rgba(41,52,98,.08)}
#screen-home .hp-bar i{
  background:linear-gradient(90deg,var(--gl-accent),#7888EC);
  box-shadow:0 0 10px rgba(58,82,214,.45);border-radius:5px;
  transition:width .6s cubic-bezier(.22,.61,.36,1);
}
#screen-home .app-cta{
  background:linear-gradient(135deg,#3A52D6,#5B6CE0 55%,#6C7BEA);
  border-radius:16px;min-height:50px;font-size:16px;letter-spacing:.2px;
  box-shadow:0 10px 26px rgba(58,82,214,.34),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease,filter .18s ease;
}
#screen-home .app-cta:hover{filter:brightness(1.06);box-shadow:0 14px 34px rgba(58,82,214,.42),inset 0 1px 0 rgba(255,255,255,.4)}
#screen-home .app-cta:active{transform:scale(.97)}
#screen-home .hp-more{transition:color .18s ease}
#screen-home .hp-more:hover{color:var(--gl-accent)}

/* ---- 7.2 移动端 · 快捷入口（quick-item 三色）---- */
#screen-home .quick-item{
  position:relative;overflow:hidden;
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);border-radius:18px;
  box-shadow:var(--gl-shadow);min-height:64px;
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease;
}
#screen-home .quick-item:hover{
  transform:translateY(-3px);border-color:var(--gl-stroke);
  box-shadow:var(--gl-shadow-lift);
}
#screen-home .quick-item:active{transform:scale(.96)}
#screen-home .quick-item .qi{
  width:34px;height:34px;border-radius:11px;
  background:rgba(58,82,214,.12);color:var(--gl-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  transition:transform .2s ease;
}
#screen-home .quick-item:hover .qi{transform:scale(1.08)}
#screen-home .quick-item.q-teal .qi{background:rgba(10,122,106,.12);color:var(--teal)}
#screen-home .quick-item.q-violet .qi{background:rgba(108,75,232,.12);color:var(--violet)}
#screen-home .quick-item.q-amber .qi{background:rgba(138,83,6,.12);color:var(--amber)}

/* ---- 7.3 移动端 · 目录行与报告卡 ---- */
#screen-home .toc-list{
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-stroke-soft);
}
#screen-home .toc-row{
  border-radius:12px;position:relative;
  transition:background .18s ease,padding-left .18s ease;
}
#screen-home .toc-row::before{          /* 左侧强调条：hover 浮现 */
  content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--gl-accent),#7888EC);
  opacity:0;transition:opacity .18s ease;
}
#screen-home .toc-row:hover{background:rgba(58,82,214,.07);padding-left:12px}
#screen-home .toc-row:hover::before{opacity:1}
#screen-home #studyPanel .topic-card{
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border-color:var(--gl-stroke-soft);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease;
}
#screen-home #studyPanel .topic-card:hover{transform:translateY(-3px);box-shadow:var(--gl-shadow-lift)}
#screen-home .app-sec-head .more{transition:color .18s ease}
#screen-home .app-sec-head .more:hover{color:var(--gl-accent)}

/* ---- 7.4 PC · hero 区 ---- */
#screen-home .hero .badge{
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);
  box-shadow:var(--gl-shadow);color:var(--gl-accent);
}
#screen-home .hero .badge::before{      /* 徽章前置液态圆点 */
  content:"";width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--gl-accent),#56CBD6);
  box-shadow:0 0 8px rgba(58,82,214,.55);
}
#screen-home .hero h1 .g{
  background:linear-gradient(120deg,#3A52D6 0%,#6C7BEA 38%,#56CBD6 72%,#3A52D6 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:glFlow 9s ease-in-out infinite;
}
@keyframes glFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
#screen-home .hero-cta .btn-ghost{
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
#screen-home .hero-cta .btn-ghost:hover{
  transform:translateY(-2px);border-color:var(--gl-stroke);box-shadow:var(--gl-shadow);
}

/* ---- 7.5 PC · 日历与播放器 ---- */
#screen-home .cal{
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);border-radius:18px;
  box-shadow:var(--gl-shadow);padding:14px;
}
#screen-home .cal-grid i{
  border-radius:6px;transition:transform .15s ease,background .15s ease;
}
#screen-home .cal-grid i:hover{transform:scale(1.25)}
#screen-home .streak{
  background:rgba(224,158,61,.14);border:1px solid rgba(224,158,61,.28);
  box-shadow:0 0 12px rgba(224,158,61,.18);
}
#screen-home .player .play{
  background:linear-gradient(135deg,#3A52D6,#5B6CE0);
  box-shadow:0 8px 22px rgba(58,82,214,.38),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s cubic-bezier(.22,.61,.36,1),box-shadow .18s ease;
}
#screen-home .player .play:hover{transform:scale(1.07)}
#screen-home .player .play:active{transform:scale(.94)}
#screen-home .wave i{                   /* 波形条：液态呼吸 */
  background:linear-gradient(180deg,#7888EC,var(--gl-accent));
  border-radius:2px;
  animation:glWave 1.6s ease-in-out infinite;
}
@keyframes glWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

/* ---- 7.6 PC · 模块卡（topic-card）---- */
#screen-home .topic-card{
  position:relative;overflow:hidden;
  background:var(--gl-white-soft);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur);
  border:1px solid var(--gl-stroke-soft);
  transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s ease,border-color .22s ease;
}
#screen-home .topic-card::before{       /* 顶部渐变条 */
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gl-accent),#7888EC 55%,#56CBD6);
  opacity:0;transition:opacity .22s ease;
}
#screen-home .topic-card:hover{
  transform:translateY(-4px);border-color:var(--gl-stroke);
  box-shadow:var(--gl-shadow-lift);
}
#screen-home .topic-card:hover::before{opacity:.9}

/* ---- 7.7 深色模式 ---- */
html[data-theme="dark"] #screen-home .hp-card{
  background:linear-gradient(150deg,rgba(44,52,84,.72) 0%,rgba(38,44,70,.62) 58%,rgba(90,108,220,.18) 100%);
  border-color:rgba(255,255,255,.14);
}
html[data-theme="dark"] #screen-home .hp-card::before,
html[data-theme="dark"] #screen-home .topic-card::before{opacity:.7}
html[data-theme="dark"] #screen-home .hp-streak,
html[data-theme="dark"] #screen-home .streak{
  background:rgba(224,174,114,.14);color:#E0AE72;border-color:rgba(224,174,114,.26);
}
html[data-theme="dark"] #screen-home .quick-item,
html[data-theme="dark"] #screen-home .toc-list,
html[data-theme="dark"] #screen-home #studyPanel .topic-card,
html[data-theme="dark"] #screen-home .topic-card,
html[data-theme="dark"] #screen-home .cal,
html[data-theme="dark"] #screen-home .hero .badge,
html[data-theme="dark"] #screen-home .hero-cta .btn-ghost{
  background:rgba(38,44,68,.60);border-color:rgba(255,255,255,.11);
}
html[data-theme="dark"] #screen-home .quick-item .qi{background:rgba(129,140,248,.16);color:#A3AEFF}
html[data-theme="dark"] #screen-home .quick-item.q-teal .qi{background:rgba(124,201,178,.16);color:#7CC9B2}
html[data-theme="dark"] #screen-home .quick-item.q-violet .qi{background:rgba(206,146,232,.16);color:#CE92E8}
html[data-theme="dark"] #screen-home .quick-item.q-amber .qi{background:rgba(224,174,114,.16);color:#E0AE72}
html[data-theme="dark"] #screen-home .hero-stats > *{border-right-color:rgba(255,255,255,.14)}
html[data-theme="dark"] #screen-home .toc-row:hover{background:rgba(129,140,248,.10)}
html[data-theme="dark"] #screen-home .hp-bar{background:rgba(255,255,255,.10)}

/* ---- 7.8 无障碍 ---- */
@media (prefers-reduced-motion:reduce){
  #screen-home .hp-card::after,
  #screen-home .hero h1 .g,
  #screen-home .wave i{animation:none}
  #screen-home .quick-item,#screen-home .topic-card,#screen-home #studyPanel .topic-card,
  #screen-home .app-cta,#screen-home .player .play,#screen-home .toc-row{transition:none}
}

/* 7.9 补充 keyframes（7.4 / 7.5 引用） */
@keyframes glFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes glWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}