:root {
  --primary: #8C5E3F; /* 胡桃木棕 */
  --primary-light: #A67D5D; /* 稍浅的胡桃木棕 */
  --primary-soft: #F5EFE8; /* 柔和的原木米色 */
  --accent: #D4A574; /* 暖金色 */

  --bg-cream: #FFFBF7; /* 奶油白 */
  --bg-soft: #F9F5F0; /* 柔和的原木米色背景 */
  --text-main: #3D2B20; /* 深胡桃木棕，用于主要文字 */
  --text-secondary: #7D6A5C; /* 柔和的棕色，用于次要文字 */
  --text-tertiary: #B8A89A; /* 浅棕色，用于辅助文字 */

  --border: #E0D8CF; /* 浅米色边框 */
  --border-light: #F0EBE5; /* 更浅的边框 */
  --success: #6A9A69; /* 柔和绿色 */
  --warning: #D4A574; /* 暖金色，同 accent */
  --danger: #D46A6A; /* 柔和红色 */

  --shadow-card: 0 4px 16px rgba(0,0,0,.06); /* 更柔和的阴影 */
  --shadow-elevated: 0 10px 30px rgba(0,0,0,.1); /* 更明显的阴影 */
}

/* 全局字体和背景 */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  background-color: var(--bg-cream);
  color: var(--text-main);
}

.app {
  background-color: var(--bg-cream);
}

/* 导航栏 */
.nav-bar {
  background-color: var(--bg-cream);
  border-bottom: 1px solid var(--border-light);
  box-shadow: none;
}

/* 欢迎页 Hero 区 */
.welcome-hero {
  background-color: var(--bg-soft);
  padding: 40px 20px;
  border-radius: 16px;
  margin: 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-mark {
  background-color: var(--primary);
  border-radius: 20px; /* 更大的圆角 */
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-cream);
  font-size: 40px;
  font-weight: bold;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); /* 略微提升的阴影 */
  margin-bottom: 24px;
}

.brand-name {
  color: var(--primary);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: 1px;
}

.brand-slogan {
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* 功能列表 */
.feature-list {
  padding: 0 20px;
  margin-top: 30px;
}

.feature-item {
  background-color: var(--bg-cream);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  border: 1px solid var(--border-light);
}

.feature-icon {
  color: var(--accent);
  font-size: 24px;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary-soft);
  border-radius: 8px;
}

.feature-text {
  color: var(--text-main);
  font-size: 16px;
  line-height: 1.5;
}

/* 按钮 */
.btn {
  border-radius: 25px; /* 更圆润的按钮 */
  padding: 12px 25px;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.2s ease-in-out;
  box-shadow: var(--shadow-card);
  border: none;
}

.btn-primary {
  background-color: var(--primary);
  color: var(--bg-cream);
  box-shadow: 0 4px 12px rgba(140, 94, 63, .2); /* 按钮特定阴影 */
}

.btn-primary:hover {
  background-color: var(--primary-light);
  box-shadow: 0 6px 18px rgba(140, 94, 63, .3);
}

.btn-secondary {
  background-color: var(--bg-soft);
  color: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: var(--shadow-card);
}

.btn-secondary:hover {
  background-color: var(--primary-soft);
  color: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  box-shadow: none;
}

.btn-ghost:hover {
  color: var(--primary);
  background-color: var(--primary-soft);
}

/* 快速标签 */
.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px;
  margin-top: 20px;
}

.quick-tag {
  background-color: var(--primary-soft);
  color: var(--text-secondary);
  border-radius: 18px;
  padding: 8px 15px;
  font-size: 14px;
  border: 1px solid var(--border);
  transition: all 0.2s ease-in-out;
}

