/* 使用 Tailwind 4.0 指令 */
@theme {
  --color-primary: #e4736b;
  /* 自定义 base-content (主要用于文字颜色) */
  --color-base-content: #414C6B;
  /* 如果你希望背景色也符合你的风格 */
  /*--color-base-100: #FDFDF8;*/
}
/* 兼容性补丁：确保原生 CSS 变量也被赋值 */
:root {
  /* 显式定义原生 CSS 变量 */
  --color-primary: #e4736b;
  --color-base-content: #414C6B;

  /* daisyUI 专用：必须是纯 HSL 数字（不加 hsl() 和 %） */
  /* #414C6B -> hsl(225, 25%, 34%) */
  --p: 4 68% 66%;   /* primary */
  --bc: 225 25% 34%; /* base-content */
}
/* 2. 修正父级容器布局 */
.gua64js {
    display: flex;
    flex-direction: column;
    align-items: center; /* 保持卦象居中 */
    width: 100%;
}
/*#gua-title{position:absolute;left:16px;bottom:16px;font-size:2.1em;color:#414C6B;cursor:default;transition-duration:.5s}*/
/* 1. 核心定位调整 */
#gua-title {
    /* 解除原本相对于视口底部的绝对定位 */
    position: relative;
    left: 0 !important;
    bottom: 0 !important;

    /* 宽度与对齐 */
    /*width: 100%;*/
    text-align: left; /* 满足你之前的左对齐要求 */
    margin: 0 auto !important; /* 居中显示 */

    /* 间距与颜色 */
    margin-top: 40px; /* 在卦象正下方留出 40px 间距 */
    padding: 10px 24px;
    color: #414C6B; /* 使用你指定的自定义颜色 */

    /* 强制同一行显示 */
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 12px;

    transition-duration: .5s;
}
#gua-title #guaci{color:#414C6B;font-size:18px;transition-duration:.5s}
#gua-title:hover{color:#e4736b}
#gua-title:hover #guaci{color:#414C6B}
/*#gua{width:300px;height:360px;position:absolute;top:20%;left:50%;margin-left:-150px}*/
/* 3. 修正卦象容器 */
#gua {
    position: relative; /* 改为相对定位，不再脱离文档流 */
    top: 0 !important;
    left: 0 !important;
    margin: 0 auto !important; /* 居中显示 */
    width: 300px;
    height: 360px;
}
#gua .yao-split{margin-bottom:20px}
#gua .yao{height:40px;background-color:#e4736b;cursor:pointer;transition-duration:1s}
#gua .yao.yao-mg{margin:20px 0}#gua .yao.unhover{background:#B8B8B8}
#gua .yao.unhover .yang{background:#B8B8B8}
#gua .yao .yinyang{transition-duration:1s;position:relative;left:50%;margin-left:-6px;width:12px;height:40px}
#gua .yao .yang{background-color:#e4736b}
#gua .yao .yin{transform: scaleX(1.5);background-color:#FDFDF8;transform-origin: center;}
#display-name{color:#414C6B;font-size: 1.5em;}
#display-structure{color:#414C6B;margin: 5px 0;}#display-xugua{color:#414C6B;font-size: 1em;}
/* 爻的基础样式保持不变，但可以用 Tailwind 增强 */
.yao {
    @apply relative cursor-pointer transition-transform duration-200;
    height: 40px;
    width: 300px;
}

.yao:hover {
    @apply scale-[1.02] brightness-110;
}

/* 解决你之前提到的“往上移一个位”的 CSS 根源 */
#gua {
    /* 确保不再有内边距干扰 offsetTop */
    padding: 0 !important;
}


