/* 预设颜色变量 - 默认主题 */
:root {
  --background-start: #0f172a; /* 背景渐变起始色 */
  --background-end: #1e3a8a; /* 背景渐变结束色 */
  --card-background: rgba(30, 41, 59, .75); /* 卡片背景色 */
  --card-border: rgba(99, 102, 241, .2); /* 卡片边框色 */
  --button-background-start: #4f46e5; /* 按钮渐变起始色 */
  --button-background-end: #7c3aed; /* 按钮渐变结束色 */
  --button-hover-start: #4338ca; /* 按钮悬停渐变起始色 */
  --button-hover-end: #6d28d9; /* 按钮悬停渐变结束色 */
  --content-background: #121f3e; /* 内容区域背景色 */
  --input-background: rgba(15, 23, 42, 0.6); /* 输入框背景色 */
  --input-border: #334155; /* 输入框边框色 */
  --input-focus-border: #6366f1; /* 输入框焦点边框色 */
  --input-focus-shadow: rgba(99, 102, 241, .3); /* 输入框焦点阴影 */
  --text-color: #e2e8f0; /* 文字颜色 */
  --label-color: #94a3b8; /* 标签文字颜色 */
  --error-color: #fecaca; /* 错误信息颜色 */
  --error-background: rgba(127, 29, 29, .4); /* 错误背景色 */
  --error-border: rgba(239, 68, 68, .3); /* 错误边框色 */
  --link-color: #6366f1; /* 链接颜色 */
}
/* 预设颜色变量 - 紫色主题 */
[data-theme="purple"] {
  --background-start: #f3e5f5; /* 淡紫背景起始 */
  --background-end: #e1bee7;   /* 浅紫背景结束 */
  --card-background: #ffffff;  /* 白色卡片 */
  --card-border: rgba(186, 104, 200, 0.6); /* 紫色边框 */
  --button-background-start: #7b1fa2; /* 标准紫色 */
  --button-background-end: #6a1b9a;   /* 深紫色 */
  --button-hover-start: #4a148c;     /* 悬停深紫 */
  --button-hover-end: #311b92;       /* 悬停特深紫 */
  --content-background: #ede7f6;    /* 淡紫内容区 */
  --input-background: #f3e5f5;      /* 紫输入框 */
  --input-border: #d1c4e9;          /* 浅紫边框 */
  --input-focus-border: #9c27b0;    /* 聚焦亮紫 */
  --input-focus-shadow: rgba(156, 39, 176, 0.4); /* 紫光晕 */
  --text-color: #4a148c;           /* 深紫文字 */
  --label-color: #6a1b9a;          /* 中紫标签 */
  --error-color: #d32f2f;          /* 红色错误 */
  --error-background: rgba(244, 143, 177, 0.2); /* 浅红背景 */
  --link-color: #4a148c;           /* 深紫链接 */
}

/* 预设颜色变量 - 绿色主题 */
[data-theme="green"] {
  --background-start: #e8f5e9;    /* 淡绿起始 */
  --background-end: #c8e6c9;      /* 浅绿结束 */
  --card-background: #ffffff;    /* 白色卡片 */
  --card-border: rgba(76, 175, 80, 0.5); /* 绿色边框 */
  --button-background-start: #388e3c; /* 标准绿 */
  --button-background-end: #2e7d32;   /* 深绿 */
  --button-hover-start: #1b5e20;     /* 悬停墨绿 */
  --button-hover-end: #1b5e20;      /* 悬停特深绿 */
  --content-background: #f1f8e9;   /* 浅黄绿内容区 */
  --input-background: #e8f5e9;     /* 绿输入框 */
  --input-border: #c8e6c9;         /* 浅绿边框 */
  --input-focus-border: #4caf50;   /* 聚焦亮绿 */
  --input-focus-shadow: rgba(76, 175, 80, 0.4); /* 绿光晕 */
  --text-color: #1b5e20;           /* 深绿文字 */
  --label-color: #2e7d32;          /* 中绿标签 */
  --error-color: #f44336;         /* 红色错误 */
  --error-background: rgba(255, 224, 224, 0.3); /* 浅红背景 */
  --link-color: #1b5e20;           /* 深绿链接 */
}

