/* ============================================================
   萌鸢阁 多主题扩展（theme.css）
   用法：<html data-theme="pink|sky|mint">，默认主题不写属性
   与暗色模式（body.dark-mode）解耦，可自由组合 4×2 = 8 种外观
   依赖：main.css / dark-mode.css（本文件必须最后加载）
   ============================================================ */

/* ==================== 主题切换按钮 & 面板 UI ==================== */
.theme-toggle {
  position: fixed;
  top: 15px;
  right: 66px;
  z-index: 999;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s;
}
.theme-toggle:hover { transform: scale(1.05) rotate(20deg); }
body.dark-mode .theme-toggle { background: #252d3a; }

.theme-panel {
  position: fixed;
  top: 64px;
  right: 15px;
  z-index: 998;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  padding: 12px 14px;
  display: none;
  min-width: 208px;
}
.theme-panel.show { display: block; }
body.dark-mode .theme-panel { background: #1e2633; }
.theme-panel-title {
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
  text-align: center;
}
body.dark-mode .theme-panel-title { color: #aab3c0; }
.theme-options {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.theme-option {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: center;
}
.theme-option em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: #666;
  margin-top: 4px;
}
body.dark-mode .theme-option em { color: #b8c0cc; }
.theme-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.theme-option:hover .theme-swatch { transform: scale(1.1); }
.theme-option.active .theme-swatch {
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}
body.dark-mode .theme-option.active .theme-swatch {
  border-color: #fff;
  box-shadow: 0 0 0 2px #1e2633, 0 0 0 4px #fff;
}
.sw-default { background: linear-gradient(135deg, #06f, #60a5fa); }
.sw-pink { background: linear-gradient(135deg, #ec4899, #f9a8d4); }
.sw-sky { background: linear-gradient(135deg, #0ea5e9, #7dd3fc); }
.sw-mint { background: linear-gradient(135deg, #10b981, #6ee7b7); }

/* ============================================================
   主题 1：樱粉 pink
   ============================================================ */
html[data-theme="pink"] body { background-color: #fdf2f7; color: #6b4457; }
html[data-theme="pink"] body.dark-mode { background-color: #1c1219; color: #f0dbe6; }
html[data-theme="pink"] .app { background-color: #ffffff; }
html[data-theme="pink"] body.dark-mode .app { background-color: #261b25; }
html[data-theme="pink"] .app-item-title { color: #6b4457; }
html[data-theme="pink"] body.dark-mode .app-item-title { color: #f0dbe6; }
html[data-theme="pink"] .bd1 { background: #ffffff; }
html[data-theme="pink"] body.dark-mode .bd1,
html[data-theme="pink"] body.dark-mode .bd1.fixed { background: #261b25; }
html[data-theme="pink"] #t28 { background: #ffffff; color: #6b4457; }
html[data-theme="pink"] body.dark-mode #t28 { background: #322332; color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode #t28::placeholder { color: #b08fa4; }
html[data-theme="pink"] #dl { background: #ec4899; color: #fff; }
html[data-theme="pink"] body.dark-mode #dl { background: #f472b6; }
html[data-theme="pink"] .search-engine { color: #6b4457; }
html[data-theme="pink"] body.dark-mode .search-engine { color: #f0dbe6; }
html[data-theme="pink"] .search-engine:hover:not(.active) { background-color: #fde3ee; }
html[data-theme="pink"] body.dark-mode .search-engine:hover:not(.active) { background-color: rgba(244,114,182,0.16); }
html[data-theme="pink"] .sidebar-pc { background: rgba(255,255,255,0.94); }
html[data-theme="pink"] body.dark-mode .sidebar-pc { background: #261b25; }
html[data-theme="pink"] .sidebar-pc-link { color: #6b4457; }
html[data-theme="pink"] body.dark-mode .sidebar-pc-link { color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode .sidebar-pc-link:hover { background: rgba(244,114,182,0.16); }
html[data-theme="pink"] .sidebar-mobile { background: #fff; }
html[data-theme="pink"] body.dark-mode .sidebar-mobile { background: #261b25; }
html[data-theme="pink"] body.dark-mode .sidebar-mobile-link { color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode .sidebar-mobile-header { background: #ec4899; }
html[data-theme="pink"] .quick-nav { background: rgba(255,255,255,0.7); }
html[data-theme="pink"] body.dark-mode .quick-nav { background: rgba(38,27,37,0.85); }
html[data-theme="pink"] body.dark-mode .quick-nav-item { background: #46334a; }
html[data-theme="pink"] #footer { color: #6b4457; }
html[data-theme="pink"] body.dark-mode #footer { color: #d3abc2; }
html[data-theme="pink"] body.dark-mode #footer a { color: #f9a8d4; }
html[data-theme="pink"] .sub-tab { color: #6b4457; }
html[data-theme="pink"] body.dark-mode .sub-tab { color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode .sub-tab:hover { background: rgba(244,114,182,0.16); }
html[data-theme="pink"] .submit-modal { background: #fff; color: #6b4457; }
html[data-theme="pink"] body.dark-mode .submit-modal { background: #261b25; color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode .submit-modal .form-group input,
html[data-theme="pink"] body.dark-mode .submit-modal .form-group select,
html[data-theme="pink"] body.dark-mode .submit-modal .form-group textarea { background: #322332; color: #f0dbe6; }
html[data-theme="pink"] .backup-modal { background: #fff; color: #6b4457; }
html[data-theme="pink"] body.dark-mode .backup-modal { background: #261b25; color: #f0dbe6; }
html[data-theme="pink"] body.dark-mode .backup-list a { background: #322332; color: #f9a8d4; }
html[data-theme="pink"] body.dark-mode .backup-list a:hover { background: #46334a; }
html[data-theme="pink"] body.dark-mode .dark-toggle { background: #322332; }
html[data-theme="pink"] body.dark-mode::-webkit-scrollbar-track { background: #1c1219; }
html[data-theme="pink"] body.dark-mode::-webkit-scrollbar-thumb { background: #46334a; }
html[data-theme="pink"] body.dark-mode::-webkit-scrollbar-thumb:hover { background: #5a4260; }

/* ============================================================
   主题 2：青空 sky
   ============================================================ */
html[data-theme="sky"] body { background-color: #eef6fd; color: #35576b; }
html[data-theme="sky"] body.dark-mode { background-color: #0e1924; color: #d9e9f5; }
html[data-theme="sky"] .app { background-color: #ffffff; }
html[data-theme="sky"] body.dark-mode .app { background-color: #17222f; }
html[data-theme="sky"] .app-item-title { color: #35576b; }
html[data-theme="sky"] body.dark-mode .app-item-title { color: #d9e9f5; }
html[data-theme="sky"] .bd1 { background: #ffffff; }
html[data-theme="sky"] body.dark-mode .bd1,
html[data-theme="sky"] body.dark-mode .bd1.fixed { background: #17222f; }
html[data-theme="sky"] #t28 { background: #ffffff; color: #35576b; }
html[data-theme="sky"] body.dark-mode #t28 { background: #22303f; color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode #t28::placeholder { color: #7f9ab0; }
html[data-theme="sky"] #dl { background: #0ea5e9; color: #fff; }
html[data-theme="sky"] body.dark-mode #dl { background: #38bdf8; }
html[data-theme="sky"] .search-engine { color: #35576b; }
html[data-theme="sky"] body.dark-mode .search-engine { color: #d9e9f5; }
html[data-theme="sky"] .search-engine:hover:not(.active) { background-color: #dceefb; }
html[data-theme="sky"] body.dark-mode .search-engine:hover:not(.active) { background-color: rgba(56,189,248,0.16); }
html[data-theme="sky"] .sidebar-pc { background: rgba(255,255,255,0.94); }
html[data-theme="sky"] body.dark-mode .sidebar-pc { background: #17222f; }
html[data-theme="sky"] .sidebar-pc-link { color: #35576b; }
html[data-theme="sky"] body.dark-mode .sidebar-pc-link { color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode .sidebar-pc-link:hover { background: rgba(56,189,248,0.16); }
html[data-theme="sky"] .sidebar-mobile { background: #fff; }
html[data-theme="sky"] body.dark-mode .sidebar-mobile { background: #17222f; }
html[data-theme="sky"] body.dark-mode .sidebar-mobile-link { color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode .sidebar-mobile-header { background: #0ea5e9; }
html[data-theme="sky"] .quick-nav { background: rgba(255,255,255,0.7); }
html[data-theme="sky"] body.dark-mode .quick-nav { background: rgba(23,34,47,0.85); }
html[data-theme="sky"] body.dark-mode .quick-nav-item { background: #2d4258; }
html[data-theme="sky"] #footer { color: #35576b; }
html[data-theme="sky"] body.dark-mode #footer { color: #a9c3d8; }
html[data-theme="sky"] body.dark-mode #footer a { color: #7dd3fc; }
html[data-theme="sky"] .sub-tab { color: #35576b; }
html[data-theme="sky"] body.dark-mode .sub-tab { color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode .sub-tab:hover { background: rgba(56,189,248,0.16); }
html[data-theme="sky"] .submit-modal { background: #fff; color: #35576b; }
html[data-theme="sky"] body.dark-mode .submit-modal { background: #17222f; color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode .submit-modal .form-group input,
html[data-theme="sky"] body.dark-mode .submit-modal .form-group select,
html[data-theme="sky"] body.dark-mode .submit-modal .form-group textarea { background: #22303f; color: #d9e9f5; }
html[data-theme="sky"] .backup-modal { background: #fff; color: #35576b; }
html[data-theme="sky"] body.dark-mode .backup-modal { background: #17222f; color: #d9e9f5; }
html[data-theme="sky"] body.dark-mode .backup-list a { background: #22303f; color: #7dd3fc; }
html[data-theme="sky"] body.dark-mode .backup-list a:hover { background: #2d4258; }
html[data-theme="sky"] body.dark-mode .dark-toggle { background: #22303f; }
html[data-theme="sky"] body.dark-mode::-webkit-scrollbar-track { background: #0e1924; }
html[data-theme="sky"] body.dark-mode::-webkit-scrollbar-thumb { background: #2d4258; }
html[data-theme="sky"] body.dark-mode::-webkit-scrollbar-thumb:hover { background: #3a556f; }

/* ============================================================
   主题 3：薄荷 mint
   ============================================================ */
html[data-theme="mint"] body { background-color: #eefaf4; color: #2f5b49; }
html[data-theme="mint"] body.dark-mode { background-color: #0d1a15; color: #d3e9dd; }
html[data-theme="mint"] .app { background-color: #ffffff; }
html[data-theme="mint"] body.dark-mode .app { background-color: #15241e; }
html[data-theme="mint"] .app-item-title { color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .app-item-title { color: #d3e9dd; }
html[data-theme="mint"] .bd1 { background: #ffffff; }
html[data-theme="mint"] body.dark-mode .bd1,
html[data-theme="mint"] body.dark-mode .bd1.fixed { background: #15241e; }
html[data-theme="mint"] #t28 { background: #ffffff; color: #2f5b49; }
html[data-theme="mint"] body.dark-mode #t28 { background: #1f332a; color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode #t28::placeholder { color: #7fa394; }
html[data-theme="mint"] #dl { background: #10b981; color: #fff; }
html[data-theme="mint"] body.dark-mode #dl { background: #34d399; }
html[data-theme="mint"] .search-engine { color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .search-engine { color: #d3e9dd; }
html[data-theme="mint"] .search-engine:hover:not(.active) { background-color: #dcf5ea; }
html[data-theme="mint"] body.dark-mode .search-engine:hover:not(.active) { background-color: rgba(52,211,153,0.16); }
html[data-theme="mint"] .sidebar-pc { background: rgba(255,255,255,0.94); }
html[data-theme="mint"] body.dark-mode .sidebar-pc { background: #15241e; }
html[data-theme="mint"] .sidebar-pc-link { color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .sidebar-pc-link { color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode .sidebar-pc-link:hover { background: rgba(52,211,153,0.16); }
html[data-theme="mint"] .sidebar-mobile { background: #fff; }
html[data-theme="mint"] body.dark-mode .sidebar-mobile { background: #15241e; }
html[data-theme="mint"] body.dark-mode .sidebar-mobile-link { color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode .sidebar-mobile-header { background: #10b981; }
html[data-theme="mint"] .quick-nav { background: rgba(255,255,255,0.7); }
html[data-theme="mint"] body.dark-mode .quick-nav { background: rgba(21,36,30,0.85); }
html[data-theme="mint"] body.dark-mode .quick-nav-item { background: #27463a; }
html[data-theme="mint"] #footer { color: #2f5b49; }
html[data-theme="mint"] body.dark-mode #footer { color: #a5c9b8; }
html[data-theme="mint"] body.dark-mode #footer a { color: #6ee7b7; }
html[data-theme="mint"] .sub-tab { color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .sub-tab { color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode .sub-tab:hover { background: rgba(52,211,153,0.16); }
html[data-theme="mint"] .submit-modal { background: #fff; color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .submit-modal { background: #15241e; color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode .submit-modal .form-group input,
html[data-theme="mint"] body.dark-mode .submit-modal .form-group select,
html[data-theme="mint"] body.dark-mode .submit-modal .form-group textarea { background: #1f332a; color: #d3e9dd; }
html[data-theme="mint"] .backup-modal { background: #fff; color: #2f5b49; }
html[data-theme="mint"] body.dark-mode .backup-modal { background: #15241e; color: #d3e9dd; }
html[data-theme="mint"] body.dark-mode .backup-list a { background: #1f332a; color: #6ee7b7; }
html[data-theme="mint"] body.dark-mode .backup-list a:hover { background: #27463a; }
html[data-theme="mint"] body.dark-mode .dark-toggle { background: #1f332a; }
html[data-theme="mint"] body.dark-mode::-webkit-scrollbar-track { background: #0d1a15; }
html[data-theme="mint"] body.dark-mode::-webkit-scrollbar-thumb { background: #27463a; }
html[data-theme="mint"] body.dark-mode::-webkit-scrollbar-thumb:hover { background: #315748; }