/* ========== 菘蓝社 · 共享样式 v2 ========== */

:root {
  --主色: #6C5CE7;
  --主色悬停: #5A4BD1;
  --主色浅: rgba(108,92,231,0.12);
  --主色发光: rgba(108,92,231,0.35);
  --成功色: #00B894;
  --成功悬停: #00A381;
  --成功浅: rgba(0,184,148,0.08);
  --危险色: #FF4757;
  --危险悬停: #E03848;
  --危险浅: rgba(255,71,87,0.1);
  --警告色: #FFA502;
  --警告浅: rgba(255,165,2,0.1);
  --紫色: #A78BFA;
  --紫色悬停: #8B74F0;
  --青绿: #00CEC9;

  --背景色: #0F0F1A;
  --卡片背景: #1E1E2E;
  --卡片半透明: rgba(30,30,46,0.85);
  --卡片背景2: #1E1E2E;

  --文字主: #E8E8F0;
  --文字标题: #FFFFFF;
  --文字次: #A0A0B8;
  --文字标签: #A0A0B8;
  --文字弱: #7A8BA0;

  --边框: #2D2D4A;
  --边框浅: #1E1E2E;
  --边框深: #3D4F70;

  --输入背景: #16162A;

  --阴影卡: 0 2px 16px rgba(0,0,0,0.3);
  --阴影卡悬停: 0 4px 24px rgba(0,0,0,0.4);
  --阴影弹窗: 0 8px 40px rgba(0,0,0,0.5);
  --阴影按钮: 0 4px 24px rgba(108,92,231,0.35);

  --圆角小: 8px;
  --圆角中: 12px;
  --圆角大: 16px;
  --圆角特大: 20px;
  --圆角巨大: 24px;
  --圆角药丸: 50px;
  --圆角药丸次: 40px;

  --标签背景: #1E273D;
  --进度背景: #1A2240;
  --拖拽高亮: rgba(108,92,231,0.06);
  --悬停高亮: rgba(108,92,231,0.08);
  --选中高亮: rgba(108,92,231,0.12);
  --缩略图背景: #1A2240;

  --tool-btn-bg: #1E273D;
  --tool-btn-text: #FFFFFF;
  --donate: #E67E22;
  --donate-hover: #F08C34;
  --upload-dashed: #6C5CE7;
  --渐变主: linear-gradient(135deg, #6C5CE7, #a855f7);

  /* ===== 字体排版系统 Type Scale ===== */
  --字体-h1: 48px;
  --字体-h1-行高: 1.15;
  --字体-h1-字重: 900;
  --字体-h2: 36px;
  --字体-h2-行高: 1.2;
  --字体-h2-字重: 900;
  --字体-h3: 24px;
  --字体-h3-行高: 1.3;
  --字体-h3-字重: 700;
  --字体-h4: 20px;
  --字体-h4-行高: 1.35;
  --字体-h4-字重: 700;
  --字体-正文: 16px;
  --字体-正文-行高: 1.6;
  --字体-正文-字重: 400;
  --字体-小: 14px;
  --字体-小-行高: 1.5;
  --字体-小-字重: 400;
  --字体-微: 12px;
  --字体-微-行高: 1.4;
  --字体-微-字重: 400;
  --字距-宽: 0.05em;
  --字距-中: 0.02em;
  --字距-窄: 0;

  /* ===== 按钮系统层级（药丸形圆角） ===== */
  --按钮-主高度: 52px;
  --按钮-主内边距: 16px 48px;
  --按钮-主圆角: var(--圆角药丸);
  --按钮-主字重: 700;
  --按钮-次高度: 44px;
  --按钮-次内边距: 10px 32px;
  --按钮-次圆角: var(--圆角药丸次);
  --按钮-次字重: 600;
  --按钮-小高度: 36px;
  --按钮-小内边距: 7px 20px;
  --按钮-小圆角: var(--圆角药丸次);
  --按钮-小字重: 600;
  --按钮-微高度: 30px;
  --按钮-微内边距: 5px 14px;
  --按钮-微圆角: var(--圆角特大);
  --按钮-微字重: 500;
  --按钮-悬浮位移: -3px;
  --按钮-按下缩放: 0.97;

  /* ===== 图片/参考图布局 ===== */
  --参考图圆角: 16px;
  --参考图阴影: 0 4px 20px rgba(0,0,0,0.25);
  --参考图悬停阴影: 0 8px 40px rgba(108,92,231,0.25);
  --参考图间距: 16px;
  --参考图边框: 1px solid var(--边框);
  --参考图悬停边框: 1px solid var(--主色);
  --上传区最小高度: 160px;
  --预览图最大高度: 280px;

  /* ===== 字体排版增强变量 ===== */
  --字体-特大: 56px;
  --字体-特大-行高: 1.1;
  --字体-特大-字重: 900;
  --字体-展示: 72px;
  --字体-展示-行高: 1.05;
  --字体-展示-字重: 900;
  --字体-正文-字距: 0.015em;
  --字体-英文: 'Inter', sans-serif;
  --字体-中文: 'PingFang SC','Microsoft YaHei',sans-serif;
  --行高-紧凑: 1.3;
  --行高-舒适: 1.8;

  /* ===== 粒子层变量 ===== */
  --粒子-数量: 300;
  --粒子-z-index: 1;
  --粒子-颜色: var(--主色);

  /* ===== 动效参数 ===== */
  --动效-快速: 0.2s;
  --动效-中速: 0.35s;
  --动效-慢速: 0.5s;
  --动效-弹性: cubic-bezier(0.25, 0.8, 0.25, 1.2);
  --动效-弹入: cubic-bezier(0.22, 0.61, 0.36, 1);
  --动效-默认: cubic-bezier(0.25, 0.8, 0.25, 1.2);
  --动效-呼吸时长: 3s;
  --动效-光晕时长: 8s;
  --动效-网格漂移时长: 20s;
}

:root:not([data-theme]) {
  --背景色: #F5F7FA;
  --卡片背景: #FFFFFF;
  --卡片半透明: rgba(255,255,255,0.85);
  --卡片背景2: #FFFFFF;
  --文字主: #1A1A2E;
  --文字标题: #1A1A2E;
  --文字次: #667085;
  --文字标签: #667085;
  --文字弱: #98A2B3;
  --边框: #D0D5DD;
  --边框浅: #E4E7EC;
  --边框深: #B0B7C3;
  --输入背景: #F0F2F5;
  --标签背景: #E8ECF1;
  --进度背景: #DEE2E8;
  --缩略图背景: #E8ECF1;
  --tool-btn-bg: #E8ECF1;
  --tool-btn-text: #1A1A2E;
  --阴影卡: 0 2px 16px rgba(0,0,0,0.08), 0 0 40px rgba(108,92,231,0.02);
  --阴影卡悬停: 0 4px 24px rgba(0,0,0,0.12), 0 0 40px rgba(108,92,231,0.04);
  --阴影弹窗: 0 8px 40px rgba(0,0,0,0.15), 0 0 40px rgba(108,92,231,0.04);
  --阴影按钮: 0 4px 24px rgba(108,92,231,0.35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 20% 10%, rgba(108,92,231,0.06) 0%, transparent 50%),
              radial-gradient(ellipse 60% 50% at 80% 30%, rgba(0,206,201,0.05) 0%, transparent 50%),
              radial-gradient(ellipse 70% 50% at 50% 70%, rgba(168,85,247,0.04) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image: linear-gradient(rgba(108,92,231,0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(108,92,231,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none; z-index: 0;
  opacity: 0.4;
}

.容器 { position: relative; max-width: 1100px; margin: 0 auto; padding: 20px; }

@keyframes 滑入上 { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes 淡入 { from { opacity: 0; } to { opacity: 1; } }
@keyframes 弹入 { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes 脉冲 { 0%,100% { box-shadow: 0 0 0 0 rgba(108,92,231,0.4); } 50% { box-shadow: 0 0 0 12px rgba(108,92,231,0); } }
@keyframes 浮动 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes 呼吸 { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes 背景呼吸 { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes 网格漂移 { 0% { transform: translate(0,0); } 100% { transform: translate(60px,60px); } }
@keyframes 光泽掠过 { 0% { transform: translateX(-100%) rotate(25deg); } 100% { transform: translateX(200%) rotate(25deg); } }
@keyframes 缩放弹入 { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes 底部渐变条 { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.滑入动画 { animation: 滑入上 0.5s cubic-bezier(0.25,0.8,0.25,1.2) both; }
.滑入 { animation: 滑入上 0.5s cubic-bezier(0.25,0.8,0.25,1.2) both; }
.延1 { animation-delay: 0.05s; }
.延2 { animation-delay: 0.10s; }
.延3 { animation-delay: 0.15s; }
.延4 { animation-delay: 0.20s; }
.延5 { animation-delay: 0.25s; }
.延迟1 { animation-delay: 0.05s; }
.延迟2 { animation-delay: 0.1s; }
.延迟3 { animation-delay: 0.15s; }
.延迟4 { animation-delay: 0.2s; }
.延迟5 { animation-delay: 0.25s; }

/* ========== 顶部导航栏（全局统一） ========== */
.顶部栏 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  background: var(--卡片半透明);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--边框);
  border-radius: var(--圆角特大);
  margin-bottom: 22px;
  box-shadow: var(--阴影卡);
  flex-wrap: wrap; gap: 10px;
  position: relative; z-index: 100;
  overflow: hidden;
}
.顶部栏::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--主色), var(--青绿), var(--紫色), var(--主色));
  background-size: 200% 100%;
  animation: 底部渐变条 4s linear infinite;
}
.顶部-左侧 { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.顶部-标题组 { display: flex; flex-direction: column; min-width: 0; }
.顶部-标题 { font-size: 1.1rem; font-weight: 700; color: var(--文字标题); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.顶部-副标题 { font-size: 0.75rem; color: var(--文字弱); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.顶部-密码区 { display: flex; align-items: center; gap: 4px; max-width: 220px; min-width: 160px; }
.密码输入 {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--边框); border-radius: var(--圆角小);
  font-size: 0.85rem; background: var(--输入背景); color: var(--文字主);
  transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1.2); font-family: inherit;
}
.密码输入:focus { outline: none; border-color: var(--主色); box-shadow: 0 0 0 3px var(--主色浅); }
.顶部-右侧 { display: flex; align-items: center; gap: 6px; flex-shrink: 0; position: relative; }

/* 三点菜单 */
.三点菜单按钮 {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--tool-btn-bg); color: var(--tool-btn-text);
  border: 1px solid var(--边框); font-size: 1.2rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2); font-family: inherit;
}
.三点菜单按钮:hover { background: var(--主色浅); border-color: var(--主色); transform: translateY(-1px); }
.三点菜单按钮:active { transform: scale(0.95); }
.三点下拉 {
  display: none; position: absolute; top: 48px; right: 0;
  background: var(--卡片背景); border: 1px solid var(--边框);
  border-radius: var(--圆角中); box-shadow: var(--阴影弹窗);
  min-width: 190px; z-index: 99999; padding: 5px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.三点下拉.显示 { display: block; }
.三点下拉 a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: none; background: transparent;
  color: var(--文字主); font-size: 0.88rem;
  text-decoration: none; cursor: pointer;
  border-radius: var(--圆角小); transition: all 0.2s cubic-bezier(0.25,0.8,0.25,1.2);
  font-family: inherit; text-align: left;
}
.三点下拉 a:hover { background: var(--主色浅); color: var(--主色); }

/* ========== Logo ========== */
.Logo图 { height: 38px; width: auto; border-radius: 8px; }

/* ========== 回首页按钮（保留兼容） ========== */
.回首页按钮 {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--卡片背景); color: var(--文字主);
  padding: 10px 20px; border-radius: 40px;
  text-decoration: none; font-weight: 500; font-size: 0.95rem;
  transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2); box-shadow: var(--阴影卡);
  border: 1px solid var(--边框浅);
}
.回首页按钮:hover { transform: translateY(-2px); box-shadow: var(--阴影卡悬停); border-color: var(--主色); }

/* ========== 主卡片 ========== */
.主卡片 {
  background: var(--卡片半透明);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--边框);
  border-radius: var(--圆角特大);
  padding: 24px; margin-bottom: 20px;
  box-shadow: var(--阴影卡悬停);
  position: relative; z-index: 1;
  overflow: hidden;
  transition: border-color 0.4s cubic-bezier(0.25,0.8,0.25,1.2), box-shadow 0.4s cubic-bezier(0.25,0.8,0.25,1.2);
}
.主卡片::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 0%, rgba(108,92,231,0.08) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s cubic-bezier(0.25,0.8,0.25,1.2);
  pointer-events: none; z-index: 0;
}
.主卡片:hover { border-color: var(--主色); box-shadow: 0 4px 30px rgba(108,92,231,0.18); }
.主卡片:hover::before { opacity: 1; }
.区标题 { font-size: 1rem; font-weight: 600; color: var(--文字标题); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }

/* ========== 卡片（保留兼容） ========== */
.卡片 {
  background: var(--卡片半透明);
  border-radius: var(--圆角特大);
  box-shadow: var(--阴影卡);
  padding: 24px; margin-bottom: 24px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--边框);
  transition: border-color 0.4s cubic-bezier(0.25,0.8,0.25,1.2), box-shadow 0.4s cubic-bezier(0.25,0.8,0.25,1.2);
  position: relative; z-index: 1;
  overflow: hidden;
}
.卡片::before {
  content: '';
  position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 50% 0%, rgba(108,92,231,0.06) 0%, transparent 60%);
  opacity: 0; transition: opacity 0.5s cubic-bezier(0.25,0.8,0.25,1.2);
  pointer-events: none; z-index: 0;
}
.卡片:hover { border-color: var(--主色); box-shadow: 0 4px 30px rgba(108,92,231,0.15); }
.卡片:hover::before { opacity: 1; }
h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 0.2rem; color: var(--文字标题); display: flex; align-items: center; gap: 8px; letter-spacing: -0.01em; }
.副标题 { color: var(--文字次); margin-bottom: 1.5rem; border-left: 3px solid var(--主色); padding-left: 0.8rem; font-size: 0.9rem; line-height: 1.5; }