/* 预设颜色变量 - 黄色主题 */
[data-theme="yellow"] {
  --background-start: #fffde7;    /* 淡黄起始 */
  --background-end: #fff9c4;      /* 浅黄结束 */
  --card-background: #ffffff;    /* 白色卡片 */
  --card-border: rgba(255, 235, 59, 0.5); /* 黄色边框 */
  --button-background-start: #fbc02d; /* 标准金黄 */
  --button-background-end: #f9a825;   /* 深黄 */
  --button-hover-start: #f57f17;     /* 悬停橙黄 */
  --button-hover-end: #ef6c00;      /* 悬停深橙黄 */
  --content-background: #fff8e1;   /* 浅奶油黄 */
  --input-background: #fffde7;     /* 黄输入框 */
  --input-border: #fff9c4;         /* 浅黄边框 */
  --input-focus-border: #ffd600;   /* 聚焦亮黄 */
  --input-focus-shadow: rgba(255, 214, 0, 0.4); /* 黄光晕 */
  --text-color: #333333;           /* 深灰文字（黄需深色） */
  --label-color: #666666;          /* 中灰标签 */
  --error-color: #ff6347;         /* 橙色错误 */
  --error-background: rgba(255, 224, 178, 0.5); /* 浅橙背景 */
  --link-color: #f57f17;           /* 橙黄链接 */
}

/* 预设颜色变量 - 橙色主题 */
[data-theme="orange"] {
  --background-start: #fff3e0;    /* 淡橙起始 */
  --background-end: #ffe0b2;      /* 浅橙结束 */
  --card-background: #ffffff;    /* 白色卡片 */
  --card-border: rgba(255, 152, 0, 0.5); /* 橙色边框 */
  --button-background-start: #f57c00; /* 标准橙 */
  --button-background-end: #ef6c00;   /* 深橙 */
  --button-hover-start: #e65100;     /* 悬停血橙 */
  --button-hover-end: #d84315;      /* 悬停深橙红 */
  --content-background: #fff8e1;   /* 浅杏色 */
  --input-background: #fff3e0;     /* 橙输入框 */
  --input-border: #ffe0b2;         /* 浅橙边框 */
  --input-focus-border: #ff9800;   /* 聚焦亮橙 */
  --input-focus-shadow: rgba(255, 152, 0, 0.4); /* 橙光晕 */
  --text-color: #333333;           /* 深灰文字 */
  --label-color: #666666;          /* 中灰标签 */
  --error-color: #ff6347;         /* 红色错误 */
  --error-background: rgba(255, 224, 178, 0.5); /* 浅橙背景 */
  --link-color: #e65100;           /* 深橙链接 */
}

/* 预设颜色变量 - 红色主题 */
[data-theme="red"] {
  --background-start: #ffebee;    /* 淡红起始 */
  --background-end: #ffcdd2;      /* 浅红结束 */
  --card-background: #ffffff;    /* 白色卡片 */
  --card-border: rgba(244, 67, 54, 0.5); /* 红色边框 */
  --button-background-start: #d32f2f; /* 标准红 */
  --button-background-end: #c62828;   /* 深红 */
  --button-hover-start: #b71c1c;     /* 悬停暗红 */
  --button-hover-end: #a00000;      /* 悬停特暗红 */
  --content-background: #ffcdd2;   /* 浅粉红 */
  --input-background: #ffebee;     /* 红输入框 */
  --input-border: #ffcdd2;         /* 浅红边框 */
  --input-focus-border: #f44336;   /* 聚焦亮红 */
  --input-focus-shadow: rgba(244, 67, 54, 0.4); /* 红光晕 */
  --text-color: #333333;           /* 深灰文字 */
  --label-color: #666666;          /* 中灰标签 */
  --error-color: #b71c1c;         /* 特暗红错误 */
  --error-background: rgba(255, 183, 177, 0.5); /* 浅红背景 */
  --link-color: #b71c1c;           /* 暗红链接 */
}

/* 预设颜色变量 - 粉色主题 */
[data-theme="pink"] {
  --background-start: #fce4ec; /* 浅粉背景渐变起始色（比原方案稍深） */
  --background-end: #f8bbd0; /* 浅粉背景渐变结束色（增加饱和度） */
  --card-background: #ffffff; /* 保持白色卡片背景 */
  --card-border: rgba(251, 192, 213, 0.7); /* 提高边框透明度增强对比 */
  --button-background-start: #e91e63; /* 更深的粉红色按钮起始色 */
  --button-background-end: #c2185b; /* 更深的粉红色按钮结束色 */
  --button-hover-start: #ad1457; /* 悬停时使用更深色调 */
  --button-hover-end: #880e4f;   /* 悬停结束色增强视觉反馈 */
  --content-background: #f3e5f5; /* 淡紫色内容区替代浅灰 */
  --input-background: #ede7f6;   /* 淡紫输入框背景 */
  --input-border: #d1c4e9;       /* 浅紫色输入框边框 */
  --input-focus-border: #ab47bc; /* 聚焦时使用明显紫色 */
  --input-focus-shadow: rgba(186, 104, 200, 0.4); /* 增强阴影效果 */
  --text-color: #4a148c;        /* 深紫色文字提升可读性 */
  --label-color: #7b1fa2;       /* 中紫色标签文字 */
  --error-color: #d32f2f;       /* 更醒目的红色错误提示 */
  --error-background: rgba(244, 143, 177, 0.2); /* 浅红错误背景 */
  --error-border: rgba(213, 0, 0, 0.3);         /* 强化错误边框 */
  --link-color: #880e4f;        /* 深粉链接颜色 */
}

