/* ===== 变量 ===== */
:root {
  --bg:      #080812;
  --gold:    #d4a963;
  --gold2:   rgba(212,169,99,0.15);
  --text:    #f0ede8;
  --muted:   #6b6880;
  --border:  rgba(255,255,255,0.07);
  --r:       14px;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system,"PingFang SC","Hiragino Sans GB",sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ===== 顶部导航 ===== */
.top-bar {
  position: fixed; top:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px;
  height: 52px;
  display: flex; align-items: center;
  padding: 0 16px;
  background: rgba(8,8,18,0.9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
.top-logo { flex: 0 0 auto; }
.logo-badge {
  display: inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:8px;
  background: linear-gradient(135deg,#7c3aed,#d4a963);
  font-size:14px; font-weight:700; color:#fff;
}
.top-tabs {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 28px;
}
.ttab {
  font-size: 15px; color: var(--muted); cursor: pointer;
  letter-spacing: 1px; padding-bottom: 2px;
  transition: color 0.2s;
  position: relative;
}
.ttab.active { color: var(--text); font-weight: 600; }
.ttab.active::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--gold); border-radius:2px;
}
.top-right {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
}
.user-icon { color: var(--muted); cursor: pointer; display:flex; align-items:center; }
.credit-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}
.credit-badge b { color: var(--text); margin-left:4px; }

/* ===== Tab 面板 ===== */
.tab-panel {
  display: none;
  min-height: 100vh;
  padding-top: 52px;
  position: relative;
}
.tab-panel.active { display: block; }

/* 背景光晕 */
.bg-glow {
  position: fixed; top:0; left:50%; transform:translateX(-50%);
  width:430px; height:100vh;
  pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 60% 40% at 70% 20%, rgba(100,60,200,0.12) 0%, transparent 70%),
              radial-gradient(ellipse 50% 35% at 20% 70%, rgba(30,120,100,0.08) 0%, transparent 70%);
}

