/*==============================================================================
## 多主题皮肤系统 — themes.css
##
## 基于 CSS 设计令牌（custom properties），每套主题只需覆盖令牌值 + 少量特效。
## 原有 3 套主题（io-black-mode / io-white-mode / io-grey-mode）不受影响。
## 新增 7 套：玻璃拟态 / 极简主义 / Y2K复古 / 流体设计 / 新拟态 / 赛博朋克 / 粗野主义
==============================================================================*/

/* ==============================================================================
   A. 设计令牌默认值 + 通用映射层
   ============================================================================== */

:root {
    --t-bg: #fff;
    --t-card: #fff;
    --t-sidebar: #fff;
    --t-header: #fff;
    --t-text: #333;
    --t-text-muted: #999;
    --t-link: #f1404b;
    --t-link-hover: #d63951;
    --t-border: rgba(0,0,0,.08);
    --t-radius: 6px;
    --t-shadow: 0 1px 3px rgba(0,0,0,.08);
    --t-shadow-hover: 0 6px 20px rgba(0,0,0,.12);
    --t-input-bg: #f8f9fa;
    --t-input-text: #333;
    --t-footer-btn-bg: rgba(255,255,255,.6);
    --t-footer-btn-color: #777;
    --t-selection: #f1404b;
    --t-scrollbar-thumb: rgba(0,0,0,.18);
    --t-scrollbar-track: transparent;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 24px;
    --ui-card-height: 74px;
    --ui-icon-size: 42px;
    --ui-motion-fast: 180ms;
    --ui-motion-base: 220ms;
    --ui-focus-ring: 0 0 0 3px rgba(var(--t-focus-rgb, 241, 64, 75), .2);
    --ui-content-radius: 10px;
}

/* 旧版三主题令牌桥接：数值严格沿用 style.css 的既有配色。 */
body.io-black-mode {
    --t-bg: #1b1d1f;
    --t-card: #2c2e2f;
    --t-text: #c6c9cf;
    --t-text-muted: #888;
    --t-border: #363738;
}
body.io-white-mode {
    --t-bg: #fff;
    --t-card: #fff;
    --t-text: #333;
    --t-text-muted: #999;
}
body.io-grey-mode {
    --t-bg: #f0f2f4;
    --t-card: #fff;
    --t-text: #333;
    --t-text-muted: #999;
}

/* 新主题快捷选择器 */
body.io-glass-mode, body.io-minimal-mode, body.io-y2k-mode,
body.io-fluid-mode, body.io-neumorph-mode, body.io-cyberpunk-mode,
body.io-brutalist-mode {
    background-color: var(--t-bg);
    color: var(--t-text);
    transition: background-color .3s ease, color .3s ease;
}

/* ---- 通用映射层：所有新主题共享，统一用 body 前缀保持特异性一致 ---- */

/* 链接 */
body.io-glass-mode a:not(.btn),
body.io-minimal-mode a:not(.btn),
body.io-y2k-mode a:not(.btn),
body.io-fluid-mode a:not(.btn),
body.io-neumorph-mode a:not(.btn),
body.io-cyberpunk-mode a:not(.btn),
body.io-brutalist-mode a:not(.btn) {
    color: var(--t-link);
    transition: color .15s ease;
}
body.io-glass-mode a:not(.btn):hover,
body.io-minimal-mode a:not(.btn):hover,
body.io-y2k-mode a:not(.btn):hover,
body.io-fluid-mode a:not(.btn):hover,
body.io-neumorph-mode a:not(.btn):hover,
body.io-cyberpunk-mode a:not(.btn):hover,
body.io-brutalist-mode a:not(.btn):hover {
    color: var(--t-link-hover);
}

