/* =========================================================
 * Asset Detail Shared CSS
 *
 * 设计原则：
 * 1) 所有样式都以 .ct-asset-detail-root 为作用域入口。
 * 2) 优先 token 化（字体/颜色/间距），减少内联样式和散落定义。
 * 3) 保留 mock 页面需要的工具类，兼容 Web 与 App WebView。
 * ========================================================= */

/* 共享样式 Start */
/* ===== 0) Base Reset ===== */
html,
body {
  margin: 0;
  padding: 0;
}

/* ===== 1) Root & Tokens ===== */
.ct-asset-detail-root {
  margin: 0;
  padding: var(--ct-root-padding);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-y: scroll;

  /* [P0 Core] 必须优先复用：宿主字体、主背景、边框、基础间距 */
  --ct-font-sans: var(--font-sans, 'PingFang SC', 'PingFang TC', 'Microsoft YaHei', 'Microsoft JhengHei', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif);
  --ct-font-serif-heading: var(--font-serif, 'SourceHanSerifSC-Bold', 'Noto Serif SC', 'Noto Serif TC', 'Noto Serif', 'Songti SC', 'Songti TC', 'STSong', 'PMingLiU', Georgia, 'Times New Roman', serif);
  --ct-bg-primary: #fefbf6;
  --ct-bg-soft: #fff8ee;
  --ct-color-border: #f1e3c9;

  /* [P1 Semantic] 推荐优先使用：语义文本色 */
  --ct-color-primary: #6b440d;
  --ct-color-muted: #aeaeb0;
  --ct-color-body: #333333;
  --ct-color-accent: #e1b577;
  --ct-color-ivory: #f5e9d6;
  --ct-color-white: #ffffff;
  --ct-color-emphasis-bg: var(--ct-color-primary);
  --ct-color-border-light: #ece6da;
  --ct-color-timeline-dot: #b28a57;

  /* [P1 Semantic] 推荐优先使用：字号、行高、字重 */
  --ct-fs-body: 16px;
  --ct-fs-body-sm: 14px;
  --ct-fs-tip: 12px;
  --ct-fs-title-main: 24px;
  --ct-fs-h1: 28px;
  --ct-fs-h2: 24px;
  --ct-fs-h3: 20px;
  --ct-fs-h4: 18px;
  --ct-fs-h5: 16px;
  --ct-fs-h6: 14px;

  --ct-lh-body: 24px;
  --ct-lh-body-sm: 22px;
  --ct-lh-tip: 18px;
  --ct-lh-title-main: 28px;
  --ct-lh-h1: 40px;
  --ct-lh-h2: 34px;
  --ct-lh-h3: 30px;
  --ct-lh-h4: 28px;
  --ct-lh-h5: 24px;
  --ct-lh-h6: 22px;

  --ct-fw-400: 400;
  --ct-fw-600: 600;
  --ct-fw-700: 700;

  /* [P1 Semantic] 推荐优先使用：间距与圆角 */
  --ct-space-1: 4px;
  --ct-space-2: 8px;
  --ct-space-3: 12px;
  --ct-space-4: 16px;
  --ct-space-6: 24px;
  --ct-root-padding: var(--ct-space-6);

  --ct-radius-sm: 6px;
  --ct-radius-md: 8px;
  --ct-radius-lg: 12px;
  --ct-radius-xl: 16px;

  /* [P2 Component] 组件级 token，按需调整 */
  --ct-media-gutter: 12px;
  --ct-media-max-width: 720px;
  --ct-img-headline-w: 118px;
  --ct-img-headline-h: 21px;

  font-family: var(--ct-font-sans);
  font-size: var(--ct-fs-body);
  line-height: var(--ct-lh-body);
  word-break: break-word;
}


/* ===== 2) Semantic Element Defaults ===== */
.ct-asset-detail-root h1,
.ct-asset-detail-root h2,
.ct-asset-detail-root h3,
.ct-asset-detail-root h4,
.ct-asset-detail-root h5,
.ct-asset-detail-root h6 {
  margin: 0;
  font-family: var(--ct-font-serif-heading);
}

.ct-asset-detail-root p {
  margin: 0;
}

.ct-asset-detail-root strong,
.ct-asset-detail-root b {
  font-weight: 700;
}

.ct-asset-detail-root em,
.ct-asset-detail-root i {
  font-style: italic;
}

.ct-asset-detail-root u {
  text-decoration: underline;
}