/* ===== 子分类 Tab ===== */
.sub-tabs-wrap {
  position: relative; z-index:1;
  padding: 14px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.sub-tabs-wrap::-webkit-scrollbar { display:none; }
.sub-tabs { display:flex; gap:8px; width:max-content; }
.stab {
  padding: 6px 16px; border-radius:100px;
  font-size: 13px; color: var(--muted); cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap; transition: all 0.2s;
}
.stab.active {
  color: var(--text);
  border-color: var(--border);
  background: rgba(255,255,255,0.06);
}

/* ===== 卡片网格 ===== */
.card-grid {
  position: relative; z-index:1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 14px 16px 32px;
}
.dcard {
  border-radius: var(--r);
  padding: 18px 16px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 180px;
  display: flex; flex-direction:column; justify-content:space-between;
  transition: transform 0.2s, opacity 0.2s;
  border: 1px solid rgba(255,255,255,0.08);
}
.dcard:active { transform: scale(0.97); }
.dcard.coming { opacity: 0.55; cursor: default; }
.dcard-wide { grid-column: 1 / -1; min-height: 140px; }

/* 渐变配色 */
.grad-purple { background: linear-gradient(145deg,#1e1040 0%,#4c1d95 60%,#7c3aed 100%); }
.grad-teal   { background: linear-gradient(145deg,#0d2e28 0%,#1a5c4a 60%,#2d9b7a 100%); }
.grad-red    { background: linear-gradient(145deg,#2d0a14 0%,#881337 60%,#be123c 100%); }
.grad-orange { background: linear-gradient(145deg,#2c1006 0%,#7c2d12 60%,#c2410c 100%); }
.grad-blue   { background: linear-gradient(145deg,#0c1340 0%,#1e3a8a 60%,#2563eb 100%); }
.grad-indigo { background: linear-gradient(145deg,#1e1b4b 0%,#312e81 60%,#4338ca 100%); }

.dcard-badge, .dcard-num {
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.5); margin-bottom: 10px;
}
.dcard-title { font-size: 20px; font-weight: 600; margin-bottom: 4px; line-height:1.2; }
.dcard-sub   { font-size: 11px; color: rgba(255,255,255,0.45); font-style:italic; margin-bottom:8px; }
.dcard-desc  { font-size: 12px; color: rgba(255,255,255,0.6); line-height:1.6; flex:1; }
.dcard-credit {
  margin-top: 12px;
  font-size: 10px; letter-spacing:1px;
  color: rgba(255,255,255,0.4);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 8px;
}
.dcard-credit.free { color: #5bb8a0; }

/* ===== 功能覆盖页（提问/加载/结果）===== */
.func-page {
  position: fixed; inset:0;
  background: var(--bg);
  z-index: 300;
  display: flex; flex-direction:column;
  max-width:430px; margin:0 auto;
  left:50%; transform:translateX(-50%);
  width:100%;
}
.func-page.hidden { display:none; }

.fp-header {
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,8,18,0.95);
  backdrop-filter: blur(12px);
  flex-shrink:0;
}
.fp-title { font-size:16px; letter-spacing:2px; }
.fp-back {
  background:none; border:none; color:var(--muted);
  font-size:16px; cursor:pointer; padding:4px 0;
}
.share-btn {
  background: var(--gold2); color:var(--gold);
  border:1px solid rgba(212,169,99,0.2);
  border-radius:100px; padding:5px 14px;
  font-size:13px; cursor:pointer;
}

.fp-body {
  flex:1; overflow-y:auto;
  padding: 24px 20px;
  -webkit-overflow-scrolling:touch;
}

/* ===== 提问页 ===== */
.q-title { font-size:21px; font-weight:400; letter-spacing:1px; margin-bottom:8px; }
.q-sub   { font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:20px; }
.scene-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.stag {
  background:rgba(255,255,255,0.05); border:1px solid var(--border);
  color:var(--muted); padding:7px 16px; border-radius:100px;
  font-size:13px; cursor:pointer; transition:all 0.2s;
}
.stag:active { border-color:var(--gold); color:var(--gold); }

.input-card {
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:var(--r); padding:16px; margin-bottom:16px;
}
.input-card textarea {
  width:100%; min-height:110px; background:transparent;
  border:none; outline:none; resize:none;
  font-size:15px; line-height:1.7; color:var(--text); font-family:inherit;
}
.input-card textarea::placeholder { color:var(--muted); opacity:0.6; }
.input-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
  font-size:12px; color:var(--muted);
}
.input-hint { opacity:0.7; }

/* ===== 按钮 ===== */
.btn-gold {
  background:linear-gradient(135deg,#d4a963,#c49040);
  color:#0c0b12; border:none; padding:14px 32px;
  border-radius:100px; font-size:15px; font-weight:600;
  cursor:pointer; letter-spacing:1px; transition:all 0.2s;
  box-shadow:0 4px 20px rgba(212,169,99,0.25);
}
.btn-gold.full { width:100%; }
.btn-gold:active { transform:scale(0.97); }
.btn-outline {
  background:transparent; color:var(--muted);
  border:1px solid var(--border); padding:12px 24px;
  border-radius:100px; font-size:14px; cursor:pointer;
}

/* ===== 加载页 ===== */
#page-loading { align-items:center; justify-content:center; }
.loading-wrap { text-align:center; }
.ink-spinner { width:72px; height:72px; position:relative; margin:0 auto 28px; }
.ink-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid transparent; border-top-color:var(--gold);
  animation:spin 1.4s linear infinite;
}
.r2 { inset:9px;  border-top-color:#5bb8a0; animation-duration:1.9s; animation-direction:reverse; }
.r3 { inset:18px; border-top-color:#8b7ab8; animation-duration:2.3s; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { font-size:18px; letter-spacing:2px; margin-bottom:8px; }
.loading-sub  { font-size:13px; color:var(--muted); }

/* ===== 结果页 ===== */
.functions-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.function-tag {
  background:var(--gold2); border:1px solid rgba(212,169,99,0.2);
  color:var(--gold); padding:6px 16px; border-radius:100px;
  font-size:13px; font-weight:500;
}
.triptych-wrap { width:100%; display:flex; flex-direction:column; align-items:center; margin-bottom:28px; }

.reading-block {
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  border-radius:var(--r); padding:18px; margin-bottom:10px;
}
.function-label { font-size:11px; color:var(--gold); letter-spacing:2px; margin-bottom:10px; opacity:0.8; }
.theory-text {
  background:rgba(255,255,255,0.03); border-left:2px solid var(--border);
  padding:10px 14px; border-radius:0 8px 8px 0;
  font-size:13px; color:var(--muted); line-height:1.7; margin-bottom:10px;
}
.projection-text {
  font-style:italic; font-size:14px; color:#5bb8a0; opacity:0.9;
  line-height:1.8; padding:8px 0 8px 14px; margin-bottom:10px;
  border-left:2px solid rgba(91,184,160,0.3);
}
.derivation-label { font-size:11px; color:var(--muted); margin-bottom:6px; }
.derivation-text  { font-size:15px; line-height:1.85; color:var(--text); }

.core-insight {
  background:linear-gradient(135deg,var(--gold2),rgba(91,184,160,0.06));
  border:1px solid rgba(212,169,99,0.15);
  border-radius:var(--r); padding:20px; margin-bottom:10px;
}
.core-insight p { font-size:15px; line-height:1.8; }
.summary-section {
  background:rgba(255,255,255,0.03); border:1px solid var(--border);
  border-radius:var(--r); padding:20px; margin-bottom:10px;
}
.summary-label { font-size:11px; color:var(--muted); letter-spacing:2px; margin-bottom:10px; }
.summary-text  { font-size:15px; line-height:1.9; font-style:italic; opacity:0.9; }
.reading-disclaimer { font-size:11px; color:var(--muted); text-align:center; margin:16px 0; opacity:0.4; }
.result-actions { display:flex; gap:12px; margin:20px 0; }
.result-actions .btn-gold,.result-actions .btn-outline { flex:1; text-align:center; }

/* ===== Coming Soon ===== */
.coming-page {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:80px 32px; text-align:center;
  position:relative; z-index:1;
}
.coming-icon  { font-size:52px; margin-bottom:20px; opacity:0.6; }
.coming-title { font-size:18px; margin-bottom:10px; letter-spacing:1px; }
.coming-sub   { font-size:14px; color:var(--muted); line-height:1.8; }

/* ===== 通用 ===== */
.disclaimer-footer { font-size:11px; color:var(--muted); text-align:center; padding:16px 0; opacity:0.4; }