/* ============================================================
   modal.css — 解释弹窗（竹简竖排 tab + 绢帛正文）
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 10, 8, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
  padding: 20px;
}
:root[data-theme="light"] .modal-overlay {
  background: rgba(120, 90, 40, 0.35);
}
.modal-overlay.show { display: flex; }

.modal {
  background: linear-gradient(145deg, #231e18, #1c1a17);
  border: 1px solid rgba(200, 169, 106, 0.22);
  border-radius: 20px;
  width: 100%;
  max-width: 780px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(200,169,106,0.06) inset;
  animation: modal-in 0.22s ease-out;
  overflow: hidden;
  position: relative;
}
:root[data-theme="light"] .modal {
  background: linear-gradient(145deg, #fffaf0, #f8f1de);
  border-color: rgba(139, 69, 19, 0.22);
  box-shadow: 0 30px 80px rgba(120, 90, 40, 0.25), 0 0 0 1px rgba(139,69,19,0.08) inset;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 四角微饰 */
.modal::before, .modal::after {
  content: "";
  position: absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--accent-soft);
  pointer-events: none;
  z-index: 2;
}
.modal::before { top: 8px; left: 8px; border-right: none; border-bottom: none; border-radius: 2px; }
.modal::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; border-radius: 2px; }

/* 头部 */
.modal-header {
  padding: 20px 28px 12px;
  display: flex; justify-content: space-between; align-items: center;
  flex-shrink: 0;
}
.modal-title {
  color: var(--text-title);
  font-size: 19px;
  letter-spacing: 4px;
  font-family: var(--font-display);
  font-weight: normal;
}
.modal-close {
  background: none; border: none; color: var(--text-mute);
  font-size: 26px; cursor: pointer;
  line-height: 1; padding: 0 6px;
  transition: color 0.2s;
  font-family: inherit;
}
.modal-close:hover { color: var(--text-title); }

/* ── 竹简 tab 条 — 横排，每根竹简独立（竖排文字 + 上下回纹 + 竹节） ── */
.modal-tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  gap: 2px;
  padding: 12px 16px 14px;
  background: #0f0d09;
  border-bottom: 1px solid rgba(200, 169, 106, 0.25);
  flex-shrink: 0;
  position: relative;
}
:root[data-theme="light"] .modal-tabs {
  background: linear-gradient(180deg, #efe6d0, #e8d8b8);
  border-bottom: 1px solid rgba(139, 69, 19, 0.25);
}

/* 第5根前分隔间距（十翼 / 后学 两组分开），不用 ::before（避免冲突上回纹边） */
.modal-tabs > .modal-tab:nth-child(5) {
  margin-left: 18px;
  position: relative;
  /* 用左边框+padding模拟分隔，不占用伪元素 */
  border-left: 1px solid transparent;
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(30,20,10,0.6),
    inset 2px 0 4px rgba(0,0,0,0.35),
    inset -2px 0 4px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.45);
}
:root[data-theme="light"] .modal-tabs > .modal-tab:nth-child(5) {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(100,60,20,0.55),
    inset 2px 0 4px rgba(100,60,20,0.25),
    inset -2px 0 4px rgba(100,60,20,0.25),
    0 2px 6px rgba(120,90,40,0.30);
}

