/* M3 (管家婆) 自定义样式 */

#app {
    border: 2px solid #8e7355;
    box-sizing: border-box;
    background-color: #ffffff;
    padding: 0.02rem;
}

/* M3 顶部导航 Top Header Styles */
.top-header {
    background: #8e7355;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.05rem 0.1rem;
    height: 0.55rem;
    box-sizing: border-box;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.15);
}

.top-header .logo-img {
    height: 100%;
    max-height: 0.45rem;
    object-fit: contain;
}

.top-header .youce-img {
    height: 100%;
    max-height: 0.45rem;
    object-fit: contain;
}

/* 顶部 Banner 图 */
.top-banner {
    width: 100%;
}

.top-banner .banner-img {
    width: 100%;
    display: block;
}

/* M3 滚动公告栏 Marquee Bar Styles */
.m3-notice-bar {
    background-color: #f8f3ee;
    border-radius: 0.08rem;
    padding: 0.08rem 0.12rem;
    margin-bottom: 0.1rem;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.08);
}

.m3-notice-icon {
    font-size: 0.18rem;
    color: #8e7355;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.08rem;
    flex-shrink: 0;
}

.m3-notice-content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.15rem;
    font-weight: bold;
    color: #5c4731;
    line-height: 1.2;
}

.m3-notice-content marquee {
    display: block;
    vertical-align: middle;
}

/* M3 推荐导航列表样式 */
.m3-recommend-box {
    margin: 0.12rem 0;
}

.m3-click-header {
    text-align: center;
    color: #cc0000;
    font-size: 0.22rem;
    font-weight: bold;
    margin-bottom: 0.1rem;
    letter-spacing: 0.01rem;
    cursor: pointer;
}

.m3-recommend-table {
    background-color: #bebea8;
    border: 1px solid #333333;
    box-sizing: border-box;
}

.m3-recommend-row {
    padding: 0.07rem 0.05rem;
    border-bottom: 1px solid #555555;
    text-align: center;
    font-size: 0.16rem;
    color: #000000;
    font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica, sans-serif;
    cursor: pointer;
    font-weight: bold;
}

.m3-recommend-row:last-child {
    border-bottom: none;
}

.rec-period {
    font-weight: bold;
    margin-right: 0.04rem;
}

.rec-prefix {
    font-weight: bold;
    margin-right: 0.02rem;
}

.rec-name {
    font-weight: bold;
}

/* M3 玩法卡片通用 Headers & Layout */
.m3-play-card {
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
    background-color: #ffffff;
}

.m3-card-header {
    background-color: #bebea8;
    border-radius: 0.06rem;
    padding: 0.06rem 0.1rem;
    text-align: center;
    font-size: 0.18rem;
    font-weight: bold;
    color: #000000;
    margin-bottom: 0.06rem;
    letter-spacing: 0.01rem;
}

/* 宝塔七肖 样式 */
.m3-baota-body {
    background-color: #ffffff;
}

.m3-baota-period-block {
    display: flex;
    flex-direction: column;
}

.m3-baota-row {
    display: flex;
    align-items: center;
    padding: 0.05rem 0.04rem;
    border-bottom: 1px solid #e8e8e8;
    font-family: PingFangSC-Regular, Microsoft YaHei, Helvetica, sans-serif;
}

.m3-baota-row:last-child {
    border-bottom: none;
}

.baota-col-period {
    width: 0.72rem;
    flex-shrink: 0;
    color: #cc0000;
    font-weight: bold;
    font-size: 0.15rem;
}

.baota-period-num {
    color: #cc0000;
}

.baota-col-zodiacs {
    width: 1.45rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    font-size: 0.17rem;
    color: #1890ff;
    font-weight: bold;
}

.zodiac-normal {
    color: #1890ff;
    margin-right: 0.01rem;
}

.zodiac-hit {
    background-color: #ffe100;
    color: #000000;
    font-weight: bold;
    padding: 0 0.02rem;
    border-radius: 0.02rem;
    margin-right: 0.01rem;
    line-height: 1.15;
    display: inline-block;
}

