/* ============================================================
   青山共风雨 CMS - 命理工具 H5 移动端样式
   ============================================================ */

/* H5 环境检测：窄屏幕 + 触摸设备 */
@media (max-width: 768px) and (pointer: coarse) {

/* === 基础布局 === */
body {
    background: #0d0d0d;
    color: #e8e0d0;
}

/* Banner 简化 */
.banner {
    padding: 30px 16px !important;
    background: linear-gradient(135deg, #1a1420 0%, #0d0d0d 100%) !important;
}
.banner h2 {
    font-size: 1.3rem !important;
    letter-spacing: 3px;
    color: #c19a6b;
}
.banner p {
    font-size: .8rem !important;
    color: rgba(232,224,208,.5);
    margin-top: 8px;
}

/* 主容器 */
section[style*="padding:40px"] {
    padding: 20px 0 !important;
}
.container {
    padding: 0 12px !important;
}

/* === 工具导航卡片 === */
.tools-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}
.tool-nav-card {
    background: rgba(18,16,20,.6);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 12px;
    padding: 16px 12px;
    min-width: unset;
}
.tool-nav-card .icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
}
.tool-nav-card h3 {
    font-size: .85rem;
    color: #e8e0d0;
}
.tool-nav-card p {
    font-size: .7rem;
    color: rgba(232,224,208,.4);
}
.tool-nav-card.active,
.tool-nav-card:hover {
    border-color: #c19a6b;
    background: rgba(193,154,107,.08);
    transform: none;
    box-shadow: none;
}

/* === 工具容器 === */
.tool-container {
    background: rgba(13,13,13,.9);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 16px;
    box-shadow: none;
}

/* 深色头部 */
.tool-header {
    background: linear-gradient(135deg, #1a1420 0%, #0d0d0d 100%);
    padding: 20px 16px;
}
.tool-header h2 {
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: #c19a6b;
}
.tool-header p {
    font-size: .78rem;
    color: rgba(232,224,208,.4);
}

.tool-body {
    padding: 20px 16px;
}

/* === 表单样式 === */
.tool-form {
    gap: 16px;
}

.form-row {
    grid-template-columns: 1fr;
    gap: 16px;
}

.form-group label {
    font-size: .8rem;
    color: #e8e0d0;
    margin-bottom: 6px;
}

.form-control {
    padding: 12px 14px;
    background: rgba(18,16,20,.6);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 10px;
    color: #e8e0d0;
    font-size: .9rem;
}
.form-control:focus {
    border-color: #c19a6b;
    background: rgba(18,16,20,.8);
    box-shadow: 0 0 0 2px rgba(193,154,107,.15);
}
.form-control::placeholder {
    color: rgba(232,224,208,.3);
}

select.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23c19a6b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 32px;
}

/* 日期时间输入 */
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    color-scheme: dark;
}

/* === 按钮 === */
.btn-calculate {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #c19a6b 0%, #a67c52 100%);
    color: #0d0d0d;
    border: none;
    border-radius: 50px;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: 2px;
}
.btn-calculate:hover {
    background: linear-gradient(135deg, #d4af37 0%, #c19a6b 100%);
    transform: none;
}

.btn-reset {
    width: 100%;
    padding: 12px 20px;
    background: transparent;
    color: rgba(232,224,208,.5);
    border: 1px solid rgba(193,154,107,.2);
    border-radius: 50px;
    font-size: .85rem;
}
.btn-reset:hover {
    background: rgba(193,154,107,.05);
    color: #e8e0d0;
}

/* 按钮容器 */
.tool-form > div:last-of-type {
    flex-direction: column;
    gap: 10px !important;
}

/* === 开关样式 === */
.tst-switch {
    width: 40px;
    height: 22px;
}
.tst-slider {
    background: rgba(193,154,107,.2);
}
.tst-slider:before {
    height: 16px;
    width: 16px;
}
.tst-switch input:checked + .tst-slider {
    background: #c19a6b;
}
.tst-switch input:checked + .tst-slider:before {
    transform: translateX(18px);
}

/* === 信息框 === */
.info-box {
    background: rgba(193,154,107,.08);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .78rem;
    color: #c19a6b;
}
.info-box::before {
    content: '💡';
    font-size: .9rem;
}

/* TST 提示框 */
#bazi-tst-info {
    background: rgba(193,154,107,.06);
    border: 1px solid rgba(193,154,107,.12);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: .78rem;
    color: rgba(232,224,208,.6);
}