/* ── 每根独立竹简：竖排文字 + 上下回纹边 + 竹节纹理 ── */
.modal-tab {
  position: relative;
  display: flex;
  align-items: center; justify-content: center;
  width: 40px;
  min-height: 150px;
  padding: 28px 4px 28px;   /* 上下 padding 留给回纹边 */
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-display);
  font-weight: normal;
  letter-spacing: 3px;
  flex-shrink: 0;
  isolation: isolate;
  /* 竖排：一列，不换列 */
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.4;
  white-space: nowrap;
  /* ── 竹简主体：底色 + 弧面明暗 + 竹纤维 + 明显竹片分缝 ── */
  background-color: #6b4a22;
  background-image:
    /* 竖缝 1：20px 一条深色细线（表示每20px一片竹片） */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 19px,
      rgba(20,10,0,0.55) 19px,
      rgba(20,10,0,0.55) 20px
    ),
    /* 竹片弧面明暗：圆柱明暗交替（每20px一片独立明暗循环） */
    repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.42) 0%,
      rgba(255,220,150,0.10) 25%,
      rgba(0,0,0,0.22) 50%,
      rgba(255,220,150,0.10) 75%,
      rgba(0,0,0,0.42) 100%
    ),
    /* 纵向竹纤维：细密 */
    repeating-linear-gradient(
      90deg,
      rgba(120,80,30,0.22) 0,
      rgba(120,80,30,0.22) 1px,
      transparent 1px,
      transparent 4px
    ),
    /* 竹节横线（每 40px 一条深色竹节） */
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 38px,
      rgba(60,35,10,0.72) 38px,
      rgba(40,22,5,0.95) 39px,
      rgba(60,35,10,0.72) 40px
    );
  color: rgba(255, 240, 200, 0.85);
  font-size: 14px;
  box-shadow:
    inset 0 0 0 1px rgba(30,20,10,0.72),
    inset 2px 0 6px rgba(0,0,0,0.5),
    inset -2px 0 6px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.45);
}
/* 浅色模式：竹简偏竹黄 */
:root[data-theme="light"] .modal-tab {
  background-color: #d8a85a;
  background-image:
    /* 竖缝：20px 一条深色竖线 */
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 19px,
      rgba(80,45,10,0.55) 19px,
      rgba(80,45,10,0.55) 20px
    ),
    /* 竹片弧面明暗交替 */
    repeating-linear-gradient(
      90deg,
      rgba(120,70,20,0.28) 0%,
      rgba(255,240,190,0.32) 25%,
      rgba(120,70,20,0.10) 50%,
      rgba(255,240,190,0.32) 75%,
      rgba(120,70,20,0.28) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(120,70,20,0.18) 0,
      rgba(120,70,20,0.18) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 38px,
      rgba(100,60,20,0.60) 38px,
      rgba(70,40,10,0.85) 39px,
      rgba(100,60,20,0.60) 40px
    );
  color: rgba(60, 35, 15, 0.92);
  box-shadow:
    inset 0 0 0 1px rgba(100,60,20,0.55),
    inset 2px 0 4px rgba(100,60,20,0.25),
    inset -2px 0 4px rgba(100,60,20,0.25),
    0 2px 6px rgba(120,90,40,0.30);
}