.ct-asset-detail-root s,
.ct-asset-detail-root del {
  text-decoration: line-through;
}

.ct-asset-detail-root a {
  text-decoration: underline;
}

.ct-asset-detail-root ul {
  margin: var(--ct-space-2) 0;
  padding-left: 24px;
  list-style: disc outside;
}

.ct-asset-detail-root ol {
  margin: var(--ct-space-2) 0;
  padding-left: 24px;
  list-style: decimal outside;
}

.ct-asset-detail-root li {
  margin: var(--ct-space-1) 0;
}

.ct-asset-detail-root blockquote {
  margin: var(--ct-space-2) 0;
  padding: var(--ct-space-2) var(--ct-space-3);
  border-left: 3px solid var(--ct-color-border);
  border-radius: var(--ct-radius-sm);
  background-color: var(--ct-bg-soft);
}

.ct-asset-detail-root pre {
  margin: var(--ct-space-2) 0;
  padding: 10px var(--ct-space-3);
  border-radius: var(--ct-radius-md);
  background-color: var(--ct-bg-soft);
  overflow: auto;
}

.ct-asset-detail-root code {
  padding: 1px 4px;
  border-radius: 4px;
  background-color: var(--ct-bg-soft);
}

.ct-asset-detail-root table {
  width: 100%;
  margin: var(--ct-space-2) 0;
  border-collapse: collapse;
}

.ct-asset-detail-root th,
.ct-asset-detail-root td {
  border: 1px solid var(--ct-color-border);
  padding: 6px var(--ct-space-2);
  text-align: left;
}

.ct-asset-detail-root hr {
  margin: var(--ct-space-2) 0;
  border: none;
  border-top: 1px solid var(--ct-color-border);
}