.baota-col-label {
    width: 0.48rem;
    flex-shrink: 0;
    text-align: center;
    color: #cc0000;
    font-weight: bold;
    font-size: 0.15rem;
}

.baota-col-numbers {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.05rem;
    color: #1890ff;
    font-weight: bold;
    font-size: 0.15rem;
}

.baota-num-item {
    color: #1890ff;
}

.m3-baota-period-divider {
    height: 0.08rem;
    background-color: #d8d8d8;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
}

/* 爆庄平特 样式 */
.m3-baozhuang-body {
    background-color: #ffffff;
}

.baozhuang-period-title {
    text-align: center;
    position: relative;
    font-size: 0.19rem;
    font-weight: bold;
    color: #000000;
    padding: 0.08rem 0 0.04rem 0;
}

.baozhuang-period-num {
    color: #cc0000;
}

.baozhuang-help-icon {
    position: absolute;
    right: 0.12rem;
    top: 0.08rem;
    color: #1890ff;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
}

.baozhuang-content-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.1rem;
}

.baozhuang-label {
    font-size: 0.18rem;
    font-weight: bold;
    color: #000000;
    margin-right: 0.08rem;
}

.baozhuang-pills {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.baozhuang-pill {
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0.06rem;
    padding: 0.03rem 0.12rem;
    font-size: 0.16rem;
    font-weight: bold;
    color: #333333;
    box-shadow: 0 0.01rem 0.02rem rgba(0,0,0,0.05);
}

.baozhuang-pill.pill-hit {
    background-color: #ffe100;
    border-color: #d6ca00;
    color: #000000;
}

.m3-baozhuang-divider {
    height: 1px;
    background-color: #e5e5e5;
    margin: 0.04rem 0 0.06rem 0;
}

/* CSS reset & optimizations */
#app { position: relative; }

/* Collection list styles */
.m3-colllist-container { margin-top: 0.12rem; font-family: sans-serif; background: #fff; }

.m3-colllist-header {
    background: #dcdcdc;
    padding: 0.15rem;
    font-size: 0.18rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    border-bottom: 2px solid #fff;
}
.m3-colllist-item { padding: 0.15rem 0.1rem; display: flex; align-items: center; justify-content: center; font-size: 0.16rem; cursor: pointer; border-bottom: 2px solid #fff; }
.m3-colllist-item:nth-child(odd) { background: #e8e8e8; }
.m3-colllist-item:nth-child(even) { background: #dcdcdc; }
.m3-colllist-item:last-child { border-bottom: none; }
.m3-colllist-author { color: #333; }
.m3-colllist-play.green { color: #00aa00; font-weight: bold; margin: 0 0.1rem; }
.m3-colllist-play.red { color: #e60000; font-weight: bold; margin: 0 0.1rem; }
.m3-colllist-slogan { color: #333; }

/* Modal Overlay Styles */
.m3-coll-overlay { 
    position: fixed; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    bottom: 0; 
    background: #fff; 
    z-index: 10000; 
    overflow-y: auto; 
    overflow-x: hidden; 
    width: 100vw; 
    max-width: 480px; 
}
.m3-coll-modal { width: 100%; background: #fff; min-height: 100vh; position: relative; }
.m3-coll-modal-header { background: #0099ff; color: #fff; text-align: center; padding: 0.25rem 0.6rem; font-size: 0.18rem; font-weight: bold; position: sticky; top: 0; z-index: 10; margin: 0.05rem; border-radius: 8px 8px 0 0; box-sizing: border-box; }
.m3-coll-back-btn { position: absolute; left: 0.15rem; top: 50%; transform: translateY(-50%); background: #fff; color: #0099ff; border: none; padding: 0.05rem 0.2rem; border-radius: 4px; font-weight: bold; font-size: 0.16rem; cursor: pointer; }
.m3-coll-modal-body { padding: 0 0.1rem 0.4rem 0.1rem; background: #fff; }
.m3-coll-img { width: 100%; display: block; border-radius: 8px; margin-top: 0.1rem; }

/* Hide extra info in modals based on partialId */
.coll-detail-liuWei .m3-card-header, .coll-detail-liuWei .lwzt-numbers-grid { display: none !important; }

/* JiuXiaoShiBaMa - hide header, and all rows EXCEPT the last one (which is 9肖) */
.coll-detail-jiuXiao1 .m3-card-header, .coll-detail-jiuXiao1 .jx18m-tr:not(:last-child) { display: none !important; }
.coll-detail-jiuXiao2 .m3-card-header, .coll-detail-jiuXiao2 .jx18m-tr:not(:last-child) { display: none !important; }
.coll-detail-jiuXiao1 .jx18m-title-tag, .coll-detail-jiuXiao2 .jx18m-title-tag { display: none !important; }
.coll-detail-jiuXiao1 .jx18m-title-tag-alt, .coll-detail-jiuXiao2 .jx18m-title-tag-alt { display: inline !important; }

.coll-detail-sanTou .m3-card-header, .coll-detail-sanTou .stzt-numbers-row { display: none !important; }

/* BaoTaSevenZodiac - hide header, hide label/number columns, and hide all rows except the first (7肖) */
.coll-detail-qiXiao .m3-card-header, .coll-detail-qiXiao .baota-col-label, .coll-detail-qiXiao .baota-col-numbers, .coll-detail-qiXiao .m3-baota-row:not(:first-child) { display: none !important; }

.coll-detail-liangBo .m3-card-header, .coll-detail-liangBo .sbz16m-numbers-grid { display: none !important; }
.coll-detail-liangBo .sbz16m-title-tag { display: none !important; }
.coll-detail-liangBo .sbz16m-title-tag-alt { display: inline !important; }

.coll-detail-danShuang .m3-card-header, .coll-detail-danShuang .ds3x-bracket, .coll-detail-danShuang .ds3x-zodiac { display: none !important; }
.coll-detail-daXiao .m3-card-header { display: none !important; }
.coll-detail-liangMen .m3-card-header, .coll-detail-liangMen .lmzbm-numbers-row { display: none !important; }
.coll-detail-shaXiao .m3-card-header { display: none !important; }
.coll-detail-pingTe .m3-card-header { display: none !important; }
.coll-detail-pingTe .baozhuang-label { display: none !important; }
.coll-detail-ping6Ma .m3-card-header { display: none !important; }
.coll-detail-fangWei .m3-card-header { display: none !important; }
.coll-detail-fangWei .dnxb-title-txt { display: none !important; }
.coll-detail-sanGuo .m3-card-header, .coll-detail-sanGuo .sgx-zodiacs-text { display: none !important; }
.coll-detail-sanGuo .sgx-period-title-txt { display: none !important; }
.coll-detail-ping1Wei .m3-card-header, .coll-detail-ping1Wei .pmyw-numbers-grid, .coll-detail-ping1Wei .pm1w-numbers-row { display: none !important; } 
.coll-detail-ping1Wei .pmyw-title-txt, .coll-detail-ping1Wei .pmyw-title-txt2 { display: none !important; }
.coll-detail-jiaYe .m3-card-header { display: none !important; }
.coll-detail-jiaYe .jqys-title-txt { display: none !important; }

/* External Links Box Styles (参考 M2 样式) */
.external-links-box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.12rem;
    padding: 0.16rem 0.2rem;
}

.external-link-item {
    background: #f8f9fa;
    color: #333;
    border: 1.5px solid #e9ecef;
    border-radius: 0.06rem;
    padding: 0.12rem 0.16rem;
    text-align: center;
    font-size: 0.15rem;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.02rem 0.04rem rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.external-link-item:active,
.external-link-item:hover {
    background-color: #f8f3ee;
    color: #8e7355;
}