/* ===== base.css ===== */
/* CSS变量定义、全局重置、表单控件、Toast、基础布局、卡片 */

:root {
  /* ===== 主色 - 深青系列 ===== */
  --c-primary: #0d2622;
  --c-primary-light: #1a453d;
  --c-primary-lighter: #153530;
  --c-primary-deep: #1c4a45;
  --c-primary-dark: #1a3d36;
  --c-primary-hover: #2a5a50;

  /* ===== 文字色 ===== */
  --c-text: var(--c-primary);
  --c-text-secondary: #3a5a52;
  --c-text-light: #55756d;
  --c-text-muted: #999;

  /* ===== 金色系列 ===== */
  --c-gold: #9a7a20;
  --c-gold-dark: #705210;
  --c-gold-light: #bf9a30;
  --c-gold-deep: #a07d2a;
  --c-gold-border: #8a6d20;
  --c-coin-text: #2a1f0a;

  /* ===== 背景色 ===== */
  --c-bg: #e8dec0;
  --c-bg-light: #f0e8d0;
  --c-card: #ddd0ad;
  --c-card-light: #e0d4a8;
  --c-paper: #fffef8;

  /* ===== 边框色 ===== */
  --c-border: #bfae80;
  --c-border-light: #c8b890;
  --c-border-lighter: #d0c4a0;

  /* ===== 功能色 ===== */
  --c-success: #27ae60;
  --c-danger: #e74c3c;
  --c-danger-dark: #c0392b;
  --c-warning: #f39c12;
  --c-warning-dark: #e67e22;
  --c-info: #3498db;
  --c-info-dark: #2980b9;
  --c-gray: #95a5a6;
  --c-brown: #8b4513;
  --c-purple: #8e44ad;
  --c-purple-light: #9b59b6;

  /* ===== AI 渐变 ===== */
  --c-ai-start: #667eea;
  --c-ai-end: #764ba2;

  /* ===== 移动端动态视口高度（解决100vh被地址栏遮挡）===== */
  --vh: 1vh;
}

/* ============================================================
   六爻排盘 · 青囊风格  —  样式表目录
   ------------------------------------------------------------
   1. 基础重置与响应式
   2. 起卦区（输入/选项卡/铜钱/时间）
   3. 动态漂浮文字背景
   4. 青囊风格排盘展示
   5. 应期与分析样式
   6. 真太阳时与生克路线图
   7. 古籍库与弹窗样式
   8. 解读板块卡片化
   9. AI 智能解读模块
  10. 布局修复与回到顶部
  11. PDF 导出打印样式
  12. 术语悬浮提示
  13. 增强分析模块样式
  14. 历史记录样式
  15. 3D铜钱与交互优化
  16. 解读区文字排版
  ============================================================ */

  * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  /* 防止iOS输入框聚焦时页面缩放，统一表单样式 */
  input, select, textarea { font-size: 16px; -webkit-appearance: none; appearance: none; border-radius: 0; }

  /* ========== 全局表单控件基础样式（修复 appearance:none 导致的隐形问题） ========== */
  input[type="checkbox"] {
    width:18px; height:18px; cursor:pointer; flex-shrink:0;
    appearance:none; -webkit-appearance:none;
    border:2px solid var(--c-border); border-radius:4px;
    background:var(--c-bg); position:relative; transition:all 0.2s;
    vertical-align:middle;
  }
  input[type="checkbox"]:checked { background:var(--c-primary); border-color:var(--c-primary); }
  input[type="checkbox"]:checked::after {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-60%) rotate(45deg);
    width:5px; height:9px;
    border:solid var(--c-bg);
    border-width:0 2px 2px 0;
  }
  input[type="checkbox"]:hover { border-color:var(--c-gold); }

  input[type="radio"] {
    width:18px; height:18px; cursor:pointer; flex-shrink:0;
    appearance:none; -webkit-appearance:none;
    border:2px solid var(--c-border); border-radius:50%;
    background:var(--c-bg); position:relative; transition:all 0.2s;
    vertical-align:middle;
  }
  input[type="radio"]:checked { border-color:var(--c-primary); }
  input[type="radio"]:checked::after {
    content:''; position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:10px; height:10px; border-radius:50%; background:var(--c-primary);
  }
  input[type="radio"]:hover { border-color:var(--c-gold); }

  /* select 统一样式已移至下方"重构抽取的通用类"区域，避免重复定义冲突 */
  /* ========== Toast 提示组件 ========== */
  .toast-container { position:fixed; top:20px; left:50%; transform:translateX(-50%); z-index:10000; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
  .toast {
    padding:12px 20px; border-radius:8px; font-size:14px; font-weight:500;
    box-shadow:0 4px 16px rgba(0,0,0,0.15); backdrop-filter:blur(8px);
    animation:toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
    max-width:90vw; text-align:center; pointer-events:auto;
  }
  .toast.success { background:rgba(13,38,34,0.95); color:#e8dec0; border:1px solid rgba(154,122,32,0.4); }
  .toast.error { background:rgba(139,37,37,0.95); color:#fff; border:1px solid rgba(255,100,100,0.4); }
  .toast.warning { background:rgba(154,122,32,0.95); color:#fff; border:1px solid rgba(255,200,100,0.4); }
  .toast.info { background:rgba(13,38,34,0.95); color:#e8dec0; border:1px solid rgba(191,174,128,0.4); }
  @keyframes toastIn { from { opacity:0; transform:translateY(-20px); } to { opacity:1; transform:translateY(0); } }
  @keyframes toastOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-20px); } }

  /* 移动端安全区域适配 */
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Serif SC", serif;
    background: var(--c-bg);
    color: var(--c-primary);
    min-height: 100vh;
    padding: 20px 10px 60px;
    position: relative;
  }
  .container { max-width: 780px; margin: 0 auto; position: relative; }
  h1 {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 8px;
    color: var(--c-primary);
    margin-bottom: 6px;
  }
  .subtitle {
    text-align: center;
    font-size: 12px;
    color: var(--c-text-light);
    letter-spacing: 4px;
    margin-bottom: 24px;
  }
  /* 卡片 */
  .card {
    background: var(--c-card);
    border: none;
    border-radius: 14px;
    padding: 18px 14px;
    margin-bottom: 18px;
    box-shadow: 0 4px 20px rgba(13,38,34,0.08);
  }
  .card-title {
    font-size: 15px;
    color: var(--c-primary);
    margin-bottom: 16px;
    letter-spacing: 2px;
    font-weight: 600;
  }