/* ===== 3) Responsive Media ===== */
.ct-asset-detail-root img:not(.ct-img-headline),
.ct-asset-detail-root svg {
  display: block;
  width: calc(100% - (var(--ct-media-gutter) * 2));
  max-width: var(--ct-media-max-width);
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.ct-asset-detail-root img:not(.ct-img-headline) {
  border-radius: var(--ct-radius-lg);
}

@media (min-width: 1024px) {
  .ct-asset-detail-root {
    --ct-media-gutter: 20px;
    --ct-media-max-width: 760px;
  }
}

/* ===== 4) Typography ===== */
.ct-h1 {
  font-size: var(--ct-fs-h1);
  line-height: var(--ct-lh-h1);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h2 {
  font-size: var(--ct-fs-h2);
  line-height: var(--ct-lh-h2);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h3 {
  font-size: var(--ct-fs-h3);
  line-height: var(--ct-lh-h3);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h4 {
  font-size: var(--ct-fs-h4);
  line-height: var(--ct-lh-h4);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h5 {
  font-size: var(--ct-fs-h5);
  line-height: var(--ct-lh-body);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-h6 {
  font-size: var(--ct-fs-h6);
  line-height: var(--ct-lh-h6);
  font-weight: var(--ct-fw-700);
  font-family: var(--ct-font-serif-heading);
}

.ct-text-body {
  font-size: var(--ct-fs-body);
  line-height: var(--ct-lh-body);
  font-weight: var(--ct-fw-400);
}

.ct-text-body-sm {
  font-size: var(--ct-fs-body-sm);
  line-height: var(--ct-lh-h6);
  font-weight: var(--ct-fw-400);
}

.ct-text-tip {
  font-size: var(--ct-fs-tip);
  line-height: var(--ct-lh-tip);
  font-weight: var(--ct-fw-400);
}

.ct-fs-12 {
  font-size: var(--ct-fs-tip);
}

.ct-fs-14 {
  font-size: var(--ct-fs-body-sm);
}

.ct-fs-16 {
  font-size: var(--ct-fs-body);
}

.ct-fs-20 {
  font-size: var(--ct-fs-h3);
}

.ct-fw-400 {
  font-weight: var(--ct-fw-400);
}

.ct-fw-600 {
  font-weight: var(--ct-fw-600);
}

.ct-fw-700 {
  font-weight: var(--ct-fw-700);
}

.ct-lh-18 {
  line-height: var(--ct-lh-tip);
}

.ct-lh-20 {
  line-height: 20px;
}

.ct-lh-24 {
  line-height: var(--ct-lh-body);
}

.ct-lh-28 {
  line-height: var(--ct-lh-title-main);
}

.ct-lh-relaxed {
  line-height: 1.75;
}

.ct-ls-200 {
  letter-spacing: 0.2em;
}

.ct-ls-350 {
  letter-spacing: 0.35em;
}

.ct-lp-lg {
  letter-spacing: 4px;
}

.ct-font-serif,
.ct-font-serif-heading {
  font-family: var(--ct-font-serif-heading);
}

/* ===== 5) Color Tokens ===== */
.ct-color-primary {
  color: var(--ct-color-primary);
}

.ct-color-muted {
  color: var(--ct-color-muted);
}

.ct-color-body {
  color: var(--ct-color-body);
}

.ct-color-accent {
  color: var(--ct-color-accent);
  font-weight: var(--ct-fw-700);
}

.ct-color-highlight {
  color: var(--ct-color-accent);
  font-weight: var(--ct-fw-700);
}

.ct-color-sep {
  color: var(--ct-color-accent);
}

.ct-color-white {
  color: var(--ct-color-white);
}

.ct-color-ivory {
  color: var(--ct-color-ivory);
}

/* ===== 6) Surface & Border ===== */
.ct-bg-primary {
  background-color: var(--ct-bg-primary);
}

.ct-bg-soft {
  background-color: var(--ct-bg-soft);
}

.ct-bg-emphasis {
  background-color: var(--ct-color-primary);
}

.ct-bg-white {
  background-color: #ffffff;
}

.ct-border {
  border: 1px solid var(--ct-color-border);
}

.ct-border-top {
  border-top: 1px solid var(--ct-color-border);
}

.ct-border-bottom {
  border-bottom: 1px solid var(--ct-color-border);
}

.ct-border-primary {
  border-color: var(--ct-color-border);
}

.ct-border-light {
  border-color: var(--ct-color-border-light);
}

.ct-shadow-soft {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.ct-rounded-6 {
  border-radius: var(--ct-radius-sm);
}

.ct-rounded-8 {
  border-radius: var(--ct-radius-md);
}

.ct-rounded-12 {
  border-radius: var(--ct-radius-lg);
}

.ct-rounded-16 {
  border-radius: var(--ct-radius-xl);
}

/* ===== 7) Layout ===== */
.ct-text-center {
  width: 100%;
  text-align: center;
}

.ct-text-left {
  text-align: left;
}

.ct-text-right {
  text-align: right;
}

.ct-text-nowrap {
  white-space: nowrap;
}

.ct-text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ct-flex-y-center {
  display: flex;
  align-items: center;
}

.ct-flex-x-center {
  display: flex;
  justify-content: center;
}

.ct-flex-row {
  display: flex;
  flex-direction: row;
}

.ct-flex-col {
  display: flex;
  flex-direction: column;
}

.ct-items-center {
  align-items: center;
}

.ct-items-start {
  align-items: flex-start;
}

.ct-items-end {
  align-items: flex-end;
}

.ct-justify-between {
  justify-content: space-between;
}

.ct-justify-start {
  justify-content: flex-start;
}

.ct-justify-center {
  justify-content: center;
}

.ct-justify-end {
  justify-content: flex-end;
}

.ct-flex-wrap {
  flex-wrap: wrap;
}

.ct-flex-nowrap {
  flex-wrap: nowrap;
}

.ct-gap-4 {
  gap: 4px;
}

.ct-gap-8 {
  gap: 8px;
}

.ct-overflow-hidden {
  overflow: hidden;
}

.ct-w-full {
  width: 100%;
}

.ct-h-full {
  height: 100%;
}

.ct-ar-1-1 {
  aspect-ratio: 1 / 1;
}

.ct-ar-9-16 {
  aspect-ratio: 9 / 16;
}

/* ===== 8) Generic Spacing Utilities ===== */
.ct-m-0 {
  margin: 0;
}

.ct-mb-4 {
  margin-bottom: 4px;
}

.ct-mb-8 {
  margin-bottom: 8px;
}

.ct-mt-4 {
  margin-top: 4px;
}

.ct-mt-8 {
  margin-top: 8px;
}

.ct-my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}

.ct-my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}

.ct-mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}

.ct-mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}

.ct-ml-4 {
  margin-left: 4px;
}

.ct-p-0 {
  padding: 0;
}

.ct-p-4 {
  padding: 4px;
}

.ct-p-8 {
  padding: 8px;
}

.ct-pt-4 {
  padding-top: 4px;
}

.ct-pt-8 {
  padding-top: 8px;
}

.ct-pb-4 {
  padding-bottom: 4px;
}

.ct-pb-8 {
  padding-bottom: 8px;
}

.ct-px-4 {
  padding-left: 4px;
  padding-right: 4px;
}

.ct-px-8 {
  padding-left: 8px;
  padding-right: 8px;
}

.ct-px-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.ct-py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}

.ct-py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ===== 9) Mock Spacing Mapping ===== */
.ct-sp-mb-1 {
  margin-bottom: 4px;
}

.ct-sp-mb-2 {
  margin-bottom: 8px;
}

.ct-sp-mb-3 {
  margin-bottom: 12px;
}

.ct-sp-mb-4 {
  margin-bottom: 16px;
}

.ct-sp-mt-2 {
  margin-top: 8px;
}

.ct-sp-mx-2 {
  margin-left: 8px;
  margin-right: 8px;
}

.ct-sp-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.ct-sp-pl-1 {
  padding-left: 4px;
}

.ct-sp-pl-3 {
  padding-left: 12px;
}

.ct-sp-px-3 {
  padding-left: 12px;
  padding-right: 12px;
}

.ct-sp-px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.ct-sp-py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ct-sp-py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.ct-sp-gap-2 {
  gap: 8px;
}

/* ===== 10) Component Blocks ===== */
.ct-image {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--ct-radius-lg);
}