.quick-tag:hover {
  background-color: var(--primary-light);
  color: var(--bg-cream);
  border-color: var(--primary-light);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* 结果卡片 */
.result-card, .ai-image-card {
  background-color: var(--bg-cream);
  border-radius: 16px;
  padding: 20px;
  margin: 20px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

.ai-image-card img {
  border-radius: 12px;
}

/* Tabs */
.tabs {
  border-bottom: 1px solid var(--border);
  margin: 0 20px;
}

.tab {
  color: var(--text-secondary);
  padding: 12px 0;
  margin: 0 15px;
  border-bottom: 3px solid transparent;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

.tab:hover {
  color: var(--primary-light);
}

.tab-panel {
  padding: 20px 0;
}

/* 区域标题 */
.section-title {
  color: var(--text-main);
  font-size: 22px;
  font-weight: 600;
  margin: 30px 20px 20px;
}

/* 上传区 */
.upload-area {
  background-color: var(--bg-soft);
  border: 2px dashed var(--border);
  border-radius: 16px;
  padding: 30px;
  margin: 20px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
}

.upload-area:hover {
  border-color: var(--primary-light);
  background-color: var(--primary-soft);
}

/* 信息横幅 */
.info-banner {
  background-color: var(--primary-soft);
  color: var(--text-secondary);
  border-radius: 12px;
  padding: 15px;
  margin: 20px;
  border: 1px solid var(--border);
}

/* 保存徽章 */
.badge-saved {
  background-color: var(--success);
  color: var(--bg-cream);
  border-radius: 15px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}

/* 文本域 */
.textarea-styled {
  background-color: var(--bg-cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  color: var(--text-main);
  line-height: 1.6;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.04);
}

.textarea-styled:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(140, 94, 63, .15);
  outline: none;
}

/* 底部操作栏 */
.bottom-action {
  background-color: var(--bg-cream);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -2px 10px rgba(0,0,0,.03);
  padding: 15px 20px;
}

/* ====== 极简木质风 + 法式优雅（精确规范覆盖）====== */
:root {
  --bg-cream: #F8F6F2;
  --bg-soft: #F1ECE5;
  --primary: #7A5B46;
  --primary-light: #9a7860;
  --primary-soft: #f0e9e2;
  --accent: #a9744f;
  --text-main: #332620;
  --text-secondary: #857D77;
  --text-tertiary: #b3aaa2;
  --border: #ece6df;
  --border-light: #f4f0ea;
  --shadow-card: 0 8px 24px rgba(122, 91, 70, 0.06);
  --shadow-elevated: 0 14px 36px rgba(122, 91, 70, 0.1);
}
/* Logo 容器：咖色底、白"店"、圆润 20px */
.brand-mark {
  background: var(--primary);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(122, 91, 70, 0.18);
}
.brand-name { color: var(--text-main); }
.brand-slogan { color: var(--text-secondary); }
.brand-slogan small { color: var(--text-tertiary) !important; }
/* 功能卡片：纯白 + 弥散柔影 + 左图标右文字 */
.feature-item {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.feature-text .title { color: var(--text-main); font-weight: 600; }
.feature-text .desc { color: var(--text-secondary); line-height: 1.5; }
/* 统一矢量线条图标 + 10% 咖色圆托 */
.feature-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(122, 91, 70, 0.1);
  color: var(--primary);
  font-size: 0;
}
.feature-icon svg { width: 22px; height: 22px; display: block; }

/* ====== 手机：首页一屏显示完，不用下拉 ====== */
@media (max-width: 520px) {
  .welcome-hero { padding: 16px 18px 4px; }
  .brand-mark { width: 56px; height: 56px; font-size: 26px; margin-bottom: 6px; }
  .brand-name { font-size: 22px; }
  .brand-slogan { font-size: 13px; margin-top: 4px; }
  .brand-slogan small { font-size: 11px; }
  .feature-list { gap: 8px; margin-top: 12px; }
  .feature-item { padding: 12px 14px; }
  .feature-text .title { font-size: 14px; }
  .feature-text .desc { font-size: 11.5px; line-height: 1.4; }
  .feature-icon { width: 38px; height: 38px; }
  .feature-icon svg { width: 19px; height: 19px; }
  .welcome-cta { margin-top: auto; }
  .welcome-cta .btn { padding: 12px; }
  .small-text { font-size: 10.5px; margin-top: 6px; }
}