/* ══════════════════════════════════════════════════════════════
   RUVO 皮肤层 C「補充包 / Booster Pop」（2026-10-12 T13）
   正本：docs/roadstar/2026-10-10-site-review/proposals/C/design.md（配色・字体・圆角・阴影・弹簧）
   规矩：
     1. 每个页面最后加载（在页内 <style> 之后），只换「皮」：颜色、字体、圆角、阴影、徽章、版头。
     2. 颜色只在第 1 节的 token 层定义（浅色 = body / body[data-theme="light"]，深色 = body[data-theme="dark"]）。
        组件一律引用变量，不写死色值，T20 换配色只改 token 层。
        T21 起有三套配色：① 缺省（上两块），② body[data-pal="cream"]、③ body[data-pal="soda"] 各一浅一深（第 1''' 节）。
     3. 旧变量（--bg、--elev、--ink、--mute、--faint、--line、--volt、--v3-xxx、--rf-xxx）在 token 层映射到 C 的 token。
     4. 按钮、输入框、胶囊只用三档高度：--c-h-sm 32 / --c-h-md 40 / --c-h-lg 48。
     5. 动效只用彩动（Huemo）SET-springy：SPRING_PRESS / KOKO-smooth-tab / BEUI-switch / BEUI-button-magnetic，
        缓动由 ruvo-c.js 按弹簧参数算成 linear() 写进 --c-e-xxx；prefers-reduced-motion 时全停。
   ══════════════════════════════════════════════════════════════ */

