@import url("theme-clear.css");
@import url("mobile.css");
/* One Grow 全局样式 - 与原型 1:1 配色 */
:root {
  --mg-green: #4ade80;
  --mg-green-dark: #22c55e;
  --mg-green-login: #7ed321;
  --mg-bg: #f9fafb;
  --mg-pink: #fce7f3;
  --mg-pink-card: #fdf2f8;
  --mg-text: #111827;
  --mg-muted: #6b7280;
  --mg-border: #e5e7eb;
  --mg-dark-bg: #121212;
  --mg-dark-card: #1e1e1e;
  --mg-neon: #5eeb5e;
  
  /* 液态玻璃效果变量 */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-blur: blur(20px);
  --glass-border: rgba(255, 255, 255, 0.25);
  --glass-saturate: saturate(180%);
  --glass-radius: 24px;
}

* { box-sizing: border-box; }

.mg-brand-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.theme-dark .app-sidebar .mg-brand-logo,
.theme-glass.theme-dark .app-sidebar .mg-brand-logo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}

html {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: var(--mg-text);
  background: var(--mg-bg);
}

html.mg-custom-bg-active,
html.mg-custom-bg-active body {
  background: #0b1220 !important;
  scrollbar-gutter: stable;
}

/* 启动页背景涟漪 */
.splash-bg {
  background: radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f0fdf4 45%, #ecfdf5 100%);
  position: relative;
  overflow: hidden;
}
.splash-bg::before,
.splash-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(74, 222, 128, 0.12);
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.splash-bg::before { width: 420px; height: 420px; }
.splash-bg::after { width: 620px; height: 620px; border-color: rgba(74, 222, 128, 0.08); }

/* 侧边栏 */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 9999px;
  color: #374151;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.sidebar-link:hover { background: #f3f4f6; }
.sidebar-link.active {
  background: var(--mg-green);
  color: #fff;
}
.sidebar-link.active svg { stroke: #fff; }

/* 卡片 */
.mg-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
a.mg-card:hover,
button.mg-card:hover,
.mg-card.mg-interactive:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
button.mg-card {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 搜索框 */
.mg-search {
  background: #f3f4f6;
  border: none;
  border-radius: 9999px;
  color: #1f2937;
}
.mg-search::placeholder { color: #6b7280; }

/* 今日待办 - 添加任务输入 */
.mg-todo-add-field {
  border-radius: 9999px;
  background: #f3f4f6;
  padding: 0.5rem 1.25rem;
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.mg-todo-add-field:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.35);
}
.mg-todo-add-input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0.25rem 0;
}
.theme-dark .mg-todo-add-field {
  background: rgba(255, 255, 255, 0.08);
}
.theme-dark .mg-todo-add-field:focus-within {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.4);
}
.theme-dark .mg-todo-add-input {
  color: #f3f4f6;
}
.theme-dark .mg-todo-add-input::placeholder {
  color: #9ca3af;
}

.theme-dark .mg-todo-add-input,
.theme-glass.theme-dark .mg-todo-add-input,
html.mg-custom-bg-active.theme-glass .mg-todo-add-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 极简记账 — 网格对齐（记一笔 / 结余 / 本月账单与左侧模块对齐） */
.ac-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  column-gap: 2rem;
  row-gap: 1.25rem;
  align-items: stretch;
}
.ac-grid-stats {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
}
.ac-grid-stats .ac-stat-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.ac-grid-stats .ac-stat-card p {
  width: 100%;
}
.ac-grid-record {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
}
.ac-grid-mid-left {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;
  align-self: stretch;
}
.ac-grid-charts {
  flex-shrink: 0;
}
.ac-grid-trend {
  flex: 1 1 auto;
  min-height: 0;
}
.ac-grid-balance {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;
}
.ac-grid-balance > .mg-card {
  height: 100%;
}
.ac-grid-bills {
  grid-column: 1;
  grid-row: 3;
}
.ac-grid-month {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
}
.ac-record-hero {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 100%;
  height: 100%;
}
.ac-record-hero .ac-saving-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.85;
}
.ac-record-hero .ac-saving-tip {
  font-size: 0.875rem;
  line-height: 1.55;
  margin-top: 0.35rem;
}
.ac-record-hero #btn-add-record {
  margin-top: auto;
}

/* 记得日子工具栏右侧按钮组 */
.cd-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.cd-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

/* 记一笔 / 添加 / 视图切换 — 简约白底，圆角与 mg-card 一致 */
.mg-clear-action-btn,
.cd-view-btn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  color: #374151;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.cd-view-btn {
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
}
.ac-sidebar-col .mg-clear-action-btn {
  border-radius: 24px;
}
.mg-clear-action-btn:hover,
.cd-view-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.cd-view-btn.cd-view-btn-active {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #111827;
  font-weight: 600;
}
.theme-dark .mg-clear-action-btn,
.theme-dark .cd-view-btn {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #f3f4f6 !important;
  box-shadow: none !important;
}
.theme-dark .mg-clear-action-btn:hover,
.theme-dark .cd-view-btn:hover {
  background: #333333 !important;
  border-color: #4b5563 !important;
}
.theme-dark .cd-view-btn.cd-view-btn-active {
  background: #374151 !important;
  border-color: #4ade80 !important;
  color: #ecfdf5 !important;
}

.mg-todo-quick-actions.hidden {
  display: none;
}
.mg-todo-quick-btn {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.mg-todo-quick-btn:hover {
  transform: scale(1.06);
}
.mg-todo-quick-confirm {
  background: #4ade80;
  color: #fff;
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.35);
}
.mg-todo-quick-confirm:hover {
  background: #22c55e;
}
.mg-todo-quick-cancel {
  background: rgba(0, 0, 0, 0.06);
  color: #6b7280;
}
.mg-todo-quick-cancel:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #374151;
}
.theme-dark .mg-todo-quick-cancel {
  background: rgba(255, 255, 255, 0.12);
  color: #d1d5db;
}
.mg-todo-simple {
  border-left: 3px solid #4ade80;
}

/* 主按钮 */
.btn-primary {
  background: var(--mg-green);
  color: #fff;
  border-radius: 12px;
  font-weight: 600;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.2s ease;
}
.btn-primary:hover {
  background: var(--mg-green-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(74, 222, 128, 0.35);
}
.btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* 全局按钮 / 模块微动效 */
button,
.setting-card-action,
.sidebar-link,
.mg-nav-link {
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}
button:not(:disabled):active,
.setting-card-action:active {
  transform: scale(0.97);
}
#btn-back {
  transition: transform 0.18s ease, background 0.18s ease;
}
#btn-back:hover {
  transform: translateX(-2px);
}

/* 进度环 */
.progress-ring { transform: rotate(-90deg); }
.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
  transform-origin: 50% 50%;
}

