/* =========================================================
 * ll-design.css — 灵鲤小筑设计系统层（最上层，加载于 enhance.css 之后）
 * =========================================================
 * 出处：《周礼·考工记》"审曲面势，以饬五材，以辨民器"
 * 设计原则：
 *   1. 不改结构，仅叠加设计层；所有既有类名保持向后兼容
 *   2. 意象：绢帛·墨玉·朱砂·淡金 —— 古籍质感 + 现代简洁
 *   3. 移动优先，兼顾桌面；触控目标 ≥ 44px
 *   4. WCAG AA 对比度（正文 ≥ 4.5:1，标题 ≥ 3:1）
 *   5. 尊重系统偏好：prefers-reduced-motion / prefers-color-scheme
 *   6. 层级：Hero 卡（1 级）· 主内容卡（2 级）· 辅助卡（3 级）· 提示（4 级）
 * ========================================================= */

/* =========================================================
 * §1 · 设计令牌（Design Tokens）
 * ========================================================= */
:root {
  /* — 宣纸屏幕 · Paper & Pixel 令牌 — */
  --ll-c-bg:         #F8F5EE;      /* 宣纸 */
  --ll-c-bg-2:       #F2EEE3;
  --ll-c-surface:    #FBF9F3;
  --ll-c-surface-2:  #FBF9F3;
  --ll-c-surface-3:  #F2EEE3;
  --ll-c-ink:        #1A1613;      /* 焦墨 */
  --ll-c-ink-2:      rgba(26,22,19,.82);
  --ll-c-muted:      rgba(26,22,19,.55);
  --ll-c-muted-2:    rgba(26,22,19,.40);
  --ll-c-line:       rgba(26,22,19,.12);
  --ll-c-line-2:     rgba(26,22,19,.08);

  --ll-c-primary:    #1A1613;      /* 主 CTA · 焦墨 */
  --ll-c-primary-2:  #2A2420;
  --ll-c-primary-3:  #1A1613;
  --ll-c-accent:     #8B2323;      /* 朱砂（印章级 <3%） */
  --ll-c-accent-2:   #A03535;
  --ll-c-gold:       #1A1613;      /* 金 → 焦墨 */
  --ll-c-gold-2:     #1A1613;

  --ll-c-good:       #1A1613;
  --ll-c-warn:       #8B2323;
  --ll-c-bad:        #8B2323;
  --ll-c-info:       #4A6E8A;      /* 石青（链接） */

  /* — 字号阶梯（1.125 minor third） — */
  --ll-fs-xs:  11px;
  --ll-fs-sm:  12px;
  --ll-fs-md:  14px;
  --ll-fs-lg:  16px;
  --ll-fs-xl:  18px;
  --ll-fs-2xl: 22px;
  --ll-fs-3xl: 28px;

  /* — 行高 — */
  --ll-lh-tight: 1.35;
  --ll-lh-body:  1.75;
  --ll-lh-relax: 1.9;

  /* — 间距（8pt grid） — */
  --ll-sp-1: 4px;
  --ll-sp-2: 8px;
  --ll-sp-3: 12px;
  --ll-sp-4: 16px;
  --ll-sp-5: 20px;
  --ll-sp-6: 24px;
  --ll-sp-8: 32px;
  --ll-sp-10: 40px;

  /* — 圆角 — */
  --ll-r-xs: 6px;
  --ll-r-sm: 8px;
  --ll-r-md: 12px;
  --ll-r-lg: 16px;
  --ll-r-xl: 20px;
  --ll-r-pill: 999px;

  /* — 阴影层次 — */
  --ll-sh-1: 0 1px 2px rgba(26,38,32,.06);
  --ll-sh-2: 0 2px 8px rgba(94,71,51,.08), 0 1px 3px rgba(94,71,51,.05);
  --ll-sh-3: 0 6px 18px rgba(94,71,51,.10), 0 2px 4px rgba(94,71,51,.05);
  --ll-sh-4: 0 12px 32px rgba(26,38,32,.16), 0 3px 8px rgba(26,38,32,.08);
  --ll-sh-focus: 0 0 0 3px rgba(46,90,60,.22);
  --ll-sh-focus-danger: 0 0 0 3px rgba(184,68,46,.24);

  /* — 动效 — */
  --ll-ease: cubic-bezier(.4,0,.2,1);
  --ll-ease-out: cubic-bezier(.2,.7,.3,1);
  --ll-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ll-t-fast: 120ms;
  --ll-t-base: 200ms;
  --ll-t-slow: 320ms;

  /* — 触控目标 — */
  --ll-tap: 44px;
}

