/* Daily & Hexagram isolated styles */

/* 两栏布局 */
.daily-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: stretch;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto var(--gap-xl);
}

@media (max-width: 960px) {
    .daily-two-col {
        grid-template-columns: 1fr;
    }
}

/* 右列双容器：上-引导卡片，下-主体，与左列等高 */
.daily-left {
    display: block;
}

.daily-right {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--gap);
}

/* 更醒目的咨询引导卡片 */
.consultation-prompt.prominent {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(189, 151, 105, .45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.consultation-prompt.prominent h4 {
    font-size: 20px;
    color: rgb(225 179 85);
}

.consultation-prompt.prominent p {
    color: rgba(255, 255, 255, .9);
}

.consultation-prompt.prominent .cta-text {
    font-size: 15px;
}

/* 每日启发卡片 */
.daily-inspiration-section {
    margin-bottom: var(--gap-xl);
}

.daily-card {
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    padding: calc(var(--gap) - 6px);
    margin: 0 auto;
    max-width: 600px;
    min-height: 420px;
    max-height: 480px;
    backdrop-filter: blur(2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .16);
    color: rgba(255, 255, 255, .92);
}

.daily-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    margin-bottom: var(--gap-sm);
    border-bottom: 1px solid rgba(118, 99, 76, .2);
    padding-bottom: 8px;
}

.daily-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    grid-template-areas: 'title title' 'keywords keywords' 'overview guidance' 'scenarios guidance' 'quote quote';
    gap: 10px 16px;
}

.daily-content .inspiration-title {
    grid-area: title;
}

.daily-content .inspiration-keywords {
    grid-area: keywords;
}

.daily-content .inspiration-overview {
    grid-area: overview;
}

.daily-content .inspiration-guidance {
    grid-area: guidance;
}

.daily-content .inspiration-scenarios {
    grid-area: scenarios;
}

.daily-content .inspiration-quote {
    grid-area: quote;
}

.daily-header h2 {
    font-size: var(--text-lg);
    color: rgb(189 151 105);
    margin: 0;
}

.daily-date {
    font-size: var(--text-sm);
    color: rgba(118, 99, 76, .7);
}

.inspiration-title {
    font-size: var(--text-xl);
    color: rgb(225 149 57);
    margin-bottom: var(--gap-sm);
    text-align: center;
}

.inspiration-overview {
    margin-bottom: var(--gap-sm);
}

.inspiration-overview p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inspiration-overview strong,
.inspiration-keywords strong {
    display: block;
    color: rgb(189 151 105);
    font-size: var(--text-sm);
    margin-bottom: var(--gap-xs);
    letter-spacing: .06em;
}

.inspiration-overview p {
    margin: 0;
    line-height: 1.7;
    color: rgba(255, 255, 255, .92);
}

.inspiration-keywords {
    margin-bottom: var(--gap-sm);
}

.keyword-tags {
    display: flex;
    justify-content: center;
    gap: var(--gap-xs);
    flex-wrap: wrap;
}

.keyword-tag {
    background: rgba(118, 99, 76, .10);
    color: rgb(200 143 75);
    padding: 3px 10px;
    border-radius: 14px;
    font-size: var(--text-sm);
    border: 1px solid rgba(118, 99, 76, .22);
}

.inspiration-guidance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: var(--gap-sm);
}

.inspiration-guidance .guidance-section {
    padding: var(--gap-sm);
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
}

.inspiration-guidance .guidance-section strong {
    display: block;
    color: rgb(189 151 105);
    font-size: var(--text-sm);
    margin-bottom: var(--gap-xs);
}

.inspiration-guidance ul {
    margin: 0;
    padding-left: 0;
    list-style: disc inside;
}

.inspiration-guidance li {
    font-size: var(--text-sm);
    line-height: 1.5;
    margin-bottom: 4px;
    position: static;
}

.inspiration-scenarios {
    margin-bottom: var(--gap-sm);
}

.inspiration-scenarios .scenario {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 6px 10px;
    margin-bottom: var(--gap-sm);
    padding: var(--gap-sm);
    background: rgba(255, 255, 255, .04);
    border-radius: 8px;
    border-left: 3px solid rgba(255, 255, 255, .24);
    color: rgba(255, 255, 255, .95);
}

.inspiration-scenarios .scenario strong {
    display: block;
    color: rgb(211 154 86);
    font-size: var(--text-sm);
    margin-bottom: var(--gap-xs);
}

.inspiration-scenarios .scenario p {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.inspiration-quote {
    text-align: center;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .06);
    border-radius: 8px;
    color: rgba(255, 255, 255, .92);
}

.inspiration-quote blockquote {
    font-size: var(--text-base);
}

.inspiration-quote strong {
    display: block;
    color: rgb(189 151 105);
    font-size: var(--text-sm);
    margin-bottom: var(--gap-sm);
}