/* 倒数日暗色主题 */
.theme-countdown {
  background: var(--mg-dark-bg);
  color: #fff;
}
.theme-countdown .mg-card-dark {
  background: var(--mg-dark-card);
  border: 1px solid #2a2a2a;
  border-radius: 24px;
}
.theme-countdown .sidebar-link { color: #d1d5db; }
.theme-countdown .sidebar-link:hover { background: #2a2a2a; }
.theme-countdown .sidebar-link.active {
  background: var(--mg-neon);
  color: #111;
}
.theme-countdown .mg-search {
  background: #2a2a2a;
  color: #fff;
}
.theme-countdown .mg-search::placeholder { color: #6b7280; }

/* 页面底色（亮/暗统一入口） */
.mg-page-body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  width: 100%;
  background: var(--mg-bg);
  color: var(--mg-text);
  overflow-x: hidden;
}

/* 全局暗色主题 */
html.theme-dark,
html.theme-dark body,
html.theme-dark .mg-page-body {
  --mg-bg: #121212;
  --mg-text: #f3f4f6;
  --mg-muted: #9ca3af;
  --mg-border: #2a2a2a;
  background-color: #121212 !important;
  color: #f3f4f6;
}

.theme-dark .mg-card {
  background: #1e1e1e !important;
  border: 1px solid #2a2a2a;
  box-shadow: none;
}
.theme-dark .mg-search {
  background: #2a2a2a !important;
  color: #fff;
}
.theme-dark .mg-search::placeholder { color: #6b7280; }
.theme-dark .sidebar-link { color: #d1d5db; }
.theme-dark .sidebar-link:hover { background: #2a2a2a; }
.theme-dark .sidebar-link.active {
  background: var(--mg-neon);
  color: #111;
}
.theme-dark .sidebar-link.active svg { stroke: #111; }

/* 主内容区 */
.theme-dark main,
.theme-dark .mg-content-wrap {
  color: #f3f4f6;
}
.theme-dark h1, .theme-dark h2, .theme-dark h3,
.theme-dark .font-bold, .theme-dark .font-semibold {
  color: #f3f4f6;
}
.theme-dark .text-gray-900 { color: #f3f4f6 !important; }
.theme-dark .text-gray-700 { color: #d1d5db !important; }
.theme-dark .text-gray-500 { color: #9ca3af !important; }
.theme-dark .text-gray-400 { color: #6b7280 !important; }
.theme-dark .text-gray-600 { color: #d1d5db !important; }
.theme-dark .text-gray-300 { color: #6b7280 !important; }
.theme-dark .border,
.theme-dark .border-t,
.theme-dark .border-b,
.theme-dark .border-gray-100,
.theme-dark .border-gray-200 { border-color: #2a2a2a !important; }
.theme-dark .border-gray-300 { border-color: #3a3a3a !important; }

/* 彩色浅底块 → 暗色适配 */
.theme-dark .bg-green-50 { background: #1a2e1a !important; }
.theme-dark .bg-pink-50 { background: #2a1a22 !important; }
.theme-dark .bg-yellow-50 { background: #2a2618 !important; }
.theme-dark .bg-blue-50 { background: #1a2433 !important; }
.theme-dark .bg-purple-50 { background: #2a1f33 !important; }
.theme-dark .bg-red-50 { background: #2a1a1a !important; }
.theme-dark .bg-gray-50 { background: #1a1a1a !important; }
.theme-dark .bg-gray-100 { background: #2a2a2a !important; }
.theme-dark .bg-red-100 { background: #3a2222 !important; }
.theme-dark .bg-green-100 { background: #1a2e1a !important; }
.theme-dark .bg-green-100.text-green-600,
.theme-dark .text-green-600 { color: #86efac !important; }
.theme-dark .text-green-500 { color: #4ade80 !important; }
.theme-dark .text-red-600 { color: #fca5a5 !important; }
.theme-dark .text-blue-600 { color: #93c5fd !important; }
.theme-dark .text-purple-600 { color: #c4b5fd !important; }
.theme-dark .text-yellow-600 { color: #fcd34d !important; }
.theme-dark .text-pink-600 { color: #f9a8d4 !important; }
.theme-dark .text-orange-500 { color: #fb923c !important; }
.theme-dark .text-blue-500 { color: #60a5fa !important; }
.theme-dark .bg-white { background: #1e1e1e !important; }
.theme-dark .hover\:bg-gray-100:hover { background: #2a2a2a !important; }

.theme-dark input:not(.mg-search):not(.mg-todo-add-input),
.theme-dark select,
.theme-dark textarea {
  background: #2a2a2a !important;
  color: #f3f4f6 !important;
  border-color: #3a3a3a;
}
.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
  border-color: #4ade80 !important;
  outline: none;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2) !important;
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder { color: #6b7280; }
.theme-dark footer {
  border-color: #2a2a2a !important;
  color: #6b7280 !important;
}
.theme-dark .progress-ring circle:first-child { stroke: #2a2a2a !important; }

/* 健康评分页面暗色模式优化 */
.theme-dark .mg-card p.text-gray-500,
.theme-dark .mg-card p.text-gray-600,
.theme-dark .mg-card p.text-gray-700 {
  color: #9ca3af !important;
}
.theme-dark .mg-card h4.font-semibold.text-gray-800 {
  color: #f3f4f6 !important;
}
.theme-dark ::-webkit-scrollbar-thumb { background: #4a4a4a; }
.theme-dark .shadow-inner { box-shadow: inset 0 2px 8px rgba(0,0,0,0.3) !important; }
.theme-dark .shadow,
.theme-dark .shadow-md { box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important; }

/* 健康页面进度条暗色模式 */
.theme-dark .bg-gray-100 { background: #2a2a2a !important; }
.theme-dark .bg-green-400 { background: #22c55e !important; }

/* 按钮hover效果暗色模式 */
.theme-dark .border-gray-200 { border-color: #3a3a3a !important; }
.theme-dark .hover\:bg-gray-50:hover { background: #2a2a2a !important; }

/* 减少整页刷新闪屏 */
body.mg-page-body {
  background-color: #f9fafb;
}
.theme-dark body.mg-page-body {
  background-color: #121212;
}

/* 页面切换模糊过渡 */
.mg-page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  background: rgba(249, 250, 251, 0);
  transition: opacity 0.22s ease-out, backdrop-filter 0.26s ease-out, background 0.22s ease-out;
  will-change: opacity, backdrop-filter;
}
.mg-page-transition.is-active {
  opacity: 1;
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  background: rgba(249, 250, 251, 0.5);
  pointer-events: all;
}
.theme-dark .mg-page-transition.is-active {
  background: rgba(18, 18, 18, 0.42);
}

/* 页面进入 / 离开动画（模糊仅用于全屏遮罩，避免 main 上 filter 引发布局错乱） */
.mg-page-enter {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
  will-change: opacity, transform;
}
.mg-page-enter.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
main.mg-page-leaving {
  opacity: 0.4;
  transform: translateY(-6px) scale(0.99);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  pointer-events: none;
}

/* 番茄钟计时器区域 — 防止切换后宽度塌陷导致竖排乱码 */
#timer-container {
  position: relative;
  display: inline-block;
  min-width: 220px;
  min-height: 220px;
  vertical-align: middle;
}
#timer-container > .absolute {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}
#timer-text,
#timer-hint {
  white-space: nowrap;
  max-width: 100%;
}

/* 模块切换模糊过渡 */
.mg-module-panel {
  transition: opacity 0.35s ease, filter 0.35s ease, transform 0.35s ease;
}
.mg-module-switching {
  opacity: 0.35;
  filter: blur(8px);
  transform: scale(0.98);
  pointer-events: none;
}
.mg-module-visible {
  animation: mg-module-in 0.4s ease forwards;
}
@keyframes mg-module-in {
  from { opacity: 0.5; filter: blur(6px); transform: scale(0.99); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* 主题切换按钮 */
.theme-toggle-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
}
.theme-toggle-btn.active {
  border-color: var(--mg-green);
  background: rgba(74, 222, 128, 0.15);
  color: var(--mg-green);
}
.theme-dark .theme-toggle-btn { background: #2a2a2a; color: #d1d5db; }
.theme-dark .theme-toggle-btn.active {
  border-color: var(--mg-neon);
  background: rgba(94, 235, 94, 0.12);
  color: var(--mg-neon);
}

/* 全局音乐播放器 */
.mg-music-bar {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
}

/* 全局鼠标跟随高亮光斑 */
.mouse-glow {
  position: fixed;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.25) 0%, rgba(180, 220, 255, 0.1) 40%, transparent 65%);
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease-out;
  will-change: left, top;
}

.theme-glass .mouse-glow {
  opacity: 1;
  background: radial-gradient(circle, rgba(200, 230, 255, 0.3) 0%, rgba(180, 220, 255, 0.12) 40%, transparent 65%);
}
.theme-dark .mg-music-bar {
  background: #2a2a2a;
  border-color: #3a3a3a;
}
.theme-glass .mg-music-bar {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.2);
}
.mg-music-play-btn {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: var(--mg-green);
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.mg-music-play-btn:hover { background: var(--mg-green-dark); }
.theme-glass .mg-music-play-btn {
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.3);
}
.mg-music-ctrl {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #374151;
  font-size: 10px;
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
}
.mg-music-ctrl:hover { color: var(--mg-green); background: rgba(74, 222, 128, 0.12); }
.theme-dark .mg-music-ctrl { color: #9ca3af; }
.theme-glass .mg-music-ctrl { color: rgba(255, 255, 255, 0.8); }
.theme-glass .mg-music-ctrl:hover { color: #4ade80; }
/* 简约/亮色主题：音乐播放器文字使用深色（避免 Tailwind dark: 跟随系统主题变浅） */
.mg-music-title {
  color: #111827;
  line-height: 28px;
  font-weight: 600;
}
html:not(.theme-dark):not(.theme-clear) .mg-music-title,
body:not(.theme-dark):not(.theme-clear) .mg-music-title {
  color: #000000 !important;
}
html:not(.theme-dark):not(.theme-clear) .mg-music-time,
body:not(.theme-dark):not(.theme-clear) .mg-music-time {
  color: #374151 !important;
}
.theme-dark .mg-music-title { color: #d1d5db !important; }
.theme-glass .mg-music-title { color: rgba(255, 255, 255, 0.95) !important; }
.theme-dark.theme-glass .mg-music-title { color: #f3f4f6 !important; }
html.theme-glass .mg-music-widget .mg-music-title,
html.theme-glass .mg-music-widget .mg-music-time,
html.theme-glass .mg-music-widget #mg-music-title,
html.theme-glass .mg-music-widget #mg-music-current,
html.theme-glass .mg-music-widget #mg-music-duration,
html.theme-clear .mg-music-widget .mg-music-title,
html.theme-clear .mg-music-widget .mg-music-time,
html.theme-clear .mg-music-widget #mg-music-title,
html.theme-clear .mg-music-widget #mg-music-current,
html.theme-clear .mg-music-widget #mg-music-duration {
  color: #ffffff !important;
}
html.theme-glass .mg-music-widget #mg-music-current,
html.theme-glass .mg-music-widget #mg-music-duration,
html.theme-clear .mg-music-widget #mg-music-current,
html.theme-clear .mg-music-widget #mg-music-duration {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* 登录/启动页：即使误加通透类也保持可读深色文字 */
html.theme-clear body.mg-auth-page .text-gray-900,
html.theme-clear body.mg-auth-page .text-gray-800,
html.theme-clear body.mg-auth-page .text-gray-700,
html.theme-clear body.mg-auth-page .text-gray-600,
html.theme-clear body.mg-auth-page .text-gray-500,
html.theme-clear body.mg-auth-page h1,
html.theme-clear body.mg-auth-page h2,
html.theme-clear body.mg-auth-page label,
html.theme-clear body.mg-auth-page input,
html.theme-clear body.mg-auth-page button,
html.theme-clear body.mg-auth-page a,
html.theme-clear body.mg-auth-page footer {
  color: revert !important;
}
html.theme-clear body.mg-auth-page .text-gray-900 { color: #111827 !important; }
html.theme-clear body.mg-auth-page .text-gray-800 { color: #1f2937 !important; }
html.theme-clear body.mg-auth-page .text-gray-700 { color: #374151 !important; }
html.theme-clear body.mg-auth-page .text-gray-600 { color: #4b5563 !important; }
html.theme-clear body.mg-auth-page .text-gray-500 { color: #6b7280 !important; }
html.theme-clear body.mg-auth-page input::placeholder { color: #9ca3af !important; }

/* 待办批量选择：圆形复选框（隐藏系统默认方框） */
.todo-select,
#select-all {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  min-height: 1.25rem;
  border-radius: 50% !important;
  border: 2px solid rgba(107, 114, 128, 0.55);
  background-color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
  cursor: pointer;
  flex-shrink: 0;
  vertical-align: middle;
}
.todo-select:checked,
#select-all:checked {
  background-color: #22c55e;
  border-color: #22c55e;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 5.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 通透主题背景裁切弹窗 */
.bg-crop-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: min(50vh, 420px);
  overflow: hidden;
  border-radius: 12px;
  background: #111827;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.bg-crop-viewport:active {
  cursor: grabbing;
}
.bg-crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.bg-crop-frame {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  border-radius: 8px;
}

#bg-crop-modal .mg-modal-panel-wrap {
  width: 100%;
  max-width: 42rem;
}
#bg-crop-modal .mg-modal-panel {
  max-width: 100%;
}

#task-color-picker .task-color-swatch:not([data-color="none"]) {
  background-color: var(--c);
}
.mg-music-info span { color: #374151; }
.mg-music-time { color: #374151; font-size: 11px; font-weight: 500; }
.theme-dark .mg-music-time { color: #d1d5db !important; }
.theme-glass .mg-music-time { color: rgba(255, 255, 255, 0.85) !important; }
.mg-music-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 280px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 50;
  padding: 12px;
}
.theme-dark .mg-music-dropdown {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-glass .mg-music-dropdown,
.theme-glass .mg-notifications-dropdown {
  background: rgba(28, 28, 38, 0.88);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.mg-music-dropdown-title {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #374151;
}
.theme-dark .mg-music-dropdown-title { color: #f3f4f6; }
.theme-glass .mg-music-dropdown-title { color: #f9fafb; }

/* 通知列表：默认简约主题 */
.mg-notifications-dropdown {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 200020;
}

/* 桌面端：通知列表对齐铃铛正下方（仅 ≥1024px，不影响移动端） */
@media (min-width: 1024px) {
  .mg-notifications-wrap .mg-notifications-dropdown {
    left: 0;
    right: auto;
    width: 20rem;
    max-width: 20rem;
  }
}
#header-container,
#header-container .service-island-container,
#header-container .service-island,
#header-container header,
#header-container .relative {
  overflow: visible !important;
}
.mg-notifications-dropdown-head {
  border-color: #e5e7eb;
}
.mg-notifications-dropdown-head h3 {
  color: #374151;
}
.mg-notification-item {
  border-color: #f3f4f6;
}
.mg-notification-title {
  color: #374151;
}
.mg-notification-message,
.mg-notification-time {
  color: #6b7280;
}
.mg-notification-item:hover {
  background: #f9fafb;
}
.mg-notification-unread {
  background: #f0fdf4;
}
.mg-notification-item .mark-as-read {
  color: #22c55e;
}
.mg-notification-item .mark-as-read:hover {
  color: #16a34a;
}
.theme-dark .mg-notifications-dropdown {
  background: #1e1e1e;
  border-color: #2a2a2a;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.theme-dark .mg-notifications-dropdown-head {
  border-color: #2a2a2a;
}
.theme-dark .mg-notifications-dropdown-head h3,
.theme-dark .mg-notification-title {
  color: #f3f4f6;
}
.theme-dark .mg-notification-message,
.theme-dark .mg-notification-time {
  color: #9ca3af;
}
.theme-dark .mg-notification-item {
  border-color: #2a2a2a;
}
.theme-dark .mg-notification-item:hover {
  background: #27272a;
}
.theme-dark .mg-notification-unread {
  background: rgba(34, 197, 94, 0.12);
}
.mg-music-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 200px;
  overflow-y: auto;
}
.mg-music-track {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}
.mg-music-track:hover { background: #f3f4f6; }
.mg-music-track.is-active {
  background: rgba(74, 222, 128, 0.15);
  color: #16a34a;
  font-weight: 600;
}
.theme-dark .mg-music-track { color: #d1d5db; }
.theme-dark .mg-music-track:hover { background: #2a2a2a; }
.theme-dark .mg-music-track.is-active { color: var(--mg-neon); }
.theme-glass .mg-music-track {
  color: #f3f4f6;
}
.theme-glass .mg-music-track:hover {
  background: rgba(255, 255, 255, 0.12);
}
.theme-glass .mg-music-track.is-active {
  background: rgba(74, 222, 128, 0.28);
  color: #bbf7d0;
  font-weight: 600;
}
.mg-music-empty, .mg-music-hint {
  font-size: 11px;
  color: #9ca3af;
  padding: 4px 0;
}
.theme-glass .mg-music-empty, .theme-glass .mg-music-hint {
  color: rgba(255, 255, 255, 0.72);
}
.mg-health-week-trend {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.mg-health-trend-day {
  flex: 1 1 0;
  max-width: none;
}
.mg-music-vol {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #6b7280;
  margin-top: 4px;
}
.mg-music-vol input { flex: 1; accent-color: var(--mg-green); }

/* 音乐播放器进度条 */
.mg-music-progress {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: #e5e7eb;
  cursor: pointer;
  outline: none;
}
.mg-music-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
  cursor: pointer;
  transition: background 0.2s;
}
.mg-music-progress::-webkit-slider-thumb:hover {
  background: #4b5563;
}
.mg-music-progress::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: #e5e7eb;
}
.mg-music-progress::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b7280;
  cursor: pointer;
  border: none;
}
.theme-dark .mg-music-progress {
  background: #3a3a3a;
}
.theme-dark .mg-music-progress::-webkit-slider-thumb {
  background: #9ca3af;
}
.theme-dark .mg-music-progress::-webkit-slider-thumb:hover {
  background: #d1d5db;
}
.theme-dark .mg-music-progress::-moz-range-track {
  background: #3a3a3a;
}
.theme-dark .mg-music-progress::-moz-range-thumb {
  background: #9ca3af;
}
.theme-glass .mg-music-progress {
  background: rgba(255, 255, 255, 0.2);
}
.theme-glass .mg-music-progress::-webkit-slider-thumb {
  background: rgba(255, 255, 255, 0.8);
}
.theme-glass .mg-music-progress::-webkit-slider-thumb:hover {
  background: #fff;
}
.theme-glass .mg-music-progress::-moz-range-track {
  background: rgba(255, 255, 255, 0.2);
}
.theme-glass .mg-music-progress::-moz-range-thumb {
  background: rgba(255, 255, 255, 0.8);
}

/* 歌词面板样式 */
#mg-lyric-modal {
  animation: slideUp 0.3s ease-out;
}

#mg-lyric-panel-wrapper {
  max-height: 70vh;
  animation: fadeIn 0.2s ease-out;
}

#mg-lyric-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 222, 128, 0.5) transparent;
}

#mg-lyric-panel::-webkit-scrollbar {
  width: 4px;
}

#mg-lyric-panel::-webkit-scrollbar-track {
  background: transparent;
}

#mg-lyric-panel::-webkit-scrollbar-thumb {
  background: rgba(74, 222, 128, 0.5);
  border-radius: 2px;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 登录弹窗样式 */
#mg-music-login-modal {
  animation: fadeIn 0.2s ease-out;
}

#mg-music-login-modal .bg-white {
  animation: scaleIn 0.2s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 待办日期条 */
.date-btn { cursor: pointer; border: none; background: transparent; font: inherit; }
.theme-dark .date-btn:not(.bg-green-400):hover { background: #2a2a2a !important; }
.theme-dark .date-btn.bg-green-400 { color: #111 !important; }

/* 分类环图 */
#expense-category-chart,
#income-category-chart {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.acc-pie-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.acc-pie-chart {
  position: relative;
  width: 10rem;
  height: 10rem;
}
.acc-pie-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
  mask: radial-gradient(circle, transparent 54%, #000 55%);
}
.acc-pie-hole {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.acc-pie-center {
  width: 58%;
  height: 58%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.acc-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.acc-pie-legend-text {
  color: #4b5563;
}
.acc-pie-legend-pct {
  color: #9ca3af;
}
html.theme-clear .acc-pie-legend-text,
html.theme-glass.mg-custom-bg-active .acc-pie-legend-text {
  color: rgba(255, 255, 255, 0.88) !important;
}
html.theme-clear .acc-pie-legend-pct,
html.theme-glass.mg-custom-bg-active .acc-pie-legend-pct {
  color: rgba(255, 255, 255, 0.65) !important;
}
html.theme-clear .acc-pie-center,
html.theme-glass.mg-custom-bg-active .acc-pie-center {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(16px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(175%) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
}
.acc-pie-label {
  color: rgba(255, 255, 255, 0.78);
}
.acc-pie-amount {
  color: #fff;
  font-weight: 700;
}
.acc-pie-amount.acc-pie-expense {
  color: #fecaca;
}
.acc-pie-amount.acc-pie-income {
  color: #bbf7d0;
}
html:not(.theme-glass):not(.theme-clear):not(.mg-custom-bg-active) .acc-pie-center {
  background: rgba(249, 250, 251, 0.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid #e5e7eb;
  box-shadow: none;
}
html:not(.theme-glass):not(.theme-clear):not(.mg-custom-bg-active) .acc-pie-label {
  color: #6b7280;
}
html:not(.theme-glass):not(.theme-clear):not(.mg-custom-bg-active) .acc-pie-amount.acc-pie-expense {
  color: #ef4444;
}
html:not(.theme-glass):not(.theme-clear):not(.mg-custom-bg-active) .acc-pie-amount.acc-pie-income {
  color: #22c55e;
}
html.theme-clear.mg-custom-bg-active .acc-pie-amount,
html.theme-glass.mg-custom-bg-active .acc-pie-amount {
  color: #fff;
}
html.theme-clear.mg-custom-bg-active .acc-pie-amount.acc-pie-expense,
html.theme-glass.mg-custom-bg-active .acc-pie-amount.acc-pie-expense {
  color: #fff;
}
html.theme-clear.mg-custom-bg-active .acc-pie-amount.acc-pie-income,
html.theme-glass.mg-custom-bg-active .acc-pie-amount.acc-pie-income {
  color: #fff;
}

/* 磨砂主题：分类统计环图中心文字统一为白色 */
html.theme-glass .acc-pie-label,
html.theme-glass .acc-pie-amount,
html.theme-glass .acc-pie-amount.acc-pie-expense,
html.theme-glass .acc-pie-amount.acc-pie-income {
  color: #fff !important;
}

/* 全局弹窗遮罩（全屏覆盖侧栏+顶栏，与设置页 blur 一致） */
.mg-global-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, backdrop-filter 0.35s ease, background 0.3s ease;
}

.mg-global-modal-backdrop.hidden {
  display: none !important;
}

.mg-global-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
}

.theme-dark .mg-global-modal-backdrop.is-open {
  background: rgba(0, 0, 0, 0.55);
}

/* body 级遮罩双保险（伪元素始终贴 viewport） */
body.mg-modal-active::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 199999;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  pointer-events: auto;
  animation: mg-modal-backdrop-in 0.32s ease forwards;
}

.theme-dark.mg-modal-active::before {
  background: rgba(0, 0, 0, 0.52);
}

@keyframes mg-modal-backdrop-in {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
  }
}

/* 全局弹窗层（挂到 body，覆盖侧栏与顶栏） */
#mg-page-overlays {
  position: fixed;
  inset: 0;
  z-index: 200001;
  pointer-events: none;
}

#mg-page-overlays:has(.mg-modal.is-open:not(.hidden)) {
  pointer-events: auto;
}

#mg-page-overlays:empty {
  display: none;
}

.mg-modal {
  position: fixed;
  inset: 0;
  z-index: 200002;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    background 0.28s ease,
    backdrop-filter 0.32s ease,
    -webkit-backdrop-filter 0.32s ease;
}

.mg-modal.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 1024px) {
  .mg-modal.is-open:not(.hidden) {
    display: flex !important;
  }
}

.mg-modal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: rgba(0, 0, 0, 0.42) !important;
  backdrop-filter: blur(12px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.1) !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mg-modal:not(.is-open),
.mg-modal.hidden {
  pointer-events: none !important;
}

.mg-modal:not(.is-open) .mg-modal-panel,
.mg-modal:not(.is-open) .mg-modal-panel-wrap {
  pointer-events: none !important;
}

.theme-dark .mg-modal.is-open {
  background: rgba(0, 0, 0, 0.62) !important;
}

/* 使用全局遮罩，隐藏弹窗内局部遮罩避免只盖住 main */
.mg-modal-backdrop {
  display: none !important;
}

.mg-modal-panel-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 32rem;
  margin: auto;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  padding: 0;
}

#task-modal .mg-modal-panel-wrap {
  max-width: 36rem;
}

.mg-modal-panel {
  width: 100%;
  max-height: min(88vh, calc(100vh - 3rem));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-left: auto;
  margin-right: auto;
  transform: scale(0.96) translateY(10px);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  pointer-events: auto;
}

.mg-modal.is-open .mg-modal-panel-wrap,
.mg-modal.is-open .mg-modal-panel {
  pointer-events: auto !important;
}

.mg-modal.is-open .mg-modal-panel {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.mg-modal:not(.is-open) .mg-modal-panel {
  transform: scale(0.96) translateY(10px);
  opacity: 0;
}

body.mg-modal-active {
  overflow: hidden;
}

/* 日历弹窗 — 全主题适配 */
.mg-calendar-panel {
  border-radius: 1.25rem;
  padding: 1.5rem;
}
.mg-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.mg-calendar-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}
.mg-calendar-icon {
  font-size: 1.25rem;
}
.mg-calendar-close {
  color: #9ca3af;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.2s;
}
.mg-calendar-close:hover {
  color: #4b5563;
}
.mg-calendar-input {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  outline: none;
  background: #f9fafb;
  color: #111827;
}
.mg-calendar-input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}
.mg-calendar-footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.mg-calendar-btn-cancel,
.mg-calendar-btn-confirm {
  flex: 1;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}
.mg-calendar-btn-cancel {
  background: #f3f4f6;
  color: #4b5563;
}
.mg-calendar-btn-cancel:hover {
  background: #e5e7eb;
}
.mg-calendar-btn-confirm {
  background: #22c55e;
  color: #fff;
}
.mg-calendar-btn-confirm:hover {
  background: #16a34a;
}
.theme-dark .mg-calendar-panel {
  background: rgba(28, 28, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.theme-dark .mg-calendar-title { color: #f3f4f6; }
.theme-dark .mg-calendar-close { color: rgba(255, 255, 255, 0.5); }
.theme-dark .mg-calendar-close:hover { color: #fff; }
.theme-dark .mg-calendar-input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #f3f4f6;
}
.theme-dark .mg-calendar-btn-cancel {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
html.mg-custom-bg-active .mg-calendar-panel,
html.mg-custom-bg-active.theme-glass .mg-calendar-panel {
  background: rgba(18, 22, 28, 0.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}
html.mg-custom-bg-active .mg-calendar-title,
html.mg-custom-bg-active.theme-glass .mg-calendar-title { color: #f9fafb; }
html.mg-custom-bg-active .mg-calendar-input,
html.mg-custom-bg-active.theme-glass .mg-calendar-input {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(255, 255, 255, 0.2);
  color: #f3f4f6;
}
html.mg-custom-bg-active .mg-calendar-btn-cancel,
html.mg-custom-bg-active.theme-glass .mg-calendar-btn-cancel {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
}

/* 待办列表滚动区域 */
.mg-todo-list-scroll {
  max-height: min(52vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.mg-todo-list-scroll::-webkit-scrollbar {
  width: 6px;
}

.mg-todo-list-scroll::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* 模态（兼容旧类名） */
.modal-overlay {
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.65);
  background-clip: padding-box;
}

html.theme-glass,
html.theme-clear,
html.mg-custom-bg-active {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}
html.theme-glass ::-webkit-scrollbar-thumb,
html.theme-clear ::-webkit-scrollbar-thumb,
html.mg-custom-bg-active ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  background-clip: padding-box;
}
html.theme-glass ::-webkit-scrollbar-thumb:hover,
html.theme-clear ::-webkit-scrollbar-thumb:hover,
html.mg-custom-bg-active ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
  background-clip: padding-box;
}

/* 响应式侧边栏 */
@media (max-width: 1023px) {
  .app-sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    z-index: 50;
    transition: left 0.3s;
    width: 260px !important;
  }
  .app-sidebar.open { left: 0; }
  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 45;
    touch-action: manipulation;
  }
  .sidebar-backdrop.show { display: block; }
}

/* 纪念日页面样式 */
#preview-image {
  position: relative;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 暗色模式强制文字颜色 - 高优先级 */
.theme-dark *,
.theme-dark *::before,
.theme-dark *::after {
  color-scheme: dark;
}

/* 强制暗色模式文字对比度 */
.theme-dark .text-gray-900,
.theme-dark .text-gray-800,
.theme-dark .text-gray-700,
.theme-dark .text-gray-600,
.theme-dark [class*="text-gray"]:not(.text-gray-100):not(.text-gray-200):not(.text-gray-300) {
  color: #e5e7eb !important;
}

.theme-dark .text-gray-500,
.theme-dark .text-gray-400 {
  color: #9ca3af !important;
}

.theme-dark .text-gray-300,
.theme-dark .text-gray-200,
.theme-dark .text-gray-100 {
  color: #6b7280 !important;
}

/* 倒计时卡片文字强制样式 */
.theme-dark [class*="countdown"] .text-gray-800,
.theme-dark [class*="countdown"] .text-gray-700,
.theme-dark [class*="countdown"] .text-gray-600,
.theme-dark [data-countdown] .text-gray-800,
.theme-dark [data-countdown] .text-gray-700,
.theme-dark [data-countdown] .text-gray-600 {
  color: #e5e7eb !important;
}

/* 倒计时卡片大数字 */
.theme-dark [class*="countdown"] .text-5xl,
.theme-dark [class*="countdown"] .text-4xl,
.theme-dark [class*="countdown"] .text-6xl,
.theme-dark [class*="countdown"] [class*="font-bold"] {
  color: #f9fafb !important;
}

/* 启动页/欢迎页文字 */
.theme-dark .splash-bg,
.theme-dark [data-splash],
.theme-dark .one-grow-splash {
  color: #e5e7eb !important;
}

/* 欢迎页强制文字颜色 */
.theme-dark .one-grow-splash h1,
.theme-dark .one-grow-splash h2,
.theme-dark .one-grow-splash h3,
.theme-dark .one-grow-splash [class*="text-2xl"],
.theme-dark .one-grow-splash [class*="text-3xl"],
.theme-dark .one-grow-splash [class*="text-4xl"],
.theme-dark .splash-bg h1,
.theme-dark .splash-bg h2,
.theme-dark .splash-bg h3 {
  color: #f9fafb !important;
}

.theme-dark .one-grow-splash p,
.theme-dark .splash-bg p,
.theme-dark .one-grow-splash [class*="text-gray"],
.theme-dark .splash-bg [class*="text-gray"] {
  color: #d1d5db !important;
}

/* 欢迎页背景调整 */
.theme-dark .splash-bg,
.theme-dark .one-grow-splash {
  background: radial-gradient(ellipse at 30% 20%, #1e1e1e 0%, #121212 45%, #0f0f0f 100%) !important;
}

.theme-dark .splash-bg::before,
.theme-dark .splash-bg::after {
  border-color: rgba(74, 222, 128, 0.2) !important;
}

/* 倒计时彩色卡片背景 - 暗色模式下使用深色半透明背景 */
.theme-dark [class*="from-pink-50"],
.theme-dark [class*="from-red-50"],
.theme-dark [class*="from-orange-50"],
.theme-dark [class*="from-yellow-50"],
.theme-dark [class*="from-green-50"],
.theme-dark [class*="from-emerald-50"],
.theme-dark [class*="from-teal-50"],
.theme-dark [class*="from-cyan-50"],
.theme-dark [class*="from-blue-50"],
.theme-dark [class*="from-indigo-50"],
.theme-dark [class*="from-purple-50"],
.theme-dark [class*="from-fuchsia-50"],
.theme-dark [class*="from-slate-50"] {
  background: linear-gradient(to bottom right, rgba(42, 42, 42, 0.95), rgba(30, 30, 30, 0.98)) !important;
  border: 1px solid rgba(74, 222, 128, 0.2) !important;
}

/* 倒计时卡片内部所有文字强制高对比度 */
.theme-dark #cd-grid article .text-gray-800,
.theme-dark #cd-grid article .text-gray-700,
.theme-dark #cd-grid article .text-gray-600,
.theme-dark #cd-grid article [class*="text-gray"] {
  color: #f3f4f6 !important;
}

.theme-dark #cd-grid article .text-gray-500,
.theme-dark #cd-grid article .text-gray-400 {
  color: #9ca3af !important;
}

/* 倒计时卡片大数字 */
.theme-dark #cd-grid article .text-4xl,
.theme-dark #cd-grid article .text-5xl,
.theme-dark #cd-grid article .text-6xl,
.theme-dark #cd-grid article [class*="font-bold"] {
  color: #ffffff !important;
}

/* 倒计时卡片标签样式 */
.theme-dark #cd-grid article span[class*="bg-white"],
.theme-dark #cd-grid article span[class*="bg-white/60"] {
  background: rgba(42, 42, 42, 0.9) !important;
  color: #e5e7eb !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

/* 倒计时卡片编辑和删除按钮 */
.theme-dark #cd-grid article button[class*="bg-white/50"],
.theme-dark #cd-grid article button[class*="bg-white/80"] {
  background: rgba(42, 42, 42, 0.9) !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

/* 待办事项页面今日进度模块暗色模式修复 */
.theme-dark #progress-percent {
  color: #4ade80 !important;
}

/* 待办事项页面今日进度卡片暗色模式 */
.theme-dark #progress-card {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

.theme-dark #progress-card .text-gray-800 {
  color: #f3f4f6 !important;
}

.theme-dark #progress-card .text-gray-700 {
  color: #e5e7eb !important;
}

.theme-dark #progress-card .text-gray-400 {
  color: #9ca3af !important;
}

.theme-dark #progress-card .text-green-500 {
  color: #4ade80 !important;
}

.theme-dark #progress-card .bg-gray-100 {
  background: #2a2a2a !important;
}

.theme-dark #progress-card .border-gray-100 {
  border-color: #3a3a3a !important;
}

/* 待办事项页面本周进度卡片暗色模式 */
.theme-dark #week-progress-card {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

.theme-dark #week-progress-card .text-gray-800 {
  color: #f3f4f6 !important;
}

.theme-dark #week-progress-card .text-gray-700 {
  color: #e5e7eb !important;
}

.theme-dark #week-progress-card .text-gray-500 {
  color: #9ca3af !important;
}

.theme-dark #week-progress-card .text-gray-400 {
  color: #6b7280 !important;
}

.theme-dark #week-progress-card .bg-gray-50 {
  background: #2a2a2a !important;
}

.theme-dark #week-progress-card .border-gray-100 {
  border-color: #3a3a3a !important;
}

/* 薄荷养成页面暗色模式 */
.theme-dark #data-today-water {
  background: rgba(74, 222, 128, 0.15) !important;
}

.theme-dark #data-total-water {
  background: rgba(59, 130, 246, 0.15) !important;
}

.theme-dark #data-tasks-completed {
  background: rgba(168, 85, 247, 0.15) !important;
}

.theme-dark #data-streak-days {
  background: rgba(245, 158, 11, 0.15) !important;
}

.theme-dark #today-water {
  color: #4ade80 !important;
}

.theme-dark #total-water-earned {
  color: #60a5fa !important;
}

.theme-dark #tasks-completed {
  color: #a78bfa !important;
}

.theme-dark #streak-days {
  color: #fbbf24 !important;
}

.theme-dark #data-today-water .text-gray-500,
.theme-dark #data-total-water .text-gray-500,
.theme-dark #data-tasks-completed .text-gray-500,
.theme-dark #data-streak-days .text-gray-500 {
  color: #9ca3af !important;
}

/* 倒计时彩色卡片背景备用 */
.theme-dark .bg-red-50 { background: rgba(239, 68, 68, 0.15) !important; }
.theme-dark .bg-orange-50 { background: rgba(249, 115, 22, 0.15) !important; }
.theme-dark .bg-yellow-50 { background: rgba(234, 179, 8, 0.15) !important; }
.theme-dark .bg-green-50 { background: rgba(34, 197, 94, 0.15) !important; }
.theme-dark .bg-blue-50 { background: rgba(59, 130, 246, 0.15) !important; }
.theme-dark .bg-purple-50 { background: rgba(168, 85, 247, 0.15) !important; }
.theme-dark .bg-pink-50 { background: rgba(236, 72, 153, 0.15) !important; }
.theme-dark .bg-cyan-50 { background: rgba(6, 182, 212, 0.15) !important; }
.theme-dark .bg-red-100 { background: rgba(239, 68, 68, 0.2) !important; }
.theme-dark .bg-orange-100 { background: rgba(249, 115, 22, 0.2) !important; }
.theme-dark .bg-yellow-100 { background: rgba(234, 179, 8, 0.2) !important; }
.theme-dark .bg-green-100 { background: rgba(34, 197, 94, 0.2) !important; }
.theme-dark .bg-blue-100 { background: rgba(59, 130, 246, 0.2) !important; }
.theme-dark .bg-purple-100 { background: rgba(168, 85, 247, 0.2) !important; }
.theme-dark .bg-pink-100 { background: rgba(236, 72, 153, 0.2) !important; }
.theme-dark .bg-cyan-100 { background: rgba(6, 182, 212, 0.2) !important; }

/* 倒计时卡片文字强制可见 */
.theme-dark [class*="countdown-card"],
.theme-dark [class*="cd-card"],
.theme-dark [class*="countdown-item"] {
  color: #e5e7eb !important;
}

/* 倒计时卡片内所有文字 */
.theme-dark [class*="countdown-card"] *,
.theme-dark [class*="cd-card"] *,
.theme-dark [class*="countdown-item"] * {
  color: inherit !important;
}

/* 登录页面暗色模式 */
.theme-dark body.min-h-screen.bg-\[\#f8faf8\] {
  background: #121212 !important;
}
.theme-dark .bg-white.rounded-\[32px\] {
  background: #1e1e1e !important;
}
.theme-dark header .bg-white.border.border-gray-200 {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #d1d5db !important;
}
.theme-dark .flex.bg-gray-100 {
  background: #2a2a2a !important;
}
.theme-dark .flex.bg-gray-100 select,
.theme-dark .flex.bg-gray-100 input,
.theme-dark input.bg-gray-100 {
  color: #f3f4f6 !important;
}
.theme-dark .border.border-gray-200 {
  border-color: #3a3a3a !important;
}
.theme-dark .bg-gradient-to-br.from-green-50.to-emerald-100 {
  background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.15), rgba(16, 185, 129, 0.15)) !important;
}

/* 每日一言页面暗色模式 */
.theme-dark .bg-gradient-to-br.from-purple-50.via-pink-50.to-blue-50 {
  background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.15), rgba(236, 72, 153, 0.15), rgba(59, 130, 246, 0.15)) !important;
}
.theme-dark .bg-white\/80 {
  background: rgba(30, 30, 30, 0.8) !important;
}
.theme-dark .bg-white\/80:hover {
  background: rgba(30, 30, 30, 0.95) !important;
}

/* 薄荷养成页面暗色模式 */
.theme-dark .bg-gradient-to-b.from-green-50\/50.to-white {
  background: linear-gradient(to bottom, rgba(34, 197, 94, 0.1), #1e1e1e) !important;
}
.theme-dark .bg-gradient-to-br.from-green-100.to-emerald-100 {
  background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.25)) !important;
}
.theme-dark .bg-gradient-to-tr.from-green-50.to-cyan-50 {
  background: linear-gradient(to top right, rgba(34, 197, 94, 0.15), rgba(6, 182, 212, 0.15)) !important;
}

/* 待办事项页面暗色模式 */
.theme-dark .suggestion-item .w-8.h-8.rounded-full.bg-white {
  background: #2a2a2a !important;
}
.theme-dark .w-8.h-8.rounded-full.bg-white:hover {
  background: #3a3a3a !important;
}

/* 倒计时页面暗色模式 */
.theme-dark .icon-picker.bg-gray-50 {
  background: #2a2a2a !important;
}
.theme-dark .icon-picker.bg-gray-50:hover {
  background: #3a3a3a !important;
}
.theme-dark .category-label.bg-gray-50 {
  background: #2a2a2a !important;
}
.theme-dark .category-label.bg-gray-50:hover {
  background: #3a3a3a !important;
}
.theme-dark .bg-gradient-to-r.from-pink-100.to-pink-50 {
  background: linear-gradient(to right, rgba(236, 72, 153, 0.25), rgba(236, 72, 153, 0.15)) !important;
}

/* 弹窗暗色模式 */
.theme-dark .modal-overlay .bg-white {
  background: #1e1e1e !important;
}

/* 液态玻璃风格 - 设置页面专用 */
.settings-glass-bg {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 45%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 55%,
    transparent 60%
  );
  transform: rotate(45deg) translateX(-100%);
  animation: glass-shine 8s infinite linear;
  opacity: 0.4;
  pointer-events: none;
}

@keyframes glass-shine {
  0% { transform: rotate(45deg) translateX(-100%); }
  100% { transform: rotate(45deg) translateX(100%); }
}

.glass-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 20px 50px rgba(74, 222, 128, 0.3),
    0 0 30px rgba(74, 222, 128, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  border-color: rgba(74, 222, 128, 0.5);
}

.glass-card:hover::before {
  animation-duration: 3s;
  opacity: 0.7;
}

.glass-profile {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.25) 0%, rgba(34, 197, 94, 0.15) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(74, 222, 128, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.glass-profile::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent);
  pointer-events: none;
}

.glass-profile:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 20px 50px rgba(74, 222, 128, 0.35),
    0 0 40px rgba(74, 222, 128, 0.25);
  border-color: rgba(74, 222, 128, 0.7);
}

.glass-stat {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.18) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.glass-stat:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 
    0 15px 40px rgba(74, 222, 128, 0.25),
    0 0 20px rgba(74, 222, 128, 0.15);
  border-color: rgba(74, 222, 128, 0.6);
}

.glass-stat::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-stat:hover::after {
  opacity: 1;
}

.glass-action {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.15) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  position: relative;
  overflow: hidden;
  transition: all 0.35s ease;
  cursor: pointer;
}

.glass-action::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(74, 222, 128, 0.3) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.glass-action:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 35px rgba(74, 222, 128, 0.25),
    0 0 25px rgba(74, 222, 128, 0.18);
  border-color: rgba(74, 222, 128, 0.55);
}

.glass-action:hover::before {
  opacity: 1;
}

/* 玻璃按钮 */
.glass-btn {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.glass-btn.active {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.4) 0%, rgba(74, 222, 128, 0.2) 100%);
  border-color: rgba(74, 222, 128, 0.7);
  color: #16a34a;
  box-shadow: 
    0 0 20px rgba(74, 222, 128, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.glass-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 8px 25px rgba(74, 222, 128, 0.2),
    0 0 15px rgba(74, 222, 128, 0.15);
}

/* 暗色模式下的液态玻璃 */
.theme-dark .glass-card {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.6) 0%, rgba(20, 20, 20, 0.4) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.theme-dark .glass-card::before {
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.1) 45%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.1) 55%,
    transparent 60%
  );
}