/* =========================================================
 * §2 · 全局排版与页面骨架
 * ========================================================= */
html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body {
  color: var(--ll-c-ink-2);
  font-size: var(--ll-fs-md);
  line-height: var(--ll-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

/* 选择态低刺激 */
::selection {
  background: rgba(184,134,11,.25);
  color: var(--ll-c-ink);
}

/* 页面容器：给上下留呼吸 */
.page {
  padding: var(--ll-sp-3) var(--ll-sp-4) var(--ll-sp-6);
}

/* =========================================================
 * §3 · 焦点态（可达性）
 * ========================================================= */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.seg-btn:focus-visible,
.zone-action:focus-visible,
.tabbar-item:focus-visible,
.result-tab-btn:focus-visible,
.ll-toc-chip:focus-visible,
.form-input:focus-visible,
.form-select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--ll-sh-focus);
  border-color: var(--ll-c-primary) !important;
  z-index: 3;
  position: relative;
}
.btn-primary:focus-visible { box-shadow: 0 4px 14px rgba(46,90,60,.30), var(--ll-sh-focus); }

/* =========================================================
 * §4 · 卡片系统（层级：1 主要 · 2 常规 · 3 辅助 · 4 提示）
 * ========================================================= */
.card {
  border-radius: var(--ll-r-lg) !important;
  padding: var(--ll-sp-4) !important;
  box-shadow: var(--ll-sh-2) !important;
  border: 1px solid var(--ll-c-line) !important;
  background: var(--ll-c-surface);
}

/* 主要卡（结果 Hero、命盘等） */
.ll-card-primary {
  box-shadow: var(--ll-sh-3) !important;
  border-left: 3px solid var(--ll-c-accent) !important;
}

/* 卡片标题：更清晰的层级 */
.card-title {
  font-size: var(--ll-fs-lg) !important;
  line-height: var(--ll-lh-tight);
  letter-spacing: 1.5px;
  padding-bottom: var(--ll-sp-3) !important;
  border-bottom-color: rgba(46,90,60,.14) !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-title-icon {
  font-size: var(--ll-fs-xl);
  line-height: 1;
}

/* 深度块小节 */
.deep-section,
.deep-block { margin-bottom: var(--ll-sp-3); }
.deep-section:last-child,
.deep-block:last-child { margin-bottom: 0; }

.deep-label {
  font-size: var(--ll-fs-sm);
  font-weight: 600;
  color: var(--ll-c-muted);
  letter-spacing: 1px;
  margin-bottom: var(--ll-sp-1);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.deep-text,
.detail-text {
  font-size: var(--ll-fs-md);
  line-height: var(--ll-lh-body);
  color: var(--ll-c-muted);
}

.deep-good { color: var(--ll-c-good) !important; }
.deep-bad  { color: var(--ll-c-bad)  !important; }

/* =========================================================
 * §5 · 按钮层级（Primary · Secondary · Ghost · Danger）
 * ========================================================= */
.btn-primary,
.btn-secondary {
  min-height: var(--ll-tap);
  border-radius: var(--ll-r-md) !important;
  transition: transform var(--ll-t-fast) var(--ll-ease-out),
              box-shadow var(--ll-t-base) var(--ll-ease-out),
              background var(--ll-t-base) var(--ll-ease-out) !important;
}
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(46,90,60,.28), 0 2px 4px rgba(46,90,60,.14) !important;
}
.btn-primary:active,
.btn-secondary:active {
  transform: translateY(0) scale(.98);
  box-shadow: 0 2px 8px rgba(46,90,60,.22) !important;
}
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(.3);
  transform: none !important;
}
.btn-primary:disabled:hover,
.btn-secondary:disabled:hover {
  transform: none !important;
  box-shadow: 0 4px 14px rgba(46,90,60,.15) !important;
}

/* 幽灵按钮（描边） */
.btn-ghost {
  background: transparent;
  color: var(--ll-c-primary);
  border: 1px solid rgba(46,90,60,.35);
  border-radius: var(--ll-r-md);
  padding: 12px 18px;
  font-size: var(--ll-fs-md);
  cursor: pointer;
  transition: background var(--ll-t-base) var(--ll-ease-out);
  min-height: var(--ll-tap);
  letter-spacing: 1px;
}
.btn-ghost:hover { background: rgba(46,90,60,.06); }
.btn-ghost:active { transform: scale(.97); }

