/* ═══ 宣传片皮肤（2026-10-04）═══════════════════════════════════════════════════════════
   整个钢琴 app 换成宣传片（CodeFilm/films/pianoflow-tour）的视觉：深海军蓝底 + 顶部蓝紫光晕 + 浮尘、
   毛玻璃面板（rgba(20,24,38,.8) + 顶部高光 + 白色细描边）、品牌蓝紫 #7c8cff、雅黑 UI 粗标题。
   左右手配色跟宣传片和瀑布一致：右手蓝紫 #7c8cff、左手橙 #ffa050。
   用于 PianoFlow 的课程页、学前课和练习室；付费提示沿用 PianoFlow 原有的金色样式。
   用到的页面：public/index.html、learn.html、练习室 index.html、interval-trainer.html。 */

:root, :root[data-theme], :root:not(.pf-light) {
  color-scheme: dark;
  --promo-bg:#04060b;
  --promo-brand:#7c8cff; --promo-brand-hi:#a3afff; --promo-brand-lo:#5a68e0;
  --promo-glass:rgba(20,24,38,.80); --promo-glass-2:rgba(32,38,62,.86);
  --promo-stroke:rgba(255,255,255,.12);
  --promo-gold:#f7cf7d;

  --bg:#04060b; --paper:#04060b; --reader-bg:#04060b;
  --panel:var(--promo-glass); --panel-2:var(--promo-glass-2); --surface:var(--promo-glass);
  --card:var(--promo-glass); --card-bg:var(--promo-glass); --card-raised:var(--promo-glass-2); --card-bg-raised:var(--promo-glass-2);
  --ink:#f2f4ff; --text:#f2f4ff; --soft:rgba(236,238,245,.75);
  --muted:rgba(236,238,245,.55); --dim:rgba(236,238,245,.55); --text-muted:rgba(236,238,245,.55);
  --line:rgba(255,255,255,.12); --border:rgba(255,255,255,.12);
  --accent:#7c8cff; --accent-ink:#0b0d1a; --gold:#f5b544; --copper:#f5b544;
  --accent-soft:rgba(124,140,255,.16);
  --chrome-bg:rgba(6,8,16,.78);
  --gold-start:#f7cf7d; --gold-end:#f5b544;
  --green:#4ccf8a; --red:#ff6e64; --orange:#ffa050; --purple:#b084ff;
  --font-sans:"Microsoft YaHei UI","Microsoft YaHei","Segoe UI",sans-serif;
  --glow-accent:0 8px 22px -12px rgba(0,0,0,.85);
  --glow-gold:0 0 18px rgba(245,181,68,.35);
  --shadow:0 10px 30px -14px rgba(0,0,0,.8); --shadow-soft:0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-elevated:0 24px 60px -20px rgba(0,0,0,.9);

  /* 练习室：谱面线条、左右手 */
  --score-staff:#5d6584; --score-ink:#e6e9f8; --score-past:#6c7390;
  --hand-right:#7c8cff; --hand-left:#ffa050;

  /* PianoFlow 令牌（learn.html、练习室打磨层用） */
  --pf-font:var(--font-sans);
  --pf-bg:#04060b; --pf-bg-glow:rgba(40,52,140,.32); --pf-surface:var(--promo-glass); --pf-surface-2:var(--promo-glass-2); --pf-surface-3:rgba(44,52,84,.9);
  --pf-chrome:rgba(6,8,16,.78); --pf-line:rgba(255,255,255,.12); --pf-line-strong:rgba(255,255,255,.2);
  --pf-text:#f2f4ff; --pf-text-2:rgba(236,238,245,.75); --pf-muted:rgba(236,238,245,.55);
  --pf-primary:#7c8cff; --pf-primary-hover:#929fff; --pf-primary-ink:#0b0d1a; --pf-primary-text:#a3afff;
  --pf-primary-soft:rgba(124,140,255,.16); --pf-primary-line:rgba(124,140,255,.45); --pf-ring:rgba(124,140,255,.4);
  /* learn.html 自己的左右手变量 */
  --hand-r:#7c8cff; --hand-l:#ffa050;
}