/* ───────────── 1. Token 层（浅色，默认） ───────────── */
body, body[data-theme="light"] {
  /* C token（design.md §1.1，名字照抄） */
  --bg: #F3F2F7;
  --panel: #FFFFFF;
  --panel-b: #FBFAFE;   /* 面板材质下沿（--panel → --panel-b 180° 渐变，T21 / C3） */
  --hi: rgba(255, 255, 255, .9); /* 面板顶边 1px 内高光 */
  --overlay: #FFFFFF;
  --tray: #ECEBF2;      /* 凹槽：比底深一级（C3 细化版 B3） */
  --track: #E2E0EA;
  --ring: rgba(29, 26, 43, .14); /* 托盘描边 */
  --track-ui: #8E8AA0;  /* 非文字轨道（滑轨空段、开关轨道描边），对面板 ≥ 3:1 */
  --line: rgba(29, 26, 43, .08);
  --line-strong: rgba(29, 26, 43, .14);
  --text-1: #1D1A2B;
  --text-2: #4A4560;
  --text-3: #66617C;
  --tip-bg: #1D1A2B; --tip-ink: #FFFFFF;
  --lemon: #FFD23F;
  --lemon-deep: #F2B705;
  --lemon-wash: #FFF4C7;
  --lemon-text: #7A5A00;
  --sky: #7CC7FF;
  --sky-wash: #E4F2FF;
  --sky-text: #0B5D99;
  --peach: #FFB199;
  --mint: #8EE5C4;
  /* 旧样式把 --up/--down 当文字色用（涨跌数字），浅色里取文字档才过 4.5:1；▲ 和柱子用 --up-mark/--down-mark */
  --up: #C82838;
  --up-mark: #E5404F;
  --up-text: #C82838;
  --up-wash: #FDE8EA;
  --down: #08744C;
  --down-mark: #12A06A;
  --down-text: #08744C;
  --down-wash: #E0F4EA;
  --plate: #1D1A2B;
  --plate-ink: #FFFFFF;
  --ledge: rgba(29, 26, 43, .10);
  --ledge-lemon: #F2B705;
  --sticker-edge: #FFFFFF;
  --sticker-ink: #1D1A2B;
  --glow: 0 0 0 rgba(0, 0, 0, 0);
  --switch-track: #E2E0EA;
  --switch-thumb: #FFD23F;
  --knob: #FFFFFF;      /* プロ开关的小圆钮（三套配色、浅深都是白钮，照 C3 .prosw .trk i） */
  --logo-plate: transparent;
  --logo-plate-on: #FFFFFF; /* 选中的游戏 logo 白衬块（C3 A12：深色底板里垫白衬块，logo 保持原色） */
  --delta-on: #FFFFFF;
  --scrim: rgba(29, 26, 43, .32);
  /* T22 手机外壳的玻璃（M3 A15）：顶栏滚动后 76% 底色、dock／悬浮件 74% 面板色，配 blur。
     用 color-mix 从本块的 --bg／--panel 混出：变量在 body 上算值，三套配色 × 浅深各自覆盖 --bg／--panel 后，这两个跟着成立，不用每套再抄一份。
     不支持 color-mix 的浏览器由 ruvo-c-mobile.css 的 @supports 退回实色 --panel。 */
  --glass-bar: color-mix(in srgb, var(--bg) 76%, transparent);
  --glass-dock: color-mix(in srgb, var(--panel) 74%, transparent);
  --foil-holo: linear-gradient(115deg, #FFB199 0%, #FFD23F 26%, #8EE5C4 52%, #7CC7FF 76%, #FFC6E0 100%);
  --foil-gold: linear-gradient(115deg, #FFE68A 0%, #FFC83D 38%, #FFF2BF 54%, #F2AE34 100%);
  --foil-silver: linear-gradient(115deg, #EEF0F7 0%, #C9CFE0 40%, #FFFFFF 55%, #B9C1D6 100%);
  --foil-mint: linear-gradient(115deg, #BFF3DE 0%, #8EE5C4 40%, #E6FBF2 55%, #7CC7FF 100%);
  --foil-lemon: linear-gradient(100deg, #FFD23F 0%, #FFE88A 46%, #FFD23F 62%, #FFC93A 100%);
  --foil-rainbow-line: linear-gradient(115deg, transparent 40%, rgba(255, 177, 153, .95) 44%, rgba(255, 210, 63, .95) 48%, rgba(142, 229, 196, .95) 52%, rgba(124, 199, 255, .95) 56%, transparent 60%);
  --foil-stripe: repeating-linear-gradient(115deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 6px);
  --mur-face: linear-gradient(115deg, #2C2840, #1D1A2B 62%);
  --mur-ink: #FFD23F;
  --mur-edge: #F2AE34;
  --sheen: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .6) 46%, transparent 58%);
  --foil-fur-sparkle: radial-gradient(circle at 86% 28%, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 10% 76%, #fff 0 1px, transparent 1.8px);
  --sticker-shadow: 0 3px 8px -2px rgba(40, 30, 80, .25);
  --sticker-shadow-sm: 0 2px 5px -2px rgba(40, 30, 80, .22);
  --shadow-1: 0 1px 2px rgba(40, 30, 80, .05), 0 10px 26px -14px rgba(40, 30, 80, .24);
  --shadow-2: 0 2px 4px rgba(40, 30, 80, .04), 0 26px 50px -26px rgba(40, 30, 80, .34);
  --shadow-3: 0 4px 10px rgba(40, 30, 80, .06), 0 36px 70px -24px rgba(40, 30, 80, .40);
  --shadow-plate: 0 6px 14px -6px rgba(29, 26, 43, .45);
  --bg-art:
    radial-gradient(900px 420px at 6% -6%, #FFF1BD 0, rgba(255, 241, 189, 0) 62%),
    radial-gradient(760px 380px at 100% 0%, #DDEFFF 0, rgba(221, 239, 255, 0) 60%);
  /* Logo（叠卡） */
  /* 黄卡、蓝卡跟界面同一个柠檬和天空（C3 第二遍：三套配色里 Logo 和按钮同色）；蜜桃卡三套共用 */
  --lg-c1: var(--sky); --lg-c2: #FFB199; --lg-c3: var(--lemon); --lg-spark: #1D1A2B; --lg-gap: var(--panel); --lg-ink: var(--text-1);
  /* 图表系列色（chart.js 按旧色值查 --c-chart-<hex>） */
  /* 系列色只用天空、墨、柠檬三族加灰（design.md：强调只有柠檬和天空，蜜桃薄荷不进界面；红绿留给涨跌）。线对白底都 ≥ 3:1 */
  --chart-1: #0B5D99;  /* 天空深：主线 / 未鑑定・Aランク / シングル指数 */
  --chart-2: #1D1A2B;  /* 墨：PSA10 / PSA指数 */
  --chart-3: #B98A00;  /* 柠檬深：PSA9 / BOX */
  --chart-4: #3D86C6;  /* 天空中：総合 / 第 4 条线 */
  --chart-5: #8A85A0;  /* 灰：参考・その他 / 第 5 条线 */
  --focus-ring: #0B5D99;   /* 焦点环：2px + 2px 偏移，对底 ≥ 3:1（柠檬对白只有 1.4:1，不再做焦点环） */
  --mark-neutral: #ECEAF3; /* 价格札来源小圆标的中性色（浅深都偏亮，上面放墨字） */

  /* 字体（design.md §2） */
  /* 字体：M PLUS Rounded 1c，日文・英文・数字同一家（主席 10/12 选 B）。"RUVO Rounded" 由 assets/ruvo-fonts.css 定义，
     CSS 里写的字重会自动细一档（500→400 字形、600／700→500、800／900→700），生成器 scripts/build_font_css.js */
  --f-jp: "RUVO Rounded", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --f-num: "RUVO Rounded", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --f-mono: "RUVO Rounded", "Hiragino Maru Gothic ProN", ui-monospace, monospace;
  /* 形（design.md §3） */
  --r-xl: 32px; --r-lg: 28px; --r-row: 18px; --r-sm: 14px; --r-badge: 8px; --r-sticker: 7px;
  --c-h-sm: 32px; --c-h-md: 40px; --c-h-lg: 48px;
  /* 弹簧兜底缓动（ruvo-c.js 会用 linear() 覆盖） */
  --c-e-press: cubic-bezier(.34, 1.4, .64, 1); --c-d-press: 320ms;
  --c-e-tab: cubic-bezier(.34, 1.3, .64, 1); --c-d-tab: 450ms;
  --c-e-thumb: cubic-bezier(.3, 1.15, .5, 1); --c-d-thumb: 700ms;
  --c-e-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

/* ───────────── 1'. Token 层（深色：夜里的卡牌店） ───────────── */
body[data-theme="dark"] {
  --bg: #121019;
  --panel: #1B1826;
  --panel-b: #191623;
  --hi: rgba(255, 255, 255, .05);
  --overlay: #252134;
  --tray: #0C0A12;
  --track: #2C2840;
  --ring: rgba(255, 255, 255, .10);
  --track-ui: #6A6482;
  --tip-bg: #F2F0FA; --tip-ink: #1D1A2B;
  --line: rgba(255, 255, 255, .07);
  --line-strong: rgba(255, 255, 255, .13);
  --text-1: #F2F0FA;
  --text-2: #C9C5DA;
  --text-3: #9893AE;
  --lemon: #FFD23F;
  --lemon-deep: #F2B705;
  --lemon-wash: #3C332B;
  --lemon-text: #FFDB66;
  --sky: #8FD0FF;
  --sky-wash: #2B3144;
  --sky-text: #A9DBFF;
  --up: #FF6B77;
  --up-mark: #FF6B77;
  --up-text: #FF6B77;
  --up-wash: #402635;
  --down: #34D39A;
  --down-mark: #34D39A;
  --down-text: #34D39A;
  --down-wash: #1F3338;
  --plate: #F2F0FA;
  --plate-ink: #1D1A2B;
  --ledge: rgba(0, 0, 0, .45);
  --ledge-lemon: #B98A00;
  --sticker-edge: #2A2639;
  --glow: 0 0 18px rgba(255, 210, 63, .28);
  --switch-track: #3A3452;
  --switch-thumb: #F2F0FA;
  --logo-plate: #EDEBF5;
  --logo-plate-on: #F7F5FF;
  --delta-on: #1D1A2B;
  --scrim: rgba(8, 7, 14, .62);
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 30px -16px rgba(0, 0, 0, .7);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -28px rgba(0, 0, 0, .85);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .9);
  --shadow-plate: 0 6px 16px -6px rgba(0, 0, 0, .6);
  --bg-art:
    radial-gradient(820px 420px at 8% -10%, rgba(255, 210, 63, .14) 0, rgba(255, 210, 63, 0) 62%),
    radial-gradient(700px 380px at 96% -4%, rgba(143, 208, 255, .12) 0, rgba(143, 208, 255, 0) 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(255, 177, 153, .07) 0, rgba(255, 177, 153, 0) 60%);
  --lg-spark: #1D1A2B;
  --chart-1: #8FD0FF;
  --chart-2: #F2F0FA;
  --chart-3: #FFD23F;
  --chart-4: #4F9FE0;
  --chart-5: #9893AE;
  --focus-ring: #8FD0FF;
  --mark-neutral: #C9C5DA;
  color-scheme: dark;
}

/* ───────────── 1'''. 配色变体（T21 · C3 三套：①ホワイト＝上面两块 / ②クリーム / ③ソーダ）─────────────
   机制：body[data-pal="cream"|"soda"]，缺省就是 ①；值逐个照 C3 index.html 的 :root[data-pal=…] 块（含第一遍 B3／B8 增补）。
   早加载脚本（各页 <body> 第一行）与 ruvo-c.js 的 RuvoPal 写这个属性；切换时派发 window 事件 ruvo:pal（detail {pal}）。
   变体块只覆盖和 ① 不同的 token，其余（涨跌、箔面、字体、形）照用 ①。选择器顺序：浅变体在前、深变体（多一个属性）在后。 */
body[data-pal="cream"] {
  --bg: #F3ECDF; --panel: #FFFBF3; --panel-b: #FFF6E8; --overlay: #FFFCF6; --tray: #EAE1D0; --track: #DFD3BF;
  --text-1: #2A2119; --text-2: #57493C; --text-3: #6B5A49;
  --line: rgba(60, 40, 20, .09); --line-strong: rgba(60, 40, 20, .15); --ring: rgba(70, 45, 20, .16); --track-ui: #9C8B76;
  --plate: #2A2119; --tip-bg: #2A2119; --tip-ink: #FFFFFF;
  --ledge: rgba(70, 45, 20, .12); --switch-track: #DFD3BF; --mark-neutral: #E6DCCB; --scrim: rgba(42, 33, 25, .32);
  --shadow-1: 0 1px 2px rgba(70, 45, 20, .06), 0 10px 26px -14px rgba(70, 45, 20, .26);
  --shadow-2: 0 2px 4px rgba(70, 45, 20, .05), 0 26px 50px -26px rgba(70, 45, 20, .34);
  --shadow-3: 0 4px 10px rgba(70, 45, 20, .07), 0 36px 70px -24px rgba(70, 45, 20, .40);
  --shadow-plate: 0 6px 14px -6px rgba(42, 33, 25, .45);
  --bg-art:
    radial-gradient(900px 440px at 6% -6%, #FFE7A6 0, rgba(255, 231, 166, 0) 62%),
    radial-gradient(760px 380px at 100% 0%, #FFD9C7 0, rgba(255, 217, 199, 0) 60%);
  --chart-1: #0B5D99; --chart-2: #2A2119; --chart-3: #A07600; --chart-4: #3D86C6; --chart-5: #8A7B68;
  --lg-spark: #2A2119;
}
body[data-pal="soda"] {
  /* 柠檬汽水：彩动配色目录 PAL-yny5c1-02（华丽/浅/冷）。墨换成深青，天空换成汽水蓝，柠檬略收 */
  --bg: #E0F0F8; --panel: #FFFFFF; --panel-b: #F7FBFD; --overlay: #FFFFFF; --tray: #D4E8F2; --track: #C3DCE8;
  --text-1: #003040; --text-2: #2C5363; --text-3: #476674;
  --line: rgba(0, 48, 64, .09); --line-strong: rgba(0, 48, 64, .15); --ring: rgba(0, 48, 64, .15); --track-ui: #6E8E9C;
  --plate: #003040; --plate-ink: #FFFFFF; --tip-bg: #003040; --tip-ink: #FFFFFF;
  --lemon: #F0D058; --lemon-deep: #D4B232; --ledge-lemon: #C4A228;
  --sky: #00B8F8; --sky-wash: #DDF3FC; --sky-text: #005C82;
  --ledge: rgba(0, 48, 64, .12); --switch-track: #C3DCE8; --switch-thumb: #F0D058; --mark-neutral: #D4E8F2; --scrim: rgba(0, 48, 64, .32);
  --focus-ring: #005C82;
  --shadow-1: 0 1px 2px rgba(0, 48, 64, .06), 0 10px 26px -14px rgba(0, 48, 64, .26);
  --shadow-2: 0 2px 4px rgba(0, 48, 64, .05), 0 26px 50px -26px rgba(0, 48, 64, .34);
  --shadow-3: 0 4px 10px rgba(0, 48, 64, .07), 0 36px 70px -24px rgba(0, 48, 64, .40);
  --shadow-plate: 0 6px 14px -6px rgba(0, 48, 64, .45);
  --bg-art:
    radial-gradient(900px 420px at 6% -6%, #FFF3B8 0, rgba(255, 243, 184, 0) 60%),
    radial-gradient(820px 420px at 100% 0%, #BDEBFF 0, rgba(189, 235, 255, 0) 62%);
  --chart-1: #005C82; --chart-2: #003040; --chart-3: #8A7000; --chart-4: #0083B8; --chart-5: #6E8E9C;
  --lg-spark: #003040;
}
body[data-pal="cream"][data-theme="dark"] {
  --bg: #1A1714; --panel: #24201B; --panel-b: #211D18; --overlay: #2E2923; --tray: #15120F; --track: #3A332A;
  --text-1: #F6EFE4; --text-2: #D8CDBD; --text-3: #AB9E8C;
  --line: rgba(255, 240, 220, .08); --line-strong: rgba(255, 240, 220, .14); --ring: rgba(255, 240, 220, .09); --track-ui: #7A6E60;
  --plate: #F6EFE4; --plate-ink: #2A2119; --tip-bg: #F7F1E8; --tip-ink: #241E19;
  --ledge: rgba(0, 0, 0, .45); --switch-track: #4A4034; --mark-neutral: #D8CDBD; --sticker-edge: #2E2923; --scrim: rgba(10, 8, 6, .62);
  --sky-wash: #2C3340;
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 30px -16px rgba(0, 0, 0, .7);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 30px 60px -28px rgba(0, 0, 0, .85);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 80px -30px rgba(0, 0, 0, .9);
  --shadow-plate: 0 6px 16px -6px rgba(0, 0, 0, .6);
  --bg-art:
    radial-gradient(820px 420px at 8% -10%, rgba(255, 210, 63, .16) 0, rgba(255, 210, 63, 0) 62%),
    radial-gradient(700px 380px at 96% -4%, rgba(255, 177, 153, .10) 0, rgba(255, 177, 153, 0) 60%);
  --chart-1: #8FD0FF; --chart-2: #F6EFE4; --chart-3: #FFD23F; --chart-4: #4F9FE0; --chart-5: #AB9E8C;
  --logo-plate: #F3ECDF; --lg-spark: #2A2119;
}
body[data-pal="soda"][data-theme="dark"] {
  --bg: #002632; --panel: #0B3A49; --panel-b: #093544; --overlay: #14414F; --tray: #001F29; --track: #1A4E5E;
  --text-1: #E0F0F8; --text-2: #B5CFDA; --text-3: #A3C1CC;
  --line: rgba(224, 240, 248, .08); --line-strong: rgba(224, 240, 248, .14); --ring: rgba(224, 240, 248, .09); --track-ui: #4F7684;
  --plate: #E0F0F8; --plate-ink: #003040; --tip-bg: #E0F0F8; --tip-ink: #003040;
  --up: #FF8A93; --up-mark: #FF8A93; --up-text: #FF8A93; --up-wash: #4A3442;
  --down-wash: #0F4743;
  --sky: #4FD0FF; --sky-wash: #123F52; --sky-text: #9BE3FF;
  --lemon-wash: #34554C; --lemon-text: #F5DC7A; --ledge-lemon: #A88A1C;
  --ledge: rgba(0, 10, 16, .5); --switch-track: #1F5A6C; --switch-thumb: #E0F0F8; --mark-neutral: #B5CFDA; --sticker-edge: #14414F; --scrim: rgba(0, 12, 18, .62);
  --focus-ring: #9BE3FF; --glow: 0 0 18px rgba(240, 208, 88, .26);
  --shadow-1: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 30px -16px rgba(0, 10, 16, .75);
  --shadow-2: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 60px -28px rgba(0, 10, 16, .85);
  --shadow-3: inset 0 1px 0 rgba(255, 255, 255, .07), 0 40px 80px -30px rgba(0, 10, 16, .9);
  --shadow-plate: 0 6px 16px -6px rgba(0, 10, 16, .6);
  --bg-art:
    radial-gradient(820px 420px at 8% -10%, rgba(240, 208, 88, .14) 0, rgba(240, 208, 88, 0) 62%),
    radial-gradient(760px 400px at 96% -4%, rgba(0, 184, 248, .20) 0, rgba(0, 184, 248, 0) 60%);
  --chart-1: #4FD0FF; --chart-2: #E0F0F8; --chart-3: #F0D058; --chart-4: #2FA8D8; --chart-5: #A3C1CC;
  --logo-plate: #E0F0F8; --lg-spark: #003040;
}
/* 配色浮层里的色样（只是预览数据：每套四格＝底・面板・墨・柠檬，跟当前浅深走） */
.c-sw[data-sw="white"] { --s1: #F3F2F7; --s2: #FFFFFF; --s3: #1D1A2B; --s4: #FFD23F; }
.c-sw[data-sw="cream"] { --s1: #F3ECDF; --s2: #FFFBF3; --s3: #2A2119; --s4: #FFD23F; }
.c-sw[data-sw="soda"]  { --s1: #E0F0F8; --s2: #FFFFFF; --s3: #003040; --s4: #F0D058; }
body[data-theme="dark"] .c-sw[data-sw="white"] { --s1: #121019; --s2: #1B1826; --s3: #F2F0FA; --s4: #FFD23F; }
body[data-theme="dark"] .c-sw[data-sw="cream"] { --s1: #1A1714; --s2: #24201B; --s3: #F6EFE4; --s4: #FFD23F; }
body[data-theme="dark"] .c-sw[data-sw="soda"]  { --s1: #002632; --s2: #0B3A49; --s3: #E0F0F8; --s4: #F0D058; }

/* ───────────── 1''. 旧变量 → C token（浅深共用；选择器带上 [data-theme] 才压得过 ruvo-v3.css 的深色块） ───────────── */
body, body[data-theme="light"], body[data-theme="dark"] {
  --elev: var(--panel);
  --elev-2: var(--tray);
  --elev2: var(--tray);
  --ink: var(--text-1);
  --mute: var(--text-2);
  --faint: var(--text-3);
  --volt: var(--sky-text);
  --volt-2: var(--lemon-text);
  --pulse: var(--chart-2);
  --ice: var(--sky-text);
  --warn: var(--lemon-text);
  --ui: var(--f-jp);
  --jp-display: var(--f-jp);
  --display: var(--f-jp);
  --f-ui: var(--f-jp);
  --f-display: var(--f-jp);
  --mono: var(--f-mono);
  --rainbow: var(--foil-lemon);
  --rainbow-fixed: var(--foil-lemon);
  --rainbow-text: linear-gradient(var(--text-1), var(--text-1));
  --mod-border: linear-gradient(var(--line), var(--line));
  --mod-surface: linear-gradient(var(--panel), var(--panel));
  --rf-surface: var(--panel);
  --rf-shadow: var(--shadow-1);
  --rf-muted: var(--text-2);
  --rf-radius: var(--r-lg);
  --rf-radius-sm: var(--r-sm);
  --ruvo-logo-ink: var(--text-1);
  --ruvo-focus: var(--lemon-deep);
  --v3-ui: var(--f-jp);
  --v3-jp: var(--f-jp);
  --v3-mono: var(--f-num);   /* v3 部件里等宽体主要用在价格上，价格和正文同一家圆体 */
  --v3-r-mod: var(--r-lg);
  --v3-r-in: var(--r-sm);
  --v3-paper: var(--bg);
  --v3-ink: var(--text-1);
  --v3-mute: var(--text-2);
  --v3-faint: var(--text-3);
  --v3-line: var(--line);
  --v3-up: var(--up-text);
  --v3-dn: var(--down-text);
  --v3-card: var(--panel);
  --v3-card-2: var(--tray);
  --v3-hair: var(--line);
  --v3-track: var(--track);
  --v3-stripe: var(--line-strong);
  --v3-bubble: var(--plate);
  --v3-bubble-on: var(--plate-ink);
  --v3-snkr: var(--sky-text);   --v3-snkr-fill: var(--sky);        --v3-snkr-on: var(--sticker-ink);  --v3-snkr-soft: var(--sky-wash);
  --v3-xbuy: var(--lemon-text); --v3-xbuy-fill: var(--lemon);      --v3-xbuy-on: var(--sticker-ink);  --v3-xbuy-soft: var(--lemon-wash);
  --v3-up-soft: var(--up-wash);
  --v3-dn-soft: var(--down-wash);
  --v3-psa: var(--chart-2);     --v3-psa-fill: var(--mark-neutral); --v3-psa-on: var(--sticker-ink);   --v3-psa-soft: var(--track);
  --v3-mint: var(--text-2);     --v3-mint-fill: var(--mark-neutral); --v3-mint-on: var(--sticker-ink);  --v3-mint-soft: var(--tray);
  --v3-lemon: var(--lemon-text); --v3-lemon-fill: var(--lemon);    --v3-lemon-on: var(--sticker-ink); --v3-lemon-soft: var(--lemon-wash);
  --v3-salmon: var(--up-text);  --v3-salmon-fill: var(--mark-neutral); --v3-salmon-on: var(--sticker-ink); --v3-salmon-soft: var(--up-wash);
  --v3-lift: var(--shadow-1);
  --v3-lift-hi: var(--shadow-2);
  --v3-lift-sm: var(--shadow-1);
}

/* 图表旧色值 → C 系列色（chart.js 的 themeColor 先查这里） */
body {
  --c-chart-2ee6ff: var(--chart-1); --c-chart-0090de: var(--chart-1);
  --c-chart-c084fc: var(--chart-2); --c-chart-8a4bf0: var(--chart-2); --c-chart-ff3d9a: var(--chart-2); --c-chart-d81b79: var(--chart-2);
  --c-chart-ff8f6b: var(--chart-3); --c-chart-e8721c: var(--chart-3); --c-chart-ffd166: var(--chart-3); --c-chart-b98900: var(--chart-3);
  --c-chart-a3ff6e: var(--chart-4); --c-chart-3d9e00: var(--chart-4); --c-chart-5eead4: var(--chart-4); --c-chart-0ea5a5: var(--chart-4);
  --c-chart-4f6bff: var(--chart-1); --c-chart-3d5afe: var(--chart-1); --c-chart-7c9bff: var(--chart-1);
  --c-chart-9aa8d4: var(--chart-5); --c-chart-5b6b9e: var(--chart-5);
  /* card.html 的 PSA9 线、box.html 的多道线（シュリンク有無など） */
  --c-chart-3fdcc4: var(--chart-3); --c-chart-ffb020: var(--chart-3); --c-chart-8b7bff: var(--chart-2);
  --c-chart-4ade80: var(--chart-4); --c-chart-ff6b9d: var(--chart-5);
}

/* ───────────── 2. 底与字 ───────────── */
html { background: var(--bg); }
body, body[data-theme="light"], body[data-theme="dark"] {
  font-synthesis-weight: none;  /* 字重都有真字形（ruvo-fonts.css 按区间映射），不让浏览器合成假粗体 */
  font-family: var(--f-jp);
  font-weight: 500;
  color: var(--text-1);
  background: var(--bg-art), var(--bg);
  background-attachment: scroll;
  background-color: var(--bg);
}
.fx, .fx-bg { display: none !important; }
.num, .price-main, .price-sub, .hero-price, .ph-price, .mega-price, .price, .tk-price, .delta, .idx-big, .stat .v,
[class*="price"] .num, .v3-price, .v3-num {
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums lining-nums;
}
.num { letter-spacing: -.01em; }
.delta { font-weight: 800; text-shadow: none !important; }
.delta.up, .chg.up, .up { color: var(--up-text); }
.delta.down, .chg.down, .down { color: var(--down-text); }
code, kbd, time, .mono, .date, .v3-mono { font-family: var(--f-mono); }
/* 日文 UI 标签和标题用比例字距（palt），片假名不再一个字一格地散开 */
.c-nav, .c-subnav, .c-search, .c-tagline, .chip, .chips > button, .btn, .v3-subnav, .tabs, .ch-ranges, .home-cat-tabs,
h1, h2, h3, .page-lead h1, .sec h2, .stk, .tag { font-feature-settings: "palt" 1; }
/* 商品名一律圆体（旧样式有的继承了等宽体） */
.nm, .nm-link, .vt .nm, .tk-name, .tb-name, .detail-name, .card-tile .name, .v3-name { font-family: var(--f-jp) !important; font-weight: 700; letter-spacing: 0; }
h1, h2, h3, .page-lead h1, .sec h2, .v3-mod-h h2, .block-label h2 { font-family: var(--f-jp); font-weight: 900; letter-spacing: .01em; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus-ring) !important; outline-offset: 2px !important; }
body { --ruvo-focus: var(--focus-ring); }
::selection { background: var(--lemon-wash); color: var(--text-1); }
/* シンプル／プロ（T21）：body[data-view="simple"|"pro"]，缺省 simple；RuvoView（ruvo-c.js）切换 */
body:not([data-view="pro"]) .pro-only { display: none !important; }
body[data-view="pro"] .simple-only { display: none !important; }
.c-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 图标（sprite：assets/icons.svg → ruvo-icons.js 注入） */
.ic { width: 24px; height: 24px; display: inline-block; flex: none; vertical-align: middle; --ic-fill: var(--lemon); }

/* ───────────── 3. 版头：A「看板」排法（T21，样张 C3 ?only=homeA / notes「首页 · 排法 A」） ─────────────
   全站同一块面板 .c-hdr：左栏放叠卡标（宽 --c-brand-col），右栏 .c-find 两行。
   首页（.c-masthead.is-home）：大标 112、右栏第一行 导航托盘 + 更新时间 + 配色 + 浅深，第二行 820×48 大搜索。
   内页：小一号的标（80），第一行 导航托盘 + プロ（字＋轨道，不带图标）+ 配色 + 浅深，第二行 300×48 搜索 + 四作 + 更新时间。
   两种页面左栏同宽、内边距相同，所以导航托盘的左缘和竖直位置、浅深开关的右缘在首页 / 内页之间都不跳（1440 宽导航左缘 x = 492、开关右缘 1312）。
   内页版头因此是 152 高两行（C3 ?only=box 是 64 高单行、标 44）：为了导航不跳，内页跟首页同一块看板，登记在 T21 进度文件。 */
.c-masthead {
  position: relative; z-index: 30;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.c-masthead .c-hdr-wrap {
  width: min(1248px, calc(100% - 32px)); margin: 0 auto;
  padding: 36px 0 8px; display: block;
}
.c-hdr {
  --c-brand-col: 332px; --c-col-gap: 32px;
  position: relative; isolation: isolate; z-index: 2; /* 配色浮层要压住下面的子导航 */
  display: grid; grid-template-columns: var(--c-brand-col) minmax(0, 1fr); column-gap: var(--c-col-gap); align-items: center;
  padding: 20px 32px; border-radius: var(--r-xl);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-b) 100%);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--line), var(--shadow-1);
}
/* 包装纸的面：柠檬、天空两团光 + 很淡的箔光斜条；首页顶边是撕开的封口（锯齿）。装饰层单独裁切，浮层不受影响 */
.c-hdr-art { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.c-hdr-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(420px 220px at 14% 50%, color-mix(in srgb, var(--lemon) 22%, transparent), transparent 70%),
    radial-gradient(480px 260px at 92% 10%, color-mix(in srgb, var(--sky) 18%, transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 22px, color-mix(in srgb, var(--text-1) 2.2%, transparent) 22px 23px);
}
.c-masthead:not(.is-home) .c-hdr-art::before { opacity: .7; }
.c-hdr-art .c-crimp-top {
  position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--foil-lemon);
  -webkit-mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 18px 9px repeat-x;
          mask: conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 18px 9px repeat-x;
}

/* 叠卡标 + 字标 ruvo */
.c-brand {
  display: inline-flex; align-items: center; gap: 16px; justify-self: start; min-width: 0;
  border-radius: 24px; color: var(--text-1); text-decoration: none;
  transition: transform var(--c-d-press) var(--c-e-press);
}
.c-brand:active { transform: scale(.97); }
.c-mark { width: 80px; height: 80px; display: block; overflow: visible; flex: none; }
.c-word { width: 150px; height: 44px; display: block; flex: none; color: var(--lg-ink); --lg-ink: var(--text-1); }
.is-home .c-brand { gap: 20px; }
.is-home .c-mark { width: 112px; height: 112px; }
.is-home .c-word { width: 200px; height: 58px; }
@media (max-height: 800px) and (min-width: 901px) { .is-home .c-mark { width: 96px; height: 96px; } }
.c-card {
  transform-box: view-box; transform-origin: 32px 52px;
  transition: transform var(--c-d-press) var(--c-e-press);
}
/* 首页发牌前（等字体就绪那一会儿）外侧两张先伏着，免得完整叠卡先闪一帧；ruvo-c.js 的 go() 摘掉 */
.c-mark.is-pack-pending .c-card-1, .c-mark.is-pack-pending .c-card-3 { opacity: 0; }
.c-brand:hover .c-card-1, .c-brand:focus-visible .c-card-1 { transform: translate(-3px, 1px) rotate(-7deg); }
.c-brand:hover .c-card-2, .c-brand:focus-visible .c-card-2 { transform: translateY(-2px); }
.c-brand:hover .c-card-3, .c-brand:focus-visible .c-card-3 { transform: translate(3px, -3px) rotate(7deg); }

/* 右栏：两行，行高都是 48；上下各留 2px，让首页（大标 112）与内页的第一行落在同一个 y */
.c-find { display: grid; gap: 12px; min-width: 0; margin-block: 2px; }
.c-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-row1 { justify-content: space-between; }
.c-hdr-right { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.is-home .c-hdr-right { gap: 8px; }

/* 导航托盘：48 高凹槽 + 40 高按钮（字 16、图标 22），选中深色底板（KOKO-smooth-tab，ruvo-c.js） */
.c-nav {
  position: relative; display: flex; align-items: center; gap: 2px; flex: none;
  height: var(--c-h-lg); padding: 4px; margin: 0; border-radius: 999px;
  background: var(--tray);
  box-shadow: inset 0 0 0 1px var(--ring);
  isolation: isolate; min-width: 0;
  grid-column: auto !important;
}
.c-nav > a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--c-h-md); min-width: 88px; padding: 0 16px 0 12px; border-radius: 999px;
  min-height: 0 !important; box-shadow: none !important; background: transparent !important; border: 0 !important;
  font-size: 16px; font-weight: 700; color: var(--text-2); white-space: nowrap; text-decoration: none;
  transition: color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.c-nav > a::before, .c-nav > a::after { display: none !important; }
.c-nav > a .ic { width: 22px; height: 22px; color: currentColor; --ic-sw: 2.1; }
.c-nav > a .sn-label { font: inherit; color: inherit; letter-spacing: .01em; line-height: 1; }
.c-nav > a:hover { color: var(--text-1); }
.c-nav > a:active { transform: scale(.94); }
.c-nav > a.is-on { color: var(--plate-ink); }
.c-nav:not(.ready) > a.is-on { background: var(--plate) !important; }
.c-plate {
  position: absolute; z-index: 0; top: 4px; left: 0; width: 0; height: calc(100% - 8px);
  border-radius: 999px; background: var(--plate); box-shadow: var(--shadow-plate);
  opacity: 0; pointer-events: none;
}
.c-nav.ready .c-plate { opacity: 1; }

/* 更新时间（首页在第一行、内页在第二行右端） */
.c-stamp {
  display: inline-flex; align-items: center; gap: 8px; flex: none; position: relative;
  font: 700 13px/1 var(--f-jp); color: var(--text-3); white-space: nowrap;
}
.c-stamp time { font: 500 13px/1 var(--f-mono); color: var(--text-2); }
.c-stamp .c-live { width: 8px; height: 8px; border-radius: 50%; background: var(--down-mark); box-shadow: 0 0 0 4px var(--down-wash); flex: none; }
.c-stamp[hidden] { display: none; }
.c-stamp-t { display: inline-flex; align-items: baseline; gap: 6px; }
/* 桌面：「サイト更新」与件数只给读屏（件数在提示里看）；≤900 两样都直接显示（第 3 节末尾） */
.c-stamp-lab, .c-stamp-n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* 触屏点一下也出提示（没有悬停） */
.c-masthead .c-stamp:focus::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.c-masthead .c-row2 .c-stamp:focus::after { transform: none; }
.c-row2 .c-stamp { margin-left: auto; padding-right: 4px; }
.c-stamp-more { display: none; width: 14px; height: 14px; flex: none; color: var(--text-3); --ic-sw: 2.4; }
/* >900：时刻字只有 13 高，命中区上下各撑 14px、左右 8px（r2 S2） */
@media (min-width: 901px) {
  .c-masthead .c-stamp::before { content: ""; position: absolute; inset: -14px -8px; }
}
/* 901–1179 等宽的触屏（平板横屏）没有悬停：更新时间做成 40 高的凹槽小胶囊＋下箭头，看得出能点，点开出件数提示（r2 S2） */
@media (hover: none) and (min-width: 901px) {
  .c-masthead .c-stamp {
    height: 40px; padding: 0 10px 0 14px; gap: 6px; border-radius: 999px;
    background: var(--tray); box-shadow: inset 0 0 0 1px var(--ring);
    transition: transform var(--c-d-press) var(--c-e-press);
  }
  .c-masthead .c-stamp::before { inset: -2px -4px; }
  .c-masthead .c-stamp:active { transform: scale(.95); }
  .c-masthead .c-stamp .c-stamp-more { display: inline-block; }
  /* 胶囊比裸字宽 38，≥1180 的看板右栏只剩约 106：触屏下日期也收进提示，只留时刻（和 ≤1179 一样） */
  .c-masthead .c-stamp .c-stamp-d { display: none; }
}

/* 搜索：内页 300×48 凹槽；首页 820×48 白底大搜索（BEUI-button-magnetic 0.2） */
.c-search {
  position: relative; display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: var(--c-h-lg); width: 300px; padding: 0 6px 0 16px;
  border: 0; border-radius: 999px; cursor: pointer; text-align: left;
  background: var(--tray); box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--text-3); font: 700 14px/1 var(--f-jp);
  transition: transform var(--c-d-press) var(--c-e-press), box-shadow .2s ease;
}
.c-search:hover { box-shadow: inset 0 0 0 1.5px var(--lemon-deep); color: var(--text-2); }
.c-search:active { transform: scale(.97); }
.c-search .ic { width: 20px; height: 20px; color: var(--text-2); }
.c-search .c-search-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-search kbd {
  margin-left: auto; flex: none; height: 36px; min-width: 44px; display: grid; place-items: center; padding: 0 10px;
  font: 500 13px/1 var(--f-mono); color: var(--text-2); background: var(--panel); border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--ledge);
}
.c-search.is-xl {
  width: 100%; padding: 0 6px 0 20px; font-size: 16px; color: var(--text-2);
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-1);
}
.c-search.is-xl:hover { box-shadow: inset 0 0 0 1.5px var(--lemon-deep), var(--shadow-1); }
.c-search.is-xl .ic { width: 22px; height: 22px; }
.c-mag { will-change: transform; }

/* 浅深开关（BEUI-switch：重阻尼弹簧，按住压扁）80×48，滑块 40 */
.c-tsw {
  position: relative; flex: none; cursor: pointer;
  width: 80px; height: var(--c-h-lg); padding: 0; border: 0; border-radius: 999px;
  background: var(--switch-track);
  box-shadow: inset 0 0 0 1px var(--line), inset 0 2px 4px var(--ledge);
  transition: background-color .2s ease;
}
.c-tsw-thumb {
  position: absolute; top: 4px; left: 4px; width: 40px; height: 40px; border-radius: 999px;
  background: var(--switch-thumb); color: var(--sticker-ink);
  display: grid; place-items: center;
  box-shadow: 0 2px 0 var(--ledge), var(--shadow-1), var(--glow);
  transition: transform var(--c-d-thumb) var(--c-e-thumb), background-color .2s ease;
}
.c-tsw[aria-checked="true"] .c-tsw-thumb { transform: translateX(32px); }
.c-tsw-thumb .ic { width: 20px; height: 20px; position: absolute; --ic-sw: 2.3; transition: opacity .2s ease, transform .3s var(--c-e-out); }
.c-tsw .c-i-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.c-tsw[aria-checked="true"] .c-i-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
.c-tsw[aria-checked="true"] .c-i-moon { opacity: 1; transform: none; }
.c-tsw::after { content: attr(data-tip); }
/* 悬停：轨道描边加深一档、滑块放大 1.04（按下时 WAAPI 压到 0.9 会盖过它） */
@media (hover: hover) {
  .c-tsw:hover { box-shadow: inset 0 0 0 1.5px var(--line-strong), inset 0 2px 4px var(--ledge); }
  .c-tsw:hover .c-tsw-thumb { scale: 1.04; }
}
.c-tsw-thumb { transition: transform var(--c-d-thumb) var(--c-e-thumb), background-color .2s ease, scale .2s var(--c-e-out); }

/* プロ开关（RuvoView.mountSwitch 画的那只；BEUI-switch 800/80/4）122×40 */
.c-prosw {
  position: relative; flex: none; cursor: pointer;
  display: inline-grid; grid-template-columns: 22px auto 36px; align-items: center; gap: 8px;
  width: 122px; height: var(--c-h-md); padding: 0 8px 0 12px; border: 0; border-radius: 999px;
  background: var(--tray); box-shadow: inset 0 0 0 1px var(--ring); color: var(--text-2);
  font: 800 15px/1 var(--f-jp); white-space: nowrap;
  transition: transform var(--c-d-press) var(--c-e-press), color .2s ease;
}
.c-prosw:hover { color: var(--text-1); }
.c-prosw:active { transform: scale(.95); }
.c-prosw .ic { width: 22px; height: 22px; }
.c-prosw .c-pro-trk {
  position: relative; width: 36px; height: 22px; border-radius: 999px;
  background: var(--track); box-shadow: inset 0 0 0 1px var(--ring); transition: background-color .2s ease;
}
.c-prosw .c-pro-trk i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--knob); box-shadow: 0 0 0 1px var(--line), 0 1px 2px var(--ledge);
  transition: transform var(--c-d-thumb) var(--c-e-thumb);
}
.c-prosw[aria-checked="true"] { color: var(--text-1); }
.c-prosw[aria-checked="true"] .ic { --ic-fill: var(--lemon); }
.c-prosw[aria-checked="true"] .c-pro-trk { background: var(--lemon); box-shadow: inset 0 0 0 1px var(--lemon-deep); }
.c-prosw[aria-checked="true"] .c-pro-trk i { transform: translateX(14px); }
.c-prosw::after { content: attr(data-tip); }
/* 内页版头那只：不带图标，字「プロ」＋轨道（94 宽），第一行和首页一样长 */
.c-prosw.no-ic { width: auto; grid-template-columns: auto 36px; padding: 0 8px 0 14px; }

/* 配色按钮（40×40 纯图标，凹槽底）＋ 浮层（MP-morphing-popover 的长出方式，SPRING_PANEL 420/40/0.5） */
.c-iconbtn.is-tray { background: var(--tray); box-shadow: inset 0 0 0 1px var(--ring); border-radius: 999px; }
.c-iconbtn.is-tray:hover { background: var(--track); }
.c-iconbtn.is-tray .ic { width: 22px; height: 22px; }
.c-palwrap { position: relative; flex: none; display: inline-flex; }
.c-palbtn[aria-expanded="true"] { background: var(--plate); color: var(--plate-ink); box-shadow: var(--shadow-plate); }
.c-palbtn[aria-expanded="true"]::after { opacity: 0 !important; }
.c-pop {
  position: absolute; top: calc(100% + 10px); right: -4px; z-index: 60;
  width: 248px; padding: 12px; border-radius: 22px;
  background: var(--overlay); color: var(--text-1);
  box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--line-strong), var(--shadow-3);
  transform-origin: var(--ox, 90%) 0;
}
.c-pop[hidden] { display: none; }
.c-pop-title { margin: 2px 6px 10px; font: 800 13px/1.4 var(--f-jp); color: var(--text-2); letter-spacing: .04em; }
.c-pal-opts { display: grid; gap: 4px; }
.c-pal-opt {
  display: grid; grid-template-columns: 64px 1fr 22px; align-items: center; gap: 12px;
  width: 100%; height: var(--c-h-lg); padding: 0 12px 0 8px; border: 0; border-radius: 16px; cursor: pointer;
  background: transparent; color: var(--text-1); text-align: left;
  font: 700 15px/1 var(--f-jp);
  transition: background-color .15s ease, transform var(--c-d-press) var(--c-e-press);
}
.c-pal-opt:hover { background: var(--tray); }
.c-pal-opt:active { transform: scale(.97); }
.c-pal-opt[aria-checked="true"] { background: var(--tray); }
.c-pal-opt .ic { width: 22px; height: 22px; opacity: 0; color: var(--text-1); }
.c-pal-opt[aria-checked="true"] .ic { opacity: 1; }
.c-sw {
  display: grid; grid-template-columns: repeat(4, 1fr); width: 64px; height: 32px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-strong);
}
.c-sw i { display: block; }
.c-sw i:nth-child(1) { background: var(--s1); } .c-sw i:nth-child(2) { background: var(--s2); }
.c-sw i:nth-child(3) { background: var(--s3); } .c-sw i:nth-child(4) { background: var(--s4); }

/* 四作切换（内页第二行；首页由筛选条负责，不在版头出现） */
.c-games {
  display: inline-flex !important; align-items: center; gap: 2px; flex: none; padding: 4px; margin: 0 !important;
  height: var(--c-h-lg); border-radius: 999px; background: var(--tray);
  box-shadow: inset 0 0 0 1px var(--ring);
}
.c-games button {
  display: grid; place-items: center; width: 96px; min-width: 0; height: var(--c-h-md); padding: 4px 12px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer; box-shadow: none !important;
  transition: background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.c-games button:hover { background: var(--panel); }
.c-games button:active { transform: scale(.94); }
.c-games button.is-on { background: var(--logo-plate-on); box-shadow: inset 0 0 0 3px var(--plate), var(--shadow-plate) !important; }
.c-games button img { max-width: 100% !important; max-height: 24px !important; width: auto !important; height: auto; object-fit: contain; filter: none !important; transform: none !important; }
.c-games button:not(.is-on) img { opacity: .78; }
body[data-theme="dark"] .c-games button { background: var(--logo-plate); scale: .9; }
body[data-theme="dark"] .c-games button:hover { filter: brightness(1.04); }
body[data-theme="dark"] .c-games button.is-on { scale: 1; box-shadow: inset 0 0 0 3px var(--lemon), var(--glow) !important; }
body[data-theme="dark"] .c-games button:not(.is-on) { opacity: .62; }
body[data-theme="dark"] .c-games button:not(.is-on):hover { opacity: .9; }
.c-games .th-dark { display: none !important; }
.c-games .th-light { display: block !important; }
.home-page .c-games { display: none !important; }
.c-tagline { margin: 0; }
/* 站点标语：每页页脚第一行（app.js 注入；A「看板」版头里没有它的位置） */
.foot .c-tagline { flex-basis: 100%; font: 700 13px/1.6 var(--f-jp); color: var(--text-2); letter-spacing: .02em; }
.foot .c-tagline b { font-weight: 800; color: var(--text-1); }
/* 首页正文里 T3b 的搜索胶囊：版头已有 820×48 大搜索（同一个快速检索），先藏起来，T14 改正文时连 DOM 一起删 */

/* 子导航（相場 / BOX 分析组）：面板下面一行小号胶囊分段 */
.c-subnav {
  display: inline-flex !important; gap: 2px; padding: 4px; margin: 12px 0 0 !important;
  border-radius: 999px; background: var(--tray); box-shadow: inset 0 0 0 1px var(--ring);
  border: 0 !important; overflow-x: auto; max-width: 100%; scrollbar-width: none;
}
.c-subnav::-webkit-scrollbar { display: none; }
.c-subnav a {
  display: inline-flex; align-items: center; height: var(--c-h-md); padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--text-2); white-space: nowrap; text-decoration: none;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  transition: color .2s ease, background-color .2s ease, transform var(--c-d-press) var(--c-e-press);
}
.c-subnav a:hover { color: var(--text-1); background: var(--panel) !important; }
.c-subnav a:active { transform: scale(.95); }
.c-subnav a[aria-current="page"] { color: var(--plate-ink) !important; background: var(--plate) !important; box-shadow: var(--shadow-plate) !important; }

/* 版头里的日文提示（data-tip，BEUI-tooltip：悬停 120ms 后出、键盘聚焦立刻出） */
.c-masthead [data-tip]::after {
  position: absolute; left: 50%; top: calc(100% + 10px); z-index: 70;
  padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  font: 700 13px/1.3 var(--f-jp); letter-spacing: .02em; color: var(--tip-ink); background: var(--tip-bg);
  box-shadow: var(--shadow-plate);
  opacity: 0; transform: translate(-50%, -4px) scale(.96); transform-origin: 50% 0;
  transition: opacity .14s ease, transform .2s var(--c-e-out); transition-delay: 0s;
}
.c-masthead .c-iconbtn[data-tip]::after, .c-masthead .c-tsw::after, .c-masthead .c-prosw::after, .c-masthead .c-stamp::after { content: attr(data-tip); }
.c-masthead [data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 120ms; }
.c-masthead [data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 0s; }
.c-masthead .c-hdr-right > :last-child[data-tip]::after { left: auto; right: 0; transform: translate(0, -4px) scale(.96); transform-origin: 100% 0; }
.c-masthead .c-hdr-right > :last-child[data-tip]:hover::after,
.c-masthead .c-hdr-right > :last-child[data-tip]:focus-visible::after { transform: none; }
.c-masthead .c-row2 .c-stamp[data-tip]::after { left: auto; right: 0; transform: translate(0, -4px); }
.c-masthead .c-row2 .c-stamp[data-tip]:hover::after { transform: none; }
.c-masthead .notip::after { opacity: 0 !important; }

/* ── 版头断点：≤1279 左栏收窄（首页大标 80），≤1179 导航字 14、内页搜索收成图标，901–1023 导航只留图标，≤900 叠成上下四行 ── */
@media (max-width: 1279px) {
  .c-hdr { --c-brand-col: 212px; --c-col-gap: 24px; padding: 20px 24px; }
  .is-home .c-brand, .c-brand { gap: 12px; }
  .is-home .c-mark { width: 80px; height: 80px; }
  .is-home .c-word, .c-word { width: 120px; height: 35px; }
  .c-mark { width: 64px; height: 64px; }
}
@media (max-width: 1179px) {
  .c-nav > a { min-width: 0; padding: 0 10px 0 8px; gap: 4px; font-size: 14px; }
  .c-nav > a .ic { width: 20px; height: 20px; }
  .c-prosw:not(.no-ic) { width: auto; grid-template-columns: 22px 36px; padding: 0 8px 0 10px; }
  .c-prosw:not(.no-ic) .c-pro-lab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .c-stamp .c-stamp-d { display: none; }
  .c-masthead:not(.is-home) .c-search { width: var(--c-h-lg); padding: 0; justify-content: center; }
  .c-masthead:not(.is-home) .c-search .c-search-label, .c-masthead:not(.is-home) .c-search kbd { display: none; }
  .c-masthead:not(.is-home) .c-search .ic { width: 22px; height: 22px; }
}
@media (max-width: 1023px) and (min-width: 901px) {
  .c-nav > a { width: 44px; padding: 0; gap: 0; justify-content: center; }
  .c-nav > a .sn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 900px) {
  .c-masthead .c-hdr-wrap { width: calc(100% - 32px); padding-top: 16px; }
  /* 内页四行：标＋配色＋浅深／导航／搜索＋四作／更新时间＋プロ；首页四行：标＋配色＋浅深／导航／大搜索／更新时间。
     DOM 顺序由 app.js 在这个宽度下调成和视觉一样（Tab 顺序不跳） */
  .c-hdr {
    grid-template-columns: var(--c-h-md) auto minmax(0, 1fr) auto auto;
    grid-template-areas: "brand brand . pal tsw" "nav nav nav nav nav" "srch games games games games" "stamp stamp stamp pro pro";
    row-gap: 12px; column-gap: 8px; padding: 12px; border-radius: 28px;
  }
  .c-masthead.is-home .c-hdr { padding: 12px; grid-template-areas: "brand brand . pal tsw" "nav nav nav nav nav" "row2 row2 row2 row2 row2" "stamp stamp stamp stamp stamp"; }
  .c-find, .c-row1, .c-hdr-right { display: contents; }
  .c-masthead:not(.is-home) .c-row2 { display: contents; }
  .c-masthead:not(.is-home) .c-search { grid-area: srch; }
  .c-masthead:not(.is-home) .c-games { grid-area: games; }
  .c-brand { grid-area: brand; gap: 8px; }
  .c-mark, .is-home .c-mark { width: 48px; height: 48px; }
  .c-word, .is-home .c-word { width: 88px; height: 26px; }
  .c-nav { grid-area: nav; grid-column: 1 / -1 !important; width: 100%; height: auto; padding: 4px; }
  .c-nav > a { flex: 1 1 auto; min-width: 0; width: auto; flex-direction: column; height: 52px; padding: 0 4px; gap: 3px; font-size: 12px; letter-spacing: -.02em; border-radius: 20px; }
  .c-nav > a .sn-label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .c-nav > a .ic { width: 21px; height: 21px; }
  .c-plate { border-radius: 20px; }
  .c-palwrap { grid-area: pal; }
  .c-tsw { grid-area: tsw; width: 64px; height: var(--c-h-md); }
  .c-tsw-thumb { width: 32px; height: 32px; }
  .c-tsw[aria-checked="true"] .c-tsw-thumb { transform: translateX(24px); }
  .c-pro-mount { grid-area: pro; display: flex; justify-content: flex-end; align-self: center; }
  .c-row2 { grid-area: row2; }
  .c-masthead:not(.is-home) .c-search { width: var(--c-h-md); height: var(--c-h-md); padding: 0; justify-content: center; }
  .c-masthead:not(.is-home) .c-search .c-search-label, .c-masthead:not(.is-home) .c-search kbd { display: none; }
  /* 更新时间：触屏没有悬停，「サイト更新 月/日 时刻」和件数两行直接显示 */
  .c-masthead .c-stamp { grid-area: stamp; align-self: center; justify-self: start; margin: 0; padding: 0 0 0 4px; flex-wrap: wrap; column-gap: 8px; row-gap: 4px; }
  .c-masthead .c-stamp[hidden] { display: none; }
  .c-stamp .c-stamp-d { display: inline; }
  .c-stamp-lab, .c-stamp-n { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .c-stamp-lab { font: 700 12px/1 var(--f-jp); color: var(--text-3); }
  .c-stamp time { font-size: 12px; }
  .c-stamp-n { flex-basis: 100%; padding-left: 16px; font: 700 12px/1 var(--f-jp); color: var(--text-3); }
  .c-games { flex: 1 1 auto; min-width: 0; height: var(--c-h-md); padding: 2px; overflow-x: auto; scrollbar-width: none; }
  .c-games::-webkit-scrollbar { display: none; }
  /* 右缘渐隐，提示还能横滑 */
  .c-games { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .c-games button { flex: 1 0 76px; width: auto; height: 36px; padding: 4px 8px; }
  .c-games button img { max-height: 20px !important; }
  .c-pop { right: -44px; }
  .c-subnav { margin-top: 10px !important; }
  /* 触屏宽度不出悬停提示（它们藏着也会把页面撑出横向滚动） */
  .c-masthead [data-tip]::after { content: none !important; }
}
@media (max-width: 360px) {
  .c-word, .is-home .c-word { width: 72px; height: 21px; }
  .c-nav > a { font-size: 11px; letter-spacing: -.03em; padding: 0 2px; }
}

/* ───────────── 4. 纯图标按钮（.c-iconbtn）与三档高度 ───────────── */
.c-iconbtn {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: var(--c-h-md); height: var(--c-h-md); padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--panel); color: var(--text-2); cursor: pointer;
  box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--ledge);
  transition: transform var(--c-d-press) var(--c-e-press), color .2s ease, background-color .2s ease;
}
.c-iconbtn.is-sm { width: var(--c-h-sm); height: var(--c-h-sm); border-radius: 10px; }
.c-iconbtn.is-lg { width: var(--c-h-lg); height: var(--c-h-lg); border-radius: 16px; }
.c-iconbtn .ic { width: 20px; height: 20px; }
.c-iconbtn:hover { color: var(--text-1); background: var(--tray); }
.c-iconbtn:active { transform: scale(.93); }
.c-iconbtn[aria-pressed="true"] { background: var(--plate); color: var(--plate-ink); box-shadow: var(--shadow-plate); }
/* 日文 tooltip：悬停或键盘聚焦时出现，文字取 data-tip，没有就取 aria-label */
.c-iconbtn::after, .c-tsw::after {
  position: absolute; left: 50%; top: calc(100% + 8px); z-index: 50;
  padding: 6px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none;
  font: 700 12px/1.3 var(--f-jp); color: var(--plate-ink); background: var(--plate);
  box-shadow: var(--shadow-3);
  opacity: 0; transform: translate(-50%, -4px); transition: opacity .15s ease, transform .2s var(--c-e-out);
}
.c-iconbtn::after { content: attr(aria-label); }
.c-iconbtn[data-tip]::after { content: attr(data-tip); }
.c-iconbtn:hover::after, .c-iconbtn:focus-visible::after,
.c-tsw:hover::after, .c-tsw:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }

/* ───────────── 5. 面板 ───────────── */
.mod, .panel, .table-wrap, .chart-shell, .idx-chart-shell, .stat, .v3-mod, .hero-stage, .tb-card, .price-hero,
.spotlight-card, .ev-card, .shop-card, .set-card, .col-card, .stock-stat, .detail-art-stage, .cmd-box {
  background: var(--panel) !important;
  border: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line) !important;
}
.mod::before, .tb-card::after { display: none !important; }
.mod:hover, .v3-mod:hover, .panel:hover, .stat:hover, .hero-stage:hover { box-shadow: var(--shadow-2), 0 0 0 1px var(--line) !important; }
.stat { border-radius: var(--r-row) !important; }
.detail-art-stage { background: var(--tray) !important; }
.page-lead h1, .sec h2 { color: var(--text-1); -webkit-text-fill-color: currentColor; background: none !important; filter: none !important; }
.page-lead p, .sec-note, .v3-mod-h .v3-hint, .block-label .hint { color: var(--text-2); }
.hero-kicker, .sec .sec-kicker { color: var(--text-3); font-family: var(--f-mono); }
.sec a.more { color: var(--sky-text); }

/* 锯齿分隔条（补充包封口母题） */
.c-crimp {
  display: block; height: 10px; border: 0; margin: 28px auto; background: var(--foil-lemon); opacity: .85;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 6px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 6px repeat-x;
          mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 0 0 / 12px 6px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 0 100% / 12px 6px repeat-x;
}

/* 价格札 / 売れ方主块 / 目录卡下的小价格格：不再按区块铺天空・柠檬・蜜桃大色块（design.md §1：马卡龙色不按区块分配）。
   面板一律 --panel（小价格格用 --tray），来源只靠右上小圆标（.v3-picon / .v3-sicon）或左缘 3px 色条区分：
   スニダン = 天空，X 買取 = 柠檬，其余 = 中性灰。文字一律 --text-1。 */
.v3-pcard, .v3-sales-lead .v3-sblock {
  --v3-bk-on: var(--text-1) !important;
  --v3-card-2: var(--mark-neutral); /* 定価・件数这类中性札的 --v3-bk 指向它：小圆标在深色里也要是浅底墨字 */
  background: var(--panel) !important; color: var(--text-1) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}
.v3-tp { --v3-bk-on: var(--text-1) !important; background: var(--tray) !important; color: var(--text-1) !important; box-shadow: inset 3px 0 0 var(--v3-bk); }
.v3-picon, .v3-sicon { background: var(--v3-bk) !important; color: var(--sticker-ink) !important; font-family: var(--f-num) !important; box-shadow: 0 0 0 2px var(--panel); }
.v3-pcard .v3-dlt, .v3-pcard .v3-dlt.flat { color: var(--text-2) !important; background: var(--tray) !important; }
.v3-pcard .v3-dlt.up { color: var(--up-text) !important; background: var(--up-wash) !important; }
.v3-pcard .v3-dlt.dn { color: var(--down-text) !important; background: var(--down-wash) !important; }
.v3-pcard .v3-dlt small { opacity: 1 !important; }
.v3-pcard .v3-psrc, .v3-pcard .v3-plab, .v3-sales-lead .v3-sblock .v3-sk, .v3-sales-lead .v3-sblock .v3-sn, .v3-tp .v3-tk { opacity: 1 !important; color: var(--text-2) !important; }

/* 日报「訂正」提示：旧 --warn 混色 → 柠檬浅底 */
.rp-correct { background: var(--lemon-wash) !important; border-color: var(--line-strong) !important; color: var(--lemon-text) !important; }
.rp-correct a { color: var(--text-1) !important; }
.rp-tag.is-warn { color: var(--lemon-text) !important; border-color: var(--line-strong) !important; background: var(--lemon-wash); }

/* ───────────── 6. 按钮（三档高度；按下 SPRING_PRESS） ───────────── */
.btn {
  --h: var(--c-h-lg);
  height: var(--h); min-height: var(--h); border-radius: 999px !important;
  font-family: var(--f-jp) !important; font-weight: 700;
  transition: transform var(--c-d-press) var(--c-e-press), box-shadow var(--c-d-press) var(--c-e-press), background-color .2s ease !important;
}
.btn::after { display: none !important; }
.btn-sm { --h: var(--c-h-md); }
.btn-lg { --h: var(--c-h-lg); }
.btn:active { transform: translateY(2px) scale(.97) !important; }
/* 主按钮：柠檬 + 底沿（ledge），上面只放墨色字 */
.btn-rainbow, .btn-volt, .btn-primary, .c-btn-primary {
  color: var(--sticker-ink) !important; -webkit-text-fill-color: currentColor;
  background: var(--lemon) !important; border: 0 !important;
  box-shadow: 0 3px 0 var(--ledge-lemon) !important; animation: none !important;
}
.btn-rainbow:hover, .btn-volt:hover, .btn-primary:hover { background: var(--lemon) !important; filter: brightness(1.03); }
.btn-rainbow:active, .btn-volt:active, .btn-primary:active { box-shadow: 0 1px 0 var(--ledge-lemon) !important; }
/* 次按钮：白胶囊 + 灰底沿 */
.btn-glass, .btn-secondary, .btn-ghost, .ruvo-more, .shop-go, .ticker-control {
  color: var(--text-1) !important; background: var(--panel) !important; border: 0 !important;
  box-shadow: 0 0 0 1px var(--line), 0 3px 0 var(--ledge) !important; backdrop-filter: none !important;
}
.btn-glass:hover, .btn-secondary:hover, .btn-ghost:hover, .ruvo-more:hover, .shop-go:hover { background: var(--tray) !important; color: var(--text-1) !important; }
/* 出典按钮：天空浅底 */
.btn-src, body[data-theme="light"] .btn-src {
  color: var(--sky-text) !important; background: var(--sky-wash) !important; border: 0 !important;
  border-radius: 999px !important; box-shadow: none !important; font-family: var(--f-jp);
}
.btn-src:hover, body[data-theme="light"] .btn-src:hover { color: var(--sticker-ink) !important; background: var(--sky) !important; box-shadow: none !important; }
.btn-src-x, .btn-x, body[data-theme="light"] .btn-src-x, body[data-theme="light"] .btn-x {
  color: var(--plate-ink) !important; background: var(--plate) !important; border-color: transparent !important; border-radius: 999px !important;
}

/* 胶囊分段 / 筛选片：凹槽托盘 + 深色底板 */
.chip, .chips > button, [data-chip-group] > button, .ch-ranges button, .tabs button, .home-cat-tabs button, .v3-subnav a, .v3-subnav button, .shop-pill, .seg button, .v3-tabs button, .v3-card-tabs button {
  font-family: var(--f-jp) !important; font-weight: 700;
  border-radius: 999px !important;
  transition: transform var(--c-d-press) var(--c-e-press), color .2s ease, background-color .2s ease !important;
}
.chip { height: var(--c-h-md); min-height: var(--c-h-md); padding: 0 16px; display: inline-flex; align-items: center; color: var(--text-2); background: var(--panel); border: 0 !important; box-shadow: 0 0 0 1px var(--line) !important; }
.chip:hover { color: var(--text-1); background: var(--tray); }
.chips > button, [data-chip-group] > button {
  height: var(--c-h-md); min-height: var(--c-h-md); padding: 0 16px; display: inline-flex; align-items: center;
  color: var(--text-2) !important; background: var(--panel) !important; border: 0 !important; box-shadow: 0 0 0 1px var(--line) !important; cursor: pointer;
}
.chips > button:hover, [data-chip-group] > button:hover { color: var(--text-1) !important; background: var(--tray) !important; }
.chips > button:active, [data-chip-group] > button:active { transform: scale(.95); }
.chip:active, .ch-ranges button:active, .tabs button:active, .home-cat-tabs button:active, .v3-subnav a:active, .v3-subnav button:active { transform: scale(.95); }
.chip.is-on, body[data-theme="light"] .chip.is-on, .chips > button.is-on, [data-chip-group] > button.is-on, body[data-theme="light"] .chips > button.is-on, .ch-ranges button.is-on, body[data-theme="light"] .ch-ranges button.is-on,
.tabs button.is-on, body[data-theme="light"] .tabs button.is-on, .tabs.tabs-rainbow button.is-on, body[data-theme="light"] .tabs.tabs-rainbow button.is-on,
.home-cat-tabs button.is-on, .home-cat-tabs button[aria-selected="true"],
.v3-subnav a[aria-current="true"], .v3-subnav button[aria-pressed="true"],
.shop-pill.is-primary, body[data-theme="light"] .shop-pill.is-primary {
  color: var(--plate-ink) !important; -webkit-text-fill-color: currentColor;
  background: var(--plate) !important; border-color: transparent !important; box-shadow: var(--shadow-plate) !important;
}
/* 筛选片里的件数：不再用半透明（浅底上只有 4:1） */
.chip em, .chips > button em { opacity: 1 !important; color: var(--text-3); }
.chip.is-on em, .chips > button.is-on em { color: inherit; opacity: .8 !important; }
/* 卡图 / 盒图角上的涨跌小牌：实色涨跌底 + 白字（浅）/ 墨字（深），都过 4.5:1 */
.v3-tile .v3-tdlt.up { background: var(--up-text) !important; color: var(--delta-on) !important; }
.v3-tile .v3-tdlt.dn { background: var(--down-text) !important; color: var(--delta-on) !important; }
.v3-tile .v3-tdlt small { opacity: 1 !important; }

/* 托盘（外高 40 = md）里放 32 高（sm）的分段按钮 */
.v3-subnav, .ch-ranges, .tabs, .home-cat-tabs {
  padding: 4px !important; gap: 2px;
  background: var(--tray) !important; border: 0 !important; border-radius: 22px !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
}
.v3-subnav a, .v3-subnav button, .ch-ranges button, .tabs button, .home-cat-tabs button {
  height: var(--c-h-sm); min-height: var(--c-h-sm) !important; padding-block: 0 !important; display: inline-flex; align-items: center; justify-content: center;
}
.v3-subnav a, .v3-subnav button { color: var(--text-2); background: transparent; }
.v3-subnav a:hover, .v3-subnav button:hover { color: var(--text-1); }

/* ───────────── 7. 徽章：箔面贴纸（design.md §7） ───────────── */
/* 旧 class（VOLT_UI.stateTag / boxTag / moverTag 生成的 .tag-psa10 / .tag-psa9 / .tag-psa / .tag-box / .tag-mv-*）
   不改 markup，直接按同一套贴纸画 */
.stk, .tag.stk, .home-kind.stk,
.tag.tag-psa, .tag.tag-box, .tag.tag-mv-psa, .tag.tag-mv-card {
  font-family: var(--f-num) !important;
  display: inline-flex !important; align-items: center; gap: 2px; flex: none;
  height: 22px; padding: 0 7px !important; border: 0 !important; border-radius: var(--r-sticker) !important;
  font-size: 11px !important; font-weight: 800 !important; line-height: 22px !important; letter-spacing: .03em !important; white-space: nowrap;
  color: var(--sticker-ink) !important; background: var(--sheen), var(--foil-holo);
  box-shadow: 0 0 0 2px var(--sticker-edge), var(--sticker-shadow), var(--glow) !important;
  transform: rotate(-3deg); text-shadow: none !important; vertical-align: middle;
}
.stk b, .tag.stk b, .tag.tag-psa b { font: 900 12px/1 var(--f-num) !important; opacity: 1 !important; color: inherit !important; letter-spacing: .02em; transform: none !important; }
.stk.stk--c, .stk.stk--u, .stk.stk--r, .stk.stk--box, .stk.stk--single, .tag.tag-box, .tag.tag-mv-card { box-shadow: 0 0 0 2px var(--sticker-edge), var(--sticker-shadow-sm) !important; }
.stk.stk--c { background: var(--track) !important; color: var(--text-2) !important; }
.stk.stk--u { background: var(--sky-wash) !important; color: var(--sky-text) !important; }
.stk.stk--r { background: var(--lemon-wash) !important; color: var(--lemon-text) !important; }
.stk.stk--rr, .stk.stk--psa9, .stk.stk--graded, .tag.tag-psa, .tag.tag-psa.tag-psa9 { background: var(--sheen), var(--foil-silver) !important; }
.stk.stk--ar { background: var(--sheen), var(--foil-mint) !important; }
.stk.stk--sr { background: var(--foil-rainbow-line), var(--foil-silver) !important; }
.stk.stk--sar, .stk.stk--psa10, .tag.tag-psa.tag-psa10, .tag.tag-mv-psa { background: var(--sheen), var(--foil-holo) !important; }
.stk.stk--hr { background: var(--foil-stripe), var(--foil-holo) !important; }
.stk.stk--ur { background: var(--sheen), var(--foil-gold) !important; }
.stk.stk--fur { background: var(--foil-fur-sparkle), var(--sheen), var(--foil-gold) !important; }
.stk.stk--mur { background: var(--mur-face) !important; color: var(--mur-ink) !important; box-shadow: inset 0 0 0 1.5px var(--mur-edge), 0 0 0 2px var(--sticker-edge), var(--sticker-shadow), var(--glow) !important; }
/* BOX / 単カード 标签：天空哑光 / 凹槽哑光 */
.stk.stk--box, .tag.tag-box { background: var(--sky) !important; color: var(--sticker-ink) !important; }
.stk.stk--single, .tag.tag-mv-card { background: var(--track) !important; color: var(--text-2) !important; }
/* PSA10：箔光星（同 d-sparkle 形状，CSS mask 画，不加 DOM） */
.stk.stk--psa10::after, .tag.tag-psa.tag-psa10::after, .tag.tag-mv-psa::after {
  content: ""; width: 9px; height: 9px; margin-left: 2px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2q1.4 7.6 10 10-8.6 2.4-10 10Q10.6 14.4 2 12q8.6-2.4 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2q1.4 7.6 10 10-8.6 2.4-10 10Q10.6 14.4 2 12q8.6-2.4 10-10Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 目录卡图左上的「未鑑定 / PSA 9 / PSA 10」位图章 → 箔面贴纸（文字取原 aria-label，图片隐藏） */
.catalog-grade-art { width: auto !important; flex: none !important; height: auto !important; overflow: visible !important; display: inline-flex !important; }
.catalog-grade-art img { display: none !important; }
.catalog-grade-art::before {
  content: attr(aria-label);
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-sticker);
  font: 800 11px/22px var(--f-num); letter-spacing: .03em; white-space: nowrap; color: var(--sticker-ink);
  background: var(--track); box-shadow: 0 0 0 2px var(--sticker-edge), var(--sticker-shadow);
  transform: rotate(-3deg);
}
.catalog-grade-art--raw::before { background: var(--panel); color: var(--text-2); }
.catalog-grade-art--psa9::before { background: var(--sheen), var(--foil-silver); }
.catalog-grade-art--psa10::before { background: var(--sheen), var(--foil-holo); box-shadow: 0 0 0 2px var(--sticker-edge), var(--sticker-shadow), var(--glow); }

/* 旧无彩小札 */
.tag { font-family: var(--f-jp); border-radius: var(--r-badge) !important; }
.tag-ref, .tag-raw, .tag-kizu {
  color: var(--text-2) !important; background: var(--tray) !important; border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important; text-shadow: none !important;
}
.tag-raw b { color: var(--text-3) !important; }
.tag-kizu { color: var(--lemon-text) !important; background: var(--lemon-wash) !important; }
/* 稀有度文字（行内 sub 行）作为贴纸时不再是胶囊 */
.ev-rar.stk, .sg-tag.stk, .v3-mchip .num.stk { margin-left: 2px; }

/* ───────────── 8. 输入框 / 搜索层 ───────────── */
input[type="search"], input[type="text"], input[type="number"], input[type="date"], select, textarea,
.form-row input, .form-row select, .col-modal input, .col-modal textarea {
  font-family: var(--f-jp);
  color: var(--text-1);
  background: var(--tray);
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  box-shadow: inset 0 0 0 1px var(--line-strong) !important;
}
input[type="search"]:not(#cmd-input), input[type="text"], input[type="number"], input[type="date"], select { height: var(--c-h-md) !important; min-height: var(--c-h-md) !important; padding-block: 0 !important; box-sizing: border-box; }
input[type="search"]:focus, input[type="text"]:focus, input[type="number"]:focus, select:focus, textarea:focus {
  box-shadow: inset 0 0 0 1px var(--line-strong) !important; /* 焦点只靠全站统一的 --focus-ring 外环 */
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
/* 首页那条搜索胶囊（保留原 DOM，换皮） */
.search-pill, .home-page .home-search.search-pill {
  height: var(--c-h-lg) !important; border-radius: 999px !important;
  background: var(--panel) !important; border: 0 !important; color: var(--text-3);
  box-shadow: var(--shadow-1), 0 0 0 1px var(--line) !important;
  font-family: var(--f-jp); font-weight: 700;
  transition: transform var(--c-d-press) var(--c-e-press), box-shadow .2s ease !important;
}
.search-pill:hover { box-shadow: var(--shadow-1), inset 0 0 0 1.5px var(--lemon-deep) !important; }
.search-pill:active { transform: scale(.98); }
.search-pill .s-icon, body[data-theme="light"] .search-pill .s-icon {
  background: var(--lemon) !important; color: var(--sticker-ink) !important; border-radius: 999px !important; position: relative;
  box-shadow: 0 2px 0 var(--ledge-lemon) !important; font-size: 0 !important;
}
.search-pill .s-icon { display: inline-grid !important; place-items: center; }
.search-pill .s-icon .ic { width: 18px; height: 18px; color: var(--sticker-ink); --ic-sw: 2.3; }
.search-pill .search-pill-label { color: var(--text-3); font-family: var(--f-jp); }
.search-pill kbd { font-family: var(--f-mono) !important; color: var(--text-2) !important; background: var(--tray) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 0 0 1px var(--line), 0 2px 0 var(--ledge) !important; }
.cmd { background: var(--scrim) !important; backdrop-filter: blur(6px); }
.cmd-box { background: var(--overlay) !important; box-shadow: var(--shadow-3), 0 0 0 1px var(--line-strong) !important; }
.cmd-input-icon { color: var(--text-2); display: inline-grid; place-items: center; }
.cmd-input-icon .ic { width: 22px; height: 22px; }
.cmd-input-wrap input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.cmd-input-clear.c-iconbtn { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); }
.cmd-input-clear.c-iconbtn:active { transform: translateY(-50%) scale(.93); }
.cmd-input-clear.c-iconbtn::after { top: calc(100% + 6px); }
.cmd-box #cmd-input { padding-right: 116px; }
.cmd-input-clear[hidden] { display: none !important; }
.cmd-input-esc { font-family: var(--f-mono); color: var(--text-2); background: var(--tray); border-radius: 8px; }
.cmd-row:hover, .cmd-row:focus-visible { background: var(--tray) !important; }

/* ───────────── 9. 表格行 ───────────── */
.vt thead th { font-family: var(--f-jp); font-size: 12px; font-weight: 700; color: var(--text-3) !important; background: transparent !important; border-bottom: 1px solid var(--line) !important; letter-spacing: .02em; }
.vt tbody td { border-bottom: 1px dashed var(--line-strong) !important; }
.vt tbody tr:last-child td { border-bottom: 0 !important; }
.vt tbody tr:hover td, body[data-theme="light"] .vt tbody tr:hover td { background: var(--tray) !important; }
.vt tbody tr:hover { background: transparent !important; }
.vt .nm { color: var(--text-1); }
.vt .sub { color: var(--text-3); }
.vt .price-main { color: var(--text-1); font-weight: 900; letter-spacing: -.02em; }
.vt img.thumb, .thumb.tbox, body[data-theme="light"] .vt img.thumb, body[data-theme="light"] .thumb.tbox { border-radius: 6px !important; border-color: var(--line) !important; box-shadow: var(--shadow-1) !important; }

/* ───────────── 10. 页脚 ───────────── */
.foot, footer.foot, body > footer {
  font-family: var(--f-jp); color: var(--text-3); border-top: 0 !important; position: relative;
}
.foot a { color: var(--text-2); } .foot a:hover { color: var(--sky-text); }

/* ───────────── 11. 旧彩虹 / 霓虹残留清理 ───────────── */
.site-title, .rf-wordmark, .ruvo-symbol::after { animation: none !important; }
.ph-compare .pc-sign, .ph-compare .pc-pct, .hero-price { text-shadow: none !important; }
.ch-line, body[data-theme="light"] .ch-line { filter: none !important; }
.hero-stage img, .detail-art-img { filter: none !important; }
.ticker, body[data-theme="light"] .ticker { background: var(--panel) !important; border-color: var(--line) !important; }
.tk-item:hover, body[data-theme="light"] .tk-item:hover { background: var(--tray) !important; }
#thumb-preview { box-shadow: var(--shadow-3) !important; border-radius: var(--r-sm); }

/* ───────────── 12. 窄屏（版头的断点在第 3 节末尾） ───────────── */
@media (max-width: 760px) {
  .stk, .tag.stk, .home-kind.stk { font-size: 11px !important; }
}
/* 触屏：32/40 档控件视觉尺寸不变，点击区外扩到 44；没有实体键盘就不显示 ⌘K 键帽 */
@media (pointer: coarse) {
  .c-subnav a, .c-search, .c-games button { position: relative; }
  .c-subnav a::before, .c-search::before, .c-games button::before { content: ""; position: absolute; inset: -6px -2px; }
  .c-search kbd, .search-pill kbd { display: none !important; }
}

/* ───────────── 13. 减少动效与 ?still：全停（同一份规则两个入口） ───────────── */
@media (prefers-reduced-motion: reduce) {
  .c-card, .c-nav > a, .c-plate, .c-search, .c-tsw, .c-stamp, .c-tsw-thumb, .c-tsw-thumb .ic, .c-games button, .c-subnav a, .c-iconbtn, .btn, .chip, .chips > button, .search-pill,
  .c-brand, .c-prosw, .c-prosw .c-pro-trk, .c-prosw .c-pro-trk i, .c-pal-opt, .c-pop, .c-masthead [data-tip]::after { transition: none !important; animation: none !important; }
  .c-brand:hover .c-card, .c-brand:focus-visible .c-card { transform: none !important; }
  .c-brand:active, .c-nav > a:active, .c-search:active, .c-prosw:active, .c-pal-opt:active, .c-games button:active, .c-masthead .c-stamp:active { transform: none !important; }
  .c-mag { translate: none !important; }
}
html.c-still .c-card, html.c-still .c-nav > a, html.c-still .c-plate, html.c-still .c-search, html.c-still .c-tsw, html.c-still .c-stamp, html.c-still .c-tsw-thumb, html.c-still .c-tsw-thumb .ic,
html.c-still .c-games button, html.c-still .c-subnav a, html.c-still .c-iconbtn, html.c-still .btn, html.c-still .chip, html.c-still .chips > button, html.c-still .search-pill,
html.c-still .c-brand, html.c-still .c-prosw, html.c-still .c-prosw .c-pro-trk, html.c-still .c-prosw .c-pro-trk i, html.c-still .c-pal-opt, html.c-still .c-pop, html.c-still .c-masthead [data-tip]::after { transition: none !important; animation: none !important; }
html.c-still .c-brand:hover .c-card, html.c-still .c-brand:focus-visible .c-card { transform: none !important; }
html.c-still .c-masthead .c-stamp:active { transform: none !important; }
html.c-still .c-mag { translate: none !important; }