/* =========================================================
   7 套可切换风格：覆盖 bento.css 的变量，再加少量招牌细节
   ========================================================= */


/* ---------- 各风格通用：状态按钮的颜色永远以变量为准（放最前，具体风格可再覆盖） ---------- */
[data-skin] .like-btn.is-on { background: var(--like); color: var(--like-ink); }
[data-skin] .save-btn.is-on { background: var(--accent); color: var(--accent-ink); }
[data-skin] .follow-btn:not(.is-on) { background: var(--dark); color: var(--dark-ink); }
[data-skin] .btn-accent { background: var(--accent); color: var(--accent-ink); }
[data-skin] .btn-hl { background: var(--hl); color: var(--hl-ink); }
[data-skin] .btn-dark { background: var(--dark); color: var(--dark-ink); }

/* ---------- A · 柔光拟态 ---------- */
[data-skin="neu"] {
  --bg: #eef1f6; --surface: #f3f5fa; --surface-2: #e9edf5; --ink: #262c48; --muted: #565e7e; --line: #dfe4ee;
  --hero: #f3f5fa; --hero-ink: #262c48; --hero-muted: #565e7e; --hero-chip: #e1e6f3;
  --hl: #dfe5ff; --hl-ink: #2b45c4; --dark: #4a67e6; --dark-ink: #ffffff; --dark-2: #5b76ec;
  --accent: #4a67e6; --like: #e2577a;
  --t-lilac: #e5e0ff; --t-lime: #ddf5e9; --t-peach: #ffe4ea; --t-sky: #dfe9ff; --t-sun: #fff0d9;
  --r-lg: 26px; --r-md: 18px;
  --shadow: 8px 8px 18px rgba(163, 177, 198, .5), -8px -8px 18px #ffffff;
  --shadow-pop: 10px 10px 26px rgba(163, 177, 198, .6), -8px -8px 20px #ffffff;
  --font: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-editorial: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  --title-weight: 700; --title-track: .02em;
}
[data-skin="neu"] .hero .chip-hl { background: #dfe5ff; color: #2b45c4; }
[data-skin="neu"] .act, [data-skin="neu"] .seg, [data-skin="neu"] .search, [data-skin="neu"] .reply-box, [data-skin="neu"] .input, [data-skin="neu"] .quick-input, [data-skin="neu"] .mainnav {
  box-shadow: inset 3px 3px 7px rgba(163, 177, 198, .55), inset -3px -3px 7px #ffffff; background: var(--bg);
}
[data-skin="neu"] .btn:active, [data-skin="neu"] .act:active, [data-skin="neu"] .icon-btn:active { box-shadow: inset 3px 3px 7px rgba(163, 177, 198, .6), inset -3px -3px 7px #fff; }
[data-skin="neu"] .ctile, [data-skin="neu"] .stat, [data-skin="neu"] .bento-post, [data-skin="neu"] .link-tile { background: var(--surface); }
[data-skin="neu"] .ctile { border-top: 6px solid var(--tint); }
[data-skin="neu"] .ctile.is-on { background: var(--dark); color: #fff; border-top-color: var(--dark); }
[data-skin="neu"] .lt-icon { background: var(--tint); color: #262c48; }
[data-skin="neu"] .mini-link { background: rgba(255, 255, 255, .16); }
[data-skin="neu"] .mini-ini { color: #fff; }

/* ---------- B · 新粗野主义 ---------- */
[data-skin="brutal"] {
  --bg: #fdf6e3; --surface: #ffffff; --surface-2: #fdf6e3; --ink: #111111; --muted: #3d3a33; --line: #111111;
  --hero: #ffd23f; --hero-ink: #111111; --hero-muted: #2b2820; --hero-chip: #c6f36b;
  --hl: #c6f36b; --hl-ink: #111111; --dark: #111111; --dark-ink: #fdf6e3; --dark-2: #2a2a2a;
  --accent: #ff6b4a; --accent-ink: #111111; --like: #ff6b4a; --like-ink: #111111;
  --t-lilac: #c7b2ff; --t-lime: #c6f36b; --t-peach: #ff9eb5; --t-sky: #8ecbff; --t-sun: #ffd23f;
  --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-pill: 0px;
  --bd: 2.5px solid #111111;
  --shadow: 5px 5px 0 #111111;
  --shadow-pop: 6px 6px 0 #111111;
  --press: translate(4px, 4px);
  --lift: translate(-1px, -1px);
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Archivo Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-editorial: "Archivo Black", "PingFang SC", "Microsoft YaHei", sans-serif;
  --title-weight: 900;
}
[data-skin="brutal"] .hero .chip-hl { background: #c6f36b; color: #111; border: 2.5px solid #111; transform: rotate(-3deg); }
[data-skin="brutal"] .btn:active, [data-skin="brutal"] .pill-btn:active, [data-skin="brutal"] .act:active, [data-skin="brutal"] .ctile:active { box-shadow: none; }
[data-skin="brutal"] .chip, [data-skin="brutal"] .tag { border: 2px solid #111; }
[data-skin="brutal"] .swatch, [data-skin="brutal"] .avatar { border-radius: 0; box-shadow: 0 0 0 2px #111; }
[data-skin="brutal"] .ctile.is-on { box-shadow: none; transform: translate(4px, 4px); }
[data-skin="brutal"] .post-card { border-top-width: 10px; border-top-color: var(--tint); }
[data-skin="brutal"] .switch { border-radius: 0; border: 2px solid #111; }
[data-skin="brutal"] .switch::after { border-radius: 0; }
[data-skin="brutal"] .mtab { border-radius: 0; }
[data-skin="brutal"] .search, [data-skin="brutal"] .input { box-shadow: none; }

/* ---------- C · 东方纸页 ---------- */
[data-skin="paper"] {
  --bg: #f5efe3; --surface: #fbf7ef; --surface-2: #efe7d8; --ink: #1f1c17; --muted: #5f5747; --line: rgba(31, 28, 23, .22);
  --hero: transparent; --hero-ink: #1f1c17; --hero-muted: #5f5747; --hero-chip: #efe7d8;
  --hl: #b23a2a; --hl-ink: #f5efe3; --dark: #1f1c17; --dark-ink: #f5efe3; --dark-2: #3a342b;
  --accent: #b23a2a; --like: #b23a2a;
  --t-lilac: #e8e0ee; --t-lime: #e6ead5; --t-peach: #f3dfd3; --t-sky: #dfe7ea; --t-sun: #f1e6c8;
  --r-lg: 2px; --r-md: 2px; --r-sm: 2px; --r-pill: 2px;
  --bd: 1px solid rgba(31, 28, 23, .28);
  --shadow: none;
  --shadow-pop: 0 10px 30px rgba(31, 28, 23, .15);
  --font: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-editorial: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --title-weight: 700; --title-track: .02em;
}
[data-skin="paper"] .hero { border: 0; border-top: 3px double #1f1c17; border-bottom: 3px double #1f1c17; align-items: center; text-align: center; }
[data-skin="paper"] .hero .chip { align-self: center; letter-spacing: .3em; }
[data-skin="paper"] .hero-sub { margin: 0 auto; }
[data-skin="paper"] .brand-mark { background: #b23a2a; color: #f5efe3; }
[data-skin="paper"] .brand-name { letter-spacing: .3em; }
[data-skin="paper"] .ctile, [data-skin="paper"] .stat, [data-skin="paper"] .link-tile, [data-skin="paper"] .bento-post { background: var(--surface); border-top: 4px solid var(--tint); }
[data-skin="paper"] .ctile.is-on { background: #1f1c17; }
[data-skin="paper"] .post-card { background: transparent; border-width: 0 0 1px; padding-left: 4px; padding-right: 4px; }
[data-skin="paper"] .post-title { font-weight: 700; }
[data-skin="paper"] .lt-icon { background: #b23a2a; color: #f5efe3; }
[data-skin="paper"] .md { line-height: 2; }
[data-skin="paper"] .like-btn.is-on { background: transparent; color: #b23a2a; border-color: #b23a2a; }
[data-skin="paper"] .tile-dark .mini-ini { color: #e9b4a8; }

/* ---------- D · 夜屿暗色 ---------- */
[data-skin="night"] {
  color-scheme: dark;
  --bg: #0d1117; --surface: #151b23; --surface-2: #1c232d; --ink: #e6edf3; --muted: #9aa5b4; --line: #262f3b;
  --hero: #151b23; --hero-ink: #e6edf3; --hero-muted: #9aa5b4; --hero-chip: #1f2833;
  --hl: #3ddc97; --hl-ink: #06281a; --dark: #e6edf3; --dark-ink: #0d1117; --dark-2: #1c232d;
  --accent: #3ddc97; --accent-ink: #06281a; --like: #ff8fab; --like-ink: #2b0a14; --danger: #ff8f8f;
  --t-lilac: #2a2547; --t-lime: #1d3a2c; --t-peach: #3d2a22; --t-sky: #1b2f45; --t-sun: #3a3220;
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px;
  --bd: 1px solid #262f3b;
  --shadow-pop: 0 18px 40px rgba(0, 0, 0, .5);
  --font: Inter, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-editorial: Inter, "Songti SC", "SimSun", serif;
}
[data-skin="night"] .brand-mark { background: #3ddc97; color: #06281a; }
[data-skin="night"] .tile-dark { --tint: #151b23; color: #e6edf3; }
[data-skin="night"] .mini-link { background: #0d1117; border: 1px solid #262f3b; color: #c9d3df; }
[data-skin="night"] .mini-ini { color: #3ddc97; }
[data-skin="night"] .ctile, [data-skin="night"] .stat, [data-skin="night"] .bento-post, [data-skin="night"] .link-tile, [data-skin="night"] .preview, [data-skin="night"] .cp, [data-skin="night"] .related.tint { color: #e6edf3; background: color-mix(in srgb, var(--tint) 22%, #151b23); }
[data-skin="night"] .chip.tint, [data-skin="night"] .tag-white, [data-skin="night"] .chip-white { background: color-mix(in srgb, var(--tint, #9aa5b4) 25%, #151b23); color: #e6edf3; }
[data-skin="night"] .post-card .post-meta .chip.tint { color: #e6edf3; }
[data-skin="night"] .bp-meta, [data-skin="night"] .lt-desc, [data-skin="night"] .lt-host, [data-skin="night"] .muted-dark { color: #9aa5b4; }
[data-skin="night"] .lt-icon { background: #0d1117; color: var(--tint); }
[data-skin="night"] .ctile.is-on { background: #e6edf3; color: #0d1117; }
[data-skin="night"] .tile[style*="--tint"], [data-skin="night"] .post-card { background: color-mix(in srgb, var(--tint, #151b23) 14%, #151b23); color: #e6edf3; }
[data-skin="night"] .tile.article { background: #151b23; }
[data-skin="night"] .post-excerpt { color: #b4bfcc; }
[data-skin="night"] .tile-lilac, [data-skin="night"] .tile-lime, [data-skin="night"] .tile-peach { color: #e6edf3; }
[data-skin="night"] .avatar { filter: saturate(.9); }
[data-skin="night"] .alert-err, [data-skin="night"] .chip-warn { background: #3b1d16; color: #ffb4a0; }
[data-skin="night"] .drop { background: rgba(255, 255, 255, .04); border-color: #3a4554; color: #e6edf3; }
[data-skin="night"] .switch { background: #3a4554; }
[data-skin="night"] .mtab-a { color: #59626f; }

/* ---------- E · 千禧果冻 Aero ---------- */
[data-skin="aero"] {
  --bg: #cdeeff;
  --bg-img: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .9) 0 60px, transparent 61px), radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .7) 0 34px, transparent 35px), linear-gradient(180deg, #8fd3ff 0%, #cdeeff 35%, #eefaff 65%, #d9f5c8 100%);
  --surface: rgba(255, 255, 255, .86); --surface-2: #e3f3ff; --ink: #0b3a5c; --muted: #2e628a; --line: #cfe8fa;
  --hero: linear-gradient(180deg, #4fb3f0 0%, #1b86d0 48%, #0a5596 52%, #0e6ab4 100%); --hero-ink: #ffffff; --hero-muted: #e2f4ff; --hero-chip: rgba(255, 255, 255, .22);
  --hl: #b9ef8f; --hl-ink: #1e5a08; --dark: #0a5596; --dark-ink: #ffffff; --dark-2: #1b86d0;
  --accent: #1b86d0; --like: #e86aa3; --like-ink: #ffffff;
  --t-lilac: #e6dcff; --t-lime: #d6f7c2; --t-peach: #ffe0ee; --t-sky: #d8efff; --t-sun: #fff0cc;
  --r-lg: 20px; --r-md: 14px;
  --bd: 1px solid #ffffff;
  --shadow: 0 10px 28px rgba(20, 100, 170, .18), inset 0 1px 0 #ffffff;
  --lift: translateY(-2px) scale(1.01);
  --font: Nunito, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-editorial: Nunito, "Songti SC", "SimSun", serif;
  --title-weight: 900;
}
[data-skin="aero"] .hero { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 34px rgba(10, 85, 150, .3); }
[data-skin="aero"] .btn-dark, [data-skin="aero"] .pill-btn.primary, [data-skin="aero"] .btn-accent, [data-skin="aero"] .mainnav-a.is-active, [data-skin="aero"] .seg-a.is-on, [data-skin="aero"] .ctile.is-on, [data-skin="aero"] .follow-btn:not(.is-on) {
  background: linear-gradient(180deg, #4fb3f0 0%, #1b86d0 48%, #0a5596 52%, #0e6ab4 100%); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 3px 8px rgba(10, 85, 150, .35);
}
[data-skin="aero"] .like-btn.is-on { background: linear-gradient(180deg, #ffd1e4, #e86aa3); color: #5c0a30; }
[data-skin="aero"] .tile { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-skin="aero"] .avatar, [data-skin="aero"] .brand-mark { background: radial-gradient(circle at 35% 25%, #ffffff 0 10%, var(--tint, #7fe0ff) 45%, color-mix(in srgb, var(--tint, #1b86d0) 60%, #0a5596) 100%); border-radius: 50%; }
[data-skin="aero"] .brand-mark { --tint: #4fb3f0; color: #fff; }
[data-skin="aero"] .ctile, [data-skin="aero"] .act, [data-skin="aero"] .tag { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 10px rgba(20, 100, 170, .15); }
[data-skin="aero"] .mini-link { background: rgba(255, 255, 255, .18); }
[data-skin="aero"] .mini-ini { color: #d6f7c2; }

/* ---------- F · 绿屏 BBS ---------- */
[data-skin="bbs"] {
  color-scheme: dark;
  --bg: #050805; --bg-img: radial-gradient(ellipse at center, #0b170e 0%, #050805 75%);
  --surface: #050805; --surface-2: #0b1a10; --ink: #39ff7a; --muted: #5fd38a; --line: #1f5c33;
  --hero: transparent; --hero-ink: #39ff7a; --hero-muted: #5fd38a; --hero-chip: #0b1a10;
  --hl: #ffb000; --hl-ink: #050805; --dark: #39ff7a; --dark-ink: #050805; --dark-2: #0b1a10;
  --accent: #39ff7a; --accent-ink: #050805; --like: #ffb000; --like-ink: #050805; --danger: #ff6b6b;
  --t-lilac: #0b1a10; --t-lime: #0b1a10; --t-peach: #0b1a10; --t-sky: #0b1a10; --t-sun: #0b1a10;
  --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-pill: 0px;
  --bd: 1px dashed #2e8a4c;
  --shadow-pop: 0 0 24px rgba(57, 255, 122, .25);
  --press: none; --lift: none;
  --font: "IBM Plex Mono", "JetBrains Mono", "SimHei", "Microsoft YaHei", monospace;
  --font-display: "VT323", "JetBrains Mono", "SimHei", monospace;
  --font-editorial: "VT323", "JetBrains Mono", "SimHei", monospace;
  --font-mono: "JetBrains Mono", monospace;
  --title-weight: 400; --title-track: .02em;
}
[data-skin="bbs"] body { text-shadow: 0 0 6px rgba(57, 255, 122, .4); }
[data-skin="bbs"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px); }
[data-skin="bbs"] .hero-title { font-size: clamp(44px, 7vw, 84px); line-height: .95; }
[data-skin="bbs"] .tile, [data-skin="bbs"] .ctile, [data-skin="bbs"] .stat, [data-skin="bbs"] .bento-post, [data-skin="bbs"] .link-tile, [data-skin="bbs"] .preview, [data-skin="bbs"] .cp, [data-skin="bbs"] .related, [data-skin="bbs"] .chip, [data-skin="bbs"] .tag, [data-skin="bbs"] .tag-white, [data-skin="bbs"] .chip-white, [data-skin="bbs"] .mini-stats div { background: transparent; color: #39ff7a; }
[data-skin="bbs"] .bp-meta, [data-skin="bbs"] .lt-desc, [data-skin="bbs"] .lt-host, [data-skin="bbs"] .muted-dark { color: #5fd38a; }
[data-skin="bbs"] .chip, [data-skin="bbs"] .tag { border: 1px solid #2e8a4c; }
[data-skin="bbs"] .tag::before { content: "["; } [data-skin="bbs"] .tag::after { content: "]"; }
[data-skin="bbs"] .is-on, [data-skin="bbs"] .seg-a.is-on, [data-skin="bbs"] .mainnav-a.is-active, [data-skin="bbs"] .ctile.is-on, [data-skin="bbs"] .theme-opt.is-on { background: #39ff7a !important; color: #050805 !important; text-shadow: none; }
[data-skin="bbs"] .btn, [data-skin="bbs"] .act, [data-skin="bbs"] .pill-btn, [data-skin="bbs"] .icon-btn, [data-skin="bbs"] .toolbar button { background: transparent; color: #39ff7a; border: 1px solid #2e8a4c; box-shadow: none; }
[data-skin="bbs"] .btn:hover, [data-skin="bbs"] .act:hover, [data-skin="bbs"] .pill-btn:hover, [data-skin="bbs"] .icon-btn:hover { background: #123a1f; }
[data-skin="bbs"] .btn:active, [data-skin="bbs"] .act:active, [data-skin="bbs"] .pill-btn:active { background: #39ff7a; color: #050805; }
[data-skin="bbs"] .avatar, [data-skin="bbs"] .swatch, [data-skin="bbs"] .lt-icon { border-radius: 0; background: #0b1a10; color: #39ff7a; box-shadow: inset 0 0 0 1px #2e8a4c; }
[data-skin="bbs"] .theme-opt .swatch, [data-skin="bbs"] .theme-btn .swatch, [data-skin="bbs"] .tpick .swatch { background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
[data-skin="bbs"] .sound-btn[aria-pressed="true"] { background: #ffb000; color: #050805; border-color: #ffb000; }
[data-skin="bbs"] .like-btn.is-on { background: transparent !important; color: #ffb000 !important; border-color: #ffb000; text-shadow: 0 0 6px rgba(255, 176, 0, .5); }
[data-skin="bbs"] .save-btn.is-on { background: transparent !important; color: #ffb000 !important; border-color: #ffb000; }
[data-skin="bbs"] .post-title::before { content: "▶ "; color: #5fd38a; }
[data-skin="bbs"] .post-card { border-width: 0 0 1px; }
[data-skin="bbs"] .hero { border: 0; border-bottom: 1px solid #1f5c33; padding-left: 0; padding-right: 0; }
[data-skin="bbs"] .hero .chip-hl { color: #ffb000; border-color: #ffb000; }
[data-skin="bbs"] .brand-mark { background: #39ff7a; color: #050805; border-radius: 0; text-shadow: none; }
[data-skin="bbs"] .mini-link { background: transparent; border: 1px solid #2e8a4c; color: #39ff7a; }
[data-skin="bbs"] .mini-ini { color: #ffb000; }
[data-skin="bbs"] .tile-dark { --tint: transparent; color: #39ff7a; }
[data-skin="bbs"] .md pre { background: #0b1a10; color: #39ff7a; border: 1px solid #1f5c33; }
[data-skin="bbs"] .toast { background: #39ff7a; color: #050805; text-shadow: none; }
[data-skin="bbs"] .mtab { background: #050805; border: 1px solid #2e8a4c; }
[data-skin="bbs"] .mtab-a { color: #5fd38a; }
[data-skin="bbs"] .switch { border-radius: 0; background: #0b1a10; border: 1px solid #2e8a4c; }
[data-skin="bbs"] .switch::after { border-radius: 0; background: #5fd38a; }
[data-skin="bbs"] .switch:checked { background: #123a1f; }
[data-skin="bbs"] .switch:checked::after { background: #39ff7a; }
[data-skin="bbs"] textarea, [data-skin="bbs"] input { caret-color: #ffb000; }
[data-skin="bbs"] .alert-err, [data-skin="bbs"] .chip-warn { background: transparent; color: #ff6b6b; border: 1px solid #ff6b6b; }
[data-skin="bbs"] .drop { border-color: #2e8a4c; background: transparent; color: #39ff7a; }
[data-skin="bbs"] .ctile-n, [data-skin="bbs"] .stat b, [data-skin="bbs"] .nf-num { font-family: "VT323", monospace; font-weight: 400; }

/* ---------- G · 手账拼贴 ---------- */
[data-skin="scrap"] {
  --bg: #e8d9bf; --bg-img: radial-gradient(rgba(90, 79, 69, .18) 1px, transparent 1.2px);
  --surface: #fffaf0; --surface-2: #f4ead6; --ink: #2b2622; --muted: #5a4f45; --line: rgba(90, 79, 69, .3);
  --hero: #fffaf0; --hero-ink: #2b2622; --hero-muted: #4a4038; --hero-chip: #ffd6e0;
  --hl: #fff3a8; --hl-ink: #2b2622; --dark: #2b2622; --dark-ink: #fffaf0; --dark-2: #4a4038;
  --accent: #b8452d; --like: #e2574c;
  --t-lilac: #e6dcf5; --t-lime: #d4f5e2; --t-peach: #ffd6e0; --t-sky: #d6e9ff; --t-sun: #fff3a8;
  --r-lg: 3px; --r-md: 3px; --r-sm: 3px;
  --shadow: 3px 5px 0 rgba(43, 38, 34, .14);
  --press: scale(.94) rotate(-2deg);
  --font: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Caveat", "LXGW WenKai", "Kaiti SC", "KaiTi", cursive;
  --font-editorial: "Caveat", "LXGW WenKai", "Kaiti SC", "KaiTi", cursive;
  --title-weight: 700; --title-track: 0;
}
[data-skin="scrap"] body { background-size: 22px 22px; }
[data-skin="scrap"] .hero { background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(120, 150, 200, .28) 33px 34px); transform: rotate(-.6deg); }
[data-skin="scrap"] .hero-title, [data-skin="scrap"] .article-title, [data-skin="scrap"] .post-title, [data-skin="scrap"] .page-head h1 { font-family: "LXGW WenKai", "Kaiti SC", "KaiTi", serif; }
[data-skin="scrap"] .tile { position: relative; }
[data-skin="scrap"] .post-card::before, [data-skin="scrap"] .hero::before, [data-skin="scrap"] .link-tile::before, [data-skin="scrap"] .bento-post::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 84px; height: 22px; margin-left: -42px;
  background: repeating-linear-gradient(45deg, rgba(240, 128, 128, .7) 0 6px, rgba(255, 200, 200, .7) 6px 12px); transform: rotate(-4deg);
}
[data-skin="scrap"] .post-card { background: color-mix(in srgb, var(--tint) 70%, #fffaf0); }
[data-skin="scrap"] .post-card:nth-child(odd) { transform: rotate(-.5deg); }
[data-skin="scrap"] .post-card:nth-child(even) { transform: rotate(.5deg); }
[data-skin="scrap"] .post-card:nth-child(3n)::before { background: repeating-linear-gradient(45deg, rgba(120, 170, 220, .7) 0 6px, rgba(190, 220, 250, .7) 6px 12px); transform: rotate(3deg); }
[data-skin="scrap"] .ctile:nth-child(odd) { transform: rotate(-1.2deg); }
[data-skin="scrap"] .ctile:nth-child(even) { transform: rotate(1deg); }
[data-skin="scrap"] .ctile { background: repeating-linear-gradient(45deg, var(--tint) 0 10px, color-mix(in srgb, var(--tint) 60%, #fff) 10px 20px); }
[data-skin="scrap"] .ctile.is-on { transform: none; background: #2b2622; }
[data-skin="scrap"] .link-tile:nth-child(odd), [data-skin="scrap"] .bento-post:nth-child(odd) { transform: rotate(-.8deg); }
[data-skin="scrap"] .link-tile:nth-child(even), [data-skin="scrap"] .bento-post:nth-child(even) { transform: rotate(.8deg); }
[data-skin="scrap"] .act, [data-skin="scrap"] .btn { border: 2px solid #2b2622; background: transparent; }
[data-skin="scrap"] .btn-dark, [data-skin="scrap"] .pill-btn.primary { background: #2b2622; color: #fffaf0; box-shadow: 3px 3px 0 #b8452d; }
[data-skin="scrap"] .like-btn.is-on { background: #fff; color: #e2574c; }
[data-skin="scrap"] .save-btn.is-on, [data-skin="scrap"] .follow-btn:not(.is-on), [data-skin="scrap"] .btn-accent, [data-skin="scrap"] .btn-hl { background: #2b2622; color: #fffaf0; }
[data-skin="scrap"] .hero .chip-hl { background: #2b2622; color: #fff3a8; }
[data-skin="scrap"] .seg-a.is-on, [data-skin="scrap"] .mainnav-a.is-active { background: linear-gradient(transparent 55%, #fff3a8 55%); color: #2b2622; }
[data-skin="scrap"] .brand-name { font-family: "Caveat", "LXGW WenKai", cursive; font-size: 30px; }
[data-skin="scrap"] .sound-btn { border: 2px dashed #2b2622; transform: rotate(8deg); }
[data-skin="scrap"] .mini-link { background: #4a4038; }
[data-skin="scrap"] .mini-ini { color: #fff3a8; }
[data-skin="scrap"] .lt-icon { background: #2b2622; color: #fff3a8; }

/* ---------- 通知在各风格下的细节 ---------- */
[data-skin="bbs"] .badge { background: #ffb000; color: #050805; border-color: #050805; text-shadow: none; }
[data-skin="bbs"] .notif-item.is-unread { background: #0b1a10; }
[data-skin="bbs"] .unread-dot, [data-skin="bbs"] .mtab-dot { background: #ffb000; }
[data-skin="brutal"] .badge { border-radius: 0; border-color: #111; }
[data-skin="brutal"] .unread-dot { border-radius: 0; }
[data-skin="paper"] .notif-item.is-unread { background: #f3e3d9; }
[data-skin="night"] .notif-item.is-unread { background: #1b2a24; }
[data-skin="neu"] .notif-item.is-unread { background: #e3e9ff; }
[data-skin="bbs"] .mention-opt.is-on, [data-skin="bbs"] .mention-opt:hover { background: #39ff7a; color: #050805; text-shadow: none; }
[data-skin="bbs"] a.mention { background: transparent; color: #ffb000; }
[data-skin="brutal"] .mention-pop, [data-skin="brutal"] .mention-opt, [data-skin="brutal"] a.mention { border-radius: 0; }

/* ---------- H · 松风（默认） ---------- */
[data-skin="island"] {
  color-scheme: light;
  --bg: #F7F8F5;
  --surface: #FFFFFF;
  --surface-2: #F1F4F0;
  --ink: #242C33;
  --muted: #6C7680;
  --line: #E2E6E3;
  --hero: #1F3D36;
  --hero-ink: #F7F8F5;
  --hero-muted: #B9CBC3;
  --hero-chip: #2E6558;
  --hl: #E58C54;
  --hl-ink: #FFFFFF;
  --dark: #1E3A33;
  --dark-ink: #F7F8F5;
  --dark-2: #2A4A41;
  --accent: #2E6558;
  --accent-ink: #FFFFFF;
  --like: #E58C54;
  --like-ink: #FFFFFF;
  --danger: #B4483F;
  --t-lilac: #E6EFEA;
  --t-lime: #DCEFE6;
  --t-peach: #F6E3D7;
  --t-sky: #DDEBF2;
  --t-sun: #F4E9C9;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;
  --bd: 1px solid rgba(36, 44, 51, .06);
  --shadow: 0 4px 20px rgba(24, 40, 34, .04);
  --shadow-pop: 0 20px 50px rgba(24, 40, 34, .14);
  --press: scale(.97);
  --lift: translateY(-2px);
  --font: system-ui, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: var(--font);
  --font-editorial: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --title-weight: 700;
  --title-track: -.01em;
  --gap: 16px;
}
[data-skin="island"] .brand-mark { background: var(--accent); color: var(--accent-ink); }
[data-skin="island"] .hero .chip-hl { background: var(--hl); color: var(--hl-ink); }
[data-skin="island"] .tile { background: var(--surface); }
[data-skin="island"] .ctile,
[data-skin="island"] .stat,
[data-skin="island"] .bento-post,
[data-skin="island"] .link-tile { background: var(--surface); }
[data-skin="island"] .mini-link { background: var(--dark-2); }
[data-skin="island"] .mini-ini { color: var(--hl); }

@media (prefers-color-scheme: dark) {
  [data-skin="island"] {
    color-scheme: dark;
    --bg: #12161A;
    --surface: #171C21;
    --surface-2: #1C2228;
    --ink: #E6EDF3;
    --muted: #9AA5B4;
    --line: #28313A;
    --hero: #1A2B26;
    --hero-ink: #EAF4EF;
    --hero-muted: #A9C1B8;
    --hero-chip: #2A4A41;
    --hl: #E58C54;
    --hl-ink: #12161A;
    --dark: #0E1A17;
    --dark-ink: #E6EDF3;
    --dark-2: #1C2228;
    --accent: #5DB59E;
    --accent-ink: #0E1A17;
    --like: #E58C54;
    --like-ink: #12161A;
    --danger: #FF8F8F;
    --t-lilac: #22312B;
    --t-lime: #1D332B;
    --t-peach: #33251E;
    --t-sky: #1B2C38;
    --t-sun: #332D1B;
    --bd: 1px solid rgba(255, 255, 255, .07);
    --shadow: 0 4px 20px rgba(0, 0, 0, .24);
    --shadow-pop: 0 24px 60px rgba(0, 0, 0, .5);
  }
  [data-skin="island"] .tile { background: var(--surface); }
  [data-skin="island"] .brand-mark { background: var(--accent); color: var(--accent-ink); }
}