.theme-dark .glass-profile {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
  border-color: rgba(74, 222, 128, 0.3);
  box-shadow: 
    0 8px 32px rgba(74, 222, 128, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.theme-dark .glass-stat {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.5) 0%, rgba(20, 20, 20, 0.35) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-dark .glass-action {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.5) 0%, rgba(20, 20, 20, 0.35) 100%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-dark .glass-btn {
  background: linear-gradient(135deg, rgba(30, 30, 30, 0.5) 0%, rgba(20, 20, 20, 0.35) 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

.theme-dark .glass-btn.active {
  background: linear-gradient(135deg, rgba(94, 235, 94, 0.3) 0%, rgba(94, 235, 94, 0.15) 100%);
  border-color: rgba(94, 235, 94, 0.6);
  color: #5eeb5e;
  box-shadow: 
    0 0 20px rgba(94, 235, 94, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 设置页面样式 */
.settings-page-wrapper {
  position: relative;
  width: 100%;
  background: var(--mg-bg);
}

/* 液态玻璃主题下的设置页面背景 */
.theme-glass .settings-page-wrapper {
  background: transparent;
}

.theme-glass .mg-content-wrap {
  background: transparent;
}

/* 关于我们弹窗样式 */
#about-modal-overlay {
  z-index: 50;
}

.about-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* 暗色模式弹窗样式 */
.theme-dark #about-modal-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.theme-dark .about-modal {
  background: rgba(30, 30, 30, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-dark .about-modal p {
  color: rgba(255, 255, 255, 0.9);
}

.theme-dark .about-modal button {
  background: rgba(75, 85, 99, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.theme-dark .about-modal button:hover {
  background: rgba(107, 114, 128, 0.5);
}



/* ==================== 液态玻璃主题样式 ==================== */
/* 主题类名: theme-glass */
/* 参考用户提供的液态玻璃样式文件 */

/* 液态玻璃主题下的背景 */
.theme-glass .mg-page-body {
  background: linear-gradient(135deg, #4ade80, #93c5fd, #fda4af);
  background-size: 400% 400%;
  animation: bgFlow 12s ease infinite;
  min-height: 100vh;
}

/* 自定义背景图片样式 */
.theme-glass .mg-page-body.has-custom-bg {
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: none;
}

/* 主题设置：简约模式下禁用上传按钮 */
.setting-btn-upload.is-disabled,
.setting-btn-transparent.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.35);
}

/* 背景亮度 / 模糊调节（上传自定义图后可用） */
.bg-adjust-panel.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.bg-adjust-panel.is-disabled .bg-adjust-slider {
  cursor: not-allowed;
}

.bg-adjust-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 999px;
  background: rgba(156, 163, 175, 0.35);
  outline: none;
}

.bg-adjust-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.45);
  cursor: pointer;
}

.bg-adjust-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.45);
  cursor: pointer;
}

.bg-adjust-slider:disabled::-webkit-slider-thumb {
  background: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.bg-adjust-slider:disabled::-moz-range-thumb {
  background: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.theme-glass .bg-adjust-slider {
  background: rgba(255, 255, 255, 0.25);
}

.theme-glass .bg-adjust-slider::-webkit-slider-thumb {
  background: #86efac;
  border-color: rgba(255, 255, 255, 0.85);
}

.theme-glass .bg-adjust-slider::-moz-range-thumb {
  background: #86efac;
  border-color: rgba(255, 255, 255, 0.85);
}

.setting-btn-transparent {
  background: linear-gradient(135deg, rgba(147, 197, 253, 0.55), rgba(196, 181, 253, 0.55));
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 16px;
  color: #1e3a5f;
  transition: all 0.25s ease;
}

.setting-btn-transparent:hover:not(.is-disabled) {
  box-shadow: 0 4px 16px rgba(147, 197, 253, 0.35);
}

.setting-btn-transparent.active {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.75), rgba(52, 211, 153, 0.75));
  border-color: rgba(34, 197, 94, 0.65);
  color: #14532d;
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.35);
}

.theme-glass .setting-btn-transparent {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #f8fafc;
}

.theme-glass .setting-btn-transparent.active {
  background: rgba(74, 222, 128, 0.45);
  border-color: rgba(34, 197, 94, 0.7);
  color: #ecfdf5;
}

/* 自定义背景图层（避免 background-attachment:fixed 导致布局偏移与光晕错位） */
#mg-custom-bg-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

#mg-custom-bg-layer::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.32) 45%,
    rgba(0, 0, 0, 0.5) 100%
  );
}