/* ── 背景：底色 + 两团很淡的环境光放在 html 上；body 透明才能透出来（2026-10-04 沉浸演奏升级：去掉浮尘粒子，走克制路线） ── */
html {
  background:
    radial-gradient(ellipse 70% 55% at 50% -12%, rgba(40,52,140,.22), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 105%, rgba(60,50,110,.10), transparent 70%),
    #04060b !important;
  background-attachment:fixed !important;
}
html, body { color:var(--ink); }
body, body.mode-continuous { background:transparent !important; font-family:var(--font-sans); }
/* 弹出层要盖住下面的页面，用不透明的同款背景 */
#modalRoot.open {
  background:
    radial-gradient(ellipse 70% 55% at 50% -12%, rgba(40,52,140,.22), transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 105%, rgba(60,50,110,.10), transparent 70%),
    #04060b !important;
}
.modal-header, .modal-head { background:rgba(6,8,16,.78) !important; border-color:var(--line) !important; backdrop-filter:blur(12px); }

::selection { background:rgba(124,140,255,.35); color:#fff; }
:focus-visible { outline-color:var(--accent); }
h1, h2, h3, .hdr-title, .cc-hero-title, .chord-name strong, .hero h1, .card h2 { color:#f2f4ff; font-weight:800; letter-spacing:.01em; }

/* ── 毛玻璃面板：半透明深蓝 + 顶部 8% 白高光 + 12% 白描边 ── */
.card, .panel, .course-card, .lesson-row, .result-card, .practice-target, .midi-status-card, .song-card, .score-card, .day-card,
.cc-card, .cc-chapter, .cc-hero, .practice-card, .instrument-panel, .coach-panel, .trainer .card, .lesson,
.modal, .modal-content, .modal-panel, .range-chunk-card {
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 46px), var(--promo-glass) !important;
  border:1px solid var(--promo-stroke) !important;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(10px);
}
.cc-chapter--current, .lesson.next {
  border-color:rgba(124,140,255,.55) !important;
  box-shadow:0 0 0 1px rgba(124,140,255,.2), 0 18px 40px -24px rgba(0,0,0,.9) !important;
}
.cc-hero {
  background:
    radial-gradient(420px 260px at 88% 30%, rgba(124,140,255,.12), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 60px),
    rgba(20,24,38,.82) !important;
  border-color:rgba(124,140,255,.28) !important;
}
.cc-kicker { color:var(--promo-brand-hi) !important; letter-spacing:.08em; }
.cc-hero-intro, .cc-hero-meta { color:var(--soft) !important; }

/* 顶栏 / 底部标签栏：深色半透明 + 模糊 */
.hdr, .topbar, .site-header, .header, .tabbar, .tabs, .top, .practice-toolbar {
  background:rgba(6,8,16,.78) !important; border-color:var(--line) !important; backdrop-filter:blur(14px);
}
.hdr { color:#f2f4ff; }
.tab.active, .tab.active .label { color:var(--promo-brand-hi); }

/* ── 按钮：主按钮品牌纯色 + 深色字（不发光）；次按钮玻璃 ── */
.btn-primary, .primary, .primary-btn, .btn.primary, .primary-button, .round-play, #pianoRemoteBar button,
.drill-filter button.active, .cc-tag--current, .cc-chapter--current .cc-chapter-no, .cc-unlock-btn,
.practice-toolbar .segmented button.selected, .view-controls .segmented button.selected {
  background:#8794ff !important;
  color:#0b0d1a !important; border-color:#8794ff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.btn-primary:hover, .btn.primary:hover:not(:disabled), .primary-button:hover { filter:brightness(1.08); }
.btn-secondary, .cc-next, .cc-skills span, .btn:not(.primary):not(.btn-primary) {
  background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; color:var(--ink) !important;
}
.btn-secondary:hover, .btn:not(.primary):not(.btn-primary):hover:not(:disabled) { background:rgba(124,140,255,.12) !important; border-color:rgba(124,140,255,.45) !important; }
button:enabled:hover { border-color:rgba(124,140,255,.6); }
.cc-next-go { color:#0b0d1a !important; }

/* ── 进度条 / 章节号 / 当前行 ── */
.cc-bar, .bar, .continuous-progress-track { background:rgba(255,255,255,.08) !important; }
.cc-bar i, .bar i, .continuous-progress-track i { background:#8794ff !important; box-shadow:none; }
.cc-chapter-no { background:rgba(124,140,255,.14) !important; color:var(--promo-brand-hi) !important; }
.cc-chapter-pct, .phase-list .phase-state { color:var(--promo-brand-hi) !important; }
.cc-row--current { background:rgba(124,140,255,.12) !important; }
.cc-row--current .cc-dot { background:#7c8cff !important; border-color:#7c8cff !important; box-shadow:0 0 0 3px rgba(124,140,255,.2) !important; }
.cc-row+.cc-row { border-top-color:rgba(255,255,255,.06) !important; }
.cc-row:hover { background:rgba(124,140,255,.08) !important; }
.cc-ring-wrap circle:last-child { stroke:#7c8cff !important; }
.steps i.past { background:rgba(124,140,255,.45) !important; }
.steps i.now { background:#8794ff !important; }
.steps i.ok { background:#4ccf8a !important; }
.result-stars { color:var(--promo-gold) !important; }

/* 家庭档案按钮（右上角）也换成玻璃 */
#family-home-btn { background:rgba(20,24,38,.85) !important; color:#f2f4ff !important; border-color:rgba(255,255,255,.14) !important; }

/* ═══ 练习室 ═══ */
.practice, body.hand-right .practice, body.hand-both .practice { --hand:var(--accent); --hand-soft:var(--accent-soft); }
.practice-toolbar .segmented, .view-controls .segmented { background:rgba(4,6,11,.7) !important; border-color:var(--line) !important; }
.continuous-score-strip, #score, body.mode-continuous .continuous-score-strip { background:rgba(4,6,11,.55) !important; border-color:var(--line) !important; }
.practice .transport { background:var(--promo-glass) !important; }
.coach-panel select { background:var(--promo-glass-2) !important; }
.coach-panel .phase-list li.active button { background:rgba(124,140,255,.14) !important; border-color:rgba(124,140,255,.6) !important; }
.coach-panel .phase-list li.active .phase-num { background:#7c8cff !important; color:#0b0d1a !important; }
.cs-cursor-ov { background:rgba(124,140,255,.16) !important; }
.cs-cursor-ov::after { background:#8794ff !important; }
.lesson-picker {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%237c8cff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 目标键：默认品牌色光；右手蓝紫、左手橙（跟瀑布一致） */
.piano-key.target::before { background:linear-gradient(to top, rgba(124,140,255,.75), rgba(124,140,255,0)); }
body .piano-key .key-finger, body.hand-right .piano-key .key-finger, body.hand-both .piano-key .key-finger {
  background:rgba(11,15,34,.88) !important; color:#d8dcff !important;
  border:1px solid rgba(124,140,255,.68); border-radius:8px;
  width:28px; height:28px; font-size:16px;
  box-shadow:0 3px 10px rgba(3,5,15,.28) !important;
}
body .piano-key.black .key-finger { width:24px; height:24px; font-size:14px; }
body .piano-key.hand-r .key-finger { color:#d8dcff !important; border-color:rgba(124,140,255,.68); }
body .piano-key.hand-l .key-finger { color:#ffd6af !important; border-color:rgba(255,160,80,.62); }
body .piano-key.hand-r .key-finger--next { background:transparent !important; border-color:var(--hand-right); color:#5a68e0 !important; }
body .piano-key.hand-l .key-finger--next { background:transparent !important; border-color:var(--hand-left); color:#c0661e !important; }
body .piano-key.white .key-finger--next { color:#4e5bd0; border-color:#4e5bd0; }
.piano-key.white .key-finger--next,.piano-key.black .key-finger--next { border-style:solid; border-width:1px; border-radius:8px; opacity:.72; }
body .piano-key .key-finger--next { background:transparent !important; box-shadow:none !important; }
/* 琴键下方的旧版金黄图例改为与瀑布一致的蓝紫色。 */
.keyboard-footer .legend-dot.duet { background:#7c8cff; }
body.hand-both .action-insight { border-left-color:#7c8cff; }
.piano-key.upcoming.hand-r:not(.target)::before { background:linear-gradient(rgba(124,140,255,.32), rgba(124,140,255,0)); }
.piano-key.upcoming.hand-l:not(.target)::before { background:linear-gradient(rgba(255,160,80,.3), rgba(255,160,80,0)); }

:is(body,body.hand-right,body.hand-both) .piano-key.target.white {
  background:linear-gradient(180deg,#9ea3c0 0,#f6f7ff 4%,#eef0ff 40%,#c9cfff 100%);
  box-shadow:inset 0 -4px 0 #7c8cff, inset 0 0 0 1.5px rgba(124,140,255,.55), inset -1px 0 0 rgba(0,0,0,.12);
  filter:drop-shadow(0 0 10px rgba(124,140,255,.5));
}
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-r.white {
  background:linear-gradient(180deg,#9ea3c0 0,#f6f7ff 4%,#eef0ff 40%,#c9cfff 100%);
  box-shadow:inset 0 -4px 0 var(--hand-right), inset 0 0 0 1.5px rgba(124,140,255,.55), inset -1px 0 0 rgba(0,0,0,.12);
}
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-l.white {
  background:linear-gradient(180deg,#bba48f 0,#fff7ef 4%,#fff1e4 40%,#ffd4ad 100%);
  box-shadow:inset 0 -4px 0 var(--hand-left), inset 0 0 0 1.5px rgba(255,160,80,.55), inset -1px 0 0 rgba(0,0,0,.12);
  filter:drop-shadow(0 0 10px rgba(255,160,80,.45));
}
:is(body,body.hand-right,body.hand-both) .piano-key.target.white .key-note,
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-r.white .key-note { color:#4e5bd0; }
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-l.white .key-note { color:#b85c18; }
:is(body,body.hand-right,body.hand-both) .piano-key.target.black,
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-r.black {
  background:linear-gradient(180deg,#08090f 0,#141a3a 8%,#4c58c0 52%,#7c8cff 84%,#c4cbff 87%,#2c357c 95%,#0b0e22 100%);
  border-color:rgba(124,140,255,.85); filter:drop-shadow(0 0 10px rgba(124,140,255,.6));
}
:is(body,body.hand-right,body.hand-both) .piano-key.target.hand-l.black {
  background:linear-gradient(180deg,#0c0a09 0,#2a160b 8%,#c4682c 52%,#ffa050 84%,#ffcf9f 87%,#7a3c14 95%,#1d0f08 100%);
  border-color:rgba(255,160,80,.85); filter:drop-shadow(0 0 10px rgba(255,160,80,.55));
}

/* 音卡：玻璃 + 手色竖条 */
body .note-card, body .note-card.hand-r, body .note-card.hand-l, body.hand-right .note-card.note-bass { background:rgba(255,255,255,.04) !important; border-color:var(--line) !important; }
body .note-card:hover, body .note-card.sounding { background:rgba(124,140,255,.12) !important; border-color:rgba(124,140,255,.5) !important; }
body .note-card::before { background:var(--accent); }
body .note-card.hand-r::before { background:var(--hand-right); }
body .note-card.hand-l::before { background:var(--hand-left); }
body .note-card .note-label, #chord-symbol, .interval-breakdown b { font-family:var(--font-sans) !important; font-weight:700; }
body .note-card.hand-r .finger-circle { background:rgba(124,140,255,.16) !important; color:var(--hand-right) !important; box-shadow:inset 0 0 0 1.5px rgba(124,140,255,.6) !important; }
body .note-card.hand-l .finger-circle { background:rgba(255,160,80,.16) !important; color:var(--hand-left) !important; box-shadow:inset 0 0 0 1.5px rgba(255,160,80,.6) !important; }
:is(body,body.hand-right,body.hand-both) .hand-tag { background:rgba(124,140,255,.14) !important; color:var(--promo-brand-hi) !important; }
:is(body,body.hand-right,body.hand-both) .hand-illustration g.active:is(g,.bass) circle { fill:#7c8cff; stroke:#7c8cff; }
:is(body,body.hand-right,body.hand-both) .hand-illustration g.active text { fill:#0b0d1a; }

/* learn.html 的手形示意 */
.hands .r { fill:rgba(124,140,255,.18) !important; } .hands .l { fill:rgba(255,160,80,.18) !important; }

/* 触屏竖屏"请横过来"提示也用新底色和品牌色 */
@media (orientation:portrait) and (hover:none) and (pointer:coarse) {
  body::before { background:#04060b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%237c8cff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='30' y='14' width='36' height='60' rx='6' opacity='.45'/%3E%3Crect x='18' y='36' width='60' height='36' rx='6'/%3E%3Cpath d='M70 20a22 22 0 0 1 8 14l3-4m-3 4-4-3'/%3E%3C/svg%3E") center calc(50% - 46px)/110px no-repeat !important; }
}