/* ── 上下回纹装饰边（SVG 回纹 / 万字纹） ── */
.modal-tab::before {   /* 上边框：回纹带 */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background:
    /* 底色（深棕 + 暗边） */
    linear-gradient(180deg, #2a1808, #3a2610),
    /* 回纹图案（黑色双钩回字） */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'><g fill='none' stroke='%23d4a85a' stroke-width='1.2'><path d='M2 3 h12 v12 h-8 v-6 h4'/><path d='M10 3 h8 v12 h-8'/></g></svg>");
  background-size: 100% 100%, 20px 18px;
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  border: 1px solid rgba(60,35,10,0.8);
  border-radius: 2px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
.modal-tab::after {    /* 下边框：回纹带 + 与上对称 */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 18px;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, #3a2610, #2a1808),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'><g fill='none' stroke='%23d4a85a' stroke-width='1.2'><path d='M2 3 h12 v12 h-8 v-6 h4'/><path d='M10 3 h8 v12 h-8'/></g></svg>");
  background-size: 100% 100%, 20px 18px;
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  border: 1px solid rgba(60,35,10,0.8);
  border-radius: 2px;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.6);
}
/* 浅色模式下回纹边：底色偏深赭，线条偏金 */
:root[data-theme="light"] .modal-tab::before,
:root[data-theme="light"] .modal-tab::after {
  background:
    linear-gradient(180deg, #6a3a12, #5a3010),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'><g fill='none' stroke='%23ffd890' stroke-width='1.2'><path d='M2 3 h12 v12 h-8 v-6 h4'/><path d='M10 3 h8 v12 h-8'/></g></svg>");
  background-size: 100% 100%, 20px 18px;
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  border-color: rgba(90,50,15,0.8);
}
/* 下回纹边翻转渐变让上下对称 */
:root[data-theme="light"] .modal-tab::after {
  background:
    linear-gradient(180deg, #5a3010, #6a3a12),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18'><g fill='none' stroke='%23ffd890' stroke-width='1.2'><path d='M2 3 h12 v12 h-8 v-6 h4'/><path d='M10 3 h8 v12 h-8'/></g></svg>");
  background-size: 100% 100%, 20px 18px;
  background-repeat: no-repeat, repeat-x;
  background-position: center, center;
  border-color: rgba(90,50,15,0.8);
}

/* 前4根十翼：字色略偏亮金（与后学区分） */
.modal-tabs > .modal-tab:nth-child(-n+4):not(.active):not(.disabled) {
  color: rgba(255, 245, 220, 0.92);
}
:root[data-theme="light"] .modal-tabs > .modal-tab:nth-child(-n+4):not(.active):not(.disabled) {
  color: rgba(70, 40, 10, 0.95);
}

/* hover：竹简微微上浮 + 铜色高光边 */
.modal-tab:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(210,170,100,0.55),
    inset 2px 0 6px rgba(0,0,0,0.35),
    inset -2px 0 6px rgba(0,0,0,0.35),
    0 5px 12px rgba(200,169,106,0.35),
    0 0 0 1px rgba(200,169,106,0.35);
}
/* 第5根 hover 保留分组分隔线 */
.modal-tabs > .modal-tab:nth-child(5):hover:not(.disabled) {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(210,170,100,0.55),
    inset 2px 0 6px rgba(0,0,0,0.35),
    inset -2px 0 6px rgba(0,0,0,0.35),
    0 5px 12px rgba(200,169,106,0.35),
    0 0 0 1px rgba(200,169,106,0.35);
}
:root[data-theme="light"] .modal-tab:hover:not(.disabled) {
  box-shadow:
    inset 0 0 0 1px rgba(139,69,19,0.6),
    inset 2px 0 6px rgba(100,60,20,0.25),
    inset -2px 0 6px rgba(100,60,20,0.25),
    0 5px 12px rgba(139,69,19,0.28),
    0 0 0 1px rgba(139,69,19,0.45);
}
:root[data-theme="light"] .modal-tabs > .modal-tab:nth-child(5):hover:not(.disabled) {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(139,69,19,0.6),
    inset 2px 0 6px rgba(100,60,20,0.25),
    inset -2px 0 6px rgba(100,60,20,0.25),
    0 5px 12px rgba(139,69,19,0.28),
    0 0 0 1px rgba(139,69,19,0.45);
}

/* ── 激活竹简：古铜金边 + 亮边 + 发光文字 ── */
.modal-tab.active {
  color: #fff8e5;
  text-shadow: 0 0 6px rgba(255,220,150,0.55), 0 1px 2px rgba(0,0,0,0.6);
  background-image:
    linear-gradient(90deg,
      rgba(0,0,0,0.50) 0%,
      rgba(180,135,70,0.22) 18%,
      rgba(255,225,160,0.28) 50%,
      rgba(180,135,70,0.22) 82%,
      rgba(0,0,0,0.50) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(180,120,50,0.20) 0,
      rgba(180,120,50,0.20) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 38px,
      rgba(70,40,12,0.45) 38px,
      rgba(70,40,12,0.45) 40px
    );
  box-shadow:
    inset 0 0 0 1px rgba(240,200,130,0.80),
    inset 2px 0 6px rgba(0,0,0,0.35),
    inset -2px 0 6px rgba(0,0,0,0.35),
    0 0 0 2px rgba(200,169,106,0.55),
    0 4px 14px rgba(200,169,106,0.50);
  transform: translateY(-2px);
}
/* 第5根激活态保留左侧分组分隔线 */
.modal-tabs > .modal-tab:nth-child(5).active {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(240,200,130,0.80),
    inset 2px 0 6px rgba(0,0,0,0.35),
    inset -2px 0 6px rgba(0,0,0,0.35),
    0 0 0 2px rgba(200,169,106,0.55),
    0 4px 14px rgba(200,169,106,0.50);
}
:root[data-theme="light"] .modal-tab.active {
  color: #fff8e5;
  text-shadow: 0 1px 3px rgba(80,40,10,0.7);
  background-image:
    linear-gradient(90deg,
      rgba(100,55,15,0.45) 0%,
      rgba(220,155,75,0.32) 18%,
      rgba(255,230,170,0.42) 50%,
      rgba(220,155,75,0.32) 82%,
      rgba(100,55,15,0.45) 100%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(180,110,40,0.20) 0,
      rgba(180,110,40,0.20) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      180deg,
      transparent 0,
      transparent 38px,
      rgba(120,70,25,0.35) 38px,
      rgba(120,70,25,0.35) 40px
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,220,150,0.85),
    inset 2px 0 6px rgba(100,60,20,0.25),
    inset -2px 0 6px rgba(100,60,20,0.25),
    0 0 0 2px rgba(139,69,19,0.55),
    0 4px 14px rgba(139,69,19,0.45);
}
:root[data-theme="light"] .modal-tabs > .modal-tab:nth-child(5).active {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(255,220,150,0.85),
    inset 2px 0 6px rgba(100,60,20,0.25),
    inset -2px 0 6px rgba(100,60,20,0.25),
    0 0 0 2px rgba(139,69,19,0.55),
    0 4px 14px rgba(139,69,19,0.45);
}

/* ── 禁用竹简：蒙灰 + 低饱和 ── */
.modal-tab.disabled {
  cursor: not-allowed;
  filter: grayscale(0.6) brightness(0.7);
  opacity: 0.55;
}
.modal-tab.disabled:hover {
  transform: none;
  box-shadow:
    inset 0 0 0 1px rgba(30,20,10,0.6),
    inset 2px 0 4px rgba(0,0,0,0.35),
    inset -2px 0 4px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.45);
}
/* 第5根 disabled hover 保留分组分隔线 */
.modal-tabs > .modal-tab:nth-child(5).disabled:hover {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(30,20,10,0.6),
    inset 2px 0 4px rgba(0,0,0,0.35),
    inset -2px 0 4px rgba(0,0,0,0.35),
    0 2px 6px rgba(0,0,0,0.45);
}
:root[data-theme="light"] .modal-tab.disabled:hover {
  box-shadow:
    inset 0 0 0 1px rgba(100,60,20,0.55),
    inset 2px 0 4px rgba(100,60,20,0.25),
    inset -2px 0 4px rgba(100,60,20,0.25),
    0 2px 6px rgba(120,90,40,0.30);
}
:root[data-theme="light"] .modal-tabs > .modal-tab:nth-child(5).disabled:hover {
  box-shadow:
    -7px 0 0 -6px var(--accent-soft),
    inset 0 0 0 1px rgba(100,60,20,0.55),
    inset 2px 0 4px rgba(100,60,20,0.25),
    inset -2px 0 4px rgba(100,60,20,0.25),
    0 2px 6px rgba(120,90,40,0.30);
}

/* ── 通用正文 — 绢帛纸（登录/注册/收藏/六十四卦/八卦等弹窗共用） ── */
.modal-body {
  position: relative;
  padding: 26px 34px 34px;
  overflow-y: auto;
  flex: 1;
  border-top: none;
  background-color: #2d261d;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.9 0.08' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.76  0 0 0 0 0.64  0 0 0 0 0.40  0 0 0 0.09 0'/></filter></defs><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at center, rgba(255,238,200,0.03) 0%, rgba(0,0,0,0.10) 100%),
    linear-gradient(180deg, #2d261d 0%, #312a20 100%);
  color: var(--text-main);
  font-size: 14.5px;
  line-height: 2.15;
  text-indent: 2em;
  letter-spacing: 0.3px;
  font-family: var(--font-body);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), inset 0 -10px 20px rgba(0,0,0,0.10);
}
:root[data-theme="light"] .modal-body {
  background-color: #f5ead0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><defs><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='0.85 0.06' numOctaves='3' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0 0.12  0 0 0 0.14 0'/></filter></defs><rect width='200' height='200' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(
      90deg,
      rgba(139,69,19,0.035) 0,
      rgba(139,69,19,0.035) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(ellipse at center, rgba(255,250,220,0.10) 0%, rgba(139,69,19,0.12) 100%),
    linear-gradient(180deg, #f5ead0 0%, #f0e2c0 100%);
  color: var(--text-main);
  box-shadow: inset 0 2px 8px rgba(120,90,40,0.18), inset 0 -12px 28px rgba(120,90,40,0.12);
}

/* 六十四卦/八卦弹窗的 body 取消 text-indent（用于列表内容表格等布局不要首行缩进） */
.guas-modal .modal-body,
.auth-modal .modal-body,
#savedModalOverlay .modal-body {
  text-indent: 0;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb {
  background: var(--accent-soft);
  border-radius: 3px;
}
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body .empty {
  text-indent: 0;
  text-align: center;
  color: var(--text-mute);
  padding: 40px 20px;
  letter-spacing: 2px;
  font-family: var(--font-display);
}

/* ── 响应式：窄屏缩小竹简 ── */
@media (max-width: 600px) {
  .modal-tabs { gap: 1px; padding: 8px 8px 10px; }
  .modal-tab { min-height: 120px; width: 34px; font-size: 12px; padding: 24px 2px 24px; }
  .modal-tab::before, .modal-tab::after { height: 14px; }
  .modal-tabs > .modal-tab:nth-child(5) { margin-left: 8px; }
}

/* ── 覆盖：六十四卦/八卦弹窗内的小tab（不需要竹简样式） ── */
.guas-modal .modal-header .modal-tabs,
.guas-modal .modal-tabs {
  padding: 0;
  border: none;
  background: transparent;
  gap: 4px;
}
.guas-modal .modal-tab {
  width: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 6px 14px !important;
  border-radius: 8px;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 1px;
  font-size: 13px;
  background: var(--chip-bg) !important;
  background-image: none !important;
  color: var(--text-sub);
  border: 1px solid var(--chip-br);
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}
.guas-modal .modal-tab::before,
.guas-modal .modal-tab::after { display: none !important; }
.guas-modal .modal-tab.active {
  background: var(--accent-bg) !important;
  background-image: none !important;
  color: var(--text-title);
  border-color: var(--chip-br-act);
  text-shadow: none;
  transform: none;
}
.guas-modal .modal-tab:hover:not(.active) {
  transform: none;
  border-color: var(--accent-soft);
}