/*margin: 0 !important;*/
/*#yao-detail{display:none;position:absolute;left:50%;right:16px;margin-left:170px;min-height:40px;color:#414C6B;padding:4px 0}*/
#yao-detail {
    @apply hidden absolute p-4 bg-base-200/95 backdrop-blur-md
           rounded-2xl shadow-2xl border-l-4 border-l-primary z-50
           pointer-events-none transition-all duration-300;

    /* 核心修复：强制横向排列与换行 */
    display: block;           /* 确保不是 flex 容器 */
    position: absolute;
    left: 50%;
    right: 16px;
    margin-left: 170px;
    min-height: 40px;
    color: #414C6B;
    padding: 4px 0;
    writing-mode: horizontal-tb; /* 强制水平书写 */
    white-space: normal;      /* 允许正常换行 */
    word-break: break-all;    /* 防止长字符撑破容器 */

    /* 尺寸与位置 */
    width: 280px;             /* 给定一个明确的宽度，文字才会在边缘换行 */
    /*left: 320px;              /* 位于卦象右侧 */
    line-height: 1.6;         /* 增加行高提升阅读感 */
    /*color: var(--color-base-content);*/
    text-align: left;         /* 确保文字左对齐 */
}
/* 确保父容器是垂直堆叠的 */
#gua-visual-area {
    display: flex;
    flex-direction: column; /* 关键：强制子元素垂直排列 */
    align-items: center;    /* 保持子元素在水平方向居中 */
    gap: 20px;             /* 在卦象和菜单之间留出间距 */
    width: 100%;
    margin-top: 30px;      /* 根据需要调整顶部间距 */
}
/* 第一行：分类标签 */
.nav-row-primary {
    display: flex;
    overflow-x: auto;
    padding: 5px 0;
    gap: 9px;
    border-bottom: 1px solid #ddd;
    scrollbar-width: none;
}
.nav-row-primary::-webkit-scrollbar { display: none; }

.nav-tab {
    flex: 0 0 auto;
    /*min-width: 60px;*/
    font-size: 0.95em;
    text-align: center;
    color: var(--color-base-content);
    padding-bottom: 3px;
    cursor: pointer;
    transition: all 0.2s;
}
/* 导航选项激活状态 */
.nav-tab.active {
    @apply btn-active btn-primary text-white;
    color: var(--color-primary);
    font-weight: bold;
    border-bottom: 2px solid var(--color-primary);
    transform: scale(1.2);
}

/* 第二行：动态区域 */
.nav-row-secondary {
    padding: 15px 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1px;
}

/* 搜索框样式 */
#gua-search-input {
    width: 120%;
    max-width: 400px;
    padding: 10px 15px;
    border-radius: 25px;
    border: 1px solid #ccc;
    outline: none;
    margin-bottom: 10px;
    /*background-color: #FDFDF8;*/
}

/* 确保搜索框在上方，结果在下方 */
#nav-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 使用逗号分隔，让两个容器共用一套“横向不换行”的逻辑 */
#search-results-list,
#gua-items-container {
    display: flex !important;      /* 强制 flex 布局 */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1px;                      /* 间距稍微拉开一点，1px 太挤了 */
    scroll-snap-type: x mandatory; /* 强制横向吸附 */
    scroll-behavior: smooth;       /* 全局平滑滚动 */
    /* 宽度限制 */
    width: 250px;                  /* 或者你之前的 25% */
    max-width: 100%;

    /* 滚动条处理 */
    overflow-x: auto;
    white-space: nowrap;
    padding: 5px 10px;

    scrollbar-width: none;         /* Firefox */
    -ms-overflow-style: none;      /* IE */
}

/* 隐藏 Chrome/Safari 的滚动条 */
#search-results-list::-webkit-scrollbar,
#gua-items-container::-webkit-scrollbar {
    display: none;
}


/* iching_code 项目样式 */
.iching-item {
    font-size: 1.2em; /* 突出展示䷀等符号 */
    padding: 5px 7px;
    scroll-snap-align: center;    /* 滚动停止时自动对齐到中心 */
    transition: transform 0.2s, color 0.2s;
    border: 1px solid #eee;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* --- 关键修改：滚动选中的颜色 --- */
.iching-item.active-gua {
    color: var(--color-primary) !important;    /* 目标红色 */
    font-size: 1.5em; /* 突出展示䷀等符号 */
    transform: scale(1.4);        /* 稍微放大，突出重点 */
    font-weight: bold;
}

#back-title {
    opacity: .15;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -160px;
    /* -45px; 使用 vw 替代 em，确保字号始终随窗口宽度线性变化 */
    /* 35vw 意味着字号始终占据屏幕宽度的 35% */
    font-size: 35vw;
    color: #C0C0C0;
    cursor: default;
    transition: opacity 1s, bottom 1s; /* 移除对 font-size 的 transition 以防缩放卡顿 */
    white-space: nowrap;
    pointer-events: none;
    z-index: -1;
    letter-spacing: -0.05em;
}

