/* ============================================================
   观心语记 · H5 网页版
   国风视觉：宣纸底 / 朱砂红 / 墨色 / 金线 / 印章
   延续小程序观心语记的配色基调
   ============================================================ */

:root {
  --paper:      #f5f0e2;   /* 宣纸底 */
  --paper-2:    #efe7d4;   /* 深一档宣纸 */
  --paper-3:    #e7dcc4;   /* 卡纸边 */
  --card:       #fbf7ec;   /* 卡片面 */
  --ink:        #3b2f22;   /* 墨色主文字 */
  --ink-2:      #6d5f49;   /* 淡墨 */
  --ink-3:      #9c8d74;   /* 更淡墨 */
  --cinnabar:   #a32e2e;   /* 朱砂红 */
  --cinnabar-2: #861f1f;   /* 深朱砂 */
  --gold:       #b39a5b;   /* 金 */
  --jade:       #5f7a66;   /* 青玉 */
  --line:       #dccfb2;   /* 分隔金线 */
  --shadow:     0 2px 10px rgba(90, 70, 40, 0.08);
  --serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", "KaiTi", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--serif);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(179, 154, 91, 0.10), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120, 100, 60, 0.015) 0 1px, transparent 1px 3px),
    var(--paper);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 96px;   /* 底部留白给 tabbar */
  min-height: 100vh;
}

/* ============ 顶部品牌 ============ */
.app-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 4px 18px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: linear-gradient(var(--paper), rgba(245, 240, 226, 0.94));
  z-index: 20;
  backdrop-filter: blur(4px);
}

.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--cinnabar);
  color: #fdf6e3;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  border-radius: 8px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 2px 6px rgba(134, 31, 31, 0.35);
  flex: none;
}

.brand-text h1 {
  font-size: 22px;
  letter-spacing: 4px;
  font-weight: 700;
}

.brand-text p {
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 2px;
}

/* ============ 视图容器 ============ */
.view { display: none; animation: fade 0.28s ease; }
.view.active { display: block; }

@keyframes fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.view-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 20px 2px 14px;
}
.view-title .zh { font-size: 18px; font-weight: 700; letter-spacing: 3px; }
.view-title .en { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; }

/* ============ 卡片 ============ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  position: relative;
}

.card + .card { margin-top: 0; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--cinnabar);
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.section-label::before { content: "·"; font-weight: 700; }

/* ============ 按钮 ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--serif);
  font-size: 15px;
  letter-spacing: 2px;
  padding: 11px 20px;
  border-radius: 10px;
  border: 1px solid var(--cinnabar);
  background: var(--cinnabar);
  color: #fdf6e3;
  cursor: pointer;
  transition: transform 0.06s ease, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 8px rgba(134, 31, 31, 0.25);
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--cinnabar-2); }

.btn.ghost {
  background: transparent;
  color: var(--cinnabar);
  box-shadow: none;
  border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--cinnabar); }

.btn.block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1; min-width: 0; }

/* ============ 输入 ============ */
.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.field input, .field select {
  width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdf6;
  outline: none;
}
.field input:focus, .field select:focus { border-color: var(--cinnabar); }
.field .hint { font-size: 11px; color: var(--ink-3); margin-top: 4px; }

/* ============ 卦象展示 ============ */
.gua-symbols {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  font-size: 64px;
  color: var(--ink);
  margin: 6px 0;
}
.gua-symbols .tri { letter-spacing: 2px; }

.gua-name {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 4px 0 2px;
}

.gua-rating {
  text-align: center;
}
.rating-pill {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cinnabar);
  border: 1px solid var(--cinnabar);
  border-radius: 999px;
  padding: 2px 12px;
}

/* 六爻 */
.yao-list { margin: 12px 0 4px; }
.yao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 4px;
  border-bottom: 1px dashed var(--line);
}
.yao:last-child { border-bottom: none; }
.yao .yao-name { width: 74px; flex: none; font-size: 13px; color: var(--ink-2); }
.yao .bar {
  flex: 1;
  display: flex;
  justify-content: center;
}
.yao .bar .seg {
  height: 7px;
  background: var(--ink);
  border-radius: 2px;
}
.yao .bar.yang .seg { width: 100%; }
.yao .bar.yin { gap: 22%; }
.yao .bar.yin .seg { width: 39%; }
.yao .mark {
  width: 26px; flex: none; text-align: center;
  font-size: 14px; color: var(--cinnabar); font-weight: 700;
}
.yao.change .bar .seg { background: var(--cinnabar); }