/* 卡片 */
body.io-glass-mode .card,
body.io-minimal-mode .card,
body.io-y2k-mode .card,
body.io-fluid-mode .card,
body.io-neumorph-mode .card,
body.io-cyberpunk-mode .card,
body.io-brutalist-mode .card {
    background-color: var(--t-card);
    box-shadow: var(--t-shadow);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
    color: var(--t-text);
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
body.io-glass-mode .card:hover,
body.io-minimal-mode .card:hover,
body.io-y2k-mode .card:hover,
body.io-fluid-mode .card:hover,
body.io-neumorph-mode .card:hover,
body.io-cyberpunk-mode .card:hover,
body.io-brutalist-mode .card:hover {
    box-shadow: var(--t-shadow-hover);
}

/* 页头 */
body.io-glass-mode .page-header,
body.io-minimal-mode .page-header,
body.io-y2k-mode .page-header,
body.io-fluid-mode .page-header,
body.io-neumorph-mode .page-header,
body.io-cyberpunk-mode .page-header,
body.io-brutalist-mode .page-header {
    background: var(--t-header);
    box-shadow: var(--t-shadow);
}
/* 覆盖 style.css .page-header.big 的白色半透明背景 */
body.io-glass-mode .page-header.big,
body.io-minimal-mode .page-header.big,
body.io-y2k-mode .page-header.big,
body.io-fluid-mode .page-header.big,
body.io-neumorph-mode .page-header.big,
body.io-cyberpunk-mode .page-header.big,
body.io-brutalist-mode .page-header.big {
    background: var(--t-header) !important;
}
/* 新拟态/玻璃拟态 的 backdrop-filter 与主题冲突，去掉 */
body.io-neumorph-mode .page-header.big {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* 侧边栏 */
body.io-glass-mode .sidebar-nav,
body.io-minimal-mode .sidebar-nav,
body.io-y2k-mode .sidebar-nav,
body.io-fluid-mode .sidebar-nav,
body.io-neumorph-mode .sidebar-nav,
body.io-cyberpunk-mode .sidebar-nav,
body.io-brutalist-mode .sidebar-nav {
    background: var(--t-sidebar);
}
body.io-glass-mode .sidebar-nav-inner,
body.io-minimal-mode .sidebar-nav-inner,
body.io-y2k-mode .sidebar-nav-inner,
body.io-fluid-mode .sidebar-nav-inner,
body.io-neumorph-mode .sidebar-nav-inner,
body.io-cyberpunk-mode .sidebar-nav-inner,
body.io-brutalist-mode .sidebar-nav-inner {
    background: var(--t-sidebar);
}
body.io-glass-mode .sidebar-logo,
body.io-minimal-mode .sidebar-logo,
body.io-y2k-mode .sidebar-logo,
body.io-fluid-mode .sidebar-logo,
body.io-neumorph-mode .sidebar-logo,
body.io-cyberpunk-mode .sidebar-logo,
body.io-brutalist-mode .sidebar-logo {
    background: transparent;
}

/* 文字辅助类 */
body.io-glass-mode p, body.io-minimal-mode p, body.io-y2k-mode p,
body.io-fluid-mode p, body.io-neumorph-mode p, body.io-cyberpunk-mode p,
body.io-brutalist-mode p {
    color: var(--t-text);
}
body.io-glass-mode .text-gray, body.io-minimal-mode .text-gray,
body.io-y2k-mode .text-gray, body.io-fluid-mode .text-gray,
body.io-neumorph-mode .text-gray, body.io-cyberpunk-mode .text-gray,
body.io-brutalist-mode .text-gray {
    color: var(--t-text-muted) !important;
}
body.io-glass-mode .text-muted, body.io-minimal-mode .text-muted,
body.io-y2k-mode .text-muted, body.io-fluid-mode .text-muted,
body.io-neumorph-mode .text-muted, body.io-cyberpunk-mode .text-muted,
body.io-brutalist-mode .text-muted,
body.io-glass-mode .text-ss, body.io-minimal-mode .text-ss,
body.io-y2k-mode .text-ss, body.io-fluid-mode .text-ss,
body.io-neumorph-mode .text-ss, body.io-cyberpunk-mode .text-ss,
body.io-brutalist-mode .text-ss {
    color: var(--t-text-muted) !important;
}

/* 表单输入 */
body.io-glass-mode .form-control, body.io-minimal-mode .form-control,
body.io-y2k-mode .form-control, body.io-fluid-mode .form-control,
body.io-neumorph-mode .form-control, body.io-cyberpunk-mode .form-control,
body.io-brutalist-mode .form-control,
body.io-glass-mode textarea, body.io-minimal-mode textarea,
body.io-y2k-mode textarea, body.io-fluid-mode textarea,
body.io-neumorph-mode textarea, body.io-cyberpunk-mode textarea,
body.io-brutalist-mode textarea {
    background: var(--t-input-bg);
    color: var(--t-input-text);
    border: 1px solid var(--t-border);
    border-radius: var(--t-radius);
}
/* 表单 focus 状态 */
body.io-glass-mode .form-control:focus, body.io-minimal-mode .form-control:focus,
body.io-y2k-mode .form-control:focus, body.io-fluid-mode .form-control:focus,
body.io-neumorph-mode .form-control:focus, body.io-cyberpunk-mode .form-control:focus,
body.io-brutalist-mode .form-control:focus,
body.io-glass-mode textarea:focus, body.io-minimal-mode textarea:focus,
body.io-y2k-mode textarea:focus, body.io-fluid-mode textarea:focus,
body.io-neumorph-mode textarea:focus, body.io-cyberpunk-mode textarea:focus,
body.io-brutalist-mode textarea:focus {
    border-color: var(--t-link);
    box-shadow: 0 0 0 3px rgba(var(--t-focus-rgb,99,102,241),.12);
    background: var(--t-input-bg);
    outline: none;
}

/* 浮动按钮 */
body.io-glass-mode #footer-tools .btn, body.io-minimal-mode #footer-tools .btn,
body.io-y2k-mode #footer-tools .btn, body.io-fluid-mode #footer-tools .btn,
body.io-neumorph-mode #footer-tools .btn, body.io-cyberpunk-mode #footer-tools .btn,
body.io-brutalist-mode #footer-tools .btn {
    color: var(--t-footer-btn-color);
    background: var(--t-footer-btn-bg);
}
body.io-glass-mode #footer-tools .btn:hover, body.io-minimal-mode #footer-tools .btn:hover,
body.io-y2k-mode #footer-tools .btn:hover, body.io-fluid-mode #footer-tools .btn:hover,
body.io-neumorph-mode #footer-tools .btn:hover, body.io-cyberpunk-mode #footer-tools .btn:hover,
body.io-brutalist-mode #footer-tools .btn:hover {
    color: var(--t-link);
}

/* 加载遮罩 */
body.io-glass-mode .ajax-loading, body.io-minimal-mode .ajax-loading,
body.io-y2k-mode .ajax-loading, body.io-fluid-mode .ajax-loading,
body.io-neumorph-mode .ajax-loading, body.io-brutalist-mode .ajax-loading {
    background: rgba(255,255,255,.6) !important;
}