.inspiration-quote blockquote {
    margin: 0;
    font-style: italic;
    font-size: var(--text-md);
    color: rgb(200 143 75);
}

/* 抽签卡片 */
.personal-divination-section {
    margin-bottom: var(--gap-xl);
    border: 1px solid rgba(118, 99, 76, .28);
    border-radius: 12px;
    padding: clamp(10px, 1.8vw, 16px);
    background: rgba(255, 255, 255, .03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

.divination-intro {
    text-align: center;
    margin-bottom: var(--gap-lg);
}

.divination-intro h2 {
    font-size: var(--text-xl);
    color: var(--primary-color);
    margin-bottom: var(--gap-sm);
}

.divination-intro p {
    color: rgba(255, 255, 255, .75);
    font-size: var(--text-md);
}

.hexagram-draw-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-lg);
}

.hexagram-card {
    width: 300px;
    height: 420px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    /* 使用渐变占位，等图片到达后覆盖，避免首屏白块卡顿 */
    background:
        linear-gradient(180deg, rgba(50, 40, 30, .5), rgba(30, 25, 20, .9)),
        rgba(30, 25, 20, 0.9);
    border: 2px solid rgba(118, 99, 76, .35);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    transition: transform .6s;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}

.card-back {
    transform: rotateY(180deg);
}

.hexagram-card.drawing .card-front {
    transform: rotateY(-180deg);
}

.hexagram-card.drawing .card-back {
    transform: rotateY(0);
}

.card-pattern {
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, rgba(200, 160, 100, .3) 25%, rgba(50, 40, 30, .2) 25%, rgba(50, 40, 30, .2) 75%, rgba(200, 160, 100, .3) 75%);
    background-size: 20px 20px;
    border-radius: 50%;
    margin-bottom: var(--gap-md);
    border: 2px solid rgba(180, 150, 100, .4);
}

.draw-btn {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 14px 28px;
    border-radius: 26px;
    font-size: var(--text-md);
    cursor: pointer;
    transition: all .3s;
    min-width: 160px;
}

.draw-action {
    margin-top: var(--gap-sm);
    text-align: center;
}

/* 響應式：移動端單欄並縮放卡片，確保一屏可見抽籤區域 */
@media (max-width: 960px) {
    .daily-two-col {
        grid-template-columns: 1fr;
        gap: var(--gap);
        max-width: 640px;
    }

    .daily-content {
        grid-template-columns: 1fr;
        grid-template-areas: 'title' 'keywords' 'overview' 'guidance' 'scenarios' 'quote';
    }

    .personal-divination-section {
        margin-top: var(--gap);
    }

    .hexagram-card {
        width: 240px;
        height: 336px;
    }

    .draw-btn {
        min-width: 140px;
        padding: 12px 20px;
    }
}

@media (max-width: 420px) {
    .hexagram-card {
        width: 210px;
        height: 294px;
    }

    .draw-btn {
        min-width: 128px;
        padding: 10px 18px;
        border-radius: 22px;
    }
}

/* 咨询引导容器样式 */
.consultation-prompt,
.hex-consultation-prompt,
.hex-cta-banner {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(189, 151, 105, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 24px 0;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    text-align: center;
    /* 确保内容居中 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    /* 为链接去除下划线 */
}

.consultation-prompt:hover,
.hex-consultation-prompt:hover,
.hex-cta-banner:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(189, 151, 105, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(189, 151, 105, 0.15);
}

.consultation-prompt h4,
.hex-consultation-prompt h4,
.hex-cta-banner h4 {
    color: rgb(225, 179, 85);
    font-size: 18px;
    margin: 0 0 12px 0;
    font-weight: 500;
    width: 100%;
}

.consultation-prompt p,
.hex-consultation-prompt p,
.hex-cta-banner p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    margin: 0 0 12px 0;
    font-size: 15px;
    max-width: 90%;
}