/* ========== 表单元素 ========== */
.表单组 { margin-bottom: 14px; }
.表单标签 { font-weight: 500; display: block; margin-bottom: 5px; color: var(--文字标签); font-size: 0.88rem; }
.表单输入, .表单下拉, .表单文本区 {
  width: 100%; padding: 10px 13px;
  border: 1px solid var(--边框); border-radius: var(--圆角小);
  font-size: 0.9rem; transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1.2);
  background: var(--输入背景); color: var(--文字主);
  font-family: inherit;
}
.表单输入:focus, .表单下拉:focus, .表单文本区:focus { outline: none; border-color: var(--主色); box-shadow: 0 0 0 3px var(--主色浅); }
.表单文本区 { resize: vertical; min-height: 70px; }
.表单提示 { font-size: 0.78rem; color: var(--文字弱); margin-top: 3px; }

/* 保留兼容 */
输入框, 下拉框, 文本框 {
  width: 100%; padding: 10px 13px; border: 1px solid var(--边框);
  border-radius: var(--圆角中); font-size: 0.9rem; transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1.2);
  background: var(--输入背景); color: var(--文字主); font-family: inherit;
}
输入框:focus, 下拉框:focus, 文本框:focus { outline: none; border-color: var(--主色); box-shadow: 0 0 0 3px var(--主色浅); }

