/* ============================================================
   QB · 影院主题（cinema）：暗黑电影感皮肤，可一键切换
   ------------------------------------------------------------
   设计语言参考 ryota-kk/personal-homepage：
   深空底 #090b0f · 暗角 + 胶片颗粒 · 重度玻璃拟态 ·
   顶部内高光 · 青色辉光点缀 · 紧字距大标题 · 大写 kicker
   约束：全部规则 scoped 在 [data-theme="cinema"] 下，
   浅色 / 深色主题零影响；只做颜色 / 边框 / 阴影过渡，
   无位移动画（遵循全站防抖动约定）。
   回滚：删掉 index.html 里本文件引用即可。
   ============================================================ */

/* ---------- §1 影院令牌 ---------- */
[data-theme="cinema"] {
  color-scheme: dark;

  --bg: #090b0f;
  --surface: rgba(17, 22, 31, .78);
  --surface-2: rgba(24, 31, 43, .78);
  --surface-3: rgba(33, 42, 58, .82);
  --glass: rgba(13, 17, 24, .6);
  --text-1: rgba(255, 255, 255, .94);
  --text-2: rgba(255, 255, 255, .66);
  --text-3: rgba(255, 255, 255, .42);
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .22);

  --brand-50: rgba(79, 140, 255, .14);
  --brand-100: rgba(79, 140, 255, .2);
  --brand-200: #2c4a8f;
  --brand-300: #93bbfd;
  --brand-400: #5b93fa;
  --brand-500: #4f8cff;
  --brand-600: #3b78f6;
  --brand-700: #2f5fd0;
  --brand-grad: linear-gradient(135deg, #2f6bf0 0%, #1e40af 100%);

  --ok-500: #4ade80;
  --ok-bg: rgba(74, 222, 128, .1);
  --ok-line: rgba(74, 222, 128, .28);
  --warn-500: #fbbf24;
  --warn-bg: rgba(251, 191, 36, .1);
  --warn-line: rgba(251, 191, 36, .28);
  --err-500: #f87171;
  --err-bg: rgba(248, 113, 113, .1);
  --err-line: rgba(248, 113, 113, .3);
  --info-500: #38bdf8;
  --info-bg: rgba(56, 189, 248, .1);
  --info-line: rgba(56, 189, 248, .28);

  --tile-blue-bg: rgba(79, 140, 255, .16);   --tile-blue-fg: #8db1ff;
  --tile-violet-bg: rgba(125, 162, 255, .16); --tile-violet-fg: #9db8ff;
  --tile-amber-bg: rgba(251, 191, 36, .15);  --tile-amber-fg: #fbbf24;
  --tile-teal-bg: rgba(125, 190, 255, .14);   --tile-teal-fg: #8fc6ff;
  --tile-orange-bg: rgba(251, 146, 60, .15); --tile-orange-fg: #fb923c;
  --tile-pink-bg: rgba(244, 114, 182, .15);  --tile-pink-fg: #f472b6;
  --tile-cyan-bg: rgba(56, 189, 248, .14);   --tile-cyan-fg: #38bdf8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 8px 24px -6px rgba(0, 0, 0, .55);
  --shadow-3: 0 24px 56px -12px rgba(0, 0, 0, .65);
  /* 焦点环带一点辉光蓝，影院签名（2026-09-13 去青紫：原青色已换蓝） */
  --ring: 0 0 0 4px rgba(122, 168, 255, .16);

  --glass-bg: rgba(21, 28, 42, .88);
  --glass-bg-strong: rgba(15, 20, 30, .94);
  --glass-line: rgba(255, 255, 255, .14);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);

  /* 影院辉光蓝（2026-09-13 去青紫：变量名跨文件引用多故保留原名，值已换蓝） */
  --cinema-teal: #7aa8ff;
  --ease-cinema: cubic-bezier(.7, 0, .16, 1);
}

/* ---------- §2 影院底：极光色雾 + 暗角（跟随滚动；合成层实测更卡，已回滚） ----------
 * 长页不断色：底色通铺 var(--bg) 到底（去掉 #06080c 纯黑收尾——长页滚到底就是它，
 * 看着像缺色）；顶部两团极光钉在页首，紫色一团钉在页尾（50% 100%，之前 115% 落在
 * 盒子外面_pages_稍长就看不见），中段即便是平色也是藏青不是黑。暗角放轻，
 * 不在长页上下压出黑带。 */