.consultation-prompt .cta-text,
.hex-consultation-prompt .cta-text,
.hex-cta-banner .cta-text {
    color: rgb(189, 151, 105);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 24px;
    /* 增加一点 Padding */
    margin-top: 12px;
    border: 1px solid rgba(189, 151, 105, 0.4);
    border-radius: 20px;
    background: rgba(189, 151, 105, 0.1);
    transition: all 0.3s;
    text-decoration: none;

    /* 核心居中修正 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}

.consultation-prompt:hover .cta-text,
.hex-consultation-prompt:hover .cta-text,
.hex-cta-banner:hover .cta-text {
    background: rgba(189, 151, 105, 0.2);
    border-color: rgba(189, 151, 105, 0.8);
    transform: translateY(-1px);
}

/* 響應式調整 */
@media (max-width: 960px) {

    .consultation-prompt,
    .hex-consultation-prompt {
        padding: 20px 16px;
        /* 增加上下 Padding */
        margin: 16px auto;
        /* Auto 确保容器本身居中 */
        justify-content: center;
    }

    .consultation-prompt h4,
    .hex-consultation-prompt h4 {
        font-size: 16px;
    }

    .consultation-prompt p,
    .hex-consultation-prompt p {
        font-size: 14px;
    }
}

/* 點擊晃動效果（無翻牌） */
@keyframes daily-card-shake {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    15% {
        transform: translateX(-6px) rotate(-1.2deg);
    }

    30% {
        transform: translateX(6px) rotate(1.2deg);
    }

    45% {
        transform: translateX(-5px) rotate(-1deg);
    }

    60% {
        transform: translateX(5px) rotate(1deg);
    }

    75% {
        transform: translateX(-3px) rotate(-0.6deg);
    }

    100% {
        transform: translateX(0) rotate(0deg);
    }
}

.hexagram-card.shaking {
    animation: daily-card-shake 0.6s ease-in-out 1;
    will-change: transform;
}

.draw-btn:hover:not(:disabled) {
    background: #5a4a3a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(118, 99, 76, .3);
}

.draw-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

/* 卦图与结果区 */
.hexagram-symbol {
    text-align: center;
}

.hexagram-lines {
    margin-bottom: var(--gap-sm);
}

.hexagram-visual {
    display: grid;
    place-items: center;
    gap: var(--gap-sm);
    margin-bottom: var(--gap-md);
}

/* 主卦与变卦并排 */
.hexagram-visual.main-and-changed {
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-items: center;
}

.hexagram-visual .main-hex {
    justify-self: center;
    transform: translateX(8px);
}

.hexagram-visual .changed-hex {
    border: 1px solid rgba(118, 99, 76, .28);
    border-radius: 12px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, .03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    margin-left: 10px;
    transform: scale(.6);
    transform-origin: left center;
}

.hexagram-visual .changed-hex .changed-title {
    text-align: center;
    color: rgb(225 149 57);
    margin-bottom: 8px;
}

.hexagram-visual .changed-hex .gtukuang {
    margin: 6px auto;
}

.hexagram-visual .changed-hex .changed-name {
    text-align: center;
    color: rgb(225 149 57);
    margin-top: 6px;
}

.taiji-icon {
    font-size: 64px;
    line-height: 1;
    color: #fff;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6));
    margin-bottom: var(--gap-sm);
}

.line {
    width: 140px;
    height: 12px;
    margin: 6px auto;
    background: #ffffff;
    border-radius: 3px;
}

.line.broken {
    background: linear-gradient(to right, #d4af37 0 44%, transparent 44% 56%, #d4af37 56% 100%);
}

.hexagram-result {
    /* legacy block removed to unify background with other pages */
}

.hexagram-header h3 {
    font-size: clamp(20px, 3.2vw, 26px);
    color: rgb(225 149 57);
    margin-bottom: var(--gap-xs);
    text-align: center;
}

.hexagram-summary {
    font-size: clamp(14px, 2.4vw, 16px);
    line-height: 1.7;
    margin: 0 auto var(--gap-md);
    text-align: center;
    color: rgba(255, 255, 255, .92);
    max-width: 640px;
}

.hexagram-keywords {
    display: flex;
    justify-content: center;
    gap: 8px 10px;
    margin-bottom: var(--gap-lg);
    flex-wrap: wrap;
}

.hexagram-interpretation {
    margin-top: var(--gap);
    margin-bottom: var(--gap);
}

.hexagram-interpretation h4 {
    font-size: var(--text-md);
    color: rgb(189 151 105);
    margin: 8px 0 var(--gap-xs);
    text-align: center;
}

.hexagram-interpretation p {
    line-height: 1.8;
    color: rgba(255, 255, 255, .92);
    margin: 0 auto;
    max-width: 720px;
}

.hexagram-guidance {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-md);
    margin-bottom: var(--gap-lg);
}

.guidance-section h4 {
    font-size: var(--text-md);
    color: rgb(189 151 105);
    margin-bottom: var(--gap-xs);
}

.daily-inspiration-section .guidance-section p {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.hexagram-guidance ul {
    margin: 0;
    padding-left: 0;
    list-style: disc inside;
}

.hexagram-guidance li {
    margin-bottom: 4px;
}

.hexagram-scenarios {
    margin-bottom: var(--gap-lg);
}

.scenario {
    margin-bottom: var(--gap-md);
    padding: var(--gap-sm);
    background: rgba(118, 99, 76, .05);
    border-radius: 8px;
    border-left: 4px solid rgba(118, 99, 76, .3);
}

.scenario h4 {
    font-size: var(--text-md);
    margin-bottom: var(--gap-xs);
    color: rgb(211 154 86);
}

.daily-inspiration-section .scenario p {
    font-size: var(--text-sm);
    line-height: 1.5;
    color: rgba(255, 255, 255, .92);
}

.hexagram-quote {
    background: rgba(118, 99, 76, .05);
    border-left: 4px solid var(--primary-color);
    padding: var(--gap-sm) var(--gap-md);
    margin: var(--gap-md) 0;
    font-style: italic;
    text-align: center;
    border-radius: 0 8px 8px 0;
}

.hex-right .hexagram-quote {
    margin: 0 0 var(--gap-lg);
    line-height: 1.8;
}

.hex-right-grid {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: var(--gap);
}

/* 移动端：hex 结果页引导卡片居中显示 */
@media (max-width: 960px) {
    .hex-right-grid>.consultation-prompt.prominent {
        justify-self: center;
        width: 100%;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }
}

.share-section {
    text-align: center;
    margin-top: var(--gap-lg);
    display: flex;
    gap: var(--gap);
    justify-content: center;
    align-items: center;
    margin-bottom: 10vh;
}

.share-btn,
.back-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: var(--text-md);
    cursor: pointer;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
    gap: var(--gap-xs);
    text-decoration: none;
}

.back-btn {
    background: rgba(118, 99, 76, .25);
    border: 1px solid rgba(118, 99, 76, .35);
}

.share-btn:hover,
.back-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, .35);
}

