/* ============================================================
   通玄 TONGXUAN · 一页通玄 console.css（2026-08 豆包式一站页）
   表单件（geng-card/seg/cal-tabs/date-grid）尽在 base.css，此处只管
   摘要 chip / 技法格 / 参详面板 / 维度 chips / 直问对话流 / 扣费确认态。
   G9：纸底文字金一律 --gold-700 系（--gold-600 禁作纸底文字）。
   ============================================================ */

.csl-wrap { max-width: 860px; }

/* ================= 顶条 · 盘摘要（恒一行） ================= */
.csl-top-add {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  font-family: var(--font-serif);
  font-size: 14.5px; font-weight: 600; letter-spacing: 0.08em;
  color: #241a08;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  border: none; border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}
.csl-top-add:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(212, 175, 106, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.csl-top-chiprow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csl-top-edit {
  flex: none;
  width: 44px; height: 44px;
  font-family: var(--font-serif); font-size: 14px;
  color: #8a6420;
  border: 1px solid rgba(184, 145, 75, 0.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}
.csl-top-edit:hover { background: rgba(212, 175, 106, 0.14); }

/* ================= 录盘弹窗（G18：弹层 z > 1500） ================= */
.csl-veil {
  position: fixed; inset: 0;
  z-index: 1590;
  background: rgba(8, 12, 24, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.csl-modal {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1600;
  width: min(600px, calc(100vw - 24px));
  max-height: min(88vh, 88svh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(5, 8, 18, 0.55);
}
.csl-modal .geng-card { margin: 0; }
/* ✕ 绝对定位右上（.geng-head 非 flex，margin-left:auto 是死声明——✕ 曾内联
   挤在标题旁）；auth.js 注入的档案钮 absolute 右上同角，让位 64px 免抢点击 */
.csl-modal .csl-modal-x { position: absolute; top: 10px; right: 12px; }
.csl-modal .tx-arch-btn { right: 64px; }
.csl-modal-x {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
  color: var(--gold-300);
  border: 1px solid rgba(212, 175, 106, 0.4);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background 0.3s;
}
.csl-modal-x:hover { background: rgba(212, 175, 106, 0.14); }
/* iOS 认不得 overflow:hidden —— fixed 钉身 + JS 记滚位补偿（穿透滚动根治） */
body.csl-lock { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }

/* 面板头的返回钮（幕间回撤） */
.csl-back {
  flex: none;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--paper-ink-soft);
  border: 1px solid rgba(44, 42, 36, 0.18);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.csl-back:hover { color: var(--paper-ink); border-color: rgba(184, 145, 75, 0.5); background: rgba(212, 175, 106, 0.1); }
.csl-out-back {
  margin-left: 8px;
  min-height: 44px;
  padding: 8px 14px;
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.05em;
  color: var(--paper-ink-soft);
  border: 1px solid rgba(44, 42, 36, 0.18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.csl-out-back:hover { color: var(--paper-ink); border-color: rgba(184, 145, 75, 0.5); }

/* 摘要 chip（顶条纸底，用深金过 AA） */
.csl-chip {
  display: inline-block;
  padding: 8px 16px;
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.05em;
  color: #6d4c17;
  background: rgba(212, 175, 106, 0.16);
  border: 1px solid rgba(184, 145, 75, 0.45);
  border-radius: 999px;
  min-width: 0;
}
.csl-cast-note { margin-top: 10px; font-size: 12.5px; color: var(--paper-ink-soft); letter-spacing: 0.05em; }

/* ================= 技法格 ================= */
.csl-tech { margin-top: 8px; }
.csl-tech-cap {
  font-family: var(--font-serif);
  font-size: 20px; font-weight: 700;
  letter-spacing: 0.24em; text-indent: 0.24em;
  color: var(--paper-ink);
  text-align: center;
}
.csl-tech-note { margin: 8px 0 18px; font-size: 13px; color: var(--paper-ink-soft); text-align: center; letter-spacing: 0.04em; }
.csl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.csl-t {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 13px 4px 11px;
  border: 1px solid rgba(44, 42, 36, 0.14);
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(212, 175, 106, 0.08), transparent 60%),
    rgba(250, 247, 239, 0.82);
  box-shadow: 0 1px 6px rgba(44, 42, 36, 0.05);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out),
              box-shadow 0.3s, opacity 0.3s;
}
.csl-t:hover {
  transform: translateY(-2px);
  border-color: rgba(184, 145, 75, 0.5);
  box-shadow: 0 8px 18px rgba(44, 42, 36, 0.1);
}
.csl-t-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 700;
  color: #8a6420;
  border: 1px solid rgba(184, 145, 75, 0.45);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(212, 175, 106, 0.16), rgba(212, 175, 106, 0.04));
}
.csl-t b { font-family: var(--font-serif); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; color: var(--paper-ink); }
.csl-t.is-link { opacity: 0.72; }
.csl-t.is-link b { font-weight: 400; }
.csl-t.is-on {
  border-color: var(--cinnabar);
  background: rgba(184, 73, 62, 0.06);
}
.csl-t.is-on .csl-t-seal {
  color: #fff3e0;
  background: linear-gradient(135deg, var(--cinnabar), var(--cinnabar-deep));
  border-color: transparent;
}

/* ================= 参详面板（换幕登台，顶替技法格位） ================= */
.csl-panel {
  padding: 22px 22px 26px;
  border: 1px solid rgba(44, 42, 36, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(250, 247, 239, 0.85);
  box-shadow: 0 3px 16px rgba(44, 42, 36, 0.05);
}
.csl-panel-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(44, 42, 36, 0.16);
}
.csl-panel-name {
  font-family: var(--font-serif);
  font-size: 19px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper-ink);
}
.csl-modes { display: flex; gap: 8px; margin-left: auto; }
.csl-mode-tab {
  padding: 9px 18px;
  min-height: 44px;
  font-family: var(--font-serif);
  font-size: 13.5px; letter-spacing: 0.08em;
  color: var(--paper-ink-soft);
  border: 1px solid rgba(44, 42, 36, 0.18);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.csl-mode-tab.active {
  color: #6d4c17;
  border-color: rgba(184, 145, 75, 0.6);
  background: rgba(212, 175, 106, 0.16);
}
.csl-hint { margin: 16px 0 12px; font-size: 13px; color: var(--paper-ink-soft); letter-spacing: 0.04em; }

/* 三档成卷方案卡（一行三枚，一点即成——不自选维度） */
.csl-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.csl-plan {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px 12px;
  border: 1px solid rgba(44, 42, 36, 0.14);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s, transform 0.3s var(--ease-out);
}
.csl-plan:hover { transform: translateY(-2px); border-color: rgba(184, 145, 75, 0.5); }
.csl-plan-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  font-family: var(--font-serif);
  font-size: 17px; font-weight: 700;
  color: #8a6420;
  border: 1px solid rgba(184, 145, 75, 0.45);
  border-radius: 9px;
}
.csl-plan b { font-family: var(--font-serif); font-size: 14px; color: var(--paper-ink); letter-spacing: 0.06em; }
.csl-plan-price { font-style: normal; font-family: var(--font-serif); font-size: 13px; font-weight: 700; color: var(--cinnabar); }
.csl-plan i { font-style: normal; font-size: 11.5px; color: var(--paper-ink-soft); text-align: center; }
.csl-plan.on {
  border-color: rgba(184, 145, 75, 0.7);
  background:
    radial-gradient(ellipse 130% 130% at 50% -30%, rgba(212, 175, 106, 0.18), transparent 60%),
    linear-gradient(150deg, var(--ink-800), var(--ink-950));
}
.csl-plan.on b { color: var(--gold-300); }
.csl-plan.on i { color: rgba(237, 232, 216, 0.6); }
.csl-plan.on .csl-plan-price { color: var(--gold-300); }
.csl-plan.on .csl-plan-seal {
  color: #241a08;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-color: transparent;
}

/* 铺卷行 + 扣费确认态（红线：价格数字恒在钮上） */
.csl-go-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.csl-go-note { font-size: 12.5px; color: var(--paper-ink-soft); letter-spacing: 0.04em; }
.csl-panel .btn.is-armed {
  background: linear-gradient(135deg, var(--cinnabar), var(--cinnabar-deep) 85%);
  color: #fff3e0;
  animation: cslArmPulse 0.9s ease-in-out infinite alternate;
}
@keyframes cslArmPulse {
  from { box-shadow: 0 0 0 0 rgba(184, 73, 62, 0.35); }
  to   { box-shadow: 0 0 0 7px rgba(184, 73, 62, 0); }
}

/* 就地成卷 */
.csl-out { margin-top: 22px; }
.csl-out-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.csl-out-seal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  font-family: var(--font-serif); font-size: 15px; font-weight: 700;
  color: #fff3e0;
  background: linear-gradient(135deg, var(--cinnabar), var(--cinnabar-deep));
  border-radius: 8px;
}
.csl-out-head b { font-family: var(--font-serif); font-size: 15px; color: var(--paper-ink); letter-spacing: 0.06em; }
.csl-out-state { margin-left: auto; font-size: 12.5px; color: var(--paper-ink-soft); }
.csl-out-body {
  padding: 18px 18px 22px;
  border: 1px solid rgba(44, 42, 36, 0.14);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 247, 0.9);
  font-size: 15px; line-height: 2.0;
  color: var(--paper-ink);
  overflow-wrap: break-word;
}
.csl-out-body h3, .csl-out-body h4 { font-family: var(--font-serif); margin: 18px 0 8px; color: var(--paper-ink); }
.csl-out-body p { margin: 10px 0; }
.csl-out-body table { max-width: 100%; overflow-x: auto; display: block; }

/* 直问对话流 */
.csl-log { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; min-height: 20px; }
.csl-msg {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14.5px; line-height: 1.95;
  overflow-wrap: break-word;
}
.csl-msg.is-q {
  align-self: flex-end;
  color: #241a08;
  background: linear-gradient(135deg, rgba(212, 175, 106, 0.3), rgba(212, 175, 106, 0.18));
  border: 1px solid rgba(184, 145, 75, 0.4);
}
.csl-msg.is-a {
  align-self: flex-start;
  color: var(--paper-ink);
  background: rgba(255, 253, 247, 0.9);
  border: 1px solid rgba(44, 42, 36, 0.14);
}
.csl-cursor {
  display: inline-block;
  width: 8px; height: 16px;
  background: rgba(184, 145, 75, 0.6);
  animation: cslBlink 0.9s steps(2) infinite;
  vertical-align: -2px;
}
@keyframes cslBlink { to { opacity: 0; } }
.csl-ask-row { display: flex; gap: 10px; align-items: stretch; }
.csl-ask-row .input-line { flex: 1; }

/* ================= 响应式 ================= */
@media (max-width: 720px) {
  /* 08-19 阁主整体上提令：hero 渐隐带再收（base 720 的 56px 底衬对本页偏长） */
  .csl-tech-cap { font-size: 18px; }
  .csl-tech-note { margin: 6px 0 14px; }
  .csl-top-add { width: 100%; }
  .csl-chip { font-size: 12px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .csl-modal { width: calc(100vw - 16px); max-height: 92svh; }
  .csl-grid { grid-template-columns: repeat(4, 1fr); gap: 7px; }
  .csl-t { padding: 10px 3px 9px; }
  .csl-t-seal { width: 34px; height: 34px; font-size: 17px; }
  .csl-t b { font-size: 12px; }
  .csl-panel { padding: 16px 14px 20px; }
  .csl-modes { margin-left: 0; width: 100%; }
  .csl-mode-tab { flex: 1; text-align: center; }
  .csl-msg { max-width: 94%; }
  .csl-ask-row { flex-direction: column; }
  .csl-ask-row .btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════
   一页通玄 · 十术内联（阁主 08-22 令）
   立问弹窗（问事类）与次造弹窗（合盘）的专属件。
   触屏纪律照 G18：可点面 ≥44px、字号 ≥16px（免 iOS 聚焦缩放）。
   ════════════════════════════════════════════════════════ */

/* 技法格上的「须立问 / 须两造」小注 */
.csl-t-tip {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-40, #8a8377);
}

/* 所占何事：多行输入 */
.csl-q-area {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
}

/* 事类 / 牌阵 选片 */
.csl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.csl-chip-b {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--line, #ddd4c1);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-70, #4a443b);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.csl-chip-b:hover { border-color: var(--gold-700, #8a6b2a); color: var(--gold-700, #8a6b2a); }
.csl-chip-b.on {
  border-color: var(--gold-700, #8a6b2a);
  color: var(--gold-700, #8a6b2a);
  background: rgba(138, 107, 42, .08);
  font-weight: 700;
}

/* 六爻：六个爻位 */
.csl-yaos {
  display: flex;
  gap: 8px;
  flex-direction: row-reverse;   /* 自下而上：初爻在右起排，读时由下往上 */
  justify-content: flex-end;
  margin-bottom: 10px;
}
.csl-yao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 46px;
  border: 1px solid var(--line, #ddd4c1);
  border-radius: 6px;
  font-size: 17px;
  letter-spacing: -.04em;
  color: var(--ink, #1b1815);
  background: rgba(255, 255, 255, .35);
}
.csl-yao.is-wait { color: var(--ink-40, #8a8377); font-size: 14px; background: transparent; }

/* 塔罗：十二张背面 */
.csl-fan {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  margin-bottom: 8px;
}
.csl-card-b {
  aspect-ratio: 2 / 3;
  min-height: 44px;
  border: 1px solid var(--gold-700, #8a6b2a);
  border-radius: 5px;
  background: linear-gradient(160deg, rgba(138, 107, 42, .16), rgba(138, 107, 42, .05));
  color: var(--gold-700, #8a6b2a);
  font-size: 15px;
  cursor: pointer;
  transition: transform .18s, background .18s;
}
.csl-card-b:hover:not(:disabled) { transform: translateY(-2px); }
.csl-card-b.is-open {
  background: var(--gold-700, #8a6b2a);
  color: #fbf8f0;
  font-size: 18px;
}
.csl-card-b:disabled:not(.is-open) { opacity: .45; cursor: default; }

.csl-ritual-hint {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-55, #6e6455);
}
.csl-ritual-act { display: flex; gap: 10px; flex-wrap: wrap; }

/* 合盘次造：首造一行提示 */
.csl-pair-first {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-left: 2px solid var(--gold-700, #8a6b2a);
  font-size: 13.5px;
  color: var(--ink-55, #6e6455);
  background: rgba(138, 107, 42, .05);
}

/* ════════════════════════════════════════════════════════
   仿 AI 版式（阁主 08-22 令：本页只有四角按钮与正文）
   两层固定：顶栏（左上标识 / 右上账户）+ 命主条（滑动时也不动），
   其下整片皆正文。全部规则收在 body.csl-app 之内，绝不外溢别页。
   ════════════════════════════════════════════════════════ */
body.csl-app {
  /* 两层固定条的总高，供正文让位与弹窗定位共用 */
  --csl-bar-h: 52px;
  --csl-top-h: calc(var(--nav-h) + var(--csl-bar-h));
  background: var(--paper-100, #f7f3e9);
}
/* 顶栏在本页恒实底：正文是纸底，透明顶栏会让标识与积分糊在纸上看不清 */
body.csl-app .site-nav {
  background: rgba(10, 15, 30, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(212, 175, 106, 0.16);
}
body.csl-app .nav-inner { justify-content: space-between; }

/* 命主条：紧贴顶栏之下，与顶栏同为固定层 */
.csl-bar {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  z-index: 99;
  min-height: var(--csl-bar-h);
  display: flex;
  align-items: center;
  background: rgba(10, 15, 30, 0.94);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.csl-bar-inner {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
/* 深底上的命主 chip 与「改」钮：原样式是给纸底写的，此处按深底重定 */
.csl-bar .csl-chip {
  color: var(--gold-500, #d4af6a);
  border-color: rgba(212, 175, 106, 0.42);
  background: rgba(212, 175, 106, 0.10);
}
.csl-bar .csl-top-edit {
  color: var(--gold-500, #d4af6a);
  border-color: rgba(212, 175, 106, 0.42);
}
.csl-bar .csl-top-edit:hover { background: rgba(212, 175, 106, 0.18); }

/* 正文：为两层固定条让位；本页无页首无页脚，纸面直接从条下开始 */
body.csl-app .csl-main {
  padding-top: calc(var(--csl-top-h) + 18px);
  padding-bottom: 96px;   /* 给左下九宫格与右下皮肤钮留出不遮正文的余地 */
  min-height: 100vh;
}

/* 弹窗要压在两层条之上（条 z-index 99/100，遮罩与窗必须更高） */
body.csl-app .csl-veil { z-index: 200; }
body.csl-app .csl-modal { z-index: 201; }

@media (max-width: 720px) {
  body.csl-app { --csl-bar-h: 48px; }
  .csl-bar-inner { padding: 6px 16px; }
  body.csl-app .csl-main { padding-top: calc(var(--csl-top-h) + 12px); }
}

/* 精修档等待说明（成节块状写时的「非卡顿」告白） */
.csl-out-eta {
  margin: 0 0 14px;
  padding: 9px 13px;
  border-left: 2px solid var(--gold-700, #8a6b2a);
  background: rgba(138, 107, 42, .06);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-55, #6e6455);
}

/* ---------- 就卷追问（卷面之下） ---------- */
.csl-fu {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px dashed var(--line, #ddd4c1);
}
.csl-fu-cap {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.csl-fu-cap span {
  font-family: var(--font-serif, serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--gold-700, #8a6b2a);
}
.csl-fu-cap i { font-style: normal; font-size: 12.5px; color: var(--ink-55, #6e6455); }
.csl-fu-thread:empty { display: none; }
.csl-fu-item { margin-bottom: 16px; }
.csl-fu-q {
  font-weight: 700;
  color: var(--ink, #1b1815);
  padding-left: 11px;
  border-left: 2px solid var(--gold-700, #8a6b2a);
  margin-bottom: 8px;
}
.csl-fu-a { line-height: 1.85; color: var(--ink-80, #35302a); }
.csl-fu-meta { margin-top: 5px; font-size: 12px; color: var(--ink-40, #8a8377); }
.csl-fu-form { display: flex; gap: 10px; align-items: stretch; }
.csl-fu-form .input-line { flex: 1; min-width: 0; }
.csl-fu-form .btn { flex: none; }

/* 触屏（G18 五门）：可点面与字号下限——须留在文件末尾，
   否则会被后面的 720px 块以同特异性覆盖掉（G12c 实证病型） */
@media (hover: none) and (pointer: coarse) {
  .csl-chip-b { min-height: 44px; font-size: 16px; }
  .csl-yao { min-width: 44px; height: 44px; }
  .csl-q-area { font-size: 16px; }
  .csl-fan { grid-template-columns: repeat(4, 1fr); }
}