.gua-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.gua-box {
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.gua-box .tri { font-size: 40px; line-height: 1; }
.gua-box .nm { font-size: 15px; font-weight: 700; letter-spacing: 3px; margin-top: 4px; }
.gua-box .lab { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; }

/* 古籍正文 */
.gu-wen {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: 0.5px;
}
.gu-wen .t { color: var(--cinnabar); font-weight: 700; margin-right: 4px; }

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 8px;
}
.detail-item { font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.detail-item b { color: var(--cinnabar); font-weight: 700; display: block; font-size: 12px; letter-spacing: 1px; }

/* ============ 每日一签 ============ */
.date-line {
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.date-line .lunar { color: var(--ink-3); margin-left: 8px; }

/* 快捷入口九宫格 */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 4px;
}
.tile {
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 4px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.06s;
}
.tile:active { transform: scale(0.97); }
.tile .ch {
  width: 34px; height: 34px;
  margin: 0 auto 6px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  color: #fff;
}
.tile .ch.c1 { background: var(--cinnabar); }
.tile .ch.c2 { background: var(--jade); }
.tile .ch.c3 { background: var(--gold); }
.tile .t { font-size: 12px; color: var(--ink-2); letter-spacing: 1px; }

/* ============ 八字 ============ */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.pillar {
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-align: center;
  padding: 14px 4px;
}
.pillar .pl {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.pillar .gz { font-size: 30px; font-weight: 700; letter-spacing: 1px; }
.pillar .gz span { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; margin-top: 4px; letter-spacing: 1px; }

/* ============ 紫微 ============ */
.zw-summary { text-align: center; margin-bottom: 12px; }
.zw-summary .row { font-size: 14px; color: var(--ink-2); letter-spacing: 1px; }
.zw-summary .row b { color: var(--cinnabar); }

.zw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.zw-gong {
  background: #fffdf6;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 4px;
  text-align: center;
  min-height: 78px;
}
.zw-gong.ming { border-color: var(--cinnabar); box-shadow: inset 0 0 0 1px var(--cinnabar); }
.zw-gong .gn { font-size: 12px; font-weight: 700; letter-spacing: 1px; }
.zw-gong .zhi { font-size: 11px; color: var(--ink-3); }
.zw-gong .stars { font-size: 11px; color: var(--cinnabar); margin-top: 3px; line-height: 1.5; }
.zw-gong .si { font-size: 10px; color: var(--gold); margin-top: 2px; }

/* ============ 黄历 ============ */
.hl-head { text-align: center; }
.hl-head .lunar-big { font-size: 26px; font-weight: 700; letter-spacing: 3px; }
.hl-head .ganzhi { font-size: 13px; color: var(--ink-2); letter-spacing: 2px; margin-top: 6px; }

.hl-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.hl-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fffdf6;
}
.hl-panel .hd {
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.hl-panel.yi .hd { color: var(--jade); }
.hl-panel.ji .hd { color: var(--cinnabar); }
.hl-panel .bd { font-size: 13px; color: var(--ink-2); line-height: 1.9; }

.hl-meta {
  display: flex;
  justify-content: space-around;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.hl-meta .v { color: var(--cinnabar); font-weight: 700; }

/* ============ AI 解读 ============ */
.textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fffdf6;
  outline: none;
  resize: vertical;
  line-height: 1.7;
}
.textarea:focus { border-color: var(--cinnabar); }

.loading {
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 2px;
  padding: 14px 0;
}
.loading::before { content: "⌛"; margin-right: 6px; }

.ai-error { color: var(--cinnabar); font-size: 13px; padding: 8px 0; }

.ai-result { margin-top: 10px; }

.ai-summary {
  font-size: 14px;
  color: var(--ink-2);
  background: var(--paper-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
  line-height: 1.8;
}
.ai-summary b { color: var(--cinnabar); font-size: 18px; margin-right: 4px; }

.score-row { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.score-row:last-of-type { border-bottom: none; }
.score-top { display: flex; align-items: center; gap: 10px; }
.score-top .dim { width: 34px; flex: none; font-size: 13px; color: var(--ink-2); }
.score-top .bar {
  flex: 1; height: 8px;
  background: var(--paper-3);
  border-radius: 4px;
  overflow: hidden;
}
.score-top .bar .fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--cinnabar), #c14b3f);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.score-top .num { width: 28px; flex: none; text-align: right; font-size: 13px; font-weight: 700; color: var(--cinnabar); }
.score-row .advice {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 4px;
  padding-left: 44px;
  line-height: 1.5;
}

.ai-note {
  margin-top: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 1px;
}

.ai-text { font-size: 14px; line-height: 2; color: var(--ink); }

/* ============ 掷币起卦 ============ */
.toss-line {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 4px;
  border-bottom: 1px dashed var(--line);
}
.toss-line:last-child { border-bottom: none; }
.toss-line.empty { opacity: 0.4; }
.toss-line .tl-name { width: 46px; flex: none; font-size: 13px; color: var(--ink-2); }
.toss-line .tl-bar { flex: 1; text-align: center; font-size: 18px; letter-spacing: 2px; color: var(--ink); }
.toss-line .tl-desc { flex: none; font-size: 12px; color: var(--ink-3); }
.toss-info { text-align: center; font-size: 13px; color: var(--ink-2); margin: 8px 0 4px; letter-spacing: 1px; }

/* ============ 先问事 8 选择 ============ */
.dim-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.dim-chip {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fffdf6;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
}
.dim-chip.active {
  background: var(--cinnabar);
  border-color: var(--cinnabar);
  color: #fdf6e3;
}

.section-label.ai-label { display: flex; align-items: center; gap: 8px; }
.ai-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* ============ 梦境日记 ============ */
.diary-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.diary-item .d-date { font-size: 11px; color: var(--ink-3); letter-spacing: 1px; }
.diary-item .d-text { font-size: 14px; color: var(--ink); margin-top: 6px; line-height: 1.8; white-space: pre-wrap; }
.diary-item .d-del {
  float: right;
  font-size: 12px; color: var(--cinnabar);
  background: none; border: 1px solid var(--cinnabar);
  border-radius: 6px; padding: 2px 10px; cursor: pointer;
}
.diary-empty {
  text-align: center; color: var(--ink-3); font-size: 13px; padding: 20px 0; letter-spacing: 1px;
}

/* ============ 看手相 ============ */
.upload-box {
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line);
  border-radius: 12px;
  min-height: 140px;
  cursor: pointer;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  letter-spacing: 1px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.upload-box:active { border-color: var(--cinnabar); }
.upload-box img { width: 100%; max-height: 260px; object-fit: contain; }

/* ============ 道长对话 ============ */
.chat-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  min-height: 300px;
  max-height: 52vh;
  overflow-y: auto;
  margin-bottom: 12px;
}
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 12px;
}
.chat-msg.user { flex-direction: row-reverse; }
.chat-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--line);
  background: #fffdf6;
}
.chat-text {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg.ai .chat-text {
  background: var(--paper-2);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat-msg.user .chat-text {
  background: var(--cinnabar);
  color: #fdf6e3;
  border-bottom-right-radius: 4px;
}
.chat-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-input-row input {
  flex: 1;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fffdf6;
  outline: none;
}
.chat-input-row input:focus { border-color: var(--cinnabar); }
.chat-input-row .btn { flex: none; }

/* ============ 赞赏 ============ */
.reward-box { text-align: center; }
.reward-box img {
  width: 220px; height: 220px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
.reward-box .tip {
  font-size: 12px; color: var(--ink-3);
  margin-top: 12px; line-height: 1.9; letter-spacing: 1px;
}

/* ============ 底部 tabbar ============ */
.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  max-width: 720px;
  margin: 0 auto;
  background: linear-gradient(#fbf7ec, #f3ecdb);
  border-top: 1px solid var(--line);
  z-index: 30;
  box-shadow: 0 -2px 12px rgba(90, 70, 40, 0.06);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0 9px;
  background: none;
  border: none;
  font-family: var(--serif);
  cursor: pointer;
  color: var(--ink-3);
}
.tab .ic {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s;
}
.tab .lb { font-size: 11px; letter-spacing: 1px; }
.tab.active { color: var(--cinnabar); }
.tab.active .ic { background: var(--cinnabar); color: #fdf6e3; }

/* ============ 页脚 ============ */
.app-footer {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 1px;
  margin: 22px 0 6px;
}

/* ============ 响应式（桌面） ============ */
@media (min-width: 721px) {
  .app { padding-left: 24px; padding-right: 24px; }
}