/* 危险按钮 */
.btn-danger {
  background: linear-gradient(135deg, var(--ll-c-accent), #8a2f1e);
  color: #fff;
  border: none;
  border-radius: var(--ll-r-md);
  padding: 12px 18px;
  min-height: var(--ll-tap);
  box-shadow: 0 4px 14px rgba(184,68,46,.30);
  cursor: pointer;
  letter-spacing: 1px;
}
.btn-danger:focus-visible { box-shadow: 0 4px 14px rgba(184,68,46,.30), var(--ll-sh-focus-danger); }

/* =========================================================
 * §6 · 表单
 * ========================================================= */
.form-label {
  font-size: var(--ll-fs-md) !important;
  color: var(--ll-c-muted) !important;
  margin-bottom: 6px !important;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-input,
.form-select,
textarea.form-input {
  min-height: var(--ll-tap);
  border-radius: var(--ll-r-md) !important;
  font-size: var(--ll-fs-md) !important;
  transition: border-color var(--ll-t-base) var(--ll-ease-out),
              box-shadow var(--ll-t-base) var(--ll-ease-out),
              background var(--ll-t-base) var(--ll-ease-out) !important;
}

textarea.form-input {
  min-height: 88px;
  line-height: var(--ll-lh-body);
  resize: vertical;
}

/* seg-group：更秀气的分段控件 */
.seg-group { gap: 6px; }
.seg-btn {
  min-height: 40px;
  border-radius: var(--ll-r-md) !important;
  transition: all var(--ll-t-base) var(--ll-ease-out) !important;
  font-size: var(--ll-fs-md) !important;
  font-weight: 500;
}
.seg-btn.active {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(46,90,60,.28) !important;
}

/* =========================================================
 * §7 · 导航栏 & 底部 Tab（提升触感）
 * ========================================================= */
.navbar-back {
  min-width: var(--ll-tap);
  min-height: var(--ll-tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ll-r-md);
}
.navbar-back:hover { background: rgba(255,255,255,.10); }

.tabbar-item {
  min-height: 56px;
  padding: 8px 0 6px !important;
  transition: color var(--ll-t-base) var(--ll-ease-out),
              transform var(--ll-t-base) var(--ll-ease-spring);
}
.tabbar-item.active { color: var(--ll-c-primary) !important; }
.tabbar-item:active { transform: translateY(1px); }

/* Tab 页当前指示：小圆点 */
.tabbar-item.active::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ll-c-accent);
}
.tabbar-item { position: relative; }

/* =========================================================
 * §8 · Tag / Badge
 * ========================================================= */
.tag {
  font-size: var(--ll-fs-xs) !important;
  padding: 3px 10px !important;
  line-height: 1.5;
  font-weight: 500;
  vertical-align: baseline;
}
.tag-success { background: rgba(46,125,50,.10) !important; color: var(--ll-c-good) !important; }
.tag-warning { background: rgba(178,106,0,.12) !important;  color: var(--ll-c-warn) !important; }
.tag-danger  { background: rgba(198,40,40,.10) !important; color: var(--ll-c-bad) !important; }
.tag-info    { background: rgba(21,101,192,.10) !important; color: var(--ll-c-info) !important; }

/* =========================================================
 * §9 · 首页 zones / hero 精修
 * ========================================================= */
.page-header {
  padding: 24px 0 16px !important;
  border-bottom-color: rgba(46,90,60,.10) !important;
}
.greeting { font-size: var(--ll-fs-2xl) !important; }

.hero-today {
  border-radius: var(--ll-r-lg) !important;
  padding: var(--ll-sp-4) !important;
  box-shadow: var(--ll-sh-2) !important;
  border-color: var(--ll-c-line) !important;
}
.hero-today-more {
  min-height: 32px;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
  padding: 4px 0 !important;
  border-top: none !important;
  color: var(--ll-c-primary-2) !important;
  font-weight: 500;
  float: right;
}
.hero-today-more:hover { color: var(--ll-c-primary) !important; }

.zone-section {
  border-radius: var(--ll-r-lg) !important;
  padding: var(--ll-sp-4) !important;
  box-shadow: var(--ll-sh-2) !important;
}
.zone-header {
  padding-bottom: var(--ll-sp-3) !important;
  border-bottom-color: rgba(184,134,11,.18) !important;
}
.zone-header-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: 20px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(184,134,11,.14), rgba(184,134,11,.05)) !important;
}
.zone-header-title { font-size: var(--ll-fs-lg) !important; }

