/* ===== 外观设置页面 ===== */
.appearance-section {
  margin-bottom: 16px;
}
.appearance-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 10px;
  padding-left: 4px;
}
.appearance-collapse-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: 8px 4px;
  border-radius: 8px;
  transition: background 0.15s;
}
.appearance-collapse-header:active {
  background: var(--glass);
}
.appearance-collapse-arrow {
  flex-shrink: 0;
  transition: transform 0.25s ease;
  transform: rotate(-90deg);
}
.appearance-collapse-arrow.expanded {
  transform: rotate(0deg);
}

/* ===== 壁纸设置 ===== */
.wallpaper-section {
  display: flex;
  gap: 16px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 16px var(--glass-shadow);
}
.wp-phone-frame {
  width: 120px;
  height: 220px;
  border-radius: 20px;
  border: 2.5px solid var(--widget-border);
  background: var(--bg);
  background-image: none;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 20px var(--glass-shadow), inset 0 0 0 1px var(--glass-border);
}
.wp-phone-notch {
  width: 40px;
  height: 5px;
  border-radius: 3px;
  background: var(--widget-border);
  margin: 6px auto 0;
  position: relative;
  z-index: 2;
}
.wp-phone-bar {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--widget-border);
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.6;
}
.wp-phone-screen {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wp-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wp-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text3);
  font-size: 10px;
}
.wp-placeholder svg { opacity: 0.4; }
.wp-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  min-width: 0;
}

/* ===== 全局主题 ===== */
.theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.theme-option {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 2px solid var(--glass-border);
  border-radius: 14px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  box-shadow: 0 4px 16px var(--glass-shadow);
}
.theme-option:active { transform: scale(0.97); }
.theme-option.selected { border-color: var(--text); }
.theme-preview {
  height: 60px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
  position: relative;
}
.theme-preview-default {
  background: #ffffff;
  background-image: none;
}
.theme-preview-pink {
  background: #faf5f6;
  background-image: none;
}
.theme-preview-white {
  background: #fff;
  background-image: none;
}
.theme-preview-blue {
  background: #eef3f9;
  background-image: none;
}
.tp-header {
  height: 18px;
  margin: 8px 8px 0;
  border-radius: 6px;
}
.theme-preview-default .tp-header {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(220,220,220,0.7);
}
.theme-preview-pink .tp-header {
  background: rgba(248,238,242,0.8);
  border: 1px solid rgba(225,200,212,0.7);
}
.theme-preview-white .tp-header {
  background: #fff;
  border: 2px solid #050505;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #050505;
}
.theme-preview-blue .tp-header {
  background: linear-gradient(145deg, rgba(215,230,250,0.45), rgba(195,218,245,0.28));
  border: none;
  box-shadow: 0 2px 6px rgba(60,100,160,0.08), inset 0 1px 0 rgba(255,255,255,0.4);
}
.tp-body {
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tp-bubble {
  height: 10px;
  border-radius: 5px;
}
.theme-preview-default .tp-bubble {
  background: rgba(245,245,245,0.8);
  border: 1px solid rgba(220,220,220,0.5);
}
.theme-preview-pink .tp-bubble {
  background: rgba(250,230,238,0.8);
  border: 1px solid rgba(225,200,212,0.5);
}
.theme-preview-white .tp-bubble {
  background: #fff;
  border: 2px solid #050505;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #050505;
}
.theme-preview-blue .tp-bubble {
  background: linear-gradient(145deg, rgba(215,232,252,0.4), rgba(200,222,248,0.25));
  border: none;
  box-shadow: 0 2px 5px rgba(60,100,160,0.06), inset 0 1px 0 rgba(255,255,255,0.35);
}
/* Line theme preview */
.theme-preview-line {
  background: #fafafa;
}
.theme-preview-line .tp-header {
  background: #fafafa;
  border: 1px solid #ddd;
}
.theme-preview-line .tp-bubble {
  background: #fafafa;
  border: 1px solid #ddd;
}
.theme-preview-line .tp-dock {
  background: #f5f5f5;
  border: 1px solid #ddd;
}
/* Retro theme preview (千禧年 Y2K Win98/2000) */
.theme-preview-retro {
  background: #008080;
}
.theme-preview-retro .tp-header {
  background: linear-gradient(90deg, #000080, #1084d0);
  border: none;
  border-radius: 2px;
  box-shadow: none;
}
.theme-preview-retro .tp-bubble {
  background: #c0c0c0;
  border: 1px solid #808080;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.theme-preview-retro .tp-dock {
  background: #c0c0c0;
  border: 1px solid #808080;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #dfdfdf;
}
.tp-bubble.short { width: 60%; }
.tp-dock {
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  height: 14px;
  border-radius: 7px;
}
.theme-preview-default .tp-dock {
  background: rgba(240,240,240,0.6);
  border: 1px solid rgba(220,220,220,0.4);
}
.theme-preview-pink .tp-dock {
  background: rgba(248,232,238,0.6);
  border: 1px solid rgba(225,200,212,0.4);
}
.theme-preview-white .tp-dock {
  background: #fff;
  border: 2px solid #050505;
  border-radius: 4px;
  box-shadow: 3px 3px 0 #050505;
}
.theme-preview-blue .tp-dock {
  background: linear-gradient(145deg, rgba(212,230,252,0.38), rgba(198,220,248,0.22));
  border: none;
  box-shadow: 0 3px 8px rgba(60,100,160,0.08), inset 0 1px 0 rgba(255,255,255,0.35);
}
.theme-option-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  display: block;
  text-align: center;
}
.theme-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
}
.theme-option.selected .theme-check { display: flex; }

/* ===== 桌面应用图标 ===== */
.app-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 16px var(--glass-shadow);
}
.app-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s;
}
.app-icon-item:active { transform: scale(0.9); }
.app-icon-preview {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--glass-strong);
  border: 1.5px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
}
.app-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.app-icon-preview svg {
  width: 22px;
  height: 22px;
}
.app-icon-name {
  font-size: 10px;
  color: var(--text2);
  text-align: center;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== 自定义CSS占位按钮 ===== */
.css-btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.css-placeholder-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px 12px;
  border-radius: 18px;
  border: 1.5px dashed var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px var(--glass-shadow);
}
.css-placeholder-btn:active { transform: scale(0.96); }
.css-placeholder-btn svg { opacity: 0.5; }