html.mg-custom-bg-active body.mg-page-body {
  color: #f3f4f6;
}

html.mg-custom-bg-active #sidebar-container,
html.mg-custom-bg-active #header-container,
html.mg-custom-bg-active body.mg-page-body > .flex-1,
html.mg-custom-bg-active #mg-global-footer {
  position: relative;
  z-index: 1;
}

html.mg-custom-bg-active.theme-glass .text-gray-900,
html.mg-custom-bg-active.theme-glass .text-gray-800,
html.mg-custom-bg-active.theme-glass .text-gray-700,
html.mg-custom-bg-active.theme-glass .text-gray-600 {
  color: rgba(255, 255, 255, 0.94) !important;
}

html.mg-custom-bg-active.theme-glass .text-gray-500 {
  color: rgba(255, 255, 255, 0.82) !important;
}

html.mg-custom-bg-active.theme-glass .text-gray-400 {
  color: rgba(255, 255, 255, 0.68) !important;
}

html.mg-custom-bg-active.theme-glass h1,
html.mg-custom-bg-active.theme-glass h2,
html.mg-custom-bg-active.theme-glass h3,
html.mg-custom-bg-active.theme-glass .font-bold {
  color: #ffffff !important;
}

html.mg-custom-bg-active.theme-glass:not(.theme-clear) .app-sidebar,
html.mg-custom-bg-active.theme-glass:not(.theme-clear) header,
html.mg-custom-bg-active.theme-glass:not(.theme-clear) .mg-card {
  background: rgba(15, 23, 42, 0.52) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

/* 通透模式：色块全透明，保留磨砂 */
html.theme-clear.mg-custom-bg-active .app-sidebar,
html.theme-clear.mg-custom-bg-active header,
html.theme-clear.mg-custom-bg-active .mg-card,
html.theme-clear.mg-custom-bg-active .setting-card,
html.theme-clear.mg-custom-bg-active .setting-card-profile,
html.theme-clear.mg-custom-bg-active #progress-card,
html.theme-clear.mg-custom-bg-active #week-progress-card,
html.theme-clear.mg-custom-bg-active .mg-music-bar {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-color: rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
}

html.theme-clear.mg-custom-bg-active .bg-green-50,
html.theme-clear.mg-custom-bg-active .bg-blue-50,
html.theme-clear.mg-custom-bg-active .bg-purple-50,
html.theme-clear.mg-custom-bg-active .bg-yellow-50,
html.theme-clear.mg-custom-bg-active .bg-pink-50,
html.theme-clear.mg-custom-bg-active .bg-red-50,
html.theme-clear.mg-custom-bg-active .bg-orange-50,
html.theme-clear.mg-custom-bg-active .bg-cyan-50,
html.theme-clear.mg-custom-bg-active .bg-green-100,
html.theme-clear.mg-custom-bg-active .bg-blue-100,
html.theme-clear.mg-custom-bg-active .bg-purple-100,
html.theme-clear.mg-custom-bg-active .bg-pink-100,
html.theme-clear.mg-custom-bg-active .bg-yellow-100 {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

html.theme-clear.mg-custom-bg-active .bg-green-50 *,
html.theme-clear.mg-custom-bg-active .bg-blue-50 *,
html.theme-clear.mg-custom-bg-active .bg-purple-50 *,
html.theme-clear.mg-custom-bg-active .bg-yellow-50 *,
html.theme-clear.mg-custom-bg-active .bg-pink-50 *,
html.theme-clear.mg-custom-bg-active .bg-red-50 *,
html.theme-clear.mg-custom-bg-active .bg-orange-50 *,
html.theme-clear.mg-custom-bg-active .bg-cyan-50 * {
  color: rgba(255, 255, 255, 0.94) !important;
}

html.theme-clear.mg-custom-bg-active .text-green-600,
html.theme-clear.mg-custom-bg-active .text-blue-600,
html.theme-clear.mg-custom-bg-active .text-purple-600,
html.theme-clear.mg-custom-bg-active .text-yellow-600,
html.theme-clear.mg-custom-bg-active .text-pink-600 {
  color: #e5e7eb !important;
}

html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] .text-gray-800,
html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] .text-gray-700,
html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] .text-gray-600,
html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] .text-gray-500,
html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] .font-bold,
html.theme-clear.mg-custom-bg-active [class*="bg-gradient-to"] h3 {
  color: rgba(255, 255, 255, 0.95) !important;
}

