/* ============================================================
   秒创AI · 设计语言强化层（design-tokens.css）
   —— 全站统一的视觉升级：更醒目、更有冲击力、更精致。
   只覆盖颜色/圆角/阴影/字体/动效等视觉层，不改任何功能、ID、事件。

   设计原则：
   1. 品牌双主色：深海军蓝(#061120) × 亮薄荷绿(#3ce6a8)，对比更强。
   2. 强调色更"冲"：主按钮用薄荷绿渐变 + 更实的投影，一眼锁定。
   3. 圆角统一节奏：卡片 20px、控件 12px、胶囊 999px。
   4. 阴影分层：悬浮/卡片/主按钮三级，营造层次与立体感。
   ============================================================ */

:root {
  /* 品牌色强化 */
  --ink: #08131f;
  --navy: #061120;
  --navy-2: #0c2238;
  --mint: #3ce6a8;
  --mint-bright: #55f0b4;
  --mint-dark: #0fa978;
  --mint-deep: #0a7d5a;
  --coral: #ff6a58;
  --violet: #7c5cff;
  --amber: #ffb020;

  /* 中性色 */
  --muted: #5f6f7d;
  --muted-2: #8594a1;
  --line: #d8e2e9;
  --line-strong: #c3d2db;
  --paper: #f2f6f8;
  --white: #ffffff;

  /* 圆角节奏 */
  --r-card: 20px;
  --r-panel: 16px;
  --r-control: 12px;
  --r-pill: 999px;

  /* 阴影分层（更有冲击力的立体层次） */
  --shadow-sm: 0 2px 8px rgba(6, 17, 32, .06);
  --shadow-md: 0 10px 30px rgba(6, 17, 32, .09);
  --shadow-lg: 0 24px 60px rgba(6, 17, 32, .14);
  --shadow-brand: 0 12px 28px rgba(15, 169, 120, .32);
  --shadow-glow: 0 0 0 4px rgba(60, 230, 168, .18);

  /* 动效 */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============ 主按钮：更醒目、更有冲击力 ============ */
.primary-button {
  background: linear-gradient(135deg, var(--mint-bright) 0%, var(--mint) 45%, var(--mint-dark) 100%);
  color: #04180f;
  font-weight: 800;
  letter-spacing: .01em;
  border: none;
  box-shadow: var(--shadow-brand);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 169, 120, .42);
  filter: brightness(1.03);
}
.primary-button:active {
  transform: translateY(0);
  box-shadow: var(--shadow-brand);
}

/* ============ 顶栏：更强的品牌存在感 ============ */
.topbar {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  box-shadow: 0 6px 24px rgba(6, 17, 32, .28);
}

/* ============ 卡片：更精致的层次 ============ */
.creator-card,
.activity-card,
.wm-card,
.wm-side {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(200, 216, 226, .9);
}

/* 区块序号徽章：更有品牌冲击力 */
.section-label > span {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: var(--mint-bright);
  box-shadow: 0 4px 10px rgba(6, 17, 32, .22);
}

/* ============ 功能选择卡片：选中态更醒目 ============ */
.inline-workflow-card {
  border-radius: var(--r-panel);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.inline-workflow-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.inline-workflow-card.active {
  border-color: var(--mint-dark);
  background: linear-gradient(135deg, #ecfdf6 0%, #f7fffb 100%);
  box-shadow: var(--shadow-glow);
}

/* ============ 上传卡片：拖拽区更有存在感 ============ */
.upload-card {
  border-color: var(--line-strong);
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.upload-card:hover,
.upload-card.dragover {
  border-color: var(--mint-dark);
  background: #f3fdf9;
}

/* ============ 提交栏（开始创作）：强化主操作区 ============ */
.submit-row {
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-md);
}
.submit-row .primary-button {
  font-size: 16px;
}

/* ============ 落地页标题：更有冲击力 ============ */
.landing-title {
  letter-spacing: -.02em;
}
.landing-title em {
  color: var(--mint-deep);
  background: linear-gradient(120deg, var(--mint-deep) 0%, var(--mint-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============ 页面标题：统一更醒目 ============ */
.page-head h1,
.workbench-head h1,
.invite-hero h1 {
  letter-spacing: -.02em;
}

/* ============ 底部移动导航：更强品牌感 ============ */
.mobile-nav {
  background: rgba(6, 17, 32, .98);
  backdrop-filter: blur(12px);
  box-shadow: 0 -6px 24px rgba(6, 17, 32, .18);
}
.mobile-nav button.active {
  color: var(--mint-bright);
}

/* ============ 创作账号卡片：手动「选用」指定账号 ============ */
.account-card .account-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.account-card .account-actions button {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #126f59;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.account-card .account-actions button:hover {
  border-color: var(--mint-dark);
  background: #f2fcf9;
}
.account-card .account-actions button[data-rh-logout] {
  color: #9a6b6b;
}
.account-card .account-actions button[data-rh-logout]:hover {
  border-color: #e2b8b8;
  background: #fdf5f5;
  color: #b4232a;
}
/* 被手动选中的账号卡片：高亮边框，一眼看出「本次用这个」 */
.account-card.manual {
  border-color: var(--mint-dark);
  background: linear-gradient(135deg, #ecfdf6 0%, #f7fffb 100%);
  box-shadow: var(--shadow-glow);
}
.account-card.manual .account-actions button[data-rh-manual] {
  background: var(--mint-dark);
  border-color: var(--mint-dark);
  color: #fff;
}

/* ============ 会员标志 ============ */
/* 顶部账户按钮：会员时金色皇冠，醒目提示 */
.account-button.is-member {
  background: linear-gradient(135deg, #ffe9b8 0%, #ffd06b 100%);
  border-color: #f0b429;
  color: #6b4a00;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(240, 180, 41, .5);
}
/* 账户面板里的会员徽章 */
.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 16px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, #fff7e2 0%, #ffe3a3 100%);
  border: 1px solid #f2c14e;
  color: #7a5200;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(240, 180, 41, .35);
}
.member-badge .member-crown {
  font-size: 16px;
  line-height: 1;
}

/* ============ 充值支付方式选择 ============ */
.pay-method-row {
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
}
.pay-method {
  flex: 1;
  padding: 10px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.pay-method.selected {
  border-color: var(--mint-dark);
  background: linear-gradient(135deg, #ecfdf6 0%, #f7fffb 100%);
  color: #126f59;
  box-shadow: var(--shadow-glow);
}