:root{
  --bg: #f5f0e6;
  --panel: #fbf7ef;
  --panel-deep: #f0e5d4;
  --ink: #36332e;
  --ink-soft: #7b7265;
  --gold: #c4a46a;
  --green: #3f5b4a;
  --blue: #446b88;
  --border-soft: rgba(120,105,85,.35);
  --shadow-soft: 0 12px 28px rgba(0,0,0,.08);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
}

/* 全局：仅适配手机端（最大宽度约 430px） */
*{box-sizing:border-box;margin:0;padding:0;}

html,body{
  height:100%;
}

body{
  font-family:"FangSong","STFangsong","SimSun","Noto Serif SC",serif;
  font-size:18px;
  background:
    radial-gradient(circle at top, rgba(255,255,255,.9) 0, rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#f7f2e8,#f0e7db);
  color:var(--ink);
  display:flex;
  justify-content:center;
}

.page{
  width:100%;
  max-width:430px;
  min-height:100vh;
  padding:14px 12px 24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 顶部区域 */
.topbar{
  background:rgba(251,247,239,0.96);
  border-radius:20px;
  padding:10px 12px 12px;
  border:1px solid rgba(196,164,106,.38);
  box-shadow:var(--shadow-soft);
}

.brand{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.brand-mark{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(183,83,60,.45);
  background:rgba(183,83,60,.08);
  color:#b7533c;
  font-size:15px;
  white-space:nowrap;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-title{
  font-size:20px;
  font-weight:600;
  letter-spacing:0.05em;
}

.brand-sub{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.4;
}

.topbar-links{
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.topbar-link{
  font-size:14px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  color:var(--ink-soft);
}

.topbar-link.active{
  border-color:rgba(63,91,74,.45);
  background:rgba(63,91,74,.08);
  color:var(--green);
}

/* 主体：单列 */
.main{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* 面板基础 */
.panel{
  background:rgba(251,247,239,0.96);
  border-radius:18px;
  padding:12px 12px 14px;
  border:1.3px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
}

/* ========= 三个区域的主色 ========= */

/* 食疗菜谱区域：#f9d256 */
.panel-main{
  border-color:#f9d256;
}

/* 今日问候区域：#68945c */
.panel-greeting{
  border-color:#68945c;
}

/* 体质区域：#422256 */
.panel-side{
  border-color:#422256;
}

/* 标题区域：上下排布，日期独占一行 */
.panel-header{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  margin-bottom:10px;
}

.panel-title{
  font-size:19px;
  font-weight:600;
  line-height:1.4;
}

.panel-sub{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.4;
  margin-top:3px;
}

.date-block{
  width:100%;
  margin-top:4px;
  text-align:left;
}

.date-main{
  font-size:14px;
  font-weight:600;
}

.date-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.4;
}

/* panel tag：根据三种主色 */
.panel-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:14px;
  margin-bottom:4px;
}

/* 食疗菜谱 tag */
.panel-tag-main{
  border:1px solid #f9d256;
  color:#b08900;
  background:rgba(249,210,86,0.12);
}

/* 今日问候 tag */
.panel-tag-greeting{
  border:1px solid #68945c;
  color:#68945c;
  background:rgba(104,148,92,0.12);
}

/* 体质测试 tag */
.panel-tag-side{
  border:1px solid #422256;
  color:#422256;
  background:rgba(66,34,86,0.12);
}

/* 通用按钮：兼容 button 和 a */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:none;
  outline:none;
  border-radius:999px;
  padding:8px 16px;
  font-size:16px;
  font-family:inherit;
  cursor:pointer;
  white-space:nowrap;
  text-decoration:none;
}

a.btn{
  text-decoration:none;
}

/* 食疗主按钮 #f9d256 */
.btn-main{
  background:#f9d256;
  color:#3f2c00;
}

/* 问候主按钮 #68945c */
.btn-greeting{
  background:#68945c;
  color:#ffffff;
}

/* 体质主按钮 #422256 */
.btn-side{
  background:#422256;
  color:#ffffff;
}

.btn-plain{
  background:#f5f0e6;
  color:var(--ink-soft);
  border:1px solid rgba(120,105,85,.45);
}

/* 顶部小按钮（快速文案） */
.btn-mini{
  border:none;
  border-radius:999px;
  padding:4px 10px;
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
}

/* 问候区域小按钮：#68945c */
.btn-greeting-mini{
  background:rgba(104,148,92,0.15);
  border:1px solid rgba(104,148,92,0.5);
  color:#446f3c;
}

/* 食疗区域小按钮：#f9d256 */
.btn-main-mini{
  background:rgba(249,210,86,0.15);
  border:1px solid rgba(249,210,86,0.55);
  color:#8a7400;
}

.btn-text{
  border:none;
  background:none;
  padding:0;
  margin:0;
  font-size:15px;
  color:var(--blue);
  text-align:left;
}

/* --------- 区域一：食疗菜谱 --------- */

.hero-card{
  margin-top:4px;
  border-radius:16px;
  padding:10px 10px 12px;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 55%),
    linear-gradient(135deg,#fbf7ef,#f1e5d4);
  border:1px solid rgba(249,210,86,0.7);
}

.hero-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:6px;
}

.seal-tag{
  border-radius:999px;
  padding:3px 8px;
  font-size:13px;
  border:1px solid rgba(183,83,60,.45);
  color:#b7533c;
  background:rgba(183,83,60,.06);
}

.seal-soft{
  border-color:rgba(104,148,92,0.5);
  color:#68945c;
  background:rgba(104,148,92,0.06);
}

.hero-title{
  font-size:21px;
  line-height:1.5;
  margin-bottom:4px;
}

.hero-tagline{
  font-size:16px;
  line-height:1.5;
  margin-bottom:4px;
}

.hero-tagline strong{
  color:var(--green);
}

.hero-list{
  list-style:none;
  padding:0;
  margin:0 0 4px;
  font-size:15px;
  color:var(--ink-soft);
}

.hero-note{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
  margin-bottom:8px;
}

/* 节气 + 中国色：竖排两块 */
.hero-meta-row{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:10px;
}

.hero-meta-label{
  font-size:13px;
  color:var(--ink-soft);
}

.hero-meta-term-main{
  font-size:17px;
  font-weight:600;
}

.hero-meta-term-sub{
  font-size:14px;
  color:var(--ink-soft);
  margin-top:2px;
}

.hero-meta-color-main{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:2px;
}

.hero-color-circle{
  width:40px;
  height:40px;
  border-radius:999px;
  border:2px solid rgba(196,164,106,.6);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
  background:#c4a46a;
}

.hero-color-name{
  font-size:15px;
  font-weight:600;
}

.hero-color-hex{
  font-size:13px;
  color:var(--ink-soft);
}

.hero-color-desc{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:2px;
}

.hero-actions{
  display:flex;
  justify-content:flex-start;
}

/* --------- 区域二：今日问候 --------- */

.quick-share-group{
  margin-top:2px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.greeting-card{
  margin-top:10px;
  border-radius:16px;
  padding:10px 10px 12px;
  border:1.2px solid #68945c;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.92) 0,rgba(255,255,255,0) 55%),
    linear-gradient(130deg,#fbf7ef,#f4e7d6);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.greeting-card:active{
  transform:scale(0.99);
}

.greeting-top{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

.greeting-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.greeting-tag{
  font-size:13px;
  color:#b7533c;
}

.greeting-title{
  font-size:19px;
  font-weight:600;
}

.greeting-sub{
  font-size:14px;
  color:var(--ink-soft);
}

.greeting-time-pill{
  align-self:flex-start;
  border-radius:999px;
  padding:3px 10px;
  font-size:13px;
  background:rgba(104,148,92,0.1);
  color:#68945c;
}

.greeting-body{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.greeting-text{
  font-size:16px;
  line-height:1.6;
}

.greeting-summary{
  margin-top:2px;
}

.greeting-summary-label{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:2px;
}

.greeting-summary-text{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
}

.greeting-footer{
  margin-top:4px;
  display:flex;
  gap:8px;
  align-items:flex-end;
}

.greeting-footer-left{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.greeting-footer-tag{
  font-size:13px;
  color:#68945c;
}

.greeting-footer-tip{
  font-size:13px;
  color:var(--ink-soft);
}

/* --------- 区域三：体质测试 --------- */

.tz-card{
  margin-top:4px;
  border-radius:16px;
  padding:10px 10px 12px;
  border:1px solid #422256;
  background:
    radial-gradient(circle at top,rgba(255,255,255,.9) 0,rgba(255,255,255,0) 55%),
    linear-gradient(135deg,#f2f6fb,#e3edf7);
}

.tz-text-main{
  font-size:16px;
  line-height:1.5;
  margin-bottom:4px;
}

.tz-text-sub{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.5;
  margin-bottom:4px;
}

.tz-list{
  list-style:none;
  padding:0;
  margin:0 0 6px;
  font-size:14px;
  color:var(--ink-soft);
}

.tz-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* --------- 弹层（编辑器 & 预览） --------- */

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50;
}

.overlay-inner{
  width:100%;
  max-width:420px;
  margin:0 10px;
  background:#fbf7ef;
  border-radius:16px;
  box-shadow:0 18px 36px rgba(0,0,0,.25);
  border:1px solid rgba(196,164,106,.65);
  display:flex;
  flex-direction:column;
  max-height:92vh;
}

.overlay-inner-wide{
  max-width:440px;
}

.overlay-header{
  padding:10px 12px;
  border-bottom:1px solid rgba(196,164,106,.4);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.overlay-title{
  font-size:17px;
  font-weight:600;
}

.overlay-close{
  border:none;
  background:none;
  font-size:20px;
  line-height:1;
  padding:0 4px;
  cursor:pointer;
}

.overlay-body{
  padding:10px 12px 8px;
  overflow:auto;
}

.overlay-footer{
  padding:8px 12px 10px;
  border-top:1px solid rgba(196,164,106,.35);
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* 表单元素 */
.form-row{
  margin-bottom:8px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.form-label{
  font-size:14px;
  color:var(--ink-soft);
}

.form-input,
.form-textarea{
  width:100%;
  border-radius:10px;
  border:1px solid rgba(180,160,120,.6);
  padding:6px 8px;
  font-family:inherit;
  font-size:15px;
  background:#fdfaf3;
}

.form-input-file{
  width:100%;
  font-size:14px;
}

.form-textarea{
  resize:vertical;
  min-height:90px;
}

.form-hint{
  font-size:12px;
  color:var(--ink-soft);
}

/* 图片预览 */
.image-preview{
  margin-top:4px;
  width:100%;
  min-height:80px;
  border-radius:10px;
  border:1px dashed rgba(180,160,120,.7);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:rgba(0,0,0,.02);
}

.image-preview img{
  max-width:100%;
  height:auto;
}

/* 预览弹层里的图片 */
.preview-body{
  padding-bottom:8px;
}

.preview-tips{
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.preview-img{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(180,160,120,.7);
  display:block;
}

/* 小屏滚动条优化 */
.overlay-body::-webkit-scrollbar{
  width:4px;
}
.overlay-body::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:999px;
}