html.theme-clear.mg-custom-bg-active .bg-white {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.theme-clear.mg-custom-bg-active .bg-white .text-gray-500,
html.theme-clear.mg-custom-bg-active .bg-white .text-gray-600,
html.theme-clear.mg-custom-bg-active .bg-white .text-gray-700 {
  color: rgba(255, 255, 255, 0.88) !important;
}

html.mg-custom-bg-active.theme-glass .sidebar-link {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.mg-custom-bg-active.theme-glass .sidebar-link svg {
  stroke: rgba(255, 255, 255, 0.88) !important;
}

html.mg-custom-bg-active.theme-glass .sidebar-link.active {
  color: #ecfdf5 !important;
  background: rgba(74, 222, 128, 0.35) !important;
}

html.mg-custom-bg-active.theme-glass .sidebar-link.active svg {
  stroke: #ecfdf5 !important;
}

html.mg-custom-bg-active.theme-glass.theme-dark .sidebar-link.active,
html.theme-glass.theme-dark .sidebar-link.active {
  color: #ffffff !important;
}

html.mg-custom-bg-active.theme-glass.theme-dark .sidebar-link.active svg,
html.theme-glass.theme-dark .sidebar-link.active svg {
  stroke: #ffffff !important;
}

html.mg-custom-bg-active.theme-glass .mg-search {
  color: #f9fafb !important;
  background: rgba(15, 23, 42, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
}

html.mg-custom-bg-active.theme-glass .mg-search::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
}

html.mg-custom-bg-active.theme-glass .text-green-500,
html.mg-custom-bg-active.theme-glass .text-green-600 {
  color: #86efac !important;
}

html.mg-custom-bg-active.theme-glass .text-yellow-600 {
  color: #fde047 !important;
}

html.mg-custom-bg-active.theme-glass .text-pink-500,
html.mg-custom-bg-active.theme-glass .text-pink-600 {
  color: #f9a8d4 !important;
}

html.mg-custom-bg-active.theme-glass .text-red-500,
html.mg-custom-bg-active.theme-glass .text-red-600 {
  color: #fca5a5 !important;
}

html.mg-custom-bg-active.theme-glass .text-blue-600 {
  color: #93c5fd !important;
}

html.mg-custom-bg-active.theme-glass footer {
  color: rgba(255, 255, 255, 0.65) !important;
}

html.mg-custom-bg-active.theme-glass .mg-todo-add-input,
html.mg-custom-bg-active.theme-glass .mg-todo-add-input::placeholder {
  color: #f3f4f6 !important;
}

html.mg-custom-bg-active.theme-glass .mg-todo-add-field {
  background: rgba(15, 23, 42, 0.45) !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.mg-custom-bg-active.theme-glass .date-btn:not(.date-btn-active) {
  color: rgba(255, 255, 255, 0.88) !important;
  background: rgba(15, 23, 42, 0.4) !important;
}

html.mg-custom-bg-active.theme-glass .date-btn-active,
html.mg-custom-bg-active.theme-glass .date-btn.bg-green-500,
html.theme-glass .date-btn-active,
html.theme-glass .date-btn.bg-green-500 {
  background: #22c55e !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}

/* 通透 + 自定义背景：亮色控件（覆盖上方磨砂深色规则） */
html.theme-clear.mg-custom-bg-active.theme-glass .mg-search,
html.theme-clear.mg-custom-bg-active .mg-search,
html.theme-clear.mg-custom-bg-active.theme-glass .mg-todo-add-field,
html.theme-clear.mg-custom-bg-active .mg-todo-add-field,
html.theme-clear.mg-custom-bg-active.theme-glass .date-btn:not(.date-btn-active):not(.bg-green-500),
html.theme-clear.mg-custom-bg-active .date-btn:not(.date-btn-active):not(.bg-green-500),
html.theme-clear.mg-custom-bg-active #btn-calendar,
html.theme-clear.mg-custom-bg-active #search-input,
html.theme-clear.mg-custom-bg-active #task-input,
html.theme-clear.mg-custom-bg-active #btn-reset,
html.theme-clear.mg-custom-bg-active .filter-btn:not(.filter-btn-active):not(.bg-green-500) {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

html.theme-clear.mg-custom-bg-active #btn-water,
html.theme-clear.mg-custom-bg-active #btn-add-record,
html.theme-clear.mg-custom-bg-active #btn-add-event,
html.theme-clear.mg-custom-bg-active #btn-save-mood,
html.theme-clear.mg-custom-bg-active #btn-refresh-quote,
html.theme-clear.mg-custom-bg-active #btn-save-quote,
html.theme-clear.mg-custom-bg-active .mood-btn,
html.theme-clear.mg-custom-bg-active #mood-note {
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: none !important;
}

html.theme-clear.mg-custom-bg-active #btn-water:not(:disabled):hover,
html.theme-clear.mg-custom-bg-active #btn-add-record:hover,
html.theme-clear.mg-custom-bg-active #btn-add-event:hover,
html.theme-clear.mg-custom-bg-active #btn-save-mood:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

html.mg-custom-bg-active.theme-glass .filter-btn:not(.active) {
  color: rgba(255, 255, 255, 0.85) !important;
}

html.mg-custom-bg-active.theme-glass.theme-dark:not(.mg-transparent-mode) .mg-card,
html.mg-custom-bg-active.theme-glass.theme-dark:not(.mg-transparent-mode) .app-sidebar,
html.mg-custom-bg-active.theme-glass.theme-dark:not(.mg-transparent-mode) header {
  background: rgba(15, 23, 42, 0.58) !important;
}

@keyframes bgFlow {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* 核心液态玻璃样式 - 大面板 */
.theme-glass .app-sidebar,
.theme-glass header,
.theme-glass .mg-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* 液态玻璃主题 - 侧边栏 */
.theme-glass .app-sidebar {
  border-radius: 0 28px 28px 0;
}

.theme-glass .sidebar-link {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid transparent;
}

.theme-glass .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.35);
}

/* 磨砂亮色：今日成长背景与下方 sidebar-link 一致 */
html.theme-glass:not(.theme-dark) .mg-sidebar-growth,
html.theme-glass:not(.theme-dark) .app-sidebar .mg-sidebar-growth,
html.theme-glass:not(.theme-dark).mg-custom-bg-active .mg-sidebar-growth.bg-zinc-800,
html.theme-glass:not(.theme-dark).mg-custom-bg-active .mg-sidebar-growth.bg-pink-50 {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: transparent !important;
}
html.theme-glass:not(.theme-dark) .mg-sidebar-growth .text-green-500 {
  color: #111827 !important;
}
html.theme-glass:not(.theme-dark) .mg-sidebar-growth p,
html.theme-glass:not(.theme-dark) .mg-sidebar-growth .text-xs {
  color: #111827 !important;
}
/* 磨砂暗色：今日成长保持浅色字 */
html.theme-glass.theme-dark .mg-sidebar-growth,
html.theme-glass.theme-dark .app-sidebar .mg-sidebar-growth {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: transparent !important;
}
html.theme-glass.theme-dark .mg-sidebar-growth .text-green-500 {
  color: #86efac !important;
}
html.theme-glass.theme-dark .mg-sidebar-growth p,
html.theme-glass.theme-dark .mg-sidebar-growth .text-xs {
  color: rgba(255, 255, 255, 0.78) !important;
}
html.theme-glass .mg-sidebar-growth .bg-gray-200,
html.theme-glass .mg-sidebar-growth .bg-zinc-700 {
  background: rgba(255, 255, 255, 0.18) !important;
}

/* 磨砂主题：操作按钮玻璃态（非通透专用亮色时） */
html.theme-glass:not(.theme-clear) .mg-clear-action-btn,
html.theme-glass:not(.theme-clear) .cd-view-btn {
  background: rgba(255, 255, 255, 0.16) !important;
  backdrop-filter: blur(14px) saturate(165%);
  -webkit-backdrop-filter: blur(14px) saturate(165%);
  border: 1px solid rgba(255, 255, 255, 0.32) !important;
  color: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
}
html.theme-glass:not(.theme-clear) .mg-clear-action-btn:hover,
html.theme-glass:not(.theme-clear) .cd-view-btn:hover {
  background: rgba(255, 255, 255, 0.24) !important;
}
html.theme-glass:not(.theme-clear) .cd-view-btn.cd-view-btn-active {
  background: rgba(74, 222, 128, 0.45) !important;
  border-color: rgba(134, 239, 172, 0.65) !important;
  color: #ecfdf5 !important;
}

.theme-glass .sidebar-link.active {
  background: rgba(74, 222, 128, 0.5);
  border-color: rgba(34, 197, 94, 0.8);
  color: #166534;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(74, 222, 128, 0.35);
}
.theme-glass .sidebar-link.active svg {
  stroke: #166534;
}



.theme-glass .mg-search {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 液态玻璃主题 - 小玻璃卡片 */
.theme-glass #progress-card,
.theme-glass #week-progress-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
}

/* 液态玻璃主题 - 按钮 */
.theme-glass .btn-primary {
  background: rgba(74, 222, 128, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(74, 222, 128, 0.4);
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.25);
}

.theme-glass .btn-primary:hover {
  background: rgba(34, 197, 94, 0.9);
  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.3);
}

/* 液态玻璃主题 - 输入框 */
.theme-glass input:not(.mg-search):not(.mg-todo-add-input),
.theme-glass select,
.theme-glass textarea {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-glass input:focus:not(.mg-search):not(.mg-todo-add-input),
.theme-glass select:focus,
.theme-glass textarea:focus {
  border-color: rgba(74, 222, 128, 0.5);
}

.theme-glass .mg-todo-add-field {
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.theme-glass .mg-todo-add-field:focus-within {
  border-color: rgba(74, 222, 128, 0.55);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25);
}
.theme-glass .mg-todo-add-input {
  color: #1f2937;
}
.theme-glass.theme-dark .mg-todo-add-field {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}
.theme-glass.theme-dark .mg-todo-add-input {
  color: #f3f4f6;
}

/* 液态玻璃主题 - 音乐播放器 */
.theme-glass .mg-music-bar {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* 液态玻璃主题 - 弹窗 */
.theme-glass .modal-overlay {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-glass .modal-overlay .bg-white {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 28px;
}

/* 底部版权栏 - 置于主栏底部居中（勿挂到 body 横向 flex，避免挤没主内容） */
body.mg-page-body > .flex-1 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body.mg-page-body > .flex-1 > main {
  flex: 1 1 auto;
  min-height: 0;
}
footer,
#mg-global-footer {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  width: 100%;
  text-align: center !important;
  flex-shrink: 0;
  margin-top: auto;
}
#mg-global-footer {
  position: relative;
  z-index: 1;
}

.theme-glass footer {
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-top: none !important;
}

/* ==================== 液态玻璃主题 - 暗色模式 ==================== */
.theme-glass.theme-dark .mg-page-body {
  background: 
    radial-gradient(circle at 20% 20%, rgba(94, 235, 94, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.04) 0%, transparent 50%),
    #0f0f0f;
}

.theme-glass.theme-dark .app-sidebar {
  background: rgba(30, 30, 30, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-glass.theme-dark .sidebar-link {
  background: rgba(255, 255, 255, 0.04);
}

.theme-glass.theme-dark .sidebar-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.theme-glass.theme-dark .sidebar-link.active {
  background: rgba(94, 235, 94, 0.25);
  border-color: rgba(94, 235, 94, 0.4);
  color: #ffffff !important;
}
.theme-glass.theme-dark .sidebar-link.active svg {
  stroke: #ffffff !important;
}

.theme-glass.theme-dark header {
  background: rgba(30, 30, 30, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-glass.theme-dark .mg-card {
  background: rgba(30, 30, 30, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.theme-glass.theme-dark .mg-card:hover {
  border-color: rgba(94, 235, 94, 0.3);
}

.theme-glass.theme-dark .mg-search {
  background: rgba(42, 42, 42, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme-glass.theme-dark input:not(.mg-search):not(.mg-todo-add-input),
.theme-glass.theme-dark select,
.theme-glass.theme-dark textarea {
  background: rgba(42, 42, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.theme-glass.theme-dark .modal-overlay .bg-white {
  background: rgba(30, 30, 30, 0.95);
  border-color: rgba(255, 255, 255, 0.1);
}

/* ==================== 主题切换按钮样式 ==================== */
.style-toggle-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.style-toggle-btn.active {
  border-color: var(--mg-green);
  background: rgba(74, 222, 128, 0.2);
  color: var(--mg-green);
  box-shadow: 
    0 0 15px rgba(74, 222, 128, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.theme-dark .style-toggle-btn {
  background: rgba(42, 42, 42, 0.6);
  color: #d1d5db;
}

.theme-dark .style-toggle-btn.active {
  border-color: var(--mg-neon);
  background: rgba(94, 235, 94, 0.15);
  color: var(--mg-neon);
}

/* ==================== 背景上传按钮样式 ==================== */
.bg-upload-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(74, 222, 128, 0.4);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
  background: rgba(74, 222, 128, 0.85);
  color: white;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-upload-btn:hover {
  background: rgba(34, 197, 94, 0.9);
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
}

.bg-reset-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.bg-reset-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.theme-dark .bg-upload-btn {
  background: rgba(34, 197, 94, 0.8);
}

.theme-dark .bg-reset-btn {
  background: rgba(42, 42, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
  color: #d1d5db;
}

/* ==================== 设置页面样式 ==================== */

/* -------------------- 简约模式样式 -------------------- */
/* 基础卡片 */
.setting-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* 用户信息卡片 */
.setting-card-profile {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: rgba(74, 222, 128, 0.2);
}

.setting-card-profile span {
  background: rgba(74, 222, 128, 0.15);
  color: #16a34a;
}

/* 统计卡片 */
.setting-card-stat {
  background: #f9fafb;
  border-color: #f3f4f6;
}

.setting-card-stat:hover {
  background: #f3f4f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 操作卡片 */
.setting-card-action {
  background: #ffffff;
  cursor: pointer;
}

.setting-card-action:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 危险操作卡片 */
.setting-card-action-danger {
  color: #ef4444;
}

.setting-card-action-danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

/* 选项卡片 */
.setting-card-option {
  background: #ffffff;
}

/* 切换按钮 */
.setting-toggle-btn {
  background: #f3f4f6;
  border: 2px solid transparent;
  border-radius: 16px;
  color: #6b7280;
  transition: all 0.25s ease;
}

.setting-toggle-btn:hover {
  background: #e5e7eb;
}

.setting-toggle-btn.active {
  background: rgba(74, 222, 128, 0.15);
  border-color: #4ade80;
  color: #16a34a;
}

/* 上传按钮 */
.setting-btn-upload {
  background: #4ade80;
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 16px;
  color: white;
  transition: all 0.25s ease;
}

.setting-btn-upload:hover {
  background: #22c55e;
  box-shadow: 0 4px 16px rgba(74, 222, 128, 0.3);
}

/* 重置按钮 */
.setting-btn-reset {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  color: #6b7280;
  transition: all 0.25s ease;
}

.setting-btn-reset:hover {
  background: #e5e7eb;
}

/* -------------------- 磨砂模式样式 -------------------- */
.theme-glass .setting-card {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.theme-glass .setting-card-profile {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(74, 222, 128, 0.3);
}

.theme-glass .setting-card-profile span {
  background: rgba(74, 222, 128, 0.25);
  color: #16a34a;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-glass .setting-card-stat {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

.theme-glass .setting-card-stat:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.theme-glass .setting-card-action {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
}

.theme-glass .setting-card-action:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.theme-glass .setting-card-action-danger {
  color: #f87171;
}

.theme-glass .setting-card-action-danger:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
}

.theme-glass .setting-card-option {
  background: rgba(255, 255, 255, 0.18);
}

.theme-glass .setting-toggle-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  color: #374151;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-glass .setting-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.theme-glass .setting-toggle-btn.active {
  background: rgba(74, 222, 128, 0.35);
  border-color: rgba(74, 222, 128, 0.5);
  color: #15803d;
}

.theme-glass .setting-btn-upload {
  background: rgba(74, 222, 128, 0.85);
  border: 1px solid rgba(74, 222, 128, 0.4);
  border-radius: 16px;
  color: white;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-glass .setting-btn-upload:hover {
  background: rgba(34, 197, 94, 0.9);
  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.35);
}

.theme-glass .setting-btn-reset {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  color: #4b5563;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.theme-glass .setting-btn-reset:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* -------------------- 暗色模式适配 -------------------- */
.theme-dark .setting-card {
  background: #1f2937;
  border-color: #374151;
}

.theme-dark .setting-card-profile {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  border-color: rgba(74, 222, 128, 0.2);
}

.theme-dark .setting-card-profile span {
  background: rgba(255, 255, 255, 0.15);
  color: #86efac;
}

.theme-dark .setting-card-stat {
  background: #1f2937;
  border-color: #374151;
}

.theme-dark .setting-card-action {
  background: #1f2937;
  color: #d1d5db;
}

.theme-dark .setting-card-action:hover {
  background: #374151;
}

.theme-dark .setting-card-action-danger {
  color: #fca5a5;
}

.theme-dark .setting-card-action-danger:hover {
  background: #450a0a;
  border-color: #7f1d1d;
}

.theme-dark .setting-toggle-btn {
  background: #374151;
  color: #d1d5db;
}

.theme-dark .setting-toggle-btn:hover {
  background: #4b5563;
}

.theme-dark .setting-toggle-btn.active {
  background: rgba(94, 235, 94, 0.15);
  border-color: #5eea5e;
  color: #86efac;
}

.theme-dark .setting-btn-upload {
  background: #16a34a;
}

.theme-dark .setting-btn-reset {
  background: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

.theme-dark .setting-btn-reset:hover {
  background: #4b5563;
}

/* -------------------- 暗色模式 + 磨砂模式 -------------------- */
.theme-dark.theme-glass .setting-card {
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme-dark.theme-glass .setting-card-profile {
  background: rgba(22, 101, 52, 0.6);
}

.theme-dark.theme-glass .setting-card-stat {
  background: rgba(31, 41, 55, 0.7);
}

.theme-dark.theme-glass .setting-card-action {
  background: rgba(31, 41, 55, 0.7);
}

.theme-dark.theme-glass .setting-toggle-btn {
  background: rgba(55, 65, 81, 0.7);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme-dark.theme-glass .setting-toggle-btn.active {
  background: rgba(94, 235, 94, 0.2);
  border-color: rgba(94, 235, 94, 0.4);
}

.theme-dark.theme-glass .setting-btn-reset {
  background: rgba(55, 65, 81, 0.7);
}

/* ==================== 服务岛容器样式 ==================== */

/* -------------------- 服务岛容器基础样式 -------------------- */
.service-island-container {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
}

.service-island {
  width: 100%;
  max-width: 900px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.service-island:hover {
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.06);
}

/* -------------------- 简约模式服务岛样式 -------------------- */
.service-island {
  background: rgba(249, 250, 251, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* -------------------- 磨砂模式服务岛样式（液态玻璃效果） -------------------- */
.theme-glass .service-island {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* -------------------- 暗色模式服务岛样式 -------------------- */
.theme-dark .service-island {
  background: rgba(30, 30, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* -------------------- 暗色模式 + 磨砂模式服务岛样式 -------------------- */
.theme-dark.theme-glass .service-island {
  background: rgba(30, 30, 30, 0.7);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* -------------------- 服务岛响应式样式 -------------------- */
@media (max-width: 1023px) {
  .service-island-container {
    padding: 8px 12px;
  }
  
  .service-island {
    max-width: 100%;
    border-radius: 9999px;
  }
}

@media (max-width: 640px) {
  .service-island-container {
    padding: 6px 8px;
  }
  
  .service-island {
    padding: 2px 16px;
    gap: 2px;
  }
}