/* ---- 侧边栏菜单文字（亮色主题修正） ---- */
body.io-minimal-mode .sidebar-menu-inner a,
body.io-y2k-mode .sidebar-menu-inner a,
body.io-fluid-mode .sidebar-menu-inner a,
body.io-neumorph-mode .sidebar-menu-inner a,
body.io-brutalist-mode .sidebar-menu-inner a {
    color: #515C6B;
}
body.io-minimal-mode .sidebar-item > a:hover,
body.io-minimal-mode .sidebar-show,
body.io-y2k-mode .sidebar-item > a:hover,
body.io-y2k-mode .sidebar-show,
body.io-fluid-mode .sidebar-item > a:hover,
body.io-fluid-mode .sidebar-show,
body.io-neumorph-mode .sidebar-item > a:hover,
body.io-neumorph-mode .sidebar-show,
body.io-brutalist-mode .sidebar-item > a:hover,
body.io-brutalist-mode .sidebar-show {
    color: var(--t-link) !important;
    background: rgba(0,0,0,.04);
}
body.io-minimal-mode .sidebar-item ul,
body.io-y2k-mode .sidebar-item ul,
body.io-fluid-mode .sidebar-item ul,
body.io-neumorph-mode .sidebar-item ul,
body.io-brutalist-mode .sidebar-item ul {
    background: none;
}

/* ---- 暗色主题: loading / 滚动条 / color-scheme ---- */
body.io-glass-mode #loading,
body.io-glass-mode #load-loading { background: #1a1c2e !important; }
body.io-cyberpunk-mode #loading,
body.io-cyberpunk-mode #load-loading { background: #0a0a0f !important; }

body.io-glass-mode,
body.io-cyberpunk-mode {
    color-scheme: dark;
}

/* ==============================================================================
   B. 7 套新主题 — 令牌覆盖 + 特效
   ============================================================================== */

/* ----------------------------------------------------------------
   1. 玻璃拟态 io-glass-mode
   ---------------------------------------------------------------- */