.zone-action {
  min-height: 60px;
  border-radius: var(--ll-r-md) !important;
  padding: var(--ll-sp-3) !important;
  transition: transform var(--ll-t-fast) var(--ll-ease-out),
              box-shadow var(--ll-t-base) var(--ll-ease-out),
              background var(--ll-t-base) var(--ll-ease-out);
}
.zone-action:hover {
  transform: translateY(-2px);
  box-shadow: var(--ll-sh-3);
  border-color: rgba(184,134,11,.35);
}
.zone-action:active { transform: translateY(0) scale(.98); }
.zone-action-title { font-size: var(--ll-fs-md) !important; }
.zone-action-desc { font-size: var(--ll-fs-xs) !important; }

.zone-hot-dot {
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: var(--ll-c-accent) !important;
  font-size: 9px;
  letter-spacing: .5px;
}

/* Chevron 用 SVG 化的 › 代替，动态微移 */
.zone-action-arrow {
  transition: transform var(--ll-t-base) var(--ll-ease-out);
  color: var(--ll-c-muted-2);
}
.zone-action:hover .zone-action-arrow { transform: translateX(3px); color: var(--ll-c-primary); }

/* =========================================================
 * §10 · Result Tabs（八字/紫微/紫微案例反查等）
 * ========================================================= */
.result-tabs {
  background: rgba(255,253,248,.94) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--ll-c-line) !important;
  box-shadow: 0 2px 8px rgba(94,71,51,.05);
}
.result-tab-btn {
  min-height: 48px;
  font-size: var(--ll-fs-md) !important;
  transition: color var(--ll-t-base) var(--ll-ease-out);
  position: relative;
}
.result-tab-btn.active {
  color: var(--ll-c-accent) !important;
  border-bottom-color: transparent !important;
}
.result-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--ll-c-accent), var(--ll-c-gold));
}

/* =========================================================
 * §11 · 案例网格（cases.js 使用）
 * ========================================================= */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--ll-sp-3);
  margin-top: var(--ll-sp-3);
}
.case-card {
  background: linear-gradient(180deg, #fffdf6 0%, #fbf3de 100%) !important;
  border: 1px solid var(--ll-c-line) !important;
  border-radius: var(--ll-r-md) !important;
  padding: var(--ll-sp-3) !important;
  cursor: pointer;
  transition: transform var(--ll-t-base) var(--ll-ease-out),
              box-shadow var(--ll-t-base) var(--ll-ease-out);
  min-height: 100px;
  position: relative;
  overflow: hidden;
}
.case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--ll-c-accent), var(--ll-c-gold));
  opacity: 0;
  transition: opacity var(--ll-t-base) var(--ll-ease-out);
}
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ll-sh-3);
}
.case-card:hover::before { opacity: 1; }
.case-name {
  font-family: var(--font-kai), serif;
  font-size: var(--ll-fs-lg) !important;
  color: var(--ll-c-accent) !important;
  letter-spacing: 1px;
}

/* =========================================================
 * §12 · 形煞详解卡片（shaqi.js）
 * ========================================================= */
.deep-block {
  background: rgba(255,253,248,.6);
  border-radius: var(--ll-r-sm);
  padding: 10px 12px;
  border: 1px solid var(--ll-c-line-2);
}
.deep-block-title {
  font-size: var(--ll-fs-md);
  font-weight: 600;
  color: var(--ll-c-ink);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* =========================================================
 * §13 · Toast / Loading（提示）
 * ========================================================= */
.toast {
  border-radius: var(--ll-r-md) !important;
  font-size: var(--ll-fs-md) !important;
  box-shadow: var(--ll-sh-4);
  letter-spacing: .5px;
}
.loading-box {
  border-radius: var(--ll-r-lg) !important;
  box-shadow: var(--ll-sh-4) !important;
}

/* =========================================================
 * §14 · 空状态
 * ========================================================= */
.empty-state {
  padding: var(--ll-sp-10) var(--ll-sp-5) !important;
}
.empty-state-icon {
  font-size: 56px !important;
  opacity: .35 !important;
  margin-bottom: var(--ll-sp-3) !important;
}

/* =========================================================
 * §15 · Skeleton 加载骨架（可选）
 * ========================================================= */
.ll-skeleton {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(94,71,51,.08) 25%,
    rgba(94,71,51,.14) 37%,
    rgba(94,71,51,.08) 63%);
  background-size: 400% 100%;
  animation: llShimmer 1.4s ease-in-out infinite;
  border-radius: var(--ll-r-xs);
  color: transparent;
}
@keyframes llShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* =========================================================
 * §16 · 免责声明（调低视觉噪音）
 * ========================================================= */