.share-icon {
    font-size: var(--text-lg);
}

/* =============================================================
   Minimal layout overrides for Daily & Hex pages (single-column)
   保留文字配色与层级，弱化容器装饰与卡片化视觉
   ============================================================= */

/* 全局栈式布局与宽度控制 */
.daily-two-col {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--gap);
    max-width: 980px;
    margin: 0 auto var(--gap-xl);
    align-items: stretch;
}

.daily-two-col>.daily-inspiration-section,
.daily-two-col>.personal-divination-section {
    border: 1px solid rgba(118, 99, 76, .28);
    border-radius: 12px;
    padding: clamp(10px, 1.8vw, 16px);
    background: rgba(255, 255, 255, .03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    height: 100%;
}

.daily-inspiration-section {
    margin-bottom: var(--gap-lg);
}

/* 去卡片化：移除背景、投影、边框与固定高度 */
.daily-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    max-width: none;
    min-height: unset;
    max-height: none;
    box-shadow: none;
    color: inherit;
}

.daily-header {
    display: block;
    border: 0;
    padding: 0;
    margin-bottom: var(--gap);
}

.daily-date {
    display: block;
    margin-top: 6px;
    color: rgba(118, 99, 76, .7);
}

/* 内容改为垂直栈布局 */
.daily-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
    grid-template-columns: unset;
    grid-template-areas: unset;
}