/* ===== 粉白毛玻璃主题：覆盖硬编码组件颜色 ===== */
body.theme-pink .polaroid { background: #f7eaed; }
body.theme-pink .polaroid-photo { background: linear-gradient(135deg, #e2cdd3, #d4b8c0); }
body.theme-pink .polaroid-tape { background: rgba(200,170,180,0.55); }
body.theme-pink .receipt-paper { background: #f8eff1; border-color: #e0d0d5; }
body.theme-pink .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, #f8eff1 4px, #f8eff1 8px);
}
body.theme-pink .notification { background: rgba(70,45,55,0.82); }
body.theme-pink .edit-mode-done-btn { background: rgba(70,45,55,0.78); }
body.theme-pink .receipt-printer-overlay { background: rgba(250,230,238,0.3); }

body.theme-pink.dark-mode .polaroid { background: #302028; }
body.theme-pink.dark-mode .polaroid-photo { background: linear-gradient(135deg, #4a3540, #3a2832); }
body.theme-pink.dark-mode .receipt-paper { background: #2a2024; border-color: #4a3540; }
body.theme-pink.dark-mode .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, #2a2024 4px, #2a2024 8px);
}
body.theme-pink.dark-mode .edit-mode-done-btn { background: rgba(255,220,235,0.18); }
body.theme-pink.dark-mode .receipt-printer-overlay { background: rgba(30,15,22,0.3); }

/* ===== 粗线条漫画主题槽位（最终覆盖见 comic-theme.css） ===== */
body.theme-white .glass-app-icon {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 6px 28px rgba(0,0,0,0.07),
    0 2px 6px rgba(0,0,0,0.04),
    inset 0 1.5px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.03);
}
body.theme-white .datetime-widget {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: none;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.06),
    0 2px 8px rgba(0,0,0,0.03),
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .datetime-widget::before,
body.theme-white .datetime-widget::after { display: none; }
body.theme-white .text-bubble {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.05),
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .battery-widget {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: none;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.06),
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .dock {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow:
    0 -4px 32px rgba(0,0,0,0.05),
    inset 0 1.5px 0 rgba(255,255,255,0.45),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .printer-body {
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-color: rgba(255,255,255,0.35);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.05),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
body.theme-white .polaroid {
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow:
    0 6px 24px rgba(0,0,0,0.06),
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .polaroid-photo { background: linear-gradient(135deg, rgba(232,232,232,0.5), rgba(213,213,213,0.5)); }
body.theme-white .polaroid-tape { background: rgba(190,185,175,0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
body.theme-white .receipt-paper {
  background: rgba(255,255,255,0.24);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.4);
}
body.theme-white .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(255,255,255,0.24) 4px, rgba(255,255,255,0.24) 8px);
}
body.theme-white .notification { background: rgba(30,30,30,0.6); backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3); }
body.theme-white .edit-mode-done-btn { background: rgba(30,30,30,0.55); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
body.theme-white .receipt-printer-overlay { background: rgba(255,255,255,0.12); }
body.theme-white .receipt-printer-widget {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: none;
  box-shadow:
    0 6px 24px rgba(0,0,0,0.05),
    inset 0 1.5px 0 rgba(255,255,255,0.5),
    inset 0 -1px 2px rgba(0,0,0,0.02);
}
body.theme-white .p2-record-widget {
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
}
body.theme-white .p2-record-sleeve {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.45);
}
body.theme-white .photo-bubble {
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 6px 24px rgba(0,0,0,0.05), inset 0 1.5px 0 rgba(255,255,255,0.5);
}
body.theme-white .p2-bottom-bubble .text-bubble {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
}
body.theme-white .upload-panel {
  background: rgba(245,245,245,0.92);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}

body.theme-white.dark-mode .glass-app-icon {
  background: rgba(50,50,50,0.35);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(80,80,80,0.45);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
body.theme-white.dark-mode .datetime-widget {
  background: rgba(50,50,50,0.38);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-color: rgba(80,80,80,0.45);
}
body.theme-white.dark-mode .dock {
  background: rgba(38,38,38,0.3);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-color: rgba(80,80,80,0.35);
}
body.theme-white.dark-mode .polaroid {
  background: rgba(44,44,44,0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.theme-white.dark-mode .polaroid-photo { background: linear-gradient(135deg, #444, #363636); }
body.theme-white.dark-mode .receipt-paper {
  background: rgba(42,42,42,0.5);
  border-color: rgba(80,80,80,0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.theme-white.dark-mode .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(42,42,42,0.5) 4px, rgba(42,42,42,0.5) 8px);
}
body.theme-white.dark-mode .edit-mode-done-btn { background: rgba(255,255,255,0.15); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.theme-white.dark-mode .receipt-printer-overlay { background: rgba(0,0,0,0.25); }
body.theme-white.dark-mode .upload-panel {
  background: rgba(42,42,42,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(80,80,80,0.4);
}

/* ===== 蓝色毛玻璃主题（水滴立体感 + 圆润通透） ===== */

/* -- 通用圆润立体水滴效果 -- */
body.theme-blue .glass-app-icon {
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(225,240,255,0.38), rgba(195,218,248,0.2));
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: none;
  box-shadow:
    0 8px 24px rgba(60,100,160,0.12),
    0 2px 4px rgba(60,100,160,0.05),
    inset 0 2px 3px rgba(255,255,255,0.65),
    inset 0 -2px 4px rgba(60,100,160,0.06);
}
body.theme-blue .battery-widget {
  border-radius: 28px; border: none;
  background: linear-gradient(160deg, rgba(225,240,255,0.35), rgba(195,218,248,0.18));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 6px 18px rgba(60,100,160,0.10),
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -1px 3px rgba(60,100,160,0.05);
}
body.theme-blue .settings-group {
  border-radius: 26px; border: none;
  background: linear-gradient(160deg, rgba(225,240,255,0.38), rgba(200,222,248,0.22));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    0 8px 24px rgba(60,100,160,0.10),
    inset 0 2px 3px rgba(255,255,255,0.6),
    inset 0 -1px 2px rgba(60,100,160,0.05);
}
body.theme-blue .settings-item { border-color: rgba(180,210,240,0.18); }
body.theme-blue .settings-item-icon {
  border-radius: 16px; border: none;
  background: linear-gradient(160deg, rgba(215,235,255,0.48), rgba(190,215,245,0.25));
  box-shadow: 0 3px 8px rgba(60,100,160,0.08), inset 0 1.5px 2px rgba(255,255,255,0.55);
}
body.theme-blue .settings-back {
  border: none; border-radius: 16px;
  background: linear-gradient(160deg, rgba(225,240,255,0.48), rgba(200,222,248,0.28));
  box-shadow: 0 4px 12px rgba(60,100,160,0.10), inset 0 1.5px 2px rgba(255,255,255,0.55);
}

/* -- 时间日期组件（无边框，水滴立体） -- */
body.theme-blue .datetime-widget {
  border: none; border-radius: 26px;
  background: linear-gradient(160deg, rgba(225,240,255,0.35), rgba(195,218,248,0.18));
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 10px 28px rgba(60,100,160,0.12),
    0 2px 6px rgba(60,100,160,0.04),
    inset 0 2px 4px rgba(255,255,255,0.65),
    inset 0 -2px 6px rgba(60,100,160,0.06);
}
body.theme-blue .datetime-widget::before,
body.theme-blue .datetime-widget::after { display: none; }

/* -- 桌面小组件 -- */
body.theme-blue .polaroid {
  background: linear-gradient(160deg, rgba(230,242,255,0.35), rgba(200,220,248,0.18));
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border: none; border-radius: 24px;
  box-shadow:
    0 10px 28px rgba(60,100,160,0.12),
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(60,100,160,0.05);
}
body.theme-blue .polaroid-photo { background: linear-gradient(135deg, #c4d6ea, #aec4dc); border-radius: 16px; }
body.theme-blue .polaroid-tape { background: rgba(160,190,220,0.25); border-radius: 4px; }
body.theme-blue .text-bubble {
  border: none; border-radius: 28px;
  background: linear-gradient(160deg, rgba(225,240,255,0.3), rgba(200,222,248,0.15));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 8px 22px rgba(60,100,160,0.10),
    inset 0 2px 3px rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(60,100,160,0.05);
}
body.theme-blue .receipt-paper {
  background: rgba(240,248,255,0.55); border-color: transparent;
  border-radius: 0 0 12px 12px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body.theme-blue .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(240,248,255,0.55) 4px, rgba(240,248,255,0.55) 8px);
}
body.theme-blue .receipt-printer-widget {
  border: none; border-radius: 28px;
  background: linear-gradient(160deg, rgba(225,240,255,0.35), rgba(200,222,248,0.18));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 10px 28px rgba(60,100,160,0.12),
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -2px 4px rgba(60,100,160,0.05);
}
body.theme-blue .receipt-printer-widget::before,
body.theme-blue .receipt-printer-widget::after { display: none; }
body.theme-blue .receipt-printer-overlay { background: rgba(225,240,252,0.12); border-radius: 28px; }
body.theme-blue .p2-record-widget {
  border-radius: 26px;
}
body.theme-blue .p2-record-sleeve {
  border: none; border-radius: 22px;
  background: linear-gradient(160deg, rgba(225,240,255,0.3), rgba(200,222,248,0.15));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow:
    0 6px 16px rgba(60,100,160,0.08),
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -1px 3px rgba(60,100,160,0.04);
}
body.theme-blue .p2-record-label {
  background: linear-gradient(160deg, #c8daf0, #d6e4f4);
  border-radius: 50%;
}
body.theme-blue .photo-bubble {
  border: none; border-radius: 30px;
  background: linear-gradient(160deg, rgba(225,240,255,0.3), rgba(200,222,248,0.15));
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow:
    0 10px 28px rgba(60,100,160,0.10),
    inset 0 2px 4px rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(60,100,160,0.05);
}
body.theme-blue .notification {
  background: rgba(26,36,50,0.78);
  border-radius: 22px;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
body.theme-blue .edit-mode-done-btn {
  background: rgba(26,36,50,0.75);
  border-radius: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
body.theme-blue .dock {
  border: none; border-radius: 34px;
  background: linear-gradient(160deg, rgba(220,238,255,0.28), rgba(200,222,248,0.14));
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  box-shadow:
    0 10px 32px rgba(60,100,160,0.10),
    inset 0 2px 4px rgba(255,255,255,0.55),
    inset 0 -2px 4px rgba(60,100,160,0.05);
}
body.theme-blue .dock .glass-app-icon {
  border-radius: 20px;
}
body.theme-blue .printer-body {
  background: linear-gradient(160deg, rgba(220,238,255,0.45), rgba(200,222,248,0.25));
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: none; border-radius: 14px 14px 6px 6px;
  box-shadow: 0 6px 18px rgba(60,100,160,0.10), inset 0 2px 3px rgba(255,255,255,0.55);
}
body.theme-blue .custom-widget-wrapper {
  border: none; border-radius: 24px;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}

/* -- 深色模式 -- */
body.theme-blue.dark-mode .glass-app-icon {
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(42,58,80,0.52), rgba(30,42,58,0.35));
  border: none;
  box-shadow:
    0 8px 20px rgba(0,0,0,0.25),
    inset 0 2px 3px rgba(80,110,150,0.18),
    inset 0 -2px 4px rgba(0,0,0,0.12);
}
body.theme-blue.dark-mode .datetime-widget {
  border: none;
  background: linear-gradient(160deg, rgba(38,52,72,0.52), rgba(26,36,50,0.38));
  box-shadow:
    0 10px 28px rgba(0,0,0,0.28),
    inset 0 2px 4px rgba(80,110,150,0.15),
    inset 0 -2px 6px rgba(0,0,0,0.12);
}
body.theme-blue.dark-mode .datetime-widget::before,
body.theme-blue.dark-mode .datetime-widget::after { display: none; }
body.theme-blue.dark-mode .polaroid {
  background: linear-gradient(160deg, rgba(38,52,70,0.52), rgba(28,38,52,0.38));
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28), inset 0 2px 3px rgba(80,110,150,0.14);
}
body.theme-blue.dark-mode .polaroid-photo { background: linear-gradient(135deg, #38485a, #2c3a4c); }
body.theme-blue.dark-mode .text-bubble {
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(38,52,70,0.45), rgba(28,38,52,0.28));
  box-shadow: 0 8px 22px rgba(0,0,0,0.25), inset 0 2px 3px rgba(80,110,150,0.12);
}
body.theme-blue.dark-mode .receipt-paper { background: rgba(28,36,48,0.65); border-color: transparent; }
body.theme-blue.dark-mode .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, rgba(28,36,48,0.65) 4px, rgba(28,36,48,0.65) 8px);
}
body.theme-blue.dark-mode .receipt-printer-widget {
  border-radius: 28px;
  background: linear-gradient(160deg, rgba(38,52,70,0.52), rgba(28,38,52,0.38));
  box-shadow: 0 10px 28px rgba(0,0,0,0.28), inset 0 2px 3px rgba(80,110,150,0.12);
}
body.theme-blue.dark-mode .receipt-printer-overlay { background: rgba(12,18,28,0.18); }
body.theme-blue.dark-mode .edit-mode-done-btn { background: rgba(180,210,245,0.15); border-radius: 20px; }
body.theme-blue.dark-mode .dock {
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(32,45,62,0.45), rgba(22,32,45,0.3));
  box-shadow: 0 10px 32px rgba(0,0,0,0.28), inset 0 2px 3px rgba(80,110,150,0.1);
}
body.theme-blue.dark-mode .settings-group {
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(38,52,70,0.45), rgba(28,38,52,0.28));
  box-shadow: 0 8px 24px rgba(0,0,0,0.25), inset 0 2px 3px rgba(80,110,150,0.1);
}
body.theme-blue.dark-mode .photo-bubble {
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(38,52,70,0.45), rgba(28,38,52,0.28));
  box-shadow: 0 10px 28px rgba(0,0,0,0.25), inset 0 2px 3px rgba(80,110,150,0.1);
}
body.theme-blue.dark-mode .p2-record-sleeve {
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(38,52,70,0.38), rgba(28,38,52,0.22));
  box-shadow: 0 6px 16px rgba(0,0,0,0.2), inset 0 2px 2px rgba(80,110,150,0.1);
}

/* -- 弹窗和按钮 -- */
body.theme-blue .upload-panel {
  border: none; border-radius: 30px;
  background: linear-gradient(160deg, rgba(230,242,255,0.92), rgba(218,232,250,0.88));
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  box-shadow:
    0 14px 44px rgba(60,100,160,0.16),
    inset 0 2px 4px rgba(255,255,255,0.6),
    inset 0 -1px 3px rgba(60,100,160,0.05);
}
body.theme-blue .upload-btn-row button { border-radius: 18px; }
body.theme-blue .btn-primary { border-radius: 18px; }
body.theme-blue .btn-secondary {
  border: none !important; border-radius: 18px;
  background: linear-gradient(160deg, rgba(220,238,255,0.42), rgba(200,222,248,0.24));
  box-shadow: 0 4px 12px rgba(60,100,160,0.08), inset 0 1.5px 2px rgba(255,255,255,0.45);
}
body.theme-blue .upload-url-input {
  border: none; border-radius: 18px;
  background: rgba(215,235,255,0.3);
  box-shadow: inset 0 1px 4px rgba(60,100,160,0.06);
}
body.theme-blue.dark-mode .upload-panel {
  border-radius: 30px;
  background: linear-gradient(160deg, rgba(40,55,75,0.92), rgba(30,42,58,0.88));
  box-shadow: 0 14px 44px rgba(0,0,0,0.32), inset 0 2px 3px rgba(80,110,150,0.12);
}
body.theme-blue.dark-mode .btn-secondary {
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(42,58,80,0.42), rgba(30,42,58,0.25));
  box-shadow: 0 4px 12px rgba(0,0,0,0.18), inset 0 1px 2px rgba(80,110,150,0.1);
}
body.theme-blue.dark-mode .printer-body {
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(160deg, rgba(40,55,72,0.52), rgba(28,38,52,0.38));
  box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 2px 2px rgba(80,110,150,0.1);
}

/* -- 蓝色主题：页面内容区域增强 -- */
body.theme-blue .appearance-section,
body.theme-blue .reset-section .reset-btn {
  border-radius: 22px;
}
body.theme-blue .wcss-selector-bar { border-radius: 22px; border: none; }
body.theme-blue .wcss-preview-box { border-radius: 22px; border: none; }
body.theme-blue .wcss-editor-wrap { border-radius: 18px; border: none; }
body.theme-blue .wcss-preview-iframe-wrap { border-radius: 18px; border: none; }
body.theme-blue .wallpaper-section { border-radius: 24px; border: none; }
body.theme-blue .theme-option { border-radius: 22px; border: none;
  box-shadow: 0 6px 18px rgba(60,100,160,0.08), inset 0 1.5px 2px rgba(255,255,255,0.45); }
body.theme-blue .theme-option.selected {
  box-shadow: 0 6px 18px rgba(60,100,160,0.14), inset 0 1.5px 2px rgba(255,255,255,0.45), 0 0 0 2px var(--text);
}
body.theme-blue .app-icon-grid { border-radius: 24px; border: none; }

/* ===== 极简线条主题（实色，纯细线条，无阴影无模糊） ===== */
body.theme-line .glass-app-icon {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border);
  box-shadow: none;
}
body.theme-line .datetime-widget {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; box-shadow: none;
}
body.theme-line .datetime-widget::before,
body.theme-line .datetime-widget::after { display: none; }
body.theme-line .battery-widget {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .theme-toggle {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .text-bubble {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .dock {
  background: var(--dock-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
  border-radius: 22px;
}
body.theme-line .polaroid {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .polaroid-photo { background: #f0f0f0; }
body.theme-line .polaroid-tape { background: rgba(0,0,0,0.05); }
body.theme-line .receipt-paper {
  background: var(--bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
body.theme-line .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, var(--bg) 4px, var(--bg) 8px);
}
body.theme-line .printer-body {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .receipt-printer-widget {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; box-shadow: none;
}
body.theme-line .receipt-printer-widget::before,
body.theme-line .receipt-printer-widget::after { display: none; }
body.theme-line .receipt-printer-overlay { background: transparent; }
body.theme-line .p2-record-widget { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.theme-line .p2-record-sleeve {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .p2-record-label { background: var(--dock-bg); }
body.theme-line .photo-bubble {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .photo-frame-inner {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .photo-frame-slot { background: var(--dock-bg); }
body.theme-line .social-bar { background: var(--dock-bg); }
body.theme-line .p2-bottom-bubble .text-bubble {
  background: var(--bg); border: 1px solid var(--glass-border);
}
body.theme-line .notification {
  background: #1a1a1a; color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-line .edit-mode-done-btn {
  background: #1a1a1a;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-line .custom-widget-wrapper {
  border: 1px solid var(--glass-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.theme-line .settings-group {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .settings-back {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .settings-item-icon {
  background: var(--bg); border: 1px solid var(--glass-border);
}
body.theme-line .upload-panel {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
body.theme-line .wallpaper-section {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .theme-option {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .theme-option.selected { border-color: var(--text); }
body.theme-line .app-icon-grid {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .reset-btn {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .css-placeholder-btn {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px dashed var(--glass-border); box-shadow: none;
}
body.theme-line .p2-record-sleeve {
  background: var(--bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid var(--glass-border); box-shadow: none;
}
body.theme-line .gallery-slide { background: var(--dock-bg); }

body.theme-line.dark-mode .polaroid-photo { background: #222; }
body.theme-line.dark-mode .polaroid-tape { background: rgba(255,255,255,0.05); }
body.theme-line.dark-mode .notification { background: #e0e0e0; color: #111; }
body.theme-line.dark-mode .edit-mode-done-btn { background: rgba(255,255,255,0.12); }

/* ===== 千禧年古早电脑风主题（Y2K Win98/2000 经典桌面风格） ===== */
body.theme-retro .glass-app-icon {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.7),
    inset -2px -2px 0 rgba(0,0,0,0.25),
    2px 2px 0 rgba(0,0,0,0.12);
}
body.theme-retro .datetime-widget {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none;
  border-radius: 16px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    2px 2px 0 rgba(0,0,0,0.1);
}
body.theme-retro .datetime-widget::before {
  display: none;
}
body.theme-retro .datetime-widget::after { display: none; }
body.theme-retro .avatar-wrap {
  background: var(--glass-strong);
  border: 2px solid var(--widget-border);
  border-radius: 4px;
}
body.theme-retro .time-display { letter-spacing: 0; }
body.theme-retro .battery-widget {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--widget-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    1px 1px 0 rgba(0,0,0,0.08);
}
body.theme-retro .theme-toggle {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--widget-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.15);
}
body.theme-retro .text-bubble {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    2px 2px 0 rgba(0,0,0,0.08);
}
body.theme-retro .dock {
  background: var(--dock-bg);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    0 -1px 4px rgba(0,0,0,0.08);
}
body.theme-retro .dock .glass-app-icon { border-radius: 4px; }
body.theme-retro .polaroid {
  background: var(--glass-strong);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 3px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    2px 2px 0 rgba(0,0,0,0.1);
}
body.theme-retro .polaroid-photo {
  background: #a0b0b0;
  border-radius: 2px;
}
body.theme-retro .polaroid-tape { background: rgba(180,180,160,0.5); }
body.theme-retro .receipt-paper {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4);
}
body.theme-retro .receipt-tear {
  background: repeating-linear-gradient(90deg, transparent 0px, transparent 4px, var(--glass-strong) 4px, var(--glass-strong) 8px);
}
body.theme-retro .printer-body {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-color: var(--widget-border);
  border-radius: 4px 4px 2px 2px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    2px 2px 0 rgba(0,0,0,0.08);
}
body.theme-retro .receipt-printer-widget {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--widget-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    2px 2px 0 rgba(0,0,0,0.1);
}
body.theme-retro .receipt-printer-widget::before {
  background: linear-gradient(90deg, #000080, #1084d0);
  height: 18px; top: 0; border-radius: 2px 2px 0 0;
  opacity: 1;
}
body.theme-retro .receipt-printer-widget::after { display: none; }
body.theme-retro .receipt-printer-overlay { background: rgba(192,192,192,0.1); }
body.theme-retro .p2-record-widget { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.theme-retro .p2-record-sleeve {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.12),
    1px 1px 0 rgba(0,0,0,0.06);
}
body.theme-retro .p2-record-label {
  background: var(--glass-strong);
  border: 2px solid var(--glass-border);
  border-radius: 50%;
}
body.theme-retro .photo-bubble {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.12),
    2px 2px 0 rgba(0,0,0,0.08);
}
body.theme-retro .photo-frame-inner {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    2px 2px 0 rgba(0,0,0,0.08);
}
body.theme-retro .photo-frame-slot {
  background: var(--glass-strong);
  border-radius: 3px;
}
body.theme-retro .social-bar {
  background: var(--glass-strong);
  border-radius: 4px;
  border: 2px solid var(--glass-border);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -2px 0 rgba(0,0,0,0.1);
}
body.theme-retro .gallery-slide {
  background: var(--glass-strong);
  border-radius: 3px;
}
body.theme-retro .p2-bottom-bubble .text-bubble {
  background: var(--glass);
  border: 2px solid var(--glass-border);
}
body.theme-retro .p2-record-sleeve {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.4),
    inset -2px -2px 0 rgba(0,0,0,0.1),
    1px 1px 0 rgba(0,0,0,0.06);
}
body.theme-retro .notification {
  background: #000080;
  color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 4px;
}
body.theme-retro .edit-mode-done-btn {
  background: #000080;
  color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.2), inset -2px -2px 0 rgba(0,0,0,0.3);
}
body.theme-retro .custom-widget-wrapper {
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -2px 0 rgba(0,0,0,0.12), 2px 2px 0 rgba(0,0,0,0.08);
}
body.theme-retro .settings-page {
  background-image: none;
  background: var(--glass);
}
body.theme-retro .settings-group {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.12),
    2px 2px 0 rgba(0,0,0,0.06);
}
body.theme-retro .settings-back {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.15);
}
body.theme-retro .settings-item-icon {
  background: var(--glass-strong);
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.4);
}
body.theme-retro .upload-panel {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--widget-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.15),
    3px 3px 0 rgba(0,0,0,0.12);
}
body.theme-retro .upload-panel h3 {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  margin: -28px -24px 16px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 700;
}
body.theme-retro .upload-url-input {
  border: 2px solid var(--glass-border);
  border-radius: 3px;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.12), inset -1px -1px 0 rgba(255,255,255,0.5);
}
body.theme-retro .wallpaper-section {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 0 rgba(0,0,0,0.12), 2px 2px 0 rgba(0,0,0,0.06);
}
body.theme-retro .theme-option {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -2px 0 rgba(0,0,0,0.1), 1px 1px 0 rgba(0,0,0,0.06);
}
body.theme-retro .theme-option.selected {
  border-color: #000080;
  box-shadow: inset 0 0 0 2px #000080;
}
body.theme-retro .app-icon-grid {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 0 rgba(0,0,0,0.12), 2px 2px 0 rgba(0,0,0,0.06);
}
body.theme-retro .reset-btn {
  background: var(--glass);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px solid var(--glass-border);
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.6),
    inset -2px -2px 0 rgba(0,0,0,0.12),
    1px 1px 0 rgba(0,0,0,0.06);
}
body.theme-retro .reset-btn:active {
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.2), inset -1px -1px 0 rgba(255,255,255,0.3);
}
body.theme-retro .css-placeholder-btn {
  background: var(--glass-strong);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 2px dashed var(--glass-border);
  border-radius: 4px;
  box-shadow: none;
}
body.theme-retro .btn-primary {
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.2),
    inset -2px -2px 0 rgba(0,0,0,0.2),
    1px 1px 0 rgba(0,0,0,0.12);
}
body.theme-retro .btn-primary:active {
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.3);
}
body.theme-retro .btn-secondary {
  border-radius: 4px;
  box-shadow:
    inset 2px 2px 0 rgba(255,255,255,0.5),
    inset -2px -2px 0 rgba(0,0,0,0.1),
    1px 1px 0 rgba(0,0,0,0.08);
}
body.theme-retro .btn-secondary:active {
  box-shadow: inset 2px 2px 3px rgba(0,0,0,0.15);
}
body.theme-retro .page-dot { border-radius: 2px; }
body.theme-retro .page-dot.active { border-radius: 2px; }
body.theme-retro .float-ball {
  border-radius: 4px;
  border: 2px solid var(--widget-border);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.5), inset -2px -2px 0 rgba(0,0,0,0.15), 2px 2px 0 rgba(0,0,0,0.1);
}
body.theme-retro .float-ball-panel {
  border-radius: 4px;
  border: 2px solid var(--widget-border);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.4), inset -2px -2px 0 rgba(0,0,0,0.12), 3px 3px 0 rgba(0,0,0,0.1);
}
body.theme-retro .settings-toggle {
  border-radius: 4px;
}
body.theme-retro .settings-toggle::after {
  border-radius: 3px;
}

body.theme-retro.dark-mode .polaroid-photo { background: #1a2a3a; }
body.theme-retro.dark-mode .receipt-printer-overlay { background: rgba(12,12,48,0.15); }
body.theme-retro.dark-mode .notification { background: #3344aa; color: #fff; }
body.theme-retro.dark-mode .edit-mode-done-btn { background: rgba(50,60,170,0.25); }
body.theme-retro.dark-mode .datetime-widget::before {
  background: linear-gradient(90deg, #1a1a60, #2a50a0);
}
body.theme-retro.dark-mode .receipt-printer-widget::before {
  background: linear-gradient(90deg, #1a1a60, #2a50a0);
}
body.theme-retro.dark-mode .upload-panel h3 {
  background: linear-gradient(90deg, #1a1a60, #2a50a0);
}

/* Mobile: kill backdrop-filter on small/repeated elements to cap GPU layers at ~3.
   Only dock, datetime-widget, receipt-printer-widget keep a reduced blur. */
@media (pointer: coarse), (max-width: 900px) {
  body.theme-white .glass-app-icon,
  body.theme-white .text-bubble,
  body.theme-white .battery-widget,
  body.theme-white .polaroid,
  body.theme-white .polaroid-tape,
  body.theme-white .printer-body,
  body.theme-white .p2-record-sleeve,
  body.theme-white .photo-bubble,
  body.theme-white .receipt-paper,
  body.theme-white .p2-record-widget,
  body.theme-white .upload-panel,
  body.theme-white .notification,
  body.theme-white .edit-mode-done-btn,
  body.theme-white .p2-bottom-bubble .text-bubble,
  body.theme-blue .glass-app-icon,
  body.theme-blue .text-bubble,
  body.theme-blue .battery-widget,
  body.theme-blue .polaroid,
  body.theme-blue .printer-body,
  body.theme-blue .p2-record-sleeve,
  body.theme-blue .photo-bubble,
  body.theme-blue .receipt-paper,
  body.theme-blue .custom-widget-wrapper,
  body.theme-blue .settings-group,
  body.theme-blue .upload-panel,
  body.theme-blue .notification,
  body.theme-blue .edit-mode-done-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.theme-white .glass-app-icon  { background: rgba(255,255,255,0.78); }
  body.theme-white .text-bubble     { background: rgba(255,255,255,0.72); }
  body.theme-white .battery-widget  { background: rgba(255,255,255,0.78); }
  body.theme-white .polaroid        { background: rgba(255,255,255,0.78); }
  body.theme-white .p2-record-sleeve { background: rgba(255,255,255,0.72); }
  body.theme-white .photo-bubble    { background: rgba(255,255,255,0.72); }
  body.theme-white .upload-panel    { background: rgba(248,248,248,0.96); }

  body.theme-white.dark-mode .glass-app-icon { background: rgba(50,50,50,0.82); }
  body.theme-white.dark-mode .text-bubble    { background: rgba(50,50,50,0.75); }
  body.theme-white.dark-mode .battery-widget { background: rgba(50,50,50,0.82); }
  body.theme-white.dark-mode .polaroid       { background: rgba(44,44,44,0.82); }
  body.theme-white.dark-mode .p2-record-sleeve { background: rgba(48,48,48,0.75); }
  body.theme-white.dark-mode .photo-bubble   { background: rgba(48,48,48,0.75); }
  body.theme-white.dark-mode .upload-panel   { background: rgba(42,42,42,0.96); }

  body.theme-blue .glass-app-icon   { background: rgba(215,232,250,0.72); }
  body.theme-blue .text-bubble      { background: rgba(218,235,252,0.68); }
  body.theme-blue .battery-widget   { background: rgba(215,232,250,0.72); }
  body.theme-blue .polaroid         { background: rgba(220,238,255,0.72); }
  body.theme-blue .p2-record-sleeve { background: rgba(218,235,252,0.68); }
  body.theme-blue .photo-bubble     { background: rgba(218,235,252,0.68); }
  body.theme-blue .settings-group   { background: rgba(218,235,252,0.68); }
  body.theme-blue .upload-panel     { background: rgba(232,244,255,0.96); }

  body.theme-blue.dark-mode .glass-app-icon  { background: rgba(42,58,80,0.78); }
  body.theme-blue.dark-mode .text-bubble     { background: rgba(38,52,70,0.72); }
  body.theme-blue.dark-mode .battery-widget  { background: rgba(42,58,80,0.78); }
  body.theme-blue.dark-mode .polaroid        { background: rgba(38,52,70,0.78); }
  body.theme-blue.dark-mode .p2-record-sleeve { background: rgba(38,52,70,0.72); }
  body.theme-blue.dark-mode .photo-bubble    { background: rgba(38,52,70,0.72); }
  body.theme-blue.dark-mode .settings-group  { background: rgba(38,52,70,0.72); }
  body.theme-blue.dark-mode .upload-panel    { background: rgba(40,55,75,0.96); }

  body.theme-white .datetime-widget,
  body.theme-white .dock,
  body.theme-white .receipt-printer-widget,
  body.theme-white.dark-mode .datetime-widget,
  body.theme-white.dark-mode .dock,
  body.theme-blue .datetime-widget,
  body.theme-blue .dock,
  body.theme-blue .receipt-printer-widget,
  body.theme-blue.dark-mode .datetime-widget,
  body.theme-blue.dark-mode .dock {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  /* Default theme (no theme class) */
  .datetime-widget,
  .text-bubble,
  .printer-body,
  .polaroid,
  .polaroid-tape,
  .upload-panel,
  .upload-modal,
  .photo-frame-inner,
  .p2-record-sleeve,
  .photo-bubble,
  .receipt-printer-widget,
  .p2-record-widget,
  .appearance-section,
  .theme-option,
  .app-icon-grid,
  .wallpaper-reset-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .datetime-widget,
  .dock {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.theme-white .glass-app-icon,
  body.theme-white .dock,
  body.theme-white .datetime-widget,
  body.theme-white .text-bubble,
  body.theme-white .battery-widget,
  body.theme-white .polaroid,
  body.theme-white .receipt-printer-widget,
  body.theme-white .photo-bubble,
  body.theme-white .p2-record-sleeve,
  body.theme-white .upload-panel,
  body.theme-blue .glass-app-icon,
  body.theme-blue .dock,
  body.theme-blue .datetime-widget,
  body.theme-blue .text-bubble,
  body.theme-blue .battery-widget,
  body.theme-blue .polaroid,
  body.theme-blue .receipt-printer-widget,
  body.theme-blue .photo-bubble,
  body.theme-blue .p2-record-sleeve,
  body.theme-blue .upload-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body.theme-white .glass-app-icon,
  body.theme-white .dock,
  body.theme-white .datetime-widget,
  body.theme-white .text-bubble,
  body.theme-white .battery-widget,
  body.theme-white .polaroid,
  body.theme-white .receipt-printer-widget,
  body.theme-white .photo-bubble,
  body.theme-white .p2-record-sleeve,
  body.theme-white .upload-panel {
    background: rgba(247,247,247,0.92);
  }

  body.theme-blue .glass-app-icon,
  body.theme-blue .dock,
  body.theme-blue .datetime-widget,
  body.theme-blue .text-bubble,
  body.theme-blue .battery-widget,
  body.theme-blue .polaroid,
  body.theme-blue .receipt-printer-widget,
  body.theme-blue .photo-bubble,
  body.theme-blue .p2-record-sleeve,
  body.theme-blue .upload-panel {
    background: rgba(229,238,248,0.92);
  }
}

/* ===== 重置按钮 ===== */
.reset-section {
  margin-bottom: 16px;
}
.reset-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px var(--glass-shadow);
}
.reset-btn:active { transform: scale(0.97); }
.reset-btn svg { flex-shrink: 0; }

/* ===== 小组件CSS编辑页面 ===== */
.wcss-selector-bar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 16px;
  padding: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}
.wcss-selector-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 2px;
}
.wcss-selector-scroll::-webkit-scrollbar { display: none; }
.wcss-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.wcss-tab:active { transform: scale(0.95); }
.wcss-tab.active {
  background: var(--text);
  color: var(--bg);
}
.wcss-preview-box {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 18px;
  padding: 16px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--glass-shadow);
  overflow: hidden;
}
.wcss-preview-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wcss-editor-wrap {
  border: 1.5px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.wcss-editor {
  width: 100%;
  min-height: 200px;
  padding: 14px;
  border: none;
  background: transparent;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  resize: vertical;
  outline: none;
  tab-size: 2;
}
.wcss-editor::placeholder { color: var(--text3); }
.wcss-editor-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.wcss-editor-actions .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 12px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.15s;
}
.wcss-editor-actions .btn-primary:active { transform: scale(0.95); }
.wcss-load-tpl-btn {
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  margin-left: 8px;
  transition: all 0.15s;
}
.wcss-load-tpl-btn:active { transform: scale(0.93); }
.wcss-custom-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wcss-custom-preview-box {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 14px;
  padding: 16px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px var(--glass-shadow);
}
.wcss-io-actions {
  display: flex;
  gap: 10px;
}
.wcss-io-actions .reset-btn {
  margin-bottom: 0;
}
.wcss-custom-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wcss-custom-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.wcss-custom-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.wcss-custom-item-actions {
  display: flex;
  gap: 6px;
}
.wcss-custom-item-btn {
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.wcss-custom-item-btn:active { transform: scale(0.92); }
.wcss-custom-item-btn.danger { color: #e55; border-color: rgba(220,80,80,0.3); }

/* ===== 小组件隐藏 & 删除按钮 ===== */
.widget-hidden {
  display: none !important;
}
.widget-delete-btn {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(220,60,60,0.9);
  color: #fff;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.widget-delete-btn:active { transform: scale(0.85); }

/* ===== 小组件CSS页面分段编辑器 ===== */
.wcss-code-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1.5px solid var(--glass-border);
  margin-bottom: 0;
}
.wcss-code-tab {
  flex: 1;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}
.wcss-code-tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
}
.wcss-code-tab:active { opacity: 0.7; }

.wcss-preview-iframe-wrap {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--glass-shadow);
}
.wcss-preview-iframe {
  width: 100%;
  height: 200px;
  display: block;
  border: none;
  border-radius: 14px;
  background: #f5f5f5;
}

.wcss-add-to-desktop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1.5px dashed var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 10px var(--glass-shadow);
}
.wcss-add-to-desktop-btn:active { transform: scale(0.97); }

/* ===== 占位范围选择器 ===== */
.wcss-size-selector {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.wcss-size-label {
  font-size: 12px; font-weight: 600; color: var(--text2);
  white-space: nowrap;
}
.wcss-size-custom-inputs {
  display: flex; align-items: center; gap: 8px; flex: 1;
}
.wcss-size-select {
  flex: 1; padding: 8px 6px; border-radius: 12px;
  border: 1.5px solid var(--glass-border); background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 13px; font-weight: 600; font-family: inherit;
  color: var(--text); cursor: pointer; transition: all 0.15s;
  text-align: center; outline: none;
  -webkit-appearance: none; appearance: none;
}
.wcss-size-select:focus { border-color: var(--text); }
.wcss-size-x {
  font-size: 13px; font-weight: 700; color: var(--text3);
}
.wcss-size-display {
  padding: 8px 14px; border-radius: 12px;
  background: var(--text); color: var(--bg);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
}

/* ===== 全局自定义CSS页面 ===== */
.gcss-theme-lib {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gcss-theme-empty {
  text-align: center;
  color: var(--text3);
  font-size: 12px;
  padding: 20px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 14px;
}
.gcss-theme-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 2px 8px var(--glass-shadow);
}
.gcss-theme-item.active {
  border-color: var(--text);
  box-shadow: 0 4px 14px var(--glass-shadow);
}
.gcss-theme-item-info {
  flex: 1;
  min-width: 0;
}
.gcss-theme-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gcss-theme-item-date {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}
.gcss-theme-item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 10px;
  max-width: 156px;
}
.gcss-theme-item-btn {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  color: var(--text2);
  cursor: pointer;
  transition: all 0.15s;
}
.gcss-theme-item-btn:active { transform: scale(0.92); }
.gcss-theme-item-btn.apply { background: var(--text); color: var(--bg); border-color: transparent; }
.gcss-theme-item-btn.danger { color: #e55; border-color: rgba(220,80,80,0.3); }

/* ===== 聊天界面自定义设置页面 ===== */
.ccst-preview-frame {
  width: 100%;
  height: 380px;
  border-radius: 18px;
  border: 1.5px solid var(--glass-border);
  background: #ededed;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px var(--glass-shadow);
  position: relative;
}
.ccst-preview-nav {
  display: flex;
  align-items: center;
  padding: 10px 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  gap: 6px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}
.ccst-pn-back-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--text);
}
.ccst-pn-title-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.ccst-pn-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ccst-pn-subtitle {
  font-size: 9px;
  font-weight: 400;
  color: #07c160;
}
.ccst-pn-actions { display: flex; gap: 6px; align-items: center; }
.ccst-pn-heart {
  display: flex; align-items: center; cursor: pointer;
  color: var(--text); padding: 2px;
}
.ccst-pn-heart img { width: 14px; height: 14px; object-fit: contain; }
.ccst-pn-btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text);
}
.ccst-pn-btn img { width: 12px; height: 12px; object-fit: contain; }
.ccst-preview-body {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #ededed;
}
.ccst-preview-time {
  text-align: center;
  font-size: 10px;
  color: #999;
  padding: 2px 0;
}
.ccst-preview-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ccst-preview-msg-row.ccst-msg-right {
  flex-direction: row-reverse;
}
.ccst-preview-avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(200,200,200,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  color: #999;
}
.ccst-preview-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ccst-preview-bubble {
  max-width: 65%;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.4;
  position: relative;
}
.ccst-bubble-left {
  background: #fff;
  color: #333;
  border-radius: 0 8px 8px 8px;
}
.ccst-bubble-right {
  background: #95ec69;
  color: #333;
  border-radius: 8px 0 8px 8px;
}
.ccst-preview-input-panel {
  flex-shrink: 0;
  background-size: cover;
  background-position: center bottom;
}
.ccst-preview-input {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  gap: 6px;
  background: #f5f5f5;
  border-top: 1px solid rgba(0,0,0,0.06);
  flex-shrink: 0;
}
.ccst-pi-field {
  flex: 1;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  color: #999;
}
.ccst-pi-icon {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #666;
}
.ccst-pi-icon img { width: 14px; height: 14px; object-fit: contain; }
.ccst-preview-plus-panel {
  padding: 10px 12px;
  background: #f5f5f5;
  flex-shrink: 0;
}
.ccst-pp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ccst-pp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  color: #666;
}
.ccst-pp-icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccst-item-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1.5px solid var(--glass-border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 10px var(--glass-shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ccst-sub-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  padding-left: 2px;
}
.ccst-color-picker {
  width: 100%;
  height: 40px;
  border: 1.5px solid var(--glass-border);
  border-radius: 10px;
  cursor: pointer;
  background: none;
  padding: 2px;
}
.ccst-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.ccst-color-picker::-webkit-color-swatch { border: none; border-radius: 8px; }

.ccst-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ccst-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.15s;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}
.ccst-icon-card:active { transform: scale(0.92); }
.ccst-icon-card span {
  font-size: 10px;
  color: var(--text2);
  font-weight: 600;
}
.ccst-icon-preview {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text);
}
.ccst-icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

/* ===== 线上聊天气泡美化 & 线下剧情美化 ===== */
.obf-preset-row {
  display: flex; gap: 8px;
}
.obf-preset-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text2); cursor: pointer;
  transition: all 0.15s;
}
.obf-preset-btn:active { transform: scale(0.95); }
.obf-toggle-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.obf-style-btn {
  flex: 1; min-width: 60px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass);
  font-size: 12px; font-weight: 600; font-family: inherit;
  color: var(--text3); cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.obf-style-btn.selected {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.obf-style-btn:active { transform: scale(0.95); }
.obf-switch-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 0;
}
.obf-switch-row span {
  font-size: 12px; color: var(--text2); font-weight: 500;
}
.obf-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--glass-border);
  outline: none;
}
.obf-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--text);
  border: 2px solid var(--bg);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.obf-frame-preview {
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
}
.obf-frame-preview-inner {
  position: relative; width: 60px; height: 60px;
}
.obf-frame-preview-inner img {
  position: absolute; top: -6px; left: -6px;
  width: 72px; height: 72px;
  object-fit: contain; pointer-events: none;
}
.obf-frame-avatar-sample {
  width: 60px; height: 60px;
  border-radius: 6px;
  background: rgba(200,200,200,0.3);
  display: flex; align-items: center; justify-content: center;
}
.obf-template-lib {
  display: flex; flex-direction: column; gap: 6px;
}
.obf-tpl-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
}
.obf-tpl-item-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.obf-tpl-item-actions {
  display: flex; gap: 4px; flex-shrink: 0; margin-left: 8px;
}
.obf-tpl-item-btn {
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: 10px; font-weight: 600; font-family: inherit;
  color: var(--text2); cursor: pointer;
  transition: all 0.15s;
}
.obf-tpl-item-btn:active { transform: scale(0.92); }
.obf-tpl-item-btn.apply { background: var(--text); color: var(--bg); border-color: transparent; }
.obf-tpl-item-btn.danger { color: #e55; border-color: rgba(220,80,80,0.3); }

/* 线下剧情预览 */
.obf-offline-preview {
  border-radius: 14px;
  border: 1.5px solid var(--glass-border);
  background: #f0f0f0;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 120px;
}
.obf-off-prev-msg {
  display: flex; align-items: flex-start; gap: 8px;
}
.obf-off-prev-msg.obf-off-prev-self {
  flex-direction: row-reverse;
}
.obf-off-prev-avatar {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(200,200,200,0.4);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.obf-off-prev-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.obf-off-prev-bubble {
  max-width: 70%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px; line-height: 1.5;
}
.obf-off-prev-char-bubble {
  background: #fff; color: #333;
  border-radius: 0 12px 12px 12px;
}
.obf-off-prev-user-bubble {
  background: #95ec69; color: #000;
  border-radius: 12px 0 12px 12px;
}

/* 特殊消息预览 */
.spc-prev-item {
  display: flex; flex-direction: column; gap: 4px;
}
.spc-prev-label {
  font-size: 10px; font-weight: 600; color: var(--text3);
  padding-left: 2px;
}
.spc-prev-card {
  border-radius: 12px;
}

/* 会话范围选择器 */
.ccst-scope-selector {
  display: flex; flex-direction: column; gap: 6px;
}
.ccst-scope-select {
  width: 100%;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--glass-border);
  background: var(--glass);
  color: var(--text1);
  font-size: 13.5px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.ccst-scope-hint {
  font-size: 11px; color: var(--text3); padding: 0 2px;
}

/* 光谱颜色选择器 */
.ccst-spectrum-wrap {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: 12px;
  overflow: hidden;
  cursor: crosshair;
  border: 1px solid var(--glass-border);
}
.ccst-spectrum-canvas {
  width: 100%; height: 100%;
  display: block;
}
.ccst-spectrum-cursor {
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 3px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%);
  pointer-events: none;
  top: 10px; left: 280px;
}
.ccst-spectrum-hue-row {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.ccst-hue-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  border-radius: 5px;
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  outline: none;
}
.ccst-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--glass-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  cursor: pointer;
}
.ccst-color-swatch {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 8px;
  border: 1.5px solid var(--glass-border);
}