body.io-glass-mode {
    --t-bg: #1a1c2e;
    --t-card: rgba(255,255,255,.12);
    --t-sidebar: rgba(255,255,255,.08);
    --t-header: rgba(255,255,255,.10);
    --t-text: #e8eaf6;
    --t-text-muted: rgba(232,234,246,.5);
    --t-link: #82b1ff;
    --t-link-hover: #b388ff;
    --t-border: rgba(255,255,255,.18);
    --t-radius: 14px;
    --t-shadow: 0 8px 32px rgba(0,0,0,.18);
    --t-shadow-hover: 0 12px 40px rgba(130,177,255,.25);
    --t-input-bg: rgba(255,255,255,.12);
    --t-input-text: #e8eaf6;
    --t-footer-btn-bg: rgba(255,255,255,.10);
    --t-footer-btn-color: rgba(232,234,246,.6);
    --t-selection: rgba(130,177,255,.30);
    --t-scrollbar-thumb: rgba(255,255,255,.15);
    --t-focus-rgb: 130,177,255;
    --t-backdrop-filter: blur(18px) saturate(1.35);
    background: linear-gradient(135deg,#1a1c2e 0%,#2d1b4e 50%,#1a237e 100%);
    background-attachment: fixed;
}
body.io-glass-mode .page-header,
body.io-glass-mode #search,
body.io-glass-mode .theme-panel {
    backdrop-filter: var(--t-backdrop-filter);
    -webkit-backdrop-filter: var(--t-backdrop-filter);
}
body.io-glass-mode .url-card .url-body:hover {
    box-shadow: 0 16px 40px rgba(130,177,255,.30);
}
body.io-glass-mode .bg-light { background: rgba(255,255,255,.08) !important; }
body.io-glass-mode .ajax-loading { background: rgba(26,28,46,.7) !important; }
body.io-glass-mode .sidebar-logo { border-bottom-color: rgba(255,255,255,.08); }
body.io-glass-mode .border-bottom { border-bottom-color: rgba(255,255,255,.08) !important; }
body.io-glass-mode .border-color { border-color: rgba(255,255,255,.06) !important; }
body.io-glass-mode .logo-light { display: none !important; }
body.io-glass-mode .logo-dark { display: initial !important; }
body.io-glass-mode ::selection { background: var(--t-selection); color: #fff; }
body.io-glass-mode .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--t-scrollbar-thumb); }
/* 搜索框 */
body.io-glass-mode #search-text {
    background-color: var(--t-input-bg) !important;
    color: var(--t-input-text);
    border: 1px solid var(--t-border);
}
body.io-glass-mode #search button { background: rgba(255,255,255,.15); border: none; color: var(--t-text); }
body.io-glass-mode .s-type-list { background: rgba(30,32,50,.95); box-shadow: 0 9px 20px rgba(0,0,0,.4); }
body.io-glass-mode .s-type-list::before { border-bottom-color: rgba(30,32,50,.95); }
body.io-glass-mode .search-type input:checked+label,
body.io-glass-mode .search-type input:hover+label { background-color: rgba(255,255,255,.10); }
/* modal/dropdown */
body.io-glass-mode .modal-content { background-color: rgba(30,32,50,.85); }
body.io-glass-mode .navbar-collapse ul li ul { background: rgba(30,32,50,.9); }
/* tags/posts/panel-heading */
body.io-glass-mode .tags a:hover { background-color: var(--t-link) !important; color: #fff !important; }
body.io-glass-mode .posts-nav { color: rgba(255,255,255,.44); }
body.io-glass-mode .panel-body h2,
body.io-glass-mode .panel-body h3 { border-color: var(--t-link); }
body.io-glass-mode .input-group-text { background-color: var(--t-input-bg); border-color: var(--t-border); color: var(--t-text-muted); }
body.io-glass-mode .nothing { color: var(--t-text-muted); background: rgba(255,255,255,.05); }
body.io-glass-mode .url-card .url-img { background: rgba(255,255,255,.06); }
body.io-glass-mode .slider_menu[sliderTab] > .menu { background: rgba(255,255,255,.08); }
body.io-glass-mode .slider_menu[sliderTab] > .menu > li > a { color: var(--t-text-muted); }
body.io-glass-mode .siteico { background: var(--t-card); }
body.io-glass-mode .flex-avatar { background: rgba(255,255,255,.08); }
body.io-glass-mode .single-top-area,
body.io-glass-mode .near-navigation { background: var(--t-card); }
body.io-glass-mode .sidebar-popup div { background: var(--t-sidebar); }
body.io-glass-mode .sidebar-popup.sidebar-menu-inner ul li { background: var(--t-sidebar); }
body.io-glass-mode .sidebar-popup::before { border-color: transparent var(--t-sidebar) transparent; }

/* ----------------------------------------------------------------
   2. 极简主义 io-minimal-mode
   ---------------------------------------------------------------- */
body.io-minimal-mode {
    --t-bg: #fafafa;
    --t-card: #fff;
    --t-sidebar: #fff;
    --t-header: #fff;
    --t-text: #2c2c2c;
    --t-text-muted: #b0b0b0;
    --t-link: #333;
    --t-link-hover: #000;
    --t-border: rgba(0,0,0,.06);
    --t-radius: 2px;
    --t-shadow: none;
    --t-shadow-hover: 0 2px 12px rgba(0,0,0,.06);
    --t-input-bg: #fff;
    --t-input-text: #333;
    --t-footer-btn-bg: rgba(0,0,0,.04);
    --t-footer-btn-color: #aaa;
    --t-selection: rgba(0,0,0,.08);
    --t-scrollbar-thumb: rgba(0,0,0,.12);
    --t-focus-rgb: 51,51,51;
    box-shadow: none;
}
body.io-minimal-mode .card { border: 1px solid var(--t-border); box-shadow: none; }
body.io-minimal-mode .card:hover { border-color: rgba(0,0,0,.12); }
body.io-minimal-mode .page-header { box-shadow: 0 1px 0 rgba(0,0,0,.05); }
body.io-minimal-mode .btn { border-radius: 2px; }
body.io-minimal-mode .url-card .url-body:hover { box-shadow: none; border-color: rgba(0,0,0,.12); transform: translateY(-2px); }
body.io-minimal-mode .rounded-circle { border-radius: 4px !important; }
body.io-minimal-mode .block { box-shadow: none; border: 1px solid var(--t-border); }
body.io-minimal-mode .panel-body h2,
body.io-minimal-mode .panel-body h3 { border-color: var(--t-link); }

/* ----------------------------------------------------------------
   3. Y2K 复古 io-y2k-mode
   ---------------------------------------------------------------- */
body.io-y2k-mode {
    --t-bg: #fff8f0;
    --t-card: #fff;
    --t-sidebar: #fff;
    --t-header: #fff;
    --t-text: #4a4a4a;
    --t-text-muted: #767676;
    --t-link: #ff1493;
    --t-link-hover: #ff69b4;
    --t-border: #ffd1ec;
    --t-radius: 16px;
    --t-shadow: 0 4px 0 #ffb6e1, 0 6px 16px rgba(255,20,147,.15);
    --t-shadow-hover: 0 6px 0 #ff69b4, 0 10px 24px rgba(255,20,147,.25);
    --t-input-bg: #fff;
    --t-input-text: #4a4a4a;
    --t-footer-btn-bg: #fff0f5;
    --t-footer-btn-color: #ff1493;
    --t-selection: rgba(255,20,147,.15);
    --t-scrollbar-thumb: rgba(255,20,147,.20);
    --t-focus-rgb: 255,20,147;
}
body.io-y2k-mode .card {
    border: 2px solid #ffd1ec !important;
    border-radius: 16px;
    box-shadow: 0 4px 0 #ffb6e1;
}
body.io-y2k-mode .card:hover {
    border-color: #ff1493 !important;
    box-shadow: 0 6px 0 #ff69b4;
}
body.io-y2k-mode .btn {
    border-radius: 20px;
    background: linear-gradient(135deg,#ff1493,#ff8c00);
    color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 3px 0 rgba(255,20,147,.3);
}
body.io-y2k-mode .btn:hover {
    background: linear-gradient(135deg,#ff69b4,#ffa500);
}
body.io-y2k-mode .page-header {
    background: linear-gradient(135deg,#ff1493 0%,#00ced1 100%);
    color: #fff;
}
body.io-y2k-mode .page-header a,
body.io-y2k-mode .page-header span { color: #fff; }
body.io-y2k-mode .url-card .url-body:hover {
    box-shadow: 0 8px 0 #ff69b4, 0 12px 30px rgba(255,20,147,.3);
}
body.io-y2k-mode .block { border: 2px solid #ffd1ec; border-radius: 16px; box-shadow: 0 4px 0 #ffb6e1; }
body.io-y2k-mode #search-text { border: 2px solid #ffd1ec !important; }
body.io-y2k-mode .panel-body h2,
body.io-y2k-mode .panel-body h3 { border-color: var(--t-link); }

/* ----------------------------------------------------------------
   4. 流体设计 io-fluid-mode
   ---------------------------------------------------------------- */
body.io-fluid-mode {
    --t-bg: #e0f7fa;
    --t-card: rgba(255,255,255,.85);
    --t-sidebar: rgba(255,255,255,.75);
    --t-header: rgba(255,255,255,.80);
    --t-text: #006064;
    --t-text-muted: #80cbc4;
    --t-link: #00acc1;
    --t-link-hover: #00838f;
    --t-border: transparent;
    --t-radius: 18px;
    --t-shadow: 0 10px 30px rgba(0,172,193,.12);
    --t-shadow-hover: 0 16px 44px rgba(0,172,193,.20);
    --t-input-bg: rgba(255,255,255,.70);
    --t-input-text: #006064;
    --t-footer-btn-bg: rgba(255,255,255,.60);
    --t-footer-btn-color: #00acc1;
    --t-selection: rgba(0,172,193,.15);
    --t-scrollbar-thumb: rgba(0,172,193,.20);
    --t-focus-rgb: 0,172,193;
    background: linear-gradient(135deg,#e0f7fa 0%,#b2ebf2 30%,#e1bee7 70%,#f3e5f5 100%);
    background-attachment: fixed;
}
body.io-fluid-mode .card { border: none; border-radius: var(--t-radius); }
body.io-fluid-mode .card:hover { border: none; }
body.io-fluid-mode .btn { border-radius: 30px; }
body.io-fluid-mode .url-card .url-body { border-radius: var(--t-radius); overflow: hidden; }
body.io-fluid-mode .url-card .url-body:hover { border-radius: var(--t-radius); }
body.io-fluid-mode .block { border-radius: var(--t-radius); border: none; }
body.io-fluid-mode .form-control { border-radius: 25px; }
body.io-fluid-mode #search-text,
body.io-fluid-mode .search-select { border-radius: 25px !important; }
body.io-fluid-mode .modal-content { border-radius: 30px; border: none; }
body.io-fluid-mode .rounded-circle { border-radius: 50% !important; }
body.io-fluid-mode .panel-body h2,
body.io-fluid-mode .panel-body h3 { border-color: var(--t-link); }

/* ----------------------------------------------------------------
   5. 新拟态 io-neumorph-mode
   ---------------------------------------------------------------- */
body.io-neumorph-mode {
    --t-bg: #e6ebf2;
    --t-card: #e6ebf2;
    --t-sidebar: #e6ebf2;
    --t-header: #e6ebf2;
    --t-text: #2d3a52;
    --t-text-muted: #5c687e;
    --t-link: #5948d8;
    --t-link-hover: #5747e6;
    --t-border: transparent;
    --t-radius: 18px;
    --t-shadow: 0 1px 2px rgba(0,0,0,.04);
    --t-shadow-hover: 0 5px 14px rgba(45,58,82,.10);
    --t-input-bg: #e6ebf2;
    --t-input-text: #2d3a52;
    --t-footer-btn-bg: #e6ebf2;
    --t-footer-btn-color: #5948d8;
    --t-selection: rgba(109,93,252,.18);
    --t-scrollbar-thumb: #bfc7d5;
    --t-focus-rgb: 109,93,252;
    font-family: SimSun, "Songti SC", STSong, 宋体, serif !important;
}
body.io-neumorph-mode .card {
    border: none !important;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.io-neumorph-mode .card:hover {
    box-shadow: 0 3px 9px rgba(45,58,82,.08);
}
body.io-neumorph-mode .block {
    border: none;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.io-neumorph-mode .btn {
    border: none;
    border-radius: 18px;
    box-shadow: 3px 3px 7px #c2cad8, -3px -3px 7px #fff;
    background: #e6ebf2;
    color: var(--t-link);
    transition: box-shadow .2s ease;
}
body.io-neumorph-mode .btn:hover,
body.io-neumorph-mode .btn:active {
    box-shadow: inset 2px 2px 5px #c2cad8, inset -2px -2px 5px #fff;
}
body.io-neumorph-mode .url-card .url-body {
    border: 0;
    border-radius: 18px;
    background: #e6ebf2;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.io-neumorph-mode .url-card .url-body:hover {
    box-shadow: 0 5px 14px rgba(45,58,82,.10);
}
body.io-neumorph-mode .url-card .url-img {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    padding: 9px;
    border-radius: 14px !important;
    background: #dde3ec;
    box-shadow: 4px 4px 9px #c2cad8, -4px -4px 9px #fff;
}
body.io-neumorph-mode .url-card .url-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
body.io-neumorph-mode .url-card .url-content strong {
    color: #2d3a52;
    font-family: inherit;
    font-weight: 600;
}
body.io-neumorph-mode .form-control {
    border: none;
    border-radius: 18px;
    box-shadow: inset 3px 3px 7px #c2cad8, inset -3px -3px 7px #fff;
}
body.io-neumorph-mode .form-control:focus {
    border: none;
    box-shadow: inset 3px 3px 7px #c2cad8, inset -3px -3px 7px #fff, 0 0 0 3px rgba(109,93,252,.12);
}
body.io-neumorph-mode #search-text {
    background-color: #e6ebf2 !important;
    color: var(--t-input-text);
    border: none;
    box-shadow: inset 3px 3px 7px #c2cad8, inset -3px -3px 7px #fff;
}
body.io-neumorph-mode #search button {
    background: #e6ebf2;
    box-shadow: 3px 3px 7px #c2cad8, -3px -3px 7px #fff;
    border: none;
}
body.io-neumorph-mode .io-home-search #search-text {
    background: #dde3ec !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    border-radius: 18px;
    box-shadow: inset 4px 4px 9px #c2cad8, inset -4px -4px 9px #fff;
}
body.io-neumorph-mode .io-home-search #search-text:focus {
    box-shadow: inset 4px 4px 9px #c2cad8, inset -4px -4px 9px #fff, 0 0 0 3px rgba(109,93,252,.18) !important;
}
body.io-neumorph-mode .io-home-search#search #search-text:focus {
    box-shadow: inset 4px 4px 9px #c2cad8, inset -4px -4px 9px #fff, 0 0 0 3px rgba(109,93,252,.18) !important;
}
body.io-neumorph-mode .io-home-search button {
    background: #5948d8 !important;
    color: #fff;
    box-shadow: 0 3px 8px rgba(87,71,230,.25) !important;
}
body.io-neumorph-mode .io-home-search button i {
    color: #fff;
}
body.io-neumorph-mode .io-home-search button:hover {
    background: #5747e6 !important;
}
body.io-neumorph-mode #footer-tools .btn {
    box-shadow: 3px 3px 7px #c2cad8, -3px -3px 7px #fff;
}
body.io-neumorph-mode #footer-tools .btn:hover {
    box-shadow: inset 2px 2px 5px #c2cad8, inset -2px -2px 5px #fff;
}
body.io-neumorph-mode .page-header { box-shadow: 0 1px 2px rgba(0,0,0,.04); }
body.io-neumorph-mode .sidebar-nav { box-shadow: none; }
body.io-neumorph-mode .sidebar-nav-inner { box-shadow: none; }
body.io-neumorph-mode .sidebar-menu-inner .sidebar-item > a.current,
body.io-neumorph-mode .sidebar-menu-inner .sidebar-item > a.active {
    background: #e1e6ee;
    box-shadow: inset 2px 2px 5px #c2cad8, inset -2px -2px 5px #fff;
}
body.io-neumorph-mode .sidebar-logo { border-bottom: 1px solid rgba(45,58,82,.10); }
body.io-neumorph-mode .panel-body h2,
body.io-neumorph-mode .panel-body h3 { border-color: var(--t-link); }
/* 自定义按钮保持新拟态风格 */
body.io-neumorph-mode .btn.custom_btn-d {
    box-shadow: 3px 3px 7px #c2cad8, -3px -3px 7px #fff;
    border: none !important;
}
body.io-neumorph-mode .btn.custom_btn-d:hover,
body.io-neumorph-mode .btn.custom_btn-d:active {
    box-shadow: inset 2px 2px 5px #c2cad8, inset -2px -2px 5px #fff;
}

@media (max-width: 575.98px) {
    body.io-neumorph-mode .url-card .url-img {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        padding: 6px;
        border-radius: 14px !important;
        background: #dde3ec;
        box-shadow: 3px 3px 7px #c2cad8, -3px -3px 7px #fff;
    }
}

/* ----------------------------------------------------------------
   6. 赛博朋克 io-cyberpunk-mode
   ---------------------------------------------------------------- */
body.io-cyberpunk-mode {
    --t-bg: #0a0a0f;
    --t-card: #12121f;
    --t-sidebar: #0d0d18;
    --t-header: #0d0d18;
    --t-text: #c8c8e0;
    --t-text-muted: #555580;
    --t-link: #ff00ff;
    --t-link-hover: #ff44ff;
    --t-border: rgba(0,255,255,.20);
    --t-radius: 0px;
    --t-shadow: 0 4px 14px rgba(0,0,0,.35);
    --t-shadow-hover: 0 0 30px rgba(255,0,255,.20);
    --t-input-bg: #0d0d18;
    --t-input-text: #00ffff;
    --t-footer-btn-bg: #0d0d18;
    --t-footer-btn-color: #00ffff;
    --t-selection: rgba(255,0,255,.30);
    --t-scrollbar-thumb: rgba(0,255,255,.15);
    --t-focus-rgb: 255,0,255;
}
body.io-cyberpunk-mode .card {
    border: 1px solid rgba(0,255,255,.20) !important;
    border-radius: 0;
    box-shadow: var(--t-shadow);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
body.io-cyberpunk-mode .card:hover {
    border-color: rgba(255,0,255,.45) !important;
    box-shadow: 0 0 30px rgba(255,0,255,.20);
}
body.io-cyberpunk-mode a:not(.btn):hover {
    color: #ff00ff;
    text-shadow: 0 0 8px #ff00ff;
}
body.io-cyberpunk-mode .page-header {
    background: #0d0d18;
    border-bottom: 1px solid rgba(0,255,255,.25);
    box-shadow: 0 0 20px rgba(0,255,255,.08);
}
body.io-cyberpunk-mode .btn {
    border: 1px solid rgba(0,255,255,.35);
    border-radius: 0;
    background: transparent;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: all .2s ease;
}
body.io-cyberpunk-mode .btn:hover {
    background: rgba(255,0,255,.10);
    border-color: #ff00ff;
    color: #ff00ff;
    text-shadow: 0 0 8px #ff00ff;
}
body.io-cyberpunk-mode .bg-light { background: #12121f !important; }
body.io-cyberpunk-mode .block {
    border: 1px solid rgba(0,255,255,.20);
    border-radius: 0;
}
body.io-cyberpunk-mode #footer-tools .btn {
    border: 1px solid rgba(0,255,255,.25);
    border-radius: 0;
}
body.io-cyberpunk-mode .sidebar-logo { border-bottom-color: rgba(0,255,255,.12); }
body.io-cyberpunk-mode .border-bottom { border-bottom-color: rgba(0,255,255,.08) !important; }
body.io-cyberpunk-mode .border-color { border-color: rgba(0,255,255,.06) !important; }
body.io-cyberpunk-mode .logo-light { display: none !important; }
body.io-cyberpunk-mode .logo-dark { display: initial !important; }
body.io-cyberpunk-mode .ajax-loading { background: rgba(10,10,15,.7) !important; }
body.io-cyberpunk-mode ::selection { background: var(--t-selection); color: #fff; }
body.io-cyberpunk-mode .sidebar-scroll::-webkit-scrollbar,
body.io-cyberpunk-mode .sidebar-scroll::-webkit-scrollbar { width: 5px; }
body.io-cyberpunk-mode .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--t-scrollbar-thumb); border-radius: 3px; }
body.io-cyberpunk-mode .sidebar-scroll::-webkit-scrollbar-track { background: #0d0d18; }
/* 搜索框 */
body.io-cyberpunk-mode #search-text {
    background-color: var(--t-input-bg) !important;
    color: var(--t-input-text);
    border: 1px solid var(--t-border);
}
body.io-cyberpunk-mode #search button { background: transparent; border: 1px solid rgba(0,255,255,.35); color: #00ffff; }
body.io-cyberpunk-mode .s-type-list { background: #12121f; box-shadow: 0 9px 20px rgba(0,0,0,.5); }
body.io-cyberpunk-mode .s-type-list::before { border-bottom-color: #12121f; }
body.io-cyberpunk-mode .search-type input:checked+label,
body.io-cyberpunk-mode .search-type input:hover+label { background-color: rgba(0,255,255,.08); }
/* modal/dropdown */
body.io-cyberpunk-mode .modal-content { background-color: #12121f; border: 1px solid rgba(0,255,255,.20); }
body.io-cyberpunk-mode .navbar-collapse ul li ul { background: #12121f; border: 1px solid rgba(0,255,255,.20); }
/* tags/posts/panel-heading */
body.io-cyberpunk-mode .tags a:hover { background-color: var(--t-link) !important; color: #fff !important; }
body.io-cyberpunk-mode .posts-nav { color: rgba(255,255,255,.44); }
body.io-cyberpunk-mode .panel-body h2,
body.io-cyberpunk-mode .panel-body h3 { border-color: var(--t-link); }
body.io-cyberpunk-mode .input-group-text { background-color: var(--t-input-bg); border-color: var(--t-border); color: var(--t-text-muted); }
body.io-cyberpunk-mode .nothing { color: var(--t-text-muted); background: rgba(255,255,255,.05); }
body.io-cyberpunk-mode .url-card .url-img { background: rgba(255,255,255,.06); }
body.io-cyberpunk-mode .slider_menu[sliderTab] > .menu { background: rgba(0,255,255,.06); }
body.io-cyberpunk-mode .slider_menu[sliderTab] > .menu > li > a { color: var(--t-text-muted); }
body.io-cyberpunk-mode .siteico { background: var(--t-card); }
body.io-cyberpunk-mode .flex-avatar { background: rgba(255,255,255,.08); }
body.io-cyberpunk-mode .single-top-area,
body.io-cyberpunk-mode .near-navigation { background: var(--t-card); }
body.io-cyberpunk-mode .sidebar-popup div { background: var(--t-sidebar); }
body.io-cyberpunk-mode .sidebar-popup.sidebar-menu-inner ul li { background: var(--t-sidebar); }
body.io-cyberpunk-mode .sidebar-popup::before { border-color: transparent var(--t-sidebar) transparent; }
body.io-cyberpunk-mode .tooltip-inner { border: 1px solid rgba(0,255,255,.3); box-shadow: 0 0 10px rgba(0,255,255,.15); }

/* ----------------------------------------------------------------
   7. 粗野主义 io-brutalist-mode
   ---------------------------------------------------------------- */
body.io-brutalist-mode {
    --t-bg: #ffffff;
    --t-card: #ffffff;
    --t-sidebar: #f5f5f5;
    --t-header: #ffffff;
    --t-text: #000000;
    --t-text-muted: #666666;
    --t-link: #0066ff;
    --t-link-hover: #0044cc;
    --t-border: #000000;
    --t-radius: 0px;
    --t-shadow: 6px 6px 0 #000000;
    --t-shadow-hover: 10px 10px 0 #000000;
    --t-input-bg: #fff;
    --t-input-text: #000;
    --t-footer-btn-bg: #fff;
    --t-footer-btn-color: #000;
    --t-selection: #000;
    --t-scrollbar-thumb: #000;
    --t-focus-rgb: 0,102,255;
    --t-border-width: 3px;
}
body.io-brutalist-mode .card {
    border: var(--t-border-width) solid #000 !important;
    border-radius: 0;
    box-shadow: 6px 6px 0 #000;
}
body.io-brutalist-mode .url-card .url-body {
    border: var(--t-border-width) solid var(--t-border);
}
body.io-brutalist-mode .theme-panel {
    border: var(--t-border-width) solid var(--t-border);
}
body.io-brutalist-mode .card:hover {
    box-shadow: 10px 10px 0 #000;
}
body.io-brutalist-mode .block {
    border: var(--t-border-width) solid #000;
    border-radius: 0;
    box-shadow: 6px 6px 0 #000;
}
body.io-brutalist-mode .btn {
    border: var(--t-border-width) solid #000;
    border-radius: 0;
    box-shadow: 4px 4px 0 #000;
    font-weight: 700;
    text-transform: uppercase;
    transition: transform .1s ease, box-shadow .1s ease;
}
body.io-brutalist-mode .btn:hover {
    box-shadow: 2px 2px 0 #000;
    transform: translate(2px, 2px);
}
body.io-brutalist-mode .page-header {
    border-bottom: var(--t-border-width) solid #000;
    border-radius: 0;
    box-shadow: 6px 6px 0 #000;
}
body.io-brutalist-mode .url-card .url-body:hover {
    box-shadow: 10px 10px 0 #000;
}
body.io-brutalist-mode .form-control {
    border: var(--t-border-width) solid #000 !important;
    border-radius: 0;
}
body.io-brutalist-mode #footer-tools .btn {
    border: var(--t-border-width) solid #000;
    border-radius: 0;
    box-shadow: 4px 4px 0 #000;
}
body.io-brutalist-mode #footer-tools .btn:hover {
    box-shadow: 2px 2px 0 #000;
    transform: translate(2px, 2px);
}
body.io-brutalist-mode .rounded-circle { border-radius: 0 !important; }
body.io-brutalist-mode ::selection { background: #000; color: #fff; }
body.io-brutalist-mode .panel-body h2,
body.io-brutalist-mode .panel-body h3 { border-color: var(--t-link); }
/* light-theme 亮色侧边栏 popup */
body.io-minimal-mode .sidebar-popup div,
body.io-y2k-mode .sidebar-popup div,
body.io-fluid-mode .sidebar-popup div,
body.io-neumorph-mode .sidebar-popup div,
body.io-brutalist-mode .sidebar-popup div { background: #dadbdd; }
body.io-minimal-mode .sidebar-popup::before,
body.io-y2k-mode .sidebar-popup::before,
body.io-fluid-mode .sidebar-popup::before,
body.io-neumorph-mode .sidebar-popup::before,
body.io-brutalist-mode .sidebar-popup::before { border-color: transparent #dadbdd transparent; }

/* ==============================================================================
   C. 主题面板 UI
   ============================================================================== */
.theme-panel {
    position: fixed;
    bottom: 80px;
    right: 16px;
    width: 240px;
    max-height: 420px;
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    z-index: 9999;
    padding: 16px;
    opacity: 0;
    visibility: hidden;
    transform: scale(.9) translateY(10px);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.theme-panel.show {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
    pointer-events: auto;
}
.theme-panel-title {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.theme-panel-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.theme-swatch {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease;
    text-decoration: none;
    color: #555;
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
}
.theme-swatch:hover {
    background: #f5f5f5;
}
.theme-swatch.active {
    background: #eef;
    color: #f1404b;
    font-weight: 600;
}
.swatch-color {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,.12);
    flex-shrink: 0;
}
.swatch-white-mode     { background: linear-gradient(135deg,#fff 50%,#f5f5f5 50%); }
.swatch-black-mode     { background: linear-gradient(135deg,#1b1d1f 50%,#2c2e2f 50%); }
.swatch-grey-mode      { background: linear-gradient(135deg,#f9f9f9 50%,#f0f2f4 50%); }
.swatch-glass-mode     { background: linear-gradient(135deg,#1a1c2e,#2d1b4e,#1a237e); }
.swatch-minimal-mode   { background: #fafafa; border: 1px solid #ddd; }
.swatch-y2k-mode       { background: linear-gradient(135deg,#ff1493,#00ced1); }
.swatch-fluid-mode     { background: linear-gradient(135deg,#e0f7fa,#e1bee7); }
.swatch-neumorph-mode  { background: #e0e5ec; box-shadow: 3px 3px 6px #b8bcc2, -3px -3px 6px #fff; }
.swatch-cyberpunk-mode { background: linear-gradient(135deg,#0a0a0f,#12121f); border: 1px solid #00ffff; }
.swatch-brutalist-mode { background: #fff; border: 3px solid #000; }

/* 暗色模式下主题面板适配 */
.io-black-mode .theme-panel,
body.io-glass-mode .theme-panel,
body.io-cyberpunk-mode .theme-panel {
    background: #2c2e2f;
}
.io-black-mode .theme-panel-title,
body.io-glass-mode .theme-panel-title,
body.io-cyberpunk-mode .theme-panel-title {
    color: #ddd;
    border-bottom-color: rgba(255,255,255,.1);
}
.io-black-mode .theme-swatch,
body.io-glass-mode .theme-swatch,
body.io-cyberpunk-mode .theme-swatch {
    color: #bbb;
}
.io-black-mode .theme-swatch:hover,
body.io-glass-mode .theme-swatch:hover,
body.io-cyberpunk-mode .theme-swatch:hover {
    background: rgba(255,255,255,.08);
}
.io-black-mode .theme-swatch.active,
body.io-glass-mode .theme-swatch.active,
body.io-cyberpunk-mode .theme-swatch.active {
    background: rgba(255,255,255,.12);
    color: #fff;
}

/* 主题面板移动端适配 */
@media (max-width: 768px) {
    .theme-panel {
        width: calc(100vw - 32px);
        max-width: 320px;
        bottom: 72px;
        right: 16px;
        max-height: 360px;
    }
}