.disclaimer {
  border-radius: var(--ll-r-md) !important;
  font-size: var(--ll-fs-xs) !important;
  line-height: var(--ll-lh-body);
  background: linear-gradient(135deg, rgba(255,248,225,.6), rgba(255,243,224,.5)) !important;
  border-left-width: 3px !important;
  color: var(--ll-c-muted) !important;
}

/* =========================================================
 * §17 · 深度解读手风琴
 * ========================================================= */
.accordion-card .card-title {
  transition: color var(--ll-t-base) var(--ll-ease-out);
  min-height: var(--ll-tap);
}
.accordion-card .card-title:hover { color: var(--ll-c-accent) !important; }
.acc-arrow {
  transition: transform var(--ll-t-slow) var(--ll-ease-out) !important;
}

/* =========================================================
 * §18 · 大运/流年 详解 details 元素
 * ========================================================= */
.dayun-item {
  border-radius: var(--ll-r-md) !important;
  transition: background var(--ll-t-base) var(--ll-ease-out);
}
.dayun-item summary {
  min-height: var(--ll-tap);
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
}
.dayun-item summary::-webkit-details-marker { display: none; }
.dayun-item summary::before {
  content: '›';
  display: inline-block;
  margin-right: 8px;
  color: var(--ll-c-muted-2);
  transition: transform var(--ll-t-base) var(--ll-ease-out);
}
.dayun-item[open] summary::before { transform: rotate(90deg); }

/* =========================================================
 * §19 · 图表通用
 * ========================================================= */
.wuxing-bar-track {
  border-radius: var(--ll-r-pill);
  overflow: hidden;
  background: rgba(94,71,51,.08);
}
.wuxing-bar-fill {
  transition: width 900ms var(--ll-ease-spring);
}

/* =========================================================
 * §20 · 深色模式（未来预留，浅色为主）
 * ========================================================= */
@media (prefers-color-scheme: dark) {
  /* 保留浅色主题：仅在明确启用 .theme-dark 时切换 */
}

/* =========================================================
 * §21 · 尊重用户偏好：减少动效
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card { animation: none !important; }
}

/* =========================================================
 * §22 · 移动端密度优化
 * ========================================================= */
@media (max-width: 480px) {
  .page { padding: var(--ll-sp-2) var(--ll-sp-3) var(--ll-sp-5); }
  .card { padding: var(--ll-sp-3) !important; }
  .card-title { font-size: var(--ll-fs-md) !important; }
  .greeting { font-size: var(--ll-fs-xl) !important; }
  .btn-primary { padding: 12px 16px !important; letter-spacing: 1px !important; }

  .hero-today-solar { font-size: var(--ll-fs-lg) !important; }
  .hero-score-num { font-size: var(--ll-fs-xl) !important; }

  .zone-header-icon { width: 32px !important; height: 32px !important; font-size: 18px !important; }
  .zone-action { min-height: 56px; }
  .zone-action-icon { font-size: 22px !important; width: 30px !important; }

  .cases-grid { grid-template-columns: repeat(2, 1fr); gap: var(--ll-sp-2); }
  .case-card { min-height: 90px; padding: 10px !important; }

  .result-tab-btn { font-size: var(--ll-fs-sm) !important; letter-spacing: 0.5px; }
}

/* =========================================================
 * §23 · 桌面端外框精修
 * ========================================================= */
@media (min-width: 750px) {
  #app {
    border-left: 1px solid var(--ll-c-line);
    border-right: 1px solid var(--ll-c-line);
    box-shadow: 0 0 40px rgba(26,38,32,.08);
  }
}

/* =========================================================
 * §24 · 图标一致性（沿用 icons.js 的 .ll-icon）
 * ========================================================= */
.ll-icon { transition: transform var(--ll-t-base) var(--ll-ease-out); }
.zone-action:hover .ll-icon { transform: scale(1.08); }
.card-title:hover .ll-icon { transform: rotate(-6deg); }

/* =========================================================
 * §25 · 打印样式（导出/截屏更整洁）
 * ========================================================= */
@media print {
  .navbar, .tabbar, .disclaimer, .btn-primary, .btn-secondary, .ll-toc,
  .result-tabs, .accordion-card .card-title { display: none !important; }
  #app { box-shadow: none; background: #fff; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  body { background: #fff !important; }
}