[data-theme="cinema"] html { background: #0b1018; }
/* 背景钉死层：极光/暗角不再跟着内容滚（长页滚到底缺色的根因）。
 * position:fixed 合成层（非 background-attachment:fixed），静态渐变无重绘，
 * 不碰 backdrop-filter/动画，性能红线内。body 只留跟随的底色渐变。 */
[data-theme="cinema"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 12% 0, rgba(59, 130, 246, .16), transparent 65%),
    radial-gradient(820px 460px at 88% 0, rgba(232, 179, 75, .07), transparent 65%),
    radial-gradient(1000px 700px at 50% 100%, rgba(47, 95, 208, .15), transparent 65%),
    radial-gradient(circle at 50% 40%, transparent 62%, rgba(0, 0, 0, .30) 100%);
  background-repeat: no-repeat;
}
[data-theme="cinema"] body {
  background:
    linear-gradient(180deg, #0b1018 0%, var(--bg) 240px, var(--bg) 100%);
  background-repeat: no-repeat;
  background-color: var(--bg);
}
[data-theme="cinema"] ::selection { background: rgba(122, 168, 255, .3); color: #fff; }
/* 欢迎 hero 去紫（2026-09-13）：深蓝单色 + 暖金几何体，全站唯一的暖色点缀 */
[data-theme="cinema"] .cc-hero {
  background:
    linear-gradient(120deg,
      rgba(47, 107, 240, .30) 0%,
      rgba(30, 64, 175, .24) 55%,
      rgba(10, 18, 38, .55) 100%) !important;
}
[data-theme="cinema"] .cc-hero::before {
  background: linear-gradient(135deg, rgba(122, 168, 255, .32), rgba(47, 107, 240, .14));
}
[data-theme="cinema"] .cc-hero::after {
  background: linear-gradient(135deg, rgba(232, 179, 75, .20), rgba(122, 168, 255, .12));
}
[data-theme="cinema"] .cc-hero {
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 44px rgba(59, 110, 240, .14), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
}

/* ---------- §3 胶片颗粒（已删除：真机上是一层雾，字发虚；暗角极光已够氛围） ---------- */

/* ---------- §4 玻璃卡升级：分层渐变（无顶部径向高光） ---------- */
[data-theme="cinema"] .card,
[data-theme="cinema"] .stat,
[data-theme="cinema"] .dash-panel,
[data-theme="cinema"] .cc-card,
[data-theme="cinema"] .pv-main,
[data-theme="cinema"] .exam-toc,
[data-theme="cinema"] .exam-toolbar,
[data-theme="cinema"] .score-hero,
[data-theme="cinema"] .q-card,
[data-theme="cinema"] .q-editor,
[data-theme="cinema"] .book-reader {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02) 42%, rgba(5, 8, 12, .5)),
    var(--glass-bg) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  /* 无顶部内高光、无顶部径向高光：卡片上下边缘滚动扫过视口时会被看成横线 */
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5) !important;
}
/* 大卡片不做 backdrop-filter：滚动每帧大面积模糊又卡又出边缘伪影；
   玻璃感靠渐变层，模糊只留顶栏/侧栏/弹层小面积 */