/* 预设颜色变量 - 淡蓝色主题 */
[data-theme="lightblue"] {
  --background-start: #e3f2fd; /* 浅蓝背景渐变起始色 */
  --background-end: #bbdefb;   /* 浅蓝背景渐变结束色 */
  --card-background: #ffffff;  /* 保持白色卡片背景 */
  --card-border: rgba(135, 206, 250, 0.6); /* 天蓝色卡片边框 */
  --button-background-start: #1976d2; /* 标准蓝色按钮起始色 */
  --button-background-end: #1565c0;   /* 深蓝色按钮结束色 */
  --button-hover-start: #0d47a1;     /* 悬停深蓝色 */
  --button-hover-end: #084298;       /* 悬停结束色 */
  --content-background: #e8f5e9;     /* 淡绿色内容区形成对比 */
  --input-background: #e8f5fe;      /* 淡蓝输入框背景 */
  --input-border: #90caf9;          /* 浅蓝输入框边框 */
  --input-focus-border: #2196f3;    /* 聚焦亮蓝色 */
  --input-focus-shadow: rgba(33, 150, 243, 0.4); /* 蓝色聚焦阴影 */
  --text-color: #1565c0;           /* 深蓝色主文字 */
  --label-color: #1976d2;          /* 中蓝色标签文字 */
  --error-color: #f44336;          /* 标准红色错误提示 */
  --error-background: rgba(244, 67, 54, 0.1); /* 浅红错误背景 */
  --error-border: rgba(244, 67, 54, 0.3);     /* 红色错误边框 */
  --link-color: #0d47a1;           /* 深蓝色链接 */
}


* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: linear-gradient(135deg, var(--background-start), var(--background-end));
  color: var(--text-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.card {
  width: 100%;
  max-width: 360px;
  background: var(--card-background);
  backdrop-filter: blur(10px);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 75vh;
  overflow-y: auto;
  scroll-behavior: auto;
}
.toggle-button {
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, var(--button-background-start), var(--button-background-end));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
  margin-bottom: 6px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.toggle-button::after {
  content: "▼";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.toggle-button:hover {
  background: linear-gradient(to right, var(--button-hover-start), var(--button-hover-end));
  transform: translateY(-2px);
}
.content {
  display: none;
  background: var(--content-background);
  border-radius: 8px;
  padding: 8px;
  margin-top: 0px;
}
h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .5px;
}
h3 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
label {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--label-color);
}
input[type="text"], input[type="email"] {
  width: 100%;
  font-size: 18px;
  padding: 14px 12px;
  background: var(--input-background);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  color: var(--text-color);
  transition: border-color 0.3s;
  margin-bottom: 12px;
}
input[type="text"]:focus, input[type="email"]:focus {
  outline: none;
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 3px var(--input-focus-shadow);
}
button {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to right, var(--button-background-start), var(--button-background-end));
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all .3s;
}
button:hover {
  background: linear-gradient(to right, var(--button-hover-start), var(--button-hover-end));
  transform: translateY(-2px);
}
.result {
  margin-top: 12px;
  padding: 14px 12px;
  background: var(--content-background);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-color);
  min-height: 50px;
  line-height: normal;
  word-break: break-all;
  flex-shrink: 0;
  width: 100%;
}
.error {
  color: var(--error-color);
  border: 1px solid var(--error-border);
  background: var(--error-background);
}
.info {
  margin-top: 12px;
  padding: 12px;
  font-size: 13px;
  color: var(--label-color);
}
.info a {
  color: var(--link-color);
  text-decoration: underline;
}
details.donate {
  margin-top: 12px;
  font-size: 13px;
}
details.donate summary {
  cursor: pointer;
  color: var(--label-color);
}
details.donate[open] .qr-row {
  margin-top: 8px;
}
.donate-section h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--text-color);
  text-align: center;
}
.footer {
  width: 100%;
  text-align: center;
  padding: 12px 0;
  background: var(--content-background);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  color: var(--text-color);
  font-size: 14px;
  font-weight: 500;
  position: fixed;
  bottom: 0;
  left: 0;
  margin-top: 24px;
}
.footer a {
  color: var(--link-color);
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}
.qr-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.qr-row img {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  background: #fff;
  padding: 4px;
}
@media (max-width: 480px) {
  h2 {
    font-size: 20px;
  }
  button {
    padding: 14px;
    font-size: 17px;
  }
}