/* ========== 按钮 ========== */
.按钮 {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 22px; font-size: 0.9rem; font-weight: 600;
  border: none; border-radius: 40px; cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2); min-height: 44px;
  font-family: inherit; line-height: 1.2;
  position: relative; overflow: hidden;
}
.按钮::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: translateX(-100%) rotate(25deg);
  pointer-events: none;
}
.按钮:hover::after { animation: 光泽掠过 0.8s cubic-bezier(0.25,0.8,0.25,1.2); }
.按钮:hover:not(:disabled) { transform: translateY(-2px); }
.按钮:active:not(:disabled) { transform: scale(0.97); }
.按钮:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.按钮-主色 {
  background: linear-gradient(135deg, #6C5CE7, #a855f7);
  color: #fff;
  box-shadow: var(--阴影按钮);
  animation: 按钮呼吸阴影 3s ease-in-out infinite;
}
@keyframes 按钮呼吸阴影 {
  0%,100% { box-shadow: 0 4px 24px rgba(108,92,231,0.35); }
  50% { box-shadow: 0 4px 36px rgba(108,92,231,0.55); }
}
.按钮-主色:hover:not(:disabled) { box-shadow: 0 6px 30px rgba(108,92,231,0.55); transform: translateY(-2px) scale(1.02); }
.按钮-成功 { background: linear-gradient(135deg, var(--成功色), #00d2a0); color: #fff; box-shadow: 0 4px 14px rgba(0,184,148,0.35); animation: 按钮呼吸阴影绿 3s ease-in-out infinite; }
.按钮-成功:hover:not(:disabled) { box-shadow: 0 6px 30px rgba(0,184,148,0.55); transform: translateY(-2px) scale(1.02); }
@keyframes 按钮呼吸阴影绿 {
  0%,100% { box-shadow: 0 4px 24px rgba(0,184,148,0.35); }
  50% { box-shadow: 0 4px 36px rgba(0,184,148,0.55); }
}
.按钮-危险 { background: var(--危险色); color: #fff; box-shadow: 0 4px 14px rgba(255,71,87,0.25); }
.按钮-危险:hover:not(:disabled) { background: var(--危险悬停); }
.按钮-紫色 { background: var(--紫色); color: #fff; }
.按钮-紫色:hover:not(:disabled) { background: var(--紫色悬停); }
.按钮-灰 { background: var(--文字次); color: #fff; }
.按钮-灰:hover:not(:disabled) { background: #555; }
.按钮-轮廓 {
  background: transparent; border: 2px solid var(--边框);
  color: var(--文字主); box-shadow: none;
  transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
}
.按钮-轮廓:hover:not(:disabled) {
  border-color: var(--主色);
  background: var(--悬停高亮);
  box-shadow: 0 0 20px rgba(108,92,231,0.15), inset 0 0 20px rgba(108,92,231,0.06);
  color: var(--主色);
}

/* ===== 按钮交互增强 ===== */
@keyframes 按钮加载点 { 0%,80%,100% { opacity: 0; } 40% { opacity: 1; } }
.按钮.加载中, .主按钮.加载中, .次按钮.加载中 {
  pointer-events: none; position: relative;
}
.按钮.加载中::before, .主按钮.加载中::before, .次按钮.加载中::before {
  content: ''; display: inline-block; width: 6px; height: 6px;
  margin-right: 6px; border-radius: 50%;
  background: currentColor;
  animation: 按钮加载点 1.4s ease-in-out infinite both;
}
.按钮.加载中::after, .主按钮.加载中::after, .次按钮.加载中::after {
  display: none;
}
.按钮.加载中 .按钮文本, .主按钮.加载中 .按钮文本, .次按钮.加载中 .按钮文本 {
  opacity: 0.7;
}

@keyframes 按钮成功脉冲 {
  0% { box-shadow: 0 0 0 0 rgba(0,184,148,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(0,184,148,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); }
}
.按钮.操作成功, .主按钮.操作成功, .次按钮.操作成功 {
  background: var(--成功色) !important;
  animation: 按钮成功脉冲 0.8s ease-out;
}

@keyframes 按钮失败抖动 {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.按钮.操作失败, .主按钮.操作失败, .次按钮.操作失败 {
  background: var(--危险色) !important;
  animation: 按钮失败抖动 0.5s ease-out;
}

/* ===== 参考图3D倾斜效果 ===== */
.参考图容器 {
  perspective: 1000px;
  overflow: hidden;
}
.参考图容器 img, .参考图容器 .参考图 {
  transition: transform 0.5s cubic-bezier(0.25,0.8,0.25,1.2), box-shadow 0.5s cubic-bezier(0.25,0.8,0.25,1.2);
  will-change: transform;
}
.参考图容器:hover img, .参考图容器:hover .参考图 {
  box-shadow: 0 8px 40px rgba(108,92,231,0.25);
}

.主按钮 {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 28px;
  font-size: 1.05rem; font-weight: 600;
  border: none; border-radius: 40px; cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25,0.8,0.25,1.2); color: #fff;
  background: linear-gradient(135deg, var(--主色), var(--紫色));
  box-shadow: var(--阴影按钮); min-height: 48px; font-family: inherit;
  position: relative; overflow: hidden;
}
.主按钮::after {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transform: translateX(-100%) rotate(25deg);
  pointer-events: none;
}
.主按钮:hover::after { animation: 光泽掠过 0.8s cubic-bezier(0.25,0.8,0.25,1.2); }
.主按钮:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 32px rgba(108,92,231,0.50); }
.主按钮:active:not(:disabled) { transform: scale(0.97); }
.主按钮:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.次按钮 {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px 18px; font-size: 0.85rem; font-weight: 500;
  border: 1px solid var(--边框); border-radius: 40px;
  cursor: pointer; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
  background: var(--输入背景); color: var(--文字主);
  font-family: inherit; min-height: 44px;
}
.次按钮:hover:not(:disabled) { border-color: var(--主色); background: var(--主色浅); transform: translateY(-1px); }
.次按钮:active:not(:disabled) { transform: scale(0.96); }
.次按钮:disabled { opacity: 0.45; cursor: not-allowed; }
.次按钮-辅助 { color: var(--成功色); border-color: var(--成功色); }
.次按钮-辅助:hover:not(:disabled) { background: var(--成功浅); }

/* ========== 标签页 ========== */
.标签栏 { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.标签 {
  padding: 8px 20px; background: var(--标签背景); border-radius: 40px;
  font-weight: 500; cursor: pointer; transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1.2);
  color: var(--文字主); border: none; font-size: 0.9rem; font-family: inherit;
}
.标签:hover { background: var(--边框); }
.标签.活跃 { background: var(--主色); color: #fff; box-shadow: 0 2px 10px rgba(108,92,231,0.3); }

/* ========== 弹窗 ========== */
.弹窗遮罩 {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
  z-index: 99997; animation: 淡入 0.25s cubic-bezier(0.25,0.8,0.25,1.2);
}
.弹窗内容 {
  background: var(--卡片背景); padding: 28px;
  border-radius: var(--圆角巨大); max-width: 500px; width: 92%;
  max-height: 85vh; overflow-y: auto;
  box-shadow: var(--阴影弹窗);
  animation: 缩放弹入 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
  border: 1px solid var(--边框浅);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.弹窗-关闭 { float: right; font-size: 1.6rem; cursor: pointer; color: var(--文字弱); transition: all 0.25s cubic-bezier(0.25,0.8,0.25,1.2); background: none; border: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.弹窗-关闭:hover { color: var(--文字主); background: var(--悬停高亮); }

/* ========== 上传区域 ========== */
.上传区域 {
  border: 2px dashed var(--upload-dashed); border-radius: var(--圆角大);
  padding: 32px 20px; text-align: center; cursor: pointer;
  transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2); margin-bottom: 20px; background: var(--输入背景);
}
.上传区域:hover { border-color: var(--主色悬停); background: var(--拖拽高亮); }
.上传区域.拖拽中 { border-style: solid; border-color: var(--主色); background: var(--拖拽高亮); }
.上传图标 { font-size: 2.5rem; margin-bottom: 8px; }
.上传提示 { margin-top: 8px; color: var(--文字弱); font-size: 0.85rem; }

/* ========== 进度条 ========== */
.进度容器 { margin: 14px 0; background: var(--进度背景); border-radius: 40px; height: 24px; position: relative; overflow: hidden; }
.进度条 { height: 100%; background: linear-gradient(90deg, var(--主色), var(--紫色)); width: 0%; transition: width 0.4s cubic-bezier(0.25,0.8,0.25,1.2); border-radius: 40px; }
.进度文字 { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,0.25); z-index: 1; font-size: 0.85rem; }

/* ========== 弹性布局 ========== */
.弹性行 { display: flex; gap: 16px; flex-wrap: wrap; }
.弹性列 { flex: 1; min-width: 250px; }

/* ========== 徽章 ========== */
.徽章 { display: inline-block; background: var(--标签背景); padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; color: var(--文字主); font-weight: 500; }
.风险-高 { background: var(--危险色); color: #fff; display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.风险-中 { background: var(--警告色); color: #fff; display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.风险-低 { background: var(--成功色); color: #fff; display: inline-block; padding: 3px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; }
.风险-无 { background: #e8f5e9; color: #2e7d32; display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; border: 1px solid #a5d6a7; }

/* ========== 固定浮动按钮（全局统一） ========== */
.浮动按钮-左下 { position: fixed; bottom: 22px; left: 22px; z-index: 99999; }
.浮动按钮-右下 { position: fixed; bottom: 22px; right: 22px; z-index: 99999; }

/* 保留兼容 */
.固定按钮-右上 { position: fixed; top: 20px; right: 20px; z-index: 99999; display: flex; flex-direction: column; gap: 10px; }
.固定按钮-左下 { position: fixed; bottom: 20px; left: 20px; z-index: 99999; }
.固定按钮-右下 { position: fixed; bottom: 20px; right: 20px; z-index: 99999; }

/* 资助浮动按钮 */
.资助浮动按钮 {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 16px; background: var(--donate); color: #fff;
  border: none; border-radius: 40px; font-weight: 600; font-size: 0.88rem;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(230,126,34,0.30);
  transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2); min-height: 44px;
}
.资助浮动按钮:hover { background: var(--donate-hover); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(230,126,34,0.40); }

/* 主题切换浮动 */
.主题切换浮动 {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--卡片半透明); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--边框); color: var(--文字主);
  font-size: 1.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2); box-shadow: var(--阴影卡悬停);
}
.主题切换浮动:hover { transform: scale(1.1); border-color: var(--主色); box-shadow: var(--阴影弹窗); }

/* 保留兼容 */
.主题切换按钮 {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--卡片背景); color: var(--文字主);
  border: 1px solid var(--边框); font-size: 1.2rem; cursor: pointer;
  box-shadow: var(--阴影卡); display: flex; align-items: center; justify-content: center; padding: 0;
  transition: all 0.35s cubic-bezier(0.25,0.8,0.25,1.2);
}
.主题切换按钮:hover { transform: scale(1.1); box-shadow: var(--阴影卡悬停); border-color: var(--主色); }

/* 保留兼容 */
.紧急按钮 {
  background: var(--危险色); color: #fff; border: none;
  padding: 9px 16px; border-radius: var(--圆角小); font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 12px rgba(255,71,87,0.3);
  font-size: 13px; white-space: nowrap; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.紧急按钮:hover { background: var(--危险悬停); transform: translateY(-2px); }

.资助按钮 {
  background: var(--donate); color: #fff; border: none;
  padding: 9px 16px; border-radius: var(--圆角小); font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 12px rgba(230,126,34,0.3);
  font-size: 13px; white-space: nowrap; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.资助按钮:hover { background: var(--donate-hover); transform: translateY(-2px); }

.功能按钮 {
  background: var(--成功色); color: #fff; border: none;
  padding: 9px 16px; border-radius: var(--圆角小); font-weight: 600;
  font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,184,148,0.25);
  text-decoration: none; white-space: nowrap; transition: all 0.3s cubic-bezier(0.25,0.8,0.25,1.2);
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
}
.功能按钮:hover { background: var(--成功悬停); transform: translateY(-2px); }
.功能按钮-橙 { background: var(--警告色); color: #fff; }
.功能按钮-橙:hover { background: #d97706; }

/* ========== 页脚 ========== */
.页脚 { font-size: 0.8rem; color: var(--文字弱); text-align: center; margin-top: 24px; padding: 20px; line-height: 1.8; }
.页脚 a { color: var(--主色); text-decoration: none; }
.页脚 a:hover { text-decoration: underline; }

/* ========== 任务详情/查询区 ========== */
.任务详情 {
  margin-top: 18px; padding: 14px;
  background: var(--输入背景); border: 1px solid var(--边框);
  border-radius: var(--圆角中); font-family: 'SF Mono','Fira Code','Cascadia Code',monospace;
  font-size: 0.82rem; color: var(--文字主);
  white-space: pre-wrap; word-break: break-all;
  max-height: 180px; overflow-y: auto; display: none;
}
.任务详情.显示 { display: block; }

/* ========== 模态框 ========== */
.模态遮罩 {
  display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  z-index: 99998; justify-content: center; align-items: center;
}
.模态遮罩.显示 { display: flex; }
.模态容器 { width: 90%; height: 85%; background: var(--卡片背景); border-radius: var(--圆角大); padding: 18px; position: relative; box-shadow: var(--阴影弹窗); }
.模态关闭 { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; background: var(--危险色); color: #fff; border: none; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; }

/* ========== 服务说明 ========== */
.服务说明 {
  margin-top: 18px; padding: 14px;
  border: 1px solid var(--边框); border-radius: var(--圆角中);
  background: var(--输入背景);
}
.服务说明-标题 { font-weight: 600; color: var(--文字标题); margin-bottom: 6px; font-size: 0.9rem; }
.服务说明 ul { padding-left: 18px; color: var(--文字弱); font-size: 0.82rem; line-height: 1.7; }
label, 标签文字 { font-weight: 500; display: block; margin-bottom: 5px; color: var(--文字标签); }

/* ========== 滚动条 ========== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 3px; }
::-webkit-scrollbar-thumb { background: var(--主色); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--主色悬停); }
::selection { background: rgba(108,92,231,0.25); color: var(--文字标题); }

/* ========== 响应式 ========== */
@media (max-width: 768px) {
  .容器 { padding: 10px; }
  .顶部栏 { padding: 12px 14px; border-radius: var(--圆角大); }
  .顶部-左侧 { flex-direction: column; align-items: flex-start; gap: 6px; }
  .顶部-标题 { font-size: 0.95rem; }
  .顶部-密码区 { max-width: 100%; width: 100%; }
  .主卡片, .卡片 { padding: 16px; border-radius: var(--圆角大); }
  .浮动按钮-左下, .固定按钮-左下 { bottom: 14px; left: 14px; }
  .浮动按钮-右下, .固定按钮-右下 { bottom: 14px; right: 14px; }
  .资助浮动按钮, .资助按钮 { padding: 8px 14px; font-size: 0.85rem; }
  .主题切换浮动, .主题切换按钮 { width: 40px; height: 40px; font-size: 1.1rem; }
  h1 { font-size: 1.4rem; }
  .三点下拉 { right: -6px; }
}

@media (max-width: 480px) {
  .容器 { padding: 6px; }
  .顶部栏 { padding: 10px; }
  .主卡片, .卡片 { padding: 12px; }
  .三点下拉 { min-width: 160px; right: -12px; }
  .主按钮 { font-size: 0.95rem; padding: 12px 20px; }
}