/* 城市下拉 */
#bazi-city-dropdown {
    background: rgba(18,16,20,.95);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 0 0 10px 10px;
}
.city-item {
    padding: 10px 14px;
    font-size: .82rem;
    color: #e8e0d0;
    border-bottom: 1px solid rgba(193,154,107,.08);
}
.city-item:hover,
.city-item.active {
    background: rgba(193,154,107,.1);
}

/* === 结果区域 === */
.result-area {
    border-top: 1px solid rgba(193,154,107,.1);
    padding-top: 20px;
    margin-top: 20px;
}

.result-title {
    border-bottom: 1px dashed rgba(193,154,107,.15);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.result-title h3 {
    font-size: 1rem;
    color: #c19a6b;
}
.result-title p {
    font-size: .78rem;
    color: rgba(232,224,208,.5);
}

/* === 八字结果 === */
.bazi-info {
    background: linear-gradient(135deg, #1a1420 0%, #0d0d0d 100%);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 14px;
    padding: 20px 16px;
}
.bazi-info .title {
    font-size: .9rem;
    color: #c19a6b;
    letter-spacing: 3px;
}
.bazi-info .gong {
    font-size: 1.8rem;
    letter-spacing: 8px;
    color: #c19a6b;
}
.bazi-info .gong span {
    color: #e8e0d0;
}
.bazi-info .year-info {
    font-size: .78rem;
    color: rgba(232,224,208,.4);
}

/* 四柱网格 */
.sizhu-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.sizhu-card {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 10px;
    padding: 12px 8px;
}
.sizhu-card .label {
    font-size: .7rem;
    color: rgba(232,224,208,.4);
}
.sizhu-card .stem-branch {
    font-size: 1.1rem;
    color: #c19a6b;
    letter-spacing: 2px;
}
.sizhu-card .na-yin {
    font-size: .68rem;
    color: rgba(193,154,107,.7);
}

/* 八字表格 */
.bazi-table {
    font-size: .78rem;
}
.bazi-table th {
    background: rgba(18,16,20,.8);
    color: #c19a6b;
    padding: 8px 10px;
}
.bazi-table td {
    padding: 8px 10px;
    color: #e8e0d0;
    border-bottom: 1px solid rgba(193,154,107,.08);
}
.bazi-table tr:nth-child(even) td {
    background: rgba(18,16,20,.3);
}

/* 藏干卡片 */
.canggan-grid {
    grid-template-columns: 1fr;
    gap: 10px;
}
.canggan-card {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 10px;
    padding: 12px;
}
.canggan-card h4 {
    font-size: .82rem;
    color: #c19a6b;
}
.canggan-card .item {
    background: rgba(193,154,107,.08);
    border: 1px solid rgba(193,154,107,.15);
    border-radius: 16px;
    padding: 3px 10px;
    font-size: .75rem;
    color: #e8e0d0;
}

/* 大运流年 */
.days-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.days-item {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 8px;
    padding: 10px 12px;
}
.days-item .age {
    color: #c19a6b;
}
.days-item .range {
    font-size: .7rem;
    color: rgba(232,224,208,.4);
}
.days-item .sb {
    font-size: .82rem;
    color: #e8e0d0;
}

/* 十神分析 */
.shishen-row {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(193,154,107,.08);
}
.shishen-row .position {
    font-size: .75rem;
    color: rgba(232,224,208,.5);
    min-width: 60px;
}
.shishen-row .stem {
    color: #c19a6b;
    font-size: .9rem;
}
.shishen-row .arrow {
    color: rgba(193,154,107,.5);
}
.shishen-row .ss {
    font-size: .78rem;
    padding: 2px 10px;
}

/* === 六爻结果 === */
.liuyao-hexagram {
    gap: 20px;
}
.yao-item.yang {
    background: #c19a6b;
}
.yao-item.yin {
    border-color: #c19a6b;
}
.yao-item.yin::before {
    color: #c19a6b;
}
.yao-item.changing {
    box-shadow: 0 0 10px rgba(193,154,107,.5);
}

.hexagram-info {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 12px;
    padding: 16px;
}
.hexagram-info .name {
    font-size: 1.5rem;
    color: #c19a6b;
    letter-spacing: 4px;
}
.hexagram-info .gua-ci {
    font-size: .82rem;
    color: rgba(232,224,208,.6);
}
.hexagram-info .yao-row {
    padding: 6px 8px;
    font-size: .78rem;
    border-bottom: 1px solid rgba(193,154,107,.08);
}
.hexagram-info .yao-row .y {
    color: #c19a6b;
}
.hexagram-info .yao-row .wx {
    color: rgba(193,154,107,.8);
}

/* === 梅花易数结果 === */
.mh-group {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 12px;
    padding: 12px 20px;
    min-width: 100px;
}
.mh-group .label {
    font-size: .7rem;
    color: rgba(232,224,208,.4);
}
.mh-group .num {
    font-size: 1.6rem;
    color: #c19a6b;
}
.mh-group .trigram {
    font-size: 1.2rem;
    color: rgba(193,154,107,.8);
    letter-spacing: 3px;
}

.meihua-hexagrams {
    grid-template-columns: 1fr;
    gap: 15px;
}
.mh-hex-card {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 12px;
    padding: 16px;
}
.mh-hex-card .trigram-display {
    font-size: 2.5rem;
}
.mh-hex-card .gua-name {
    font-size: 1.1rem;
    color: #c19a6b;
}
.mh-hex-card .gua-attribute {
    font-size: .75rem;
    color: rgba(232,224,208,.5);
}
.mh-arrow {
    transform: rotate(90deg);
    font-size: 1.5rem;
    color: rgba(193,154,107,.5);
}

/* === 奇门遁甲结果 === */
.qimen-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    max-width: 100%;
}
.qimen-cell {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 10px;
    padding: 10px 6px;
    font-size: .78rem;
}
.qimen-cell .position {
    font-size: .65rem;
    color: rgba(232,224,208,.4);
}
.qimen-cell .gong {
    font-size: .9rem;
    color: #c19a6b;
}
.qimen-cell .star {
    font-size: .65rem;
    color: rgba(232,224,208,.4);
}
.qimen-cell.active {
    background: linear-gradient(135deg, #1a1420 0%, #0d0d0d 100%);
    border-color: #c19a6b;
}
.qimen-cell.active .position,
.qimen-cell.active .star {
    color: rgba(193,154,107,.6);
}
.qimen-cell.active .gong {
    color: #c19a6b;
}

.qimen-palace-detail {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 12px;
    padding: 16px;
}
.qimen-palace-detail h4 {
    font-size: .9rem;
    color: #c19a6b;
}
.qimen-palace-detail .detail-row {
    padding: 6px 0;
    font-size: .8rem;
    border-bottom: 1px solid rgba(193,154,107,.08);
}
.qimen-palace-detail .detail-row .k {
    color: rgba(232,224,208,.5);
    min-width: 60px;
}
.qimen-palace-detail .detail-row .v {
    color: #e8e0d0;
}
.qimen-palace-detail .detail-row .v.accent {
    color: #c19a6b;
}

/* === 卦象解读 === */
.gua-interpretation {
    background: rgba(193,154,107,.05);
    border: 1px solid rgba(193,154,107,.1);
    border-left: 3px solid #c19a6b;
    border-radius: 0 10px 10px 0;
    padding: 16px;
}
.gua-interpretation h4 {
    font-size: .9rem;
    color: #c19a6b;
}
.gua-interpretation p {
    font-size: .82rem;
    color: rgba(232,224,208,.7);
    line-height: 1.8;
}

/* === 通用工具项 === */
.shiyi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.shiyi-item {
    background: rgba(18,16,20,.5);
    border: 1px solid rgba(193,154,107,.1);
    border-radius: 10px;
    padding: 12px;
}
.shiyi-item .label {
    font-size: .7rem;
    color: rgba(232,224,208,.4);
}
.shiyi-item .value {
    font-size: 1rem;
    color: #c19a6b;
}
.shiyi-item .desc {
    font-size: .72rem;
    color: rgba(193,154,107,.6);
}

/* === 页脚简化 === */
.footer {
    background: rgba(13,13,13,.95);
    border-top: 1px solid rgba(193,154,107,.1);
    padding: 30px 16px !important;
}
.footer-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}
.footer h4 {
    font-size: .85rem;
    color: #c19a6b;
    margin-bottom: 10px;
}
.footer p {
    font-size: .78rem;
    color: rgba(232,224,208,.5);
}
.footer-links li {
    margin-bottom: 6px;
}
.footer-links a {
    font-size: .8rem;
    color: rgba(232,224,208,.6);
}
.footer-bottom {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(193,154,107,.1);
}
.footer-bottom p {
    font-size: .72rem;
}

} /* end @media */