.ct-title-main {
  font-family: var(--ct-font-serif-heading);
  font-size: var(--ct-fs-title-main);
  line-height: var(--ct-lh-title-main);
  font-weight: var(--ct-fw-400);
}

.ct-tag-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
}

.ct-tag-item {
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 6px;
}

.ct-timeline-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ct-space-2);
}

.ct-timeline-content {
  flex: 1;
  min-width: 0;
}

.ct-timeline-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--ct-color-timeline-dot);
  margin-bottom: 0;
}

.ct-timeline-row .ct-timeline-dot {
  flex: 0 0 auto;
  margin-top: 8px;
}

.ct-img-headline {
  display: block;
  width: var(--ct-img-headline-w);
  height: var(--ct-img-headline-h);
  object-fit: cover;
}
/* 共享样式 End */
/* 自定义样式区域 */
/* ===== Hexagram (Liu Yao) Start ===== */
.ct-hex-page {
  background-image: url('https://app.cantian.ai/images/dash/fortune_bg.png'),
    url('https://app.cantian.ai/images/dash/basic_bg_2.png');
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
}

.ct-hex-question {
  padding-left: 12px;
  border-left: 2px solid #a62c2b;
  color: var(--ct-color-primary);
}

.ct-hex-question p {
  transform: skewX(-8deg);
}

.ct-hex-time-pill {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.05em;
  color: #7e7e7e;
}

.ct-hex-section {
  padding-top: 16px;
  padding-bottom: 16px;
}

.ct-hex-type {
  display: inline-block;
  padding: 0 8px;
  border-radius: 8px;
  color: #fefbf6;
  font-size: 12px;
  line-height: 18px;
}

.ct-hex-type-ben {
  background-color: #a62c2b;
}

.ct-hex-type-bian {
  background-color: #7e7e7e;
}

.ct-hex-name {
  margin: 8px 0;
  font-size: 36px;
  line-height: 36px;
  color: var(--ct-color-primary);
}

.ct-hex-seq {
  color: #7e7e7e;
  font-size: 16px;
  line-height: 24px;
}

.ct-hex-yao-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ct-hex-yao-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.ct-hex-side {
  width: 96px;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ct-hex-side-left {
  text-align: right;
}

.ct-hex-side-right {
  text-align: left;
}

.ct-hex-yang {
  width: 144px;
  height: 16px;
  border-radius: 6px;
  background-color: var(--ct-color-primary);
}

.ct-hex-yang-active {
  background-color: #a62c2b;
}

.ct-hex-yin {
  width: 144px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ct-hex-yin-half {
  display: block;
  width: 64px;
  height: 100%;
  border-radius: 6px;
  background-color: var(--ct-color-primary);
}

.ct-hex-mark {
  color: #3f6ea8;
}


.ct-hex-arrow {
  margin: 24px 0;
  color: #a62c2b;
}

.ct-asset-detail-root svg.ct-hex-arrow-icon {
  width: 48px;
  max-width: 48px;
  height: 48px;
  margin: 0;
}

.ct-asset-detail-root img.ct-hex-signature {
  width: 100px;
  max-width: 100px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: 0;
  border-radius: 0;
}
/* ===== Hexagram (Liu Yao) Start ===== */