[data-theme="cinema"] .card,
[data-theme="cinema"] .stat,
[data-theme="cinema"] .dash-panel,
[data-theme="cinema"] .cc-card,
[data-theme="cinema"] .pv-main,
[data-theme="cinema"] .exam-toc,
[data-theme="cinema"] .exam-toolbar,
[data-theme="cinema"] .score-hero,
[data-theme="cinema"] .q-card,
[data-theme="cinema"] .q-editor,
[data-theme="cinema"] .book-reader {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 题卡圆角放大一档，贴近参考风格的厚玻璃质感 */
[data-theme="cinema"] .q-card,
[data-theme="cinema"] .q-editor { border-radius: 18px !important; }
/* 触屏粘滞 hover 门控（2026-09-14）：影院主题下所有 :hover 只对真鼠标启用。
 * 触屏 tap 会"粘住" :hover 且无 mouseleave 清除 → 卡片辉光/边框/选项底色"取消不掉"。
 * 桌面 (hover:hover) 完全不受影响。 */
@media (hover: hover) {
[data-theme="cinema"] .q-card:hover,
[data-theme="cinema"] .q-editor:hover {
  border-color: rgba(122, 168, 255, .35) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 30px rgba(122, 168, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
}
[data-theme="cinema"] .topbar,
[data-theme="cinema"] .sidebar {
  background: var(--glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, .1) !important;
}
[data-theme="cinema"] .modal,
[data-theme="cinema"] .drawer,
[data-theme="cinema"] .sheet,
[data-theme="cinema"] .menu-pop {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 42%, rgba(8, 14, 18, .7)),
    var(--glass-bg-strong) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  box-shadow: 0 44px 120px rgba(0, 0, 0, .65) !important;
}

/* ---------- §5 悬停辉光（只变颜色 / 边框 / 阴影） ---------- */
@media (hover: hover) {
[data-theme="cinema"] .card.hoverable:hover {
  border-color: rgba(122, 168, 255, .4) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 36px rgba(122, 168, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}
}
[data-theme="cinema"] .nav-item.active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 20px rgba(79, 140, 255, .15);
}
[data-theme="cinema"] .btn-primary {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 24px -8px rgba(59, 130, 246, .7), 0 0 24px rgba(122, 168, 255, .12);
}
@media (hover: hover) {
[data-theme="cinema"] .btn-primary:hover {
  border-color: rgba(255, 255, 255, .25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px -8px rgba(59, 130, 246, .8), 0 0 32px rgba(122, 168, 255, .18);
}
[data-theme="cinema"] .btn-ghost:hover {
  border-color: rgba(122, 168, 255, .45);
  color: var(--text-1);
}
[data-theme="cinema"] .opt:hover { border-color: rgba(122, 168, 255, .4); }
[data-theme="cinema"] .qnav button:hover { border-color: rgba(122, 168, 255, .5); }
}

/* ---------- §6 字体排印：紧标题 + 大写 kicker ---------- */
[data-theme="cinema"] .page-title { letter-spacing: -.045em; }
[data-theme="cinema"] .nav-group { letter-spacing: .18em; }
[data-theme="cinema"] .card-sub { letter-spacing: .04em; }
[data-theme="cinema"] .login-title { letter-spacing: -.045em; }

/* ---------- §6b 答题/背诵件：青色签名 ---------- */
[data-theme="cinema"] .sec-head {
  color: var(--cinema-teal);
  border-left-color: var(--cinema-teal);
  letter-spacing: .06em;
}
[data-theme="cinema"] .exam-toolbar .progress > i {
  background: linear-gradient(90deg, #3b78f6, var(--cinema-teal));
  box-shadow: 0 0 12px rgba(122, 168, 255, .45);
}
[data-theme="cinema"] .chip {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .72);
}
@media (hover: hover) {
[data-theme="cinema"] .chip:hover {
  border-color: rgba(122, 168, 255, .5);
  color: #fff;
}
}
[data-theme="cinema"] .chip.on {
  border-color: rgba(122, 168, 255, .65);
  color: var(--cinema-teal);
  background: rgba(122, 168, 255, .1);
}
[data-theme="cinema"] .save-state {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .6);
}
[data-theme="cinema"] .q-no { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .75); }

/* ---------- §7 招牌辉光 ---------- */
[data-theme="cinema"] .brand-logo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 28px rgba(59, 110, 240, .45);
}
[data-theme="cinema"] .login-logo {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 44px rgba(59, 110, 240, .5);
}
[data-theme="cinema"] .login-stage::after {
  background: radial-gradient(closest-side, rgba(122, 168, 255, .12), transparent 72%);
}
[data-theme="cinema"] .login-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 42%, rgba(5, 8, 12, .5)),
    var(--glass-bg-strong);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
}
/* 欢迎页：暗角 + 暖金眉题 + 标题辉光（与登录卡同源做法） */
[data-theme="cinema"] .welcome-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 220px rgba(0, 0, 0, .55);
}
[data-theme="cinema"] .welcome-card {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 42%, rgba(5, 8, 12, .5)),
    var(--glass-bg-strong);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 0 44px rgba(79, 140, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .12);
}
[data-theme="cinema"] .welcome-kicker { color: var(--tile-amber-fg, #fbbf24); }
[data-theme="cinema"] .welcome-title { text-shadow: 0 2px 22px rgba(0, 0, 0, .45); }

/* ---------- §8 专注页：圆环辉光 ---------- */
[data-theme="cinema"] .focus-ring svg { filter: drop-shadow(0 0 14px rgba(122, 168, 255, .25)); }
[data-theme="cinema"] .share-item i { box-shadow: 0 0 8px rgba(255, 255, 255, .35); }
[data-theme="cinema"] .ftimer-state.on {
  box-shadow: 0 0 16px rgba(74, 222, 128, .15);
}

/* ---------- §9 统计图标砖：提亮（覆盖 cc-glass 的浅色硬编码，去紫粉） ---------- */[data-theme="cinema"] .dash-stats > .stat:nth-child(6n+1) .stat-ico { color: #8db1ff; }
[data-theme="cinema"] .dash-stats > .stat:nth-child(6n+2) .stat-ico { color: #9db8ff; }
[data-theme="cinema"] .dash-stats > .stat:nth-child(6n+3) .stat-ico { color: #8fb8ff; }
[data-theme="cinema"] .dash-stats > .stat:nth-child(6n+4) .stat-ico { color: #fbbf24; }
[data-theme="cinema"] .dash-stats > .stat:nth-child(6n+5) .stat-ico { color: #4ade9e; }
[data-theme="cinema"] .dash-stats > .stat:nth-child(6n) .stat-ico { color: #38bdf8; }

/* ---------- §10 列表行：呼吸感 + 幽灵蓝按钮（工作台/科目列表） ---------- */
[data-theme="cinema"] .card-title { color: #fff; letter-spacing: -.02em; }
[data-theme="cinema"] .recent-item,
[data-theme="cinema"] .list-row { border-color: rgba(255, 255, 255, .07); }
@media (hover: hover) {
[data-theme="cinema"] .recent-item:hover,
[data-theme="cinema"] .list-row:hover { background: rgba(79, 140, 255, .07); }
[data-theme="cinema"] .recent-item:hover .recent-item-title,
[data-theme="cinema"] .list-row:hover .list-row-title { color: #fff; }
}
/* meta 行提亮：版本号压成小章 */
[data-theme="cinema"] .recent-item-sub,
[data-theme="cinema"] .list-row-sub { color: rgba(255, 255, 255, .55); }
[data-theme="cinema"] .recent-item-sub span:first-child,
[data-theme="cinema"] .list-row-sub span:first-child {
  font-family: var(--mono);
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .75);
}
/* 行内主按钮去荧光：幽灵蓝，悬停再发光 */
[data-theme="cinema"] .recent-item .btn-primary,
[data-theme="cinema"] .list-row .btn-primary {
  background: rgba(79, 140, 255, .14);
  border-color: rgba(79, 140, 255, .42);
  color: #9dbcff;
  box-shadow: none;
}
@media (hover: hover) {
[data-theme="cinema"] .recent-item .btn-primary:hover,
[data-theme="cinema"] .list-row .btn-primary:hover {
  background: rgba(79, 140, 255, .26);
  border-color: rgba(147, 187, 253, .7);
  color: #fff;
  box-shadow: 0 0 22px rgba(79, 140, 255, .3);
}
}

/* ---------- §11 专注分类行：收弱顶边线 + 计时芯片质感 ---------- */
[data-theme="cinema"] .focus-cat-row {
  border-top-color: rgba(255, 255, 255, .1) !important;
  /* 去掉通用卡片的顶部内高光：叠放的卡缝之间会显出一道多余横线 */
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5) !important;
}
[data-theme="cinema"] .focus-cat-row::before {
  box-shadow: 0 0 12px var(--cat, var(--brand-500));
  opacity: .9;
}
[data-theme="cinema"] .focus-cat-row .fdot { box-shadow: 0 0 10px var(--cat, var(--brand-500)); }
[data-theme="cinema"] .focus-addcat .input {
  background: rgba(0, 0, 0, .25);
  border-color: rgba(255, 255, 255, .1);
}
[data-theme="cinema"] .focus-addcat .input:focus {
  background: rgba(0, 0, 0, .35);
  border-color: rgba(94, 231, 214, .5);
}
[data-theme="cinema"] .fchip { background: rgba(0, 0, 0, .25); }
[data-theme="cinema"] .fchip.running {
  box-shadow: 0 0 14px rgba(122, 168, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ---------- §12 侧栏悬停热区微光：平时隐藏，鼠标靠近左缘才显形 ----------
   常亮的亮条在滚动时会被误认成页面上的"线" */
[data-theme="cinema"] .rail-hot::after { opacity: 0; transition: opacity .25s ease; }
@media (hover: hover) {
[data-theme="cinema"] .rail-hot:hover::after { opacity: .55; }
}

/* ---------- §13 书籍行：去盒子化，收成连续列表（与工作台行一致） ----------
   原先每行独立描边圆角盒，上下边在 10px 缝里挤成双线，滚动时格外显眼 */
[data-theme="cinema"] .draft-row {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  border-radius: 0;
  margin-bottom: 0;
  padding: 13px 6px;
  box-shadow: none !important;
}
[data-theme="cinema"] .draft-row:last-child { border-bottom: 0; }

/* ---------- §14 列表去分隔线：工作台试卷行 + 书籍行（影院无 hairline） ----------
   行间 1px 分隔线在滚动时会被误认成页面上的"线"；影院整站已去盒子化，
   这里进一步去掉行分隔线，靠行距 + hover 淡染区分行。白天主题不动。 */
[data-theme="cinema"] .recent-item { border-bottom: 0; }
[data-theme="cinema"] .draft-row { border-bottom: 0; }
@media (hover: hover) {
[data-theme="cinema"] .draft-row:hover { background: rgba(79, 140, 255, .07); }
}