.inspiration-overview,
.inspiration-keywords,
.inspiration-guidance,
.inspiration-scenarios,
.inspiration-quote {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* 指南与情境：移动端单列，桌面保持简洁 */
.inspiration-guidance {
    grid-template-columns: 1fr;
    gap: 6px;
}

.inspiration-scenarios .scenario {
    background: transparent;
    border-left: 2px solid rgba(118, 99, 76, .35);
    border-radius: 0;
}

/* 宜/不宜 文本左对齐 */
.inspiration-guidance,
.inspiration-guidance .guidance-section,
.inspiration-guidance li,
.inspiration-guidance p {
    text-align: left;
}

/* 標題「宜/不宜」置中 */
.inspiration-guidance .guidance-section strong {
    text-align: center;
}

/* 抽签卡片：弱化装饰，保留按钮与交互 */
.hexagram-draw-area {
    gap: var(--gap-xs);
}

.hexagram-card {
    width: 300px;
    height: 420px;
}

.card-front,
.card-back {
    background: url('/images/card-bg.png') center/cover no-repeat, rgba(30, 25, 20, 0.85);
    border: 1px solid rgba(118, 99, 76, .28);
}

.card-pattern {
    display: none;
}

/* 结果区：改为单列流式，弱化容器装饰 */
.hexagram-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    align-items: stretch;
    max-width: none;
    width: 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.hex-left,
.hex-right {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(118, 99, 76, .28);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
    min-width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    max-width: none;
}

.hex-left {
    margin-bottom: var(--gap);
    max-width: none;
}

.hexagram-keywords {
    margin-bottom: var(--gap);
}

.hexagram-guidance {
    grid-template-columns: 1fr;
    gap: var(--gap-sm);
}

.scenario {
    background: transparent;
    border-left: 2px solid rgba(118, 99, 76, .35);
    border-radius: 0;
}

/* 结果页 宜/不宜 文本左对齐 */
.hexagram-guidance,
.hexagram-guidance .guidance-section,
.hexagram-guidance p {
    text-align: left;
}

/* 結果頁標題「宜/不宜」置中 */
.hexagram-guidance .guidance-section h4 {
    text-align: center;
}

/* Related hex (互/综/错)缩小约一半 */
.related-hex-grid {
    gap: 6px;
}

.mini-hex {
    padding: 4px 2px;
}

.mini-hex h4 {
    font-size: 12px;
}

/* 互/综/错 的小卦线条（渲染为 gua-line），宽高为原来的一半 */
.mini-lines .gua-line {
    width: 60px;
    height: 6px;
    margin: 4px auto;
    border-radius: 2px;
}

/* 修复阴爻虚线显示 */
.gtukuang .gua-line.yin {
    background: linear-gradient(to right,
            rgb(189, 151, 105) 0 42%,
            transparent 42% 58%,
            rgb(189, 151, 105) 58% 100%) !important;
}

.gtukuang .gua-line.yang {
    background: rgb(225, 149, 57) !important;
}

/* 兼容小屏：维持单列并收紧间距 */
@media (max-width: 960px) {
    .daily-two-col {
        grid-template-columns: 1fr;
        align-items: start;
        max-width: 680px;
    }

    .hexagram-result {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto var(--gap);
    }

    .hex-left {
        margin-bottom: var(--gap);
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        border-right: 0;
    }

    .hex-right {
        width: 100%;
        max-width: 100%;
    }

    .daily-two-col .personal-divination-section {
        align-self: auto;
        justify-self: auto;
    }

    .hexagram-draw-area {
        justify-content: center;
        position: static;
    }

    .hexagram-card {
        width: 200px;
        height: 280px;
    }

    /* 移动端：摘要与分享/返回悬浮按钮 */
    .hexagram-summary {
        text-align: center;
    }

    /* 移動端：固定在底部 1/3 高度附近（約 33vh），並移除多餘外邊距 */
    .share-section {
        position: fixed;
        right: 16px;
        bottom: 33vh !important;
        z-index: 220;
        flex-direction: column;
        gap: 12px;
        justify-content: flex-end;
        align-items: center;
        margin-top: 0;
    }

    .share-btn,
    .back-btn {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }

    .share-section .btn-label {
        display: none;
    }
}

/* 左侧新增标题与搬迁信息的间距优化 */
.hex-left .hexagram-title {
    text-align: center;
    color: rgb(225 149 57);
    font-size: var(--text-lg);
    margin-bottom: 8px;
}

.hex-left .hexagram-name {
    text-align: center;
    color: rgb(225 149 57);
    font-size: var(--text-lg);
    margin: 6px 0 10px;
    letter-spacing: .12em;
}

@media (min-width: 961px) {
    .hex-left .hexagram-summary {
        margin-top: 50px;
    }
}

.hex-left .hexagram-header {
    margin-top: 8px;
}

.hex-left .hexagram-header h3 {
    display: none;
}

.hex-left .hexagram-keywords {
    justify-content: center;
    margin-top: 8px;
}

/* Mobile refinements: keep flow, improve readability, no structure change */
@media (max-width: 480px) {

    /* 文案区域统一左对齐与间距收紧 */
    .daily-card {
        padding: 0;
    }

    .daily-content {
        gap: 10px;
    }

    /* 标题与小节标题在移动端置中，正文仍左对齐 */
    .inspiration-title {
        text-align: center;
    }

    .inspiration-overview strong,
    .inspiration-keywords strong {
        text-align: center;
    }

    .inspiration-overview p,
    .inspiration-guidance,
    .inspiration-guidance .guidance-section,
    .inspiration-guidance li,
    .inspiration-guidance p,
    .inspiration-scenarios .scenario,
    .inspiration-scenarios .scenario p {
        text-align: left;
    }

    /* 概述正文在移动端居中 */
    .inspiration-overview p {
        text-align: center;
    }

    .inspiration-guidance ul {
        padding-left: 16px;
    }

    .keyword-tags {
        justify-content: center;
        gap: 6px;
    }

    /* 关键词标签字号提升一档 */
    .keyword-tag {
        font-size: var(--text-sm);
        padding: 3px 10px;
    }

    /* 抽牌按钮宽度与间距 */
    .draw-btn {
        width: 100%;
        max-width: 280px;
    }

    .draw-action {
        margin-top: 8px;
    }

    /* 结果页文案略微收紧 */
    .hexagram-result {
        gap: 14px;
    }

    .hexagram-summary {
        text-align: center;
    }
}

/* 在移动端与服务页保持一致：去除外层容器装饰，仅保留内部卡片样式 */
@media (max-width: 768px) {

    .daily-two-col>.daily-inspiration-section,
    .daily-two-col>.personal-divination-section {
        border: 0;
        background: transparent;
        padding: 0;
        box-shadow: none;
    }
}

/* Match services page mobile visual for containers */
@media (max-width: 768px) {
    .daily-two-col {
        gap: var(--gap-sm);
    }

    .daily-two-col>.daily-inspiration-section,
    .daily-two-col>.personal-divination-section {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: var(--gap);
        box-shadow: none;
    }
}

/* =============================================================
   Elegant redesign: readable, interactive, sticky columns
   - Daily page: left content, right sticky card
   - Hex page: left sticky hex, right explanations
   ============================================================= */

/* Daily page two-column proportions and stickiness */
.daily-two-col {
    grid-template-columns: minmax(360px, 1fr) minmax(320px, 420px);
    align-items: stretch;
    gap: clamp(20px, 4vw, 36px);
    --sticky-top: 148px;
}

/* Right column: sticky only on desktop; keep mobile flow natural */
.hexagram-draw-area {
    position: static;
}

@media (min-width: 1024px) {
    .hexagram-draw-area {
        position: sticky;
        top: var(--sticky-top);
    }
}

/* Subtle separators and refined spacing in the left editorial column */
.daily-header {
    margin-bottom: var(--gap-sm);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(118, 99, 76, .18);
}

.inspiration-keywords {
    margin-top: 4px;
}

.keyword-tag {
    border-radius: 18px;
    padding: 4px 12px;
}

.inspiration-guidance {
    gap: var(--gap-sm);
}

@media (min-width: 960px) {
    .inspiration-guidance {
        grid-template-columns: 1fr 1fr;
    }
}

.inspiration-scenarios .scenario {
    border-left-width: 2px;
    padding: 10px 12px;
}

/* Card: elegant micro-interaction without干扰翻牌动画 */
.hexagram-card {
    transition: transform .35s ease, box-shadow .35s ease;
    will-change: transform;
}

.hexagram-card:hover {
    transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
}

@media (min-width: 961px) {

    /* Result page: left sticky hex, right content with vertical rhythm (equal columns) */
    .hexagram-result {
        --sticky-top: 148px;
        grid-template-columns: 1fr 1fr;
        gap: clamp(18px, 3vw, 28px);
        align-items: start;
    }

    /* Grid Placement: Left spans 2 rows, CTA and Right stack in col 2 */
    .hex-left {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .hexagram-result .hex-cta-banner {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        align-self: start;
    }

    .hex-right {
        grid-column: 2;
        grid-row: 2;
    }
}

.hex-left {
    position: static;
    align-self: start;
}

@media (min-width: 1024px) {
    .hex-left {
        position: sticky;
        top: var(--sticky-top);
    }
}

.hex-right {}

.hexagram-keywords {
    margin-top: -4px;
}

.hexagram-quote {
    margin-top: var(--gap);
}

/* Buttons: refined hover */
.draw-btn {
    letter-spacing: .04em;
}

.draw-btn:hover:not(:disabled) {
    box-shadow: 0 6px 18px rgba(118, 99, 76, .32);
}

/* Center content under YI/BUYI across pages (desktop & mobile) */
.inspiration-guidance .guidance-section p,
.inspiration-guidance .guidance-section li {
    text-align: center;
}

.hexagram-guidance .guidance-section p,
.hexagram-guidance .guidance-section li {
    text-align: center;
}

/* Readability fix: light guidance cards must not inherit white text. */
.inspiration-guidance .guidance-section,
.hexagram-guidance .guidance-section {
    color: #3b3028;
}

.inspiration-guidance .guidance-section p,
.inspiration-guidance .guidance-section li,
.hexagram-guidance .guidance-section p,
.hexagram-guidance .guidance-section li {
    color: #3b3028 !important;
    text-shadow: none !important;
}

.inspiration-guidance .guidance-section li::marker,
.hexagram-guidance .guidance-section li::marker {
    color: rgba(118, 99, 76, 0.72);
}

.inspiration-guidance .guidance-section strong,
.hexagram-guidance .guidance-section h4 {
    color: rgb(189 151 105) !important;
    text-shadow: none !important;
}

/* Hexagram result pages use light cards; keep all body copy readable. */
.hexagram-result,
.hexagram-result p,
.hexagram-result li,
.hexagram-summary,
.hexagram-interpretation p,
.hexagram-scenarios p,
.plum-blossom-info,
.plum-blossom-info p,
.related-hex-grid,
.mini-hex,
.mini-hex p,
.hexagram-header p {
    color: #3b3028 !important;
    text-shadow: none !important;
}

.hexagram-result h3,
.hexagram-result h4,
.hexagram-interpretation h4,
.mini-hex h4 {
    text-shadow: none !important;
}

.hexagram-quote {
    color: #5b4a3d !important;
    text-shadow: none !important;
}

/* Mobile: disable stickiness for natural flow */
@media (max-width: 768px) {
    .hexagram-draw-area {
        position: static;
    }

    .hex-left {
        position: static;
        border-right: 0;
        padding-right: 0;
    }

    .hex-right {
        padding-left: 0;
    }
}


/* Daily page specific: center the right column vertically relative to left */
.daily-two-col .personal-divination-section {
    align-self: stretch;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-two-col .hexagram-draw-area {
    position: static;
}

@media (max-width: 960px) {
    .daily-two-col .personal-divination-section {
        align-self: stretch;
        justify-self: auto;
    }

    .daily-two-col {
        row-gap: var(--gap);
    }

    .hexagram-draw-area {
        margin-top: var(--gap-sm);
    }
}

/* Final mobile overrides to strictly match services page behavior */
@media (max-width: 960px) {
    .daily-two-col {
        grid-template-columns: 1fr;
    }

    .daily-two-col>.daily-inspiration-section,
    .daily-two-col>.personal-divination-section {
        height: auto;
    }

    .hexagram-draw-area {
        justify-content: center;
    }
}

/* Ensure daily page mobile layout exactly follows services page flow */
@media (max-width: 960px) {
    .daily-two-col {
        display: block;
        max-width: 680px;
        margin: 0 auto var(--gap-lg);
    }

    .daily-two-col>.daily-inspiration-section,
    .daily-two-col>.personal-divination-section {
        margin-bottom: var(--gap);
    }
}

/* ===================================================================
   🎯 优化的抽签区域样式 - 使用左侧配色方案
   =================================================================== */

/* 重新定义抽签区域标题样式 */
.divination-intro h2 {
    font-size: var(--text-2xl) !important;
    color: rgb(225, 149, 57) !important;
    margin-bottom: var(--gap-xs) !important;
    font-weight: 400 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
}

.divination-intro p {
    font-size: var(--text-base) !important;
    color: rgba(189, 151, 105, 0.9) !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

/* 数字输入区域 - 防止溢出 */
.number-input-section {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
    width: 100%;
    max-width: min(300px, calc(100vw - 60px));
    margin: 0 auto;
    box-sizing: border-box;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px;
}

.input-label {
    font-size: var(--text-lg);
    color: rgb(225, 149, 57);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(225, 149, 57, 0.15);
    border-radius: 50%;
    border: 1px solid rgba(225, 149, 57, 0.3);
    font-weight: 500;
    flex-shrink: 0;
}

.number-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid rgba(189, 151, 105, 0.25);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--text-sm);
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.number-input::placeholder {
    color: rgba(189, 151, 105, 0.6);
    font-style: italic;
}

.number-input:focus {
    outline: none;
    border-color: rgba(225, 149, 57, 0.6);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 2px rgba(225, 149, 57, 0.1), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.number-input:hover:not(:focus) {
    border-color: rgba(225, 149, 57, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.random-btn {
    padding: 10px 12px;
    border: 1px solid rgba(189, 151, 105, 0.3);
    border-radius: 8px;
    background: rgba(189, 151, 105, 0.1);
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    color: rgb(225, 149, 57);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    backdrop-filter: blur(4px);
    flex-shrink: 0;
}

.random-btn:hover {
    background: rgba(225, 149, 57, 0.25);
    border-color: rgb(225, 149, 57);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 149, 57, 0.2);
}

.random-btn:active {
    transform: translateY(0);
}

/* 进度指示器 */
.progress-indicator {
    display: flex;
    gap: 12px;
    margin-bottom: var(--gap);
    justify-content: center;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(189, 151, 105, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(189, 151, 105, 0.2);
}

.progress-dot.active {
    background: rgb(225, 149, 57);
    border-color: rgb(225, 149, 57);
    transform: scale(1.3);
    box-shadow: 0 0 16px rgba(225, 149, 57, 0.4);
}

/* 起卦按钮 - 参考首页按钮风格 */
.draw-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: var(--text-base) !important;
    cursor: pointer !important;
    font-weight: 300 !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
    margin-top: var(--gap) !important;
    position: relative !important;
    min-width: 140px !important;
    padding: var(--gap-xs) var(--gap-sm) !important;
    text-align: center !important;
    white-space: nowrap !important;
    display: inline-block !important;
}

.draw-btn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.3) !important;
    transform: translateY(-2px) !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.draw-btn:active:not(:disabled) {
    transform: translateY(0) !important;
}

.draw-btn:disabled {
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* 优化整个抽签区域容器 - 与左侧guidance-section一致的背景 */
.hexagram-draw-area {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(118, 99, 76, 0.15) !important;
    border-radius: 12px !important;
    padding: var(--gap-sm) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--gap-sm) !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    /* 恢复为正常文档流，由桌面端 sticky 控制位置 */
    margin: 0 auto var(--gap-xl) auto !important;
    max-width: min(360px, calc(100vw - 40px)) !important;
    box-sizing: border-box !important;
}

/* 桌面端：保持吸顶并轻微上移 */
@media (min-width: 1024px) {
    .hexagram-draw-area {
        position: sticky !important;
        top: calc(var(--sticky-top) - 20px) !important;
    }
}

/* 移除过度装饰的伪元素 */

/* 响应式调整 - 彻底解决溢出问题 */
@media (max-width: 768px) {
    .number-input-section {
        max-width: min(280px, calc(100vw - 60px));
        padding: 0 var(--gap-xs);
    }

    .input-group {
        gap: 8px;
        padding: 2px;
    }

    .input-label {
        width: 28px;
        height: 28px;
        font-size: var(--text-base);
        flex-shrink: 0;
    }

    .number-input {
        padding: 12px 14px;
        font-size: var(--text-sm);
        min-width: 0;
        flex: 1;
    }

    .random-btn {
        padding: 10px 12px;
        min-width: 38px;
        font-size: 14px;
        flex-shrink: 0;
    }

    .draw-btn {
        padding: 12px 24px !important;
        font-size: var(--text-sm) !important;
        min-width: 120px !important;
        max-width: 90% !important;
    }

    .hexagram-draw-area {
        padding: var(--gap-sm) !important;
        border-radius: 8px !important;
        /* 移动端：去掉位移，仅微调上下间距，避免遮挡 */
        margin: -6px var(--gap-xs) var(--gap-lg) var(--gap-xs) !important;
        width: calc(100% - var(--gap)) !important;
        box-sizing: border-box !important;
    }

    .progress-indicator {
        margin-bottom: var(--gap-sm);
    }

    .divination-intro h2 {
        font-size: var(--text-xl) !important;
    }

    .divination-intro p {
        font-size: var(--text-sm) !important;
    }
}

/* 梅花易数起卦信息样式 */
.plum-blossom-info {
    margin: var(--gap) 0;
}

.plum-blossom-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    padding: var(--gap-sm);
    margin-bottom: var(--gap);
}

.plum-blossom-section .divination-nums {
    color: rgb(225, 149, 57) !important;
}

.divination-nums {
    color: rgb(225, 149, 57) !important;
    font-size: var(--text-lg);
    font-weight: 600;
    margin: 0 0 var(--gap-xs) 0;
    text-align: center;
    line-height: 1.4;
}

.changing-line {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
    font-weight: 400;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

/* 动爻标记样式 */
.changing-line-mark {
    position: relative;
    animation: pulse-glow 2s ease-in-out infinite;
}

.changing-line-mark::after {
    content: '●';
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 8px;
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
    }

    50% {
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(-50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translateY(-50%) scale(1.2);
    }
}

/* 小卦象名称样式 */
.mini-hex-name {
    color: rgba(255, 255, 255, 0.75);
    font-size: 10px;
    margin: 4px 0 0 0;
    text-align: center;
}

/* 所有小卦象标题颜色优化 - 提高优先级 */
.related-hex-grid .mini-hex h4 {
    color: rgb(225, 149, 57) !important;
    font-weight: 500 !important;
}

.mini-hex h4 {
    color: rgb(225, 149, 57) !important;
    font-weight: 500 !important;
}

/* 变卦特殊样式 */
.mini-hex:first-child h4 {
    color: rgb(225, 149, 57) !important;
    font-weight: 600;
}

.mini-hex:first-child .mini-hex-name {
    color: rgb(225, 149, 57) !important;
    font-weight: 500;
}

/* 额外的小屏保护 */
@media (max-width: 480px) {
    .number-input-section {
        max-width: calc(100vw - 40px);
        padding: 0 var(--gap-xs);
    }

    .input-group {
        gap: 6px;
    }

    .input-label {
        width: 24px;
        height: 24px;
        font-size: var(--text-sm);
    }

    .number-input {
        padding: 10px 12px;
        font-size: var(--text-xs);
    }

    .random-btn {
        padding: 8px 10px;
        min-width: 34px;
        font-size: 12px;
    }

    .hexagram-draw-area {
        padding: var(--gap-xs) !important;
        /* 小屏：无位移，只加一点底部留白 */
        margin: -6px 0 var(--gap-lg) 0 !important;
        width: 100% !important;
    }

    /* 按钮与输入区间距：下移按钮一点点，避免遮挡 */
    .draw-btn {
        margin-top: calc(var(--gap) + 8px) !important;
    }

    .plum-blossom-section {
        padding: var(--gap-xs);
    }

    .divination-nums {
        font-size: var(--text-base);
    }

    .changing-line {
        font-size: var(--text-xs);
    }

    .changing-line-mark::after {
        right: -8px;
        font-size: 6px;
    }

    .mini-hex-name {
        font-size: 9px;
    }
}