/* PianoFlow 设计系统（所有页面共用）
   颜色 / 字体 / 字号 / 圆角 / 阴影令牌 + 品牌标志 + 通用按钮。
   全站固定深色（2026-10-02 定：首页、课程、练习室统一一套，不跟系统走）；浅色令牌留着给打印页用（<html class="pf-light">）。各页面把自己原来的变量名映射到这里的 --pf-* 令牌。
   不引用任何外部资源（字体用系统自带，图标用内联 SVG），离线和国内网络都能正常显示。 */
:root {
  color-scheme: light;

  /* 字体：系统字体栈，Windows 用微软雅黑，苹果用苹方 */
  --pf-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  --pf-font-serif: Georgia, "Times New Roman", "Songti SC", serif;
  --pf-font-num: "Bahnschrift", "DIN Alternate", "SF Pro Display", "Segoe UI", system-ui, sans-serif; /* 数字：进度、计数、章节号 */

  /* 字号阶梯 */
  --pf-fs-xs: 12px; --pf-fs-sm: 13px; --pf-fs-base: 14px; --pf-fs-md: 16px;
  --pf-fs-lg: 18px; --pf-fs-xl: 22px; --pf-fs-2xl: 28px; --pf-fs-3xl: 34px;

  /* 圆角：控件 8 / 卡片 12 / 大卡片 16 / 弹窗 20 */
  --pf-r-xs: 6px; --pf-r-sm: 8px; --pf-r-md: 12px; --pf-r-lg: 16px; --pf-r-xl: 20px; --pf-r-pill: 999px;

  --pf-ease: cubic-bezier(.2, .8, .2, 1);
  --pf-dur: .16s;

  /* ── 浅色 ── */
  --pf-bg: #f5f6fa;
  --pf-bg-glow: rgba(68, 83, 230, .06);
  --pf-surface: #ffffff;
  --pf-surface-2: #f1f3f8;
  --pf-surface-3: #e7eaf2;
  --pf-chrome: rgba(255, 255, 255, .86);
  --pf-text: #151a2d;
  --pf-text-2: #434b62;
  --pf-muted: #687088;
  --pf-line: #e3e6ef;
  --pf-line-strong: #cdd2df;

  --pf-primary: #4453e6;
  --pf-primary-hover: #3543d0;
  --pf-primary-ink: #ffffff;
  --pf-primary-text: #3a48d4;
  --pf-primary-soft: rgba(68, 83, 230, .10);
  --pf-primary-line: rgba(68, 83, 230, .32);
  --pf-ring: rgba(68, 83, 230, .35);

  /* 完整版 / 付费相关：琥珀金 */
  --pf-premium: #b86a0a;
  --pf-premium-fill: linear-gradient(180deg, #f8c75f, #ef9f2f);
  --pf-premium-ink: #3a2300;
  --pf-premium-soft: rgba(239, 159, 47, .12);
  --pf-premium-line: rgba(214, 140, 30, .38);

  --pf-success: #138a4b; --pf-success-soft: rgba(19, 138, 75, .10);
  --pf-warning: #a86400; --pf-warning-soft: rgba(232, 150, 20, .12);
  --pf-danger: #d13737;  --pf-danger-soft: rgba(209, 55, 55, .10);

  --pf-shadow-sm: 0 1px 2px rgba(20, 26, 45, .06), 0 1px 3px rgba(20, 26, 45, .06);
  --pf-shadow-md: 0 6px 18px -6px rgba(20, 26, 45, .14), 0 2px 4px rgba(20, 26, 45, .04);
  --pf-shadow-lg: 0 24px 60px -18px rgba(20, 26, 45, .30);
  --pf-scrim: rgba(17, 21, 36, .48);
}

/* ── 深色（默认生效） ── */
:root:not(.pf-light) {
  color-scheme: dark;
    --pf-bg: #0d1017;
    --pf-bg-glow: rgba(125, 139, 255, .07);
    --pf-surface: #161a23;
    --pf-surface-2: #1d2230;
    --pf-surface-3: #262c3c;
    --pf-chrome: rgba(13, 16, 23, .86);
    --pf-text: #eceef5;
    --pf-text-2: #b9bfd0;
    --pf-muted: #8a91a6;
    --pf-line: #272d3c;
    --pf-line-strong: #363d51;

    --pf-primary: #7c8cff;
    --pf-primary-hover: #95a2ff;
    --pf-primary-ink: #0b0f26;
    --pf-primary-text: #9aa6ff;
    --pf-primary-soft: rgba(124, 140, 255, .15);
    --pf-primary-line: rgba(124, 140, 255, .40);
    --pf-ring: rgba(124, 140, 255, .45);

    --pf-premium: #f5bd52;
    --pf-premium-fill: linear-gradient(180deg, #f8c75f, #ec9a2a);
    --pf-premium-ink: #2e1c00;
    --pf-premium-soft: rgba(245, 189, 82, .12);
    --pf-premium-line: rgba(245, 189, 82, .36);

    --pf-success: #4ccf8a; --pf-success-soft: rgba(76, 207, 138, .13);
    --pf-warning: #f2b04a; --pf-warning-soft: rgba(242, 176, 74, .13);
    --pf-danger: #ff7a73;  --pf-danger-soft: rgba(255, 122, 115, .13);

    --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --pf-shadow-md: 0 8px 20px -8px rgba(0, 0, 0, .55);
    --pf-shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, .75);
    --pf-scrim: rgba(3, 5, 10, .66);
}

/* ── 品牌标志：<a class="pf-brand"><img class="pf-brand-mark" src="/icon.svg"><span class="pf-brand-name">琴阶</span></a>（图标由 tools/gen-brand.cjs 生成） ── */
.pf-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: var(--pf-text); text-decoration: none; font-family: var(--pf-font); }
.pf-brand-mark { width: 30px; height: 30px; flex: none; display: block; border-radius: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 4px 12px -4px rgba(0, 0, 0, .6); }
.pf-brand-name { font-size: 18px; font-weight: 800; letter-spacing: .12em; line-height: 1; white-space: nowrap; }
.pf-brand-name b { font-weight: 700; color: var(--pf-primary-text); }
.pf-brand-sub { margin-left: 2px; padding-left: 10px; border-left: 1px solid var(--pf-line-strong); color: var(--pf-muted); font-size: 13px; font-weight: 400; line-height: 1; white-space: nowrap; }

/* ── 通用按钮（新手入门、授权页、首页等新写的界面用） ── */
.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--pf-r-sm);
  border: 1px solid var(--pf-line-strong); background: var(--pf-surface); color: var(--pf-text); font: 600 14px/1 var(--pf-font); text-decoration: none; cursor: pointer;
  transition: background var(--pf-dur) var(--pf-ease), border-color var(--pf-dur) var(--pf-ease), box-shadow var(--pf-dur) var(--pf-ease), transform var(--pf-dur) var(--pf-ease); }
.pf-btn:hover { border-color: var(--pf-primary-line); background: var(--pf-surface-2); }
.pf-btn:active { transform: translateY(1px); }
.pf-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--pf-ring); }
.pf-btn--primary { border-color: transparent; background: var(--pf-primary); color: var(--pf-primary-ink); box-shadow: 0 6px 16px -8px var(--pf-primary); }
.pf-btn--primary:hover { border-color: transparent; background: var(--pf-primary-hover); }
.pf-btn--lg { min-height: 46px; padding: 0 24px; font-size: 15px; border-radius: 10px; }
.pf-btn svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}