/* 外层容器：负责定位 */
.gua-nav-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%; /* 建议给个百分比或固定宽度 */
    max-width: 600px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(47% + 200px);
    z-index: 100;
}

/* 内层滚动行：负责左右滑动 */
.nav-row-scroll {
    display: flex;
    flex-wrap: nowrap;      /* 强制不换行 */
    overflow-x: auto;       /* 允许水平滚动 */
    width: 100%;            /* 占满父容器宽度 */
    gap: 12px;              /* Tab 之间的间距 */
    padding: 10px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;  /* Firefox 隐藏滚动条 */
}

.nav-row-scroll::-webkit-scrollbar {
    display: none;          /* Chrome/Safari 隐藏滚动条 */
}


/* 容器：强制屏幕绝对居中 */
.toast-custom-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    pointer-events: none; /* 防止遮挡点击 */
}

/* Toast 本体 */
.toast-content {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(228, 115, 107, 0.2); /* 使用 primary 色的透明边框 */
    color: #414C6B; /* 使用你的 base-content 色 */
    padding: 12px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 200px;

    /* 进场动画 */
    animation: toast-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 警示图标颜色 */
.toast-icon-error {
    color: var(--color-primary);
}

/* 退出动画类 */
.toast-out {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    0% { opacity: 0; transform: translateY(20px) scale(0.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.9); }
}

/* jiegua */
.jiegua-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%; /* 建议给个百分比或固定宽度 */
    max-width: 600px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /*top: calc(47% + 200px);*/
    z-index: 100;
}
.bg-secondary\/5 {
    background-color: rgba(var(--p), 0.05); /* 使用 primary 浅色背景 */
    border-radius: 12px 12px 0 0;
}

#space-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(228, 115, 107, 0.1);
}

/* 当屏幕宽度小于 768px (手机) */
@media (max-width: 768px) {
    .mobile-nav { display: none !important; } /* 强制隐藏手机端导航 */
    .pc-nav { display: none !important; }     /* 强制隐藏 PC 端导航 */
    #back-title {
            position: absolute !important;
            left: 50% !important;

            /* 🌟 核心修复 1：必须彻底切断原版 bottom: -160px 的拉扯 */
            bottom: auto !important;

            /* 🌟 核心修复 2：直接给绝对像素！50px 代表距离 #gua 容器顶部只有 50px */
            /* 如果你觉得还不够往上，可以改成 20px 甚至 0px */
            top: 40px !important;

            /* 🌟 核心修复 3：统一 Y 轴位移，确保定位不出现错觉 */
            transform: translate(-50%, 0) !important;

            /* 维持原有的字号、物理占高、透明度和溢出处理 */
            height: 0 !important;
            max-height: 0 !important;
            font-size: 55vw !important;
            overflow: visible !important;
            margin-bottom: 0 !important;
            padding-bottom: 0 !important;
            opacity: 0.15 !important;
            z-index: -1 !important;
        }
    #yao-detail {
        /* 1. 核心修复：解除 PC 端的右侧偏置，改为水平居中 */
        left: 50% !important;
        right: auto !important;
        margin-left: 0 !important;
        transform: translateX(-50%) !important; /* 完美水平居中对齐 */

        /* 2. 动态位置：让 JS 的 el.offsetTop 起作用 */
        /* 我们不再写死 top: 380px，而是让它跟随当前爻的 top 坐标 */
        /* 同时通过 margin-top 把提示框往下挤一个爻的高度(40px)加间距，刚好落在当前爻的正下方 */
        position: absolute !important;
        margin-top: 45px !important;

        /* 3. 宽度与视觉 */
        width: 90vw !important;
        max-width: 300px !important; /* 让宽度和卦象的 300px 保持一致，视觉最整齐 */
        text-align: left;
        padding: 10px 14px !important;

        /* 层级提高，确保展开时遮挡下方的爻，移开后消失，不影响点击 */
        z-index: 60 !important;
    }
}