/* ============================================================
   Fadey's Blog —— 多皮肤（skins）
   四套并存：default（经典）/ google（谷歌风）/ winui（WinUI）/ swiss（瑞士极简）
   用法：<html data-skin="google" data-theme="light|dark">
   - data-theme 管深浅（沿用 style.css 的两档变量）
   - data-skin 只做覆盖；default 不写任何规则 = 老样子
   - 本文件必须在 style.css / chat.css 之后引入
   ============================================================ */

/* ================= 外观切换面板（四套皮肤共用，中性样式） ================= */
.fd-skin-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    width: 288px;
    max-width: calc(100vw - 32px);
    background: var(--surface-solid);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
    z-index: 1500;
    padding: 16px;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.4, 0, .2, 1);
}
[data-theme="light"] .fd-skin-panel { box-shadow: 0 24px 70px rgba(0, 0, 0, .16); }
.fd-skin-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.fd-skin-title {
    font-size: 13px; font-weight: 800; letter-spacing: .4px;
    color: var(--on-surface); margin: 2px 2px 10px;
    display: flex; align-items: center; gap: 8px;
}
.fd-skin-title .material-icons-round { font-size: 17px; color: var(--on-surface-variant); }
.fd-skin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fd-skin-opt {
    border: 1px solid var(--glass-border);
    background: var(--surface);
    border-radius: 14px;
    padding: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    color: var(--on-surface);
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.fd-skin-opt:hover { transform: translateY(-1px); }
.fd-skin-opt.active { border-color: var(--on-surface); border-width: 2px; padding: 9px; }
.fd-skin-sw {
    height: 40px; border-radius: 9px; margin-bottom: 8px;
    display: flex; align-items: flex-end; gap: 4px; padding: 6px;
    overflow: hidden;
}
.fd-skin-sw i { display: block; border-radius: 3px; }
.fd-skin-name { font-size: 12.5px; font-weight: 700; display: block; }
.fd-skin-desc { font-size: 11px; color: var(--on-surface-variant); display: block; margin-top: 1px; }
/* 四个选项的微缩示意 */
.fd-sw-default { background: #0a0a0a; border: 1px solid rgba(255,255,255,.14); }
.fd-sw-default i:nth-child(1) { width: 34%; height: 10px; background: #fff; }
.fd-sw-default i:nth-child(2) { width: 52%; height: 7px; background: #888; }
.fd-sw-default i:nth-child(3) { width: 22%; height: 12px; background: #fff; border-radius: 6px; }
.fd-sw-google { background: #f8fafd; border: 1px solid #c4c7c5; }
.fd-sw-google i:nth-child(1) { width: 30%; height: 12px; background: #0b57d0; border-radius: 6px; }
.fd-sw-google i:nth-child(2) { width: 46%; height: 7px; background: #444746; }
.fd-sw-google i:nth-child(3) { width: 20%; height: 12px; background: #d3e3fd; border-radius: 6px; }
.fd-sw-winui { background: linear-gradient(135deg, #e8f1fb, #f3f9ff); border: 1px solid #9ec7ee; }
.fd-sw-winui i:nth-child(1) { width: 32%; height: 8px; background: #0078d4; }
.fd-sw-winui i:nth-child(2) { width: 48%; height: 6px; background: #605e5c; }
.fd-sw-winui i:nth-child(3) { width: 20%; height: 10px; background: #0078d4; border-radius: 2px; }
.fd-sw-swiss { background: #fff; border: 2px solid #111; border-radius: 0; }
.fd-sw-swiss i:nth-child(1) { width: 40%; height: 9px; background: #111; border-radius: 0; }
.fd-sw-swiss i:nth-child(2) { width: 24%; height: 9px; background: #e30613; border-radius: 0; }
.fd-sw-swiss i:nth-child(3) { width: 56%; height: 5px; background: #111; border-radius: 0; }
.fd-skin-sep { height: 1px; background: var(--glass-border); margin: 12px 2px; }
.fd-skin-modes { display: flex; gap: 4px; background: var(--surface); border-radius: 100px; padding: 4px; }
.fd-skin-mode {
    flex: 1; height: 34px; border: none; border-radius: 100px; background: none;
    color: var(--on-surface-variant); font-size: 13px; font-weight: 700;
    cursor: pointer; font-family: inherit; display: flex; align-items: center;
    justify-content: center; gap: 6px; transition: all .18s ease;
}
.fd-skin-mode .material-icons-round { font-size: 16px; }
.fd-skin-mode.active { background: var(--on-surface); color: var(--background); }

/* ============================================================
   第二套：谷歌风（Material You / M3）
   关键词：纯色面、 tonal 药丸按钮、28px 大圆角、Google 蓝
   ============================================================ */
html[data-skin="google"] body {
    font-family: 'Roboto', 'Inter', 'Noto Sans SC', system-ui, sans-serif;
}
html[data-skin="google"][data-theme="light"] {
    --primary: #0b57d0;
    --primary-light: #4285f4;
    --primary-dark: #0842a0;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --background: #f8fafd;
    --bg-gradient: none;
    --on-surface: #1f1f1f;
    --on-surface-variant: #444746;
    --glass: #ffffff;
    --glass-border: #c4c7c5;
    --glow: 0 1px 3px rgba(60, 64, 67, .18);
    --radius: 24px;
    --radius-sm: 14px;
}
html[data-skin="google"][data-theme="dark"] {
    --primary: #a8c7fa;
    --primary-light: #d3e3fd;
    --primary-dark: #7cacf8;
    --surface: #1e1f20;
    --surface-solid: #1e1f20;
    --background: #131314;
    --bg-gradient: none;
    --on-surface: #e3e3e3;
    --on-surface-variant: #9aa0a6;
    --glass: #1e1f20;
    --glass-border: #444746;
    --glow: 0 1px 3px rgba(0, 0, 0, .5);
    --radius: 24px;
    --radius-sm: 14px;
}
html[data-skin="google"] body::before { display: none; }
html[data-skin="google"] .app-bar,
html[data-skin="google"] .gc-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
    border-bottom: 1px solid var(--glass-border);
}
html[data-skin="google"] .app-bar-inner { max-width: 1200px; }
html[data-skin="google"] .icon-btn { border-radius: 50%; }
html[data-skin="google"] .icon-btn:hover { background: rgba(11, 87, 208, .1); color: var(--on-surface); }
html[data-skin="google"] .side-nav { border-right: 1px solid var(--glass-border); background: var(--surface); }
html[data-skin="google"] .side-nav-header { background: var(--surface); color: var(--on-surface); }
html[data-skin="google"] .side-nav-header .avatar { background: #d3e3fd; color: #0b57d0; border: none; }
html[data-skin="google"][data-theme="dark"] .side-nav-header .avatar { background: #004a77; color: #a8c7fa; }
html[data-skin="google"] .side-nav-list a { border-radius: 100px; }
html[data-skin="google"] .side-nav-list a.active { background: #d3e3fd; color: #041e49; }
html[data-skin="google"][data-theme="dark"] .side-nav-list a.active { background: #004a77; color: #d3e3fd; }
html[data-skin="google"] .hero-badge {
    background: #d3e3fd; color: #041e49; border: none; border-radius: 8px;
}
html[data-skin="google"][data-theme="dark"] .hero-badge { background: #004a77; color: #d3e3fd; }
html[data-skin="google"] .btn-primary {
    background: #0b57d0; color: #fff; border-radius: 100px;
    box-shadow: 0 1px 3px rgba(60, 64, 67, .3);
}
html[data-skin="google"][data-theme="dark"] .btn-primary { background: #a8c7fa; color: #062e6f; }
html[data-skin="google"] .btn-primary:hover { transform: none; box-shadow: 0 2px 6px rgba(60, 64, 67, .35); }
html[data-skin="google"] .btn-secondary {
    background: #d3e3fd; color: #041e49; border: none; border-radius: 100px;
}
html[data-skin="google"][data-theme="dark"] .btn-secondary { background: #004a77; color: #d3e3fd; }
html[data-skin="google"] .btn-secondary:hover { transform: none; background: #c2d7fb; }
html[data-skin="google"] .article-card { border: 1px solid var(--glass-border); box-shadow: none; }
html[data-skin="google"] .article-card:hover {
    transform: none; box-shadow: 0 4px 12px rgba(60, 64, 67, .2); border-color: var(--glass-border);
}
html[data-skin="google"] .card-category { background: #0b57d0; color: #fff; border-radius: 8px; }
html[data-skin="google"][data-theme="dark"] .card-category { background: #a8c7fa; color: #062e6f; }
html[data-skin="google"] .card-image::after { display: none; }
html[data-skin="google"] .card-author-avatar { background: #0b57d0; color: #fff; border-radius: 50%; }
html[data-skin="google"] .category-card { border-radius: 20px !important; }
html[data-skin="google"] .search-box { border-radius: 28px !important; }
html[data-skin="google"] .gc-back, html[data-skin="google"] .gc-iconbtn { border-radius: 100px; }

/* ============================================================
   第三套：WinUI（Fluent Design）
   关键词：小圆角、云母材质、描边层次、Fluent 蓝、reveal 悬停
   ============================================================ */
html[data-skin="winui"] body {
    font-family: 'Segoe UI Variable', 'Segoe UI', 'Inter', 'Noto Sans SC', system-ui, sans-serif;
}
html[data-skin="winui"][data-theme="light"] {
    --primary: #0078d4;
    --primary-light: #106ebe;
    --primary-dark: #005a9e;
    --surface: rgba(255, 255, 255, .75);
    --surface-solid: #f3f3f3;
    --background: #eef3f9;
    --bg-gradient: linear-gradient(160deg, #e6effa 0%, #f3f6fb 45%, #e9f0f8 100%);
    --on-surface: #1b1a19;
    --on-surface-variant: #605e5c;
    --glass: rgba(255, 255, 255, .72);
    --glass-border: #c8c6c4;
    --glow: 0 8px 28px rgba(0, 120, 212, .14);
    --radius: 8px;
    --radius-sm: 4px;
}
html[data-skin="winui"][data-theme="dark"] {
    --primary: #60cdff;
    --primary-light: #4cc2ff;
    --primary-dark: #0090d4;
    --surface: rgba(44, 44, 44, .72);
    --surface-solid: #202020;
    --background: #0c0f14;
    --bg-gradient: linear-gradient(160deg, #0c1220 0%, #111318 50%, #0d1524 100%);
    --on-surface: #ffffff;
    --on-surface-variant: #a19f9d;
    --glass: rgba(32, 32, 32, .78);
    --glass-border: rgba(255, 255, 255, .09);
    --glow: 0 8px 28px rgba(0, 0, 0, .5);
    --radius: 8px;
    --radius-sm: 4px;
}
html[data-skin="winui"] .app-bar,
html[data-skin="winui"] .gc-bar {
    background: var(--glass);
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
    border-bottom: 1px solid var(--glass-border);
}
html[data-skin="winui"] .icon-btn { border-radius: 4px; border: 1px solid transparent; }
html[data-skin="winui"] .icon-btn:hover {
    background: rgba(0, 120, 212, .12); color: var(--on-surface); border-color: var(--glass-border);
}
html[data-skin="winui"] .side-nav { background: var(--glass); backdrop-filter: blur(30px); }
html[data-skin="winui"] .side-nav-header { background: linear-gradient(135deg, #0078d4, #005a9e); color: #fff; }
html[data-skin="winui"] .side-nav-header .avatar { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); }
html[data-skin="winui"] .side-nav-list a { border-radius: 4px; border: 1px solid transparent; }
html[data-skin="winui"] .side-nav-list a:hover {
    background: rgba(0, 120, 212, .08); border-color: var(--glass-border);
}
html[data-skin="winui"] .side-nav-list a.active {
    background: rgba(0, 120, 212, .14); color: var(--on-surface);
    border-color: #0078d4; border-left-width: 3px;
}
html[data-skin="winui"] .hero-badge {
    background: rgba(0, 120, 212, .1); border: 1px solid rgba(0, 120, 212, .35);
    color: var(--on-surface); border-radius: 4px;
}
html[data-skin="winui"] .btn-primary {
    background: #0078d4; color: #fff; border-radius: 4px;
    border: 1px solid #005a9e; box-shadow: 0 2px 8px rgba(0, 120, 212, .3);
}
html[data-skin="winui"][data-theme="dark"] .btn-primary { background: #0078d4; color: #fff; }
html[data-skin="winui"] .btn-primary:hover { transform: translateY(-1px); background: #106ebe; box-shadow: 0 4px 14px rgba(0, 120, 212, .4); }
html[data-skin="winui"] .btn-secondary { border-radius: 4px; background: var(--surface); }
html[data-skin="winui"] .btn-secondary:hover { transform: translateY(-1px); border-color: #0078d4; }
html[data-skin="winui"] .article-card {
    border: 1px solid var(--glass-border); border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
html[data-skin="winui"] .article-card:hover {
    transform: translateY(-2px); border-color: #0078d4;
    box-shadow: 0 8px 24px rgba(0, 120, 212, .18);
}
html[data-skin="winui"] .card-category { background: #0078d4; color: #fff; border-radius: 4px; }
html[data-skin="winui"] .card-author-avatar { background: #0078d4; color: #fff; border-radius: 50%; }
html[data-skin="winui"] .category-card { border-radius: 8px !important; }
html[data-skin="winui"] .search-box { border-radius: 8px !important; border: 1px solid #0078d4 !important; }
html[data-skin="winui"] .gc-back, html[data-skin="winui"] .gc-iconbtn { border-radius: 4px; }
html[data-skin="winui"] .about-card { border-radius: 8px !important; }

/* ============================================================
   第四套：瑞士极简（International Typographic Style）
   关键词：黑白红、网格、粗黑标题、大写标签、零装饰、直角
   ============================================================ */
html[data-skin="swiss"] body {
    font-family: 'Helvetica Neue', Helvetica, 'Inter', 'Noto Sans SC', system-ui, sans-serif;
    letter-spacing: 0;
}
html[data-skin="swiss"][data-theme="light"] {
    --primary: #111111;
    --primary-light: #333333;
    --primary-dark: #000000;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --background: #ffffff;
    --bg-gradient: none;
    --on-surface: #111111;
    --on-surface-variant: #5c5c5c;
    --glass: #ffffff;
    --glass-border: #111111;
    --glow: none;
    --radius: 2px;
    --radius-sm: 2px;
    --swiss-accent: #e30613;
}
html[data-skin="swiss"][data-theme="dark"] {
    --primary: #f5f5f5;
    --primary-light: #ffffff;
    --primary-dark: #d4d4d4;
    --surface: #161616;
    --surface-solid: #161616;
    --background: #0e0e0e;
    --bg-gradient: none;
    --on-surface: #f5f5f5;
    --on-surface-variant: #a3a3a3;
    --glass: #161616;
    --glass-border: #f5f5f5;
    --glow: none;
    --radius: 2px;
    --radius-sm: 2px;
    --swiss-accent: #ff3b46;
}
/* 去装饰：模糊、阴影、渐变全部拿掉 */
html[data-skin="swiss"] body::before { display: none; }
html[data-skin="swiss"] .app-bar,
html[data-skin="swiss"] .gc-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--surface);
    border-bottom: 2px solid var(--glass-border);
}
html[data-skin="swiss"] .hero-badge {
    background: transparent; border: 2px solid var(--glass-border);
    border-radius: 0; text-transform: uppercase; letter-spacing: 2px;
    font-size: 11px; font-weight: 700; color: var(--on-surface);
}
html[data-skin="swiss"] .hero h2 {
    letter-spacing: -2px; font-weight: 900; text-transform: none;
}
html[data-skin="swiss"] .hero h2::after {
    content: ''; display: block; width: 64px; height: 6px;
    background: var(--swiss-accent); margin: 20px auto 0;
}
html[data-skin="swiss"] .btn-primary {
    background: var(--on-surface); color: var(--background);
    border-radius: 0; border: 2px solid var(--on-surface);
}
html[data-skin="swiss"] .btn-primary:hover { transform: none; box-shadow: none; background: var(--swiss-accent); border-color: var(--swiss-accent); color: #fff; }
html[data-skin="swiss"] .btn-secondary {
    background: transparent; border: 2px solid var(--on-surface);
    border-radius: 0; color: var(--on-surface);
}
html[data-skin="swiss"] .btn-secondary:hover { transform: none; background: var(--on-surface); color: var(--background); }
html[data-skin="swiss"] .icon-btn { border-radius: 0; }
html[data-skin="swiss"] .icon-btn:hover { background: var(--on-surface); color: var(--background); }
html[data-skin="swiss"] .side-nav { border-right: 2px solid var(--glass-border); background: var(--surface); }
html[data-skin="swiss"] .side-nav-header { background: var(--on-surface); color: var(--background); }
html[data-skin="swiss"] .side-nav-header .avatar { border-radius: 0; border: 2px solid currentColor; background: transparent; }
html[data-skin="swiss"] .side-nav-list a { border-radius: 0; border-left: 4px solid transparent; }
html[data-skin="swiss"] .side-nav-list a.active { background: var(--on-surface); color: var(--background); }
html[data-skin="swiss"] .side-nav-list a:hover { background: transparent; border-left-color: var(--swiss-accent); }
html[data-skin="swiss"] .section-title {
    text-transform: uppercase; letter-spacing: 1.5px; font-size: 15px; font-weight: 900;
}
html[data-skin="swiss"] .section-title .material-icons-round { display: none; }
html[data-skin="swiss"] .section-title::before {
    content: ''; width: 12px; height: 12px; background: var(--swiss-accent); flex: none;
}
html[data-skin="swiss"] .article-card {
    border: 2px solid var(--glass-border); border-radius: 0; box-shadow: none;
}
html[data-skin="swiss"] .article-card:hover { transform: none; box-shadow: 6px 6px 0 var(--swiss-accent); }
html[data-skin="swiss"] .card-category {
    background: var(--swiss-accent); color: #fff; border-radius: 0;
    text-transform: uppercase; letter-spacing: 1.5px;
}
html[data-skin="swiss"] .card-image::after { display: none; }
html[data-skin="swiss"] .card-author-avatar { border-radius: 0; background: var(--on-surface); color: var(--background); }
html[data-skin="swiss"] .category-card { border-radius: 0 !important; border-width: 2px !important; }
html[data-skin="swiss"] .search-box { border-radius: 0 !important; border-width: 2px !important; }
html[data-skin="swiss"] .about-card { border-radius: 0 !important; border: 2px solid var(--glass-border) !important; }
html[data-skin="swiss"] .about-avatar { border-radius: 0 !important; }
html[data-skin="swiss"] .gc-back, html[data-skin="swiss"] .gc-iconbtn { border-radius: 0; border-width: 2px; }
html[data-skin="swiss"] .card-content h4 { letter-spacing: -.3px; }
/* VIP 站的金色点缀在瑞士风里一律压成红，保持体系干净 */
html[data-skin="swiss"] .gold-particles { display: none; }

/* 面板本身在瑞士风下也保持直角 */
html[data-skin="swiss"] .fd-skin-panel,
html[data-skin="swiss"] .fd-skin-opt,
html[data-skin="swiss"] .fd-skin-sw,
html[data-skin="swiss"] .fd-skin-modes,
html[data-skin="swiss"] .fd-skin-mode { border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
    .fd-skin-panel, .fd-skin-opt { transition: none; }
}