/* //结构样式开始 */
/* @font-face {
            font-family: 'fzkt';
            src: url('fzkt.woff') format('woff'),
            url('fzkt.ttf') format('truetype');
            font-display: swap;
        } */

@font-face {
    font-family: 'fzkt';
    src: url('fzkt.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'yzqyt';
    src: url('yzqyt.woff2') format('woff2');
    font-display: swap;
}



@font-face {
    font-family: 'xs';
    src: url('xs.woff2') format('woff2');
    font-display: swap;
}


@font-face {
    font-family: 'cjsxsyb';
    src: url('cjsxsyb.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'ls';
    src: url('ls.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'zs';
    src: url('zs.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'cs';
    src: url('yyrcs.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'yyrcs';
    src: url('yyrcs.woff2') format('woff2');
    font-display: swap;
}

@font-face {
    font-family: 'zqlcsyb';
    src: url('zqlcsyb.woff2') format('woff2');
    font-display: swap;
}





html,
body {
    height: 100%;
    margin: 0;
    padding: 0;


}

body {
    display: flex;
    flex-direction: column;
}

a,
a:hover {
    color: #333;
}


.container {
    display: flex;
    width: 100%;
    height: 100%;
    flex: 1;
    overflow: hidden;
    /* 确保滑动效果在容器内 */
}

sup {
    font-size: 8px !important;
    margin-right: -8px;
}

.column {
    padding: 10px;
    box-sizing: border-box;
    transition: transform 0.3s ease, width 0.3s ease;
    /* 添加滑动效果 */
}

.col1 {
    flex: 0.5;
    background-color: #FDFDFB;
    height: 100%;
    position: relative;
    background: url('bgbig.jpg');
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

.col2 {
    flex: 1.5;
    background-color: #EE7C3D;
    transform: translateX(-100%);
    height: 100%;
    position: relative;
    overflow-y: auto;
}

/* 初始隐藏 */
.col3 {
    flex: 5;
    background-color: #fff;
    position: relative;
}

.col4 {
    flex: 1.5;
    background-color: #d8d0c8;
    transform: translateX(100%);
    height: 100%;
    position: relative;
    overflow-y: auto;
}

/* 初始隐藏 */
.col5 {
    flex: 1.5;
    background-color: #d8d0c8;
    transform: translateX(100%);
    height: 100%;
    position: relative;
    overflow-y: auto;
}

/* 初始隐藏 */
.col3-expanded {
    flex: 6.5;
}

/* 扩展第3列 */
.btn-menu {
    display: none;
}

.btn-menu-mob {
    display: block;
    display: flex;
    align-items: center;
}

.hidden {
    display: none;
}

/* 隐藏元素 */
.show {
    transform: translateX(0);
}

/* 显示元素 */
@media (max-width: 768px) {
    .column {
        flex: 1 1 100%;
        transform: translateX(0) !important;
        /* 确保在手机上所有列都显示 */
    }

    .col1,
    .col2,
    .col4,
    .col5 {
        display: none;
        /* 手机默认隐藏第1、2、4、5列 */
    }

    .col2,
    .col4,
    .col5 {
        opacity: 0.85;
    }

    .col1 {
        opacity: 0.97;
    }

    .col1.show,
    .col2.show {
        display: block;
        position: absolute;
        top: 0;
        z-index: 10;
    }

    .col1.show {
        width: 30%;
        left: 0;
    }

    .col2.show {
        width: 70%;
        left: 30%;
    }

    .col4.show,
    .col5.show {
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 10;
    }

    .btn-menu {
        display: block;
    }

    .btn-menu-mob {
        display: none;
    }

    .btn-menu-mob img {
        margin-bottom: 5px;
    }

    .btn-menu-pc {
        display: block !important;
    }

    .btn-menu-pc2 {
        display: none;
    }



    .col3 .cBox3 {
        display: inline-flex;
        align-items: center;
        padding: 20px !important;
    }

    .col3 .cBox3 .cont {
        font-size: 2.8em !important;
    }

    .c-c3.horizontal .cont {
        font-size: 2.2em !important;
    }

    .col3 .cBox3 .tit {
        font-size: 0.7em !important;
    }

    .col3 .cBox3 .c-c3 {
        padding: 20px !important;
    }

    .col3 .cBox3 .c-info {
        margin: 5px 8px 5px 8px !important;
    }

    .sitelogo {
        margin: 20px 0 70px 0 !important;
    }

    /* //隐藏手机上打印 logo不好定位的问题，暂时手机上先不显示 logo */
    @media print {

        body::after {
            /* content:none!important;
                    padding-top:-200000px; */

        }
    }


}


@media print {
    body * {
        visibility: hidden;
    }

    .cBox3,
    .cBox3 * {
        visibility: visible;
    }

    .cBox3 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;

    }

    /*  body::after {
                 content: url('favicon64r.png')!important;
                position: fixed;
                bottom: 10px;
                right: 10px;
                width: 64px; Adjust size as needed 
                height: auto; 
            }*/


    .cBox3.background3 .c-c3 {
        color: #000 !important;
    }

    .cBox3.background3 .c-c3 .tit {
        color: #666 !important;
    }

    .cBox3.background4 .c-c3 {
        color: #000 !important;
    }

    .cBox3.background4 .c-c3 .tit {
        color: #666 !important;
    }

    .col3.bgbackground4 .background3 .c-c3 .tit,
    .col3.bgbackground4 .background4 .c-c3 .tit {
        color: #666 !important;
    }

    .col3.bgbackground5 .background3 .c-c3 .tit,
    .col3.bgbackground5 .background4 .c-c3 .tit {
        color: #666 !important;
    }

    .col3.bgbackground4 .c-c3 .tit {
        color: #000 !important;
    }

    .col3.bgbackground5 .c-c3 .tit {
        color: #000 !important;
    }

    .col3.bgbackgroundhz .c-c3 {
        color: #000 !important;
    }

    .col3.bgbackgroundhz .c-c3 .tit {
        color: #666 !important;
    }

    .col3.bgbackgroundhzgh .c-c3 {
        color: #000 !important;
    }

    .col3.bgbackgroundhzgh .c-c3 .tit {
        color: #666 !important;
    }

    .col3.bgbackgroundqdh .c-c3 {
        color: #000 !important;
    }

    .col3.bgbackgroundqdh .c-c3 .tit {
        color: #666 !important;
    }

}





/* //内容样式开始 */

#loadingIndicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 120px;
    left: -30px;
    width: 100%;
    text-align: center;
}

#dataLoadingIndicator {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 120px;
    left: -30px;
    width: 100%;
    text-align: center;
}

#fontLoadingIndicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 120px;
    left: -30px;
    width: 100%;
    text-align: center;
}

.col3 {
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    justify-content: center;
    background: url('n01-b.jpg') no-repeat top left / cover;


}

.col3 .cBox3 {
    /* 确保 cBox3 能够根据内容自动调整大小 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.col3 .cBox3 .c-c3 {
    /* 确保 c-c3 能够根据内容自动调整大小 */
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.col3 .shareimg {
    position: absolute;
    right: 16px;
    bottom: 16px;
    opacity: 1;
}


.col3 .cBox3 {
    /*border:1px solid #ccc;*/
    padding: 50px;
    font-family: 'STKaiti', 'KaiTi', 'STFangsong', 'FangSong';
    position: relative;
    width: auto;
}

.col3 .cBox3 .c-c3 {
    padding: 30px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.col3 .cBox3 .c-info {
    margin: 5px 20px;
    font-size: 1.5em;
    color: #666;
}

.col3 .cBox3 .cont {
    font-size: 4em;
    line-height: 1.3em;
    opacity: 1;
}

.col3 .cBox3 .cont em {
    color: red;
    font-style: normal;
    font-size: 0.8em !important;
    margin-top: 10px;
    opacity: 0.3;
    padding-bottom: 10px;
}


.col3 .menubar3-s {
    position: absolute;
    right: 10px;
    bottom: 90px;
}

.col3 .menubar3-t {
    position: absolute;
    top: 10px;
    left: 10px;
}

.col3 .menubar3-b {
    position: absolute;
    right: auto;
    bottom: 30px;
    text-align: center;
}

.col3 .menubar3-s ul {
    list-style: none;
}

.col3 .menubar3-s ul li {
    margin-bottom: 10px;
}

.cBox3 .icon-in-paper {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 10;
    pointer-events: none;
}




.highlight {
    background-color: yellow;
}




.font-option.selected,
.layout-option.selected,
.background-option.selected,
.bgbackground-option.selected {
    background-color: #232323;
    /* 选中状态的背景颜色 */
    color: white !important;
    /* 选中状态的文字颜色 */
    border: 1px solid #121212;
}

.c-c3.horizontal {
    writing-mode: horizontal-tb !important;

    text-orientation: mixed;

}



.c-c3.horizontal .c-info {
    margin: 20px 10px !important;
}

.c-c3.vertical {

    writing-mode: vertical-rl !important;
    text-orientation: mixed;
}

.c-c3.vertical .cont {
    letter-spacing: 3px !important;
}

.cBox3.background0 {
    background: none;
    opacity: 1;

}

.cBox3.background0 .c-c3 {
    border: none !important;
}

.cBox3.background1 .c-c3 {
    border: 2px double red;
}

.cBox3.background2 .c-c3 {
    border: 2px double red;
}

.cBox3.background3 .c-c3 {
    border: 2px double lemonchiffon !important;
    color: lemonchiffon;
}

.cBox3.background3 .c-c3 .tit {
    color: lemonchiffon !important;
}

.cBox3.background4 .c-c3 {
    border: 2px double lemonchiffon !important;
    color: lemonchiffon;
}

.cBox3.background4 .c-c3 .tit {
    color: lemonchiffon !important;
}

.col3.bgbackground4 .background3 .c-c3 .tit,
.col3.bgbackground4 .background4 .c-c3 .tit {
    color: lemonchiffon !important;
}

.col3.bgbackground5 .background3 .c-c3 .tit,
.col3.bgbackground5 .background4 .c-c3 .tit {
    color: lemonchiffon !important;
}

.col3.bgbackground4 .c-c3 .tit {
    color: #000 !important;
}

.col3.bgbackground5 .c-c3 .tit {
    color: #000 !important;
}

.col3.bgbackgroundhz .c-c3 {
    border: none;
    color: #FBF9F5;
}

.col3.bgbackgroundhz .c-c3 .tit {
    color: #b8b8b8 !important;
}

.col3.bgbackgroundhzgh .c-c3 {
    border: none;
    color: #FBF9F5;
}

.col3.bgbackgroundhzgh .c-c3 .tit {
    color: #b8b8b8 !important;
}

.col3.bgbackgroundqdh .c-c3 {
    border: none;
    color: #FBF9F5;
}

.col3.bgbackgroundqdh .c-c3 .tit {
    color: #b8b8b8 !important;
}



.col3.bgbackgroundhz .background4 .c-c3,
.col3.bgbackgroundhz .background3 .c-c3,
.col3.bgbackgroundhz .background2 .c-c3,
.col3.bgbackgroundhz .background1 .c-c3,
.col3.bgbackgroundhz .background3 .c-c3,
.col3.bgbackgroundhz .background5 .c-c3,
.col3.bgbackgroundhz .background6 .c-c3 {
    border: 2px double red;
    color: #000;
}

.col3.bgbackgroundhz .background4 .c-c3 .tit,
.col3.bgbackgroundhz .background3 .c-c3 .tit,
.col3.bgbackgroundhz .background2 .c-c3 .tit,
.col3.bgbackgroundhz .background1 .c-c3 .tit,
.col3.bgbackgroundhz .background3 .c-c3 .tit,
.col3.bgbackgroundhz .background5 .c-c3 .tit,
.col3.bgbackgroundhz .background6 .c-c3 .tit {
    color: #000 !important;
}

.col3.bgbackgroundhzgh .background4 .c-c3,
.col3.bgbackgroundhzgh .background3 .c-c3,
.col3.bgbackgroundhzgh .background2 .c-c3,
.col3.bgbackgroundhzgh .background1 .c-c3,
.col3.bgbackgroundhzgh .background3 .c-c3,
.col3.bgbackgroundhzgh .background5 .c-c3,
.col3.bgbackgroundhzgh .background6 .c-c3 {
    border: 2px double red;
    color: #000;
}

.col3.bgbackgroundhzgh .background4 .c-c3 .tit,
.col3.bgbackgroundhzgh .background3 .c-c3 .tit,
.col3.bgbackgroundhzgh .background2 .c-c3 .tit,
.col3.bgbackgroundhzgh .background1 .c-c3 .tit,
.col3.bgbackgroundhzgh .background3 .c-c3 .tit,
.col3.bgbackgroundhzgh .background5 .c-c3 .tit,
.col3.bgbackgroundhzgh .background6 .c-c3 .tit {
    color: #000 !important;
}

.col3.bgbackgroundqdh .background4 .c-c3,
.col3.bgbackgroundqdh .background3 .c-c3,
.col3.bgbackgroundqdh .background2 .c-c3,
.col3.bgbackgroundqdh .background1 .c-c3,
.col3.bgbackgroundqdh .background3 .c-c3,
.col3.bgbackgroundqdh .background5 .c-c3,
.col3.bgbackgroundqdh .background6 .c-c3 {
    border: 2px double red;
    color: #000;
}

.col3.bgbackgroundqdh .background4 .c-c3 .tit,
.col3.bgbackgroundqdh .background3 .c-c3 .tit,
.col3.bgbackgroundqdh .background2 .c-c3 .tit,
.col3.bgbackgroundqdh .background1 .c-c3 .tit,
.col3.bgbackgroundqdh .background3 .c-c3 .tit,
.col3.bgbackgroundqdh .background5 .c-c3 .tit,
.col3.bgbackgroundqdh .background6 .c-c3 .tit {
    color: #000 !important;
}


.cBox3.background5 .c-c3 {
    border: 2px double red;
}

.cBox3.background6 .c-c3 {
    border: 2px double red;
}





.cBox3.background1 {
    background: url('bgbig.jpg') repeat-x top left / cover;
    opacity: 0.9;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cBox3.background2 {
    background: url('n03.jpg') repeat-x top left / cover;
    opacity: 1;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cBox3.background3 {
    background: url('n04-b.jpg') repeat-x top center / cover;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cBox3.background4 {
    background: url('n05-b.jpg') repeat-x top left / cover;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cBox3.background5 {
    background: url('n04.jpg') repeat-x top left / cover;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cBox3.background6 {
    background: url('n05.jpg') repeat-x bottom left / cover;
    max-width: 100%;
    padding: 50px;
    box-sizing: border-box;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}



.col3.bgbackground1 {
    background: url('n01-b.jpg') no-repeat top left / cover;
}

.col3.bgbackground2 {
    background: url('n02-b.jpg') no-repeat top left / cover;
}

.col3.bgbackground3 {
    background: url('n03-b.jpg') no-repeat top center / cover;

}

.col3.bgbackground4 {
    background: url('n04-b.jpg') no-repeat top center / cover;

}

.col3.bgbackground5 {
    background: url('n05-b.jpg') no-repeat top left / cover;
}

.col3.bgbackground6 {
    background: url('n06-b.jpg') no-repeat top left / cover;
}

.col3.bgbackgroundhz {
    background: url('n0hz-b.jpg') no-repeat top center / cover;
}

.col3.bgbackgroundqdh {
    background: url('n0qdh-b.jpg') no-repeat top center / cover;
}

.col3.bgbackgroundgh {
    background: url('n0gh-b.jpg') no-repeat top left / cover;
}

.col3.bgbackgroundhzgh {
    background: url('n0hzgh-b.jpg') no-repeat top center / cover;
}





.side-menu {
    border-top: 1px solid #e2e2e2;
}

.side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.side-menu ul li {
    margin: 5px 0;
    border-bottom: 1px solid #e2e2e2;
    padding: 5px 0 15px 0;
    opacity: 0.8;
    text-align: center;
}

.side-menu ul li button {
    width: 100%;
    color: #333;
    border: none;
    font-size: 1.2em;
    background: none;
    cursor: pointer;
}

.side-menu ul li button:hover {
    color: #EB452B;
    opacity: 1;
}

.side-menu ul li a {
    width: 100%;
    border: none;
    font-size: 1.2em;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

.side-menu ul li a:hover {
    opacity: 1;
}

.sitelogo {
    text-align: center;
    margin: 20px 0 100px 0;
}

.sitelogo img {
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-menu-mob {
    position: absolute;
    right: 30px;
    top: 190px;
    cursor: pointer;
    border: none;
    width: 100px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    color: #D9543A;
    opacity: 0.7;
}

.btn-menu-mob:hover {
    opacity: 1;
}

.btn-menu-mob img {
    padding-right: 5px;
}

.menuSelected {
    color: #EB452B !important;
    /* 选中状态的文字颜色 */
    font-weight: bold;
    background: url('menu-icon-re.png') no-repeat 115px 5px !important;
    opacity: 1 !important;
}

.col2 h2 {
    margin: 50px 20px 10px 20px;
}

.side-menu-cList-search {
    margin: 20px;
}

#searchInput {
    width: 100%;
    padding: 5px 3px;
    border: 1px solid #eee;
}

.side-menu-cList-cont {
    margin-right: 20px;
}

.side-menu-cList-cont li {
    list-style: circle;
    margin: 0 20px 10px 0;
    border-bottom: 1px solid #f19766;
    line-height: 0.8em;
    ;
}

.side-menu-cList-cont li p:hover {
    color: #F5DAB5;
    cursor: pointer;
}

.side-menu-cList-cont li p {
    line-height: 1.4em;
}

.remove-favorite {
    margin-bottom: 10px;
    background: #ee7c3e;
    color: #F5DAB5;
    border: 1px solid #F5DAB5;
    text-align: right;
    border-radius: 2px;
}

.remove-favorite:hover {
    background: #F5F8D3;
    cursor: pointer;
    color: #EB462B;
}

.btn-menu-pc {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    height: 40px;
    display: none;
    padding: 5px 10px;
    float: right;
    margin-bottom: 10px;
    color: #fff !important;
    background: #ee7c3e;
    border: 1px solid #F5DAB5;
    text-align: right;
    border-radius: 2px;
    font-size: 1em;
    margin: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
}

.btn-menu-pc:hover {
    cursor: pointer;
    color: #333 !important;
    ;
    background: #fff;
    border: 1px solid #F5DAB5;
}

.btn-menu-pc2 {
    padding: 5px 10px;
    float: right;
    margin-bottom: 10px;
    color: #fff !important;
    background: #cc6c35;
    border: 1px solid #F5DAB5;
    text-align: right;
    border-radius: 2px;
    font-size: 1em;
    margin: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
}

.btn-menu-pc2:hover {
    cursor: pointer;
    color: #333 !important;
    ;
    background: #fff;
    border: 1px solid #F5DAB5;
}

.menubar4-t .closeCol {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9888;
    height: 40px;
    display: none;
    padding: 5px 10px;
    float: right;
    margin-bottom: 10px;
    color: #fff !important;
    background: #ee7c3e;
    border: 1px solid #F5DAB5;
    text-align: right;
    border-radius: 2px;
    font-size: 1em;
    margin: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
}

.menubar4-t .closeCol:hover {
    cursor: pointer;
    color: #333 !important;
    ;
    background: #fff;
    border: 1px solid #F5DAB5;
}

.menubar4-t .closeColset {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 9999;
    height: 40px;
    padding: 5px 10px;
    float: right;
    margin-bottom: 10px;
    color: #fff !important;
    background: #ee7c3e;
    border: 1px solid #F5DAB5;
    text-align: right;
    border-radius: 2px;
    font-size: 1em;
    margin: 5px 12px;
    border-radius: 3px;
    font-weight: bold;
}

.menubar4-t .closeColset:hover {
    cursor: pointer;
    color: #333 !important;
    ;
    background: #fff;
    border: 1px solid #F5DAB5;
}




.btn-menu {
    float: right;
    margin-bottom: 10px;
    padding: 5px;
    color: #333;
    border: none;
    background: none;
    text-align: right;
    border-radius: 2px;
    font-size: 1em;
    border-radius: 3px;
}

.btn-menu:hover {
    cursor: pointer;
    color: #EB462B;
    color: #333;
}

.btn-menu strong {
    display: block;
    padding-top: 10px;
    color: #EB462C;
    opacity: 0.8;
    font-weight: bold;
    font-size: 20px;
    font-family: math;
}

.stielogo2 {
    text-align: center;
    margin: 5px 0 5px 0;
}

.stielogo2 img {
    border-radius: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 0.8;
}


#toggleCol4 {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

#toggleCol4:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}

#toggleCol5 {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

#toggleCol5:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}

#exportImage {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

#exportImage:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}

.p-print {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

.p-print:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}

.col3side-btn {
    width: 50px;
    padding: 15px 0 5px 0;
    border: 1px solid #ddd;
    background: none;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.8;
}

.col3side-btn img {
    margin-left: -16px;
}

.col3side-btn:hover {
    color: #EB462B;
    opacity: 1;
}

.col3side-btn {
    position: relative;
    width: 50;
    height: 50px;
}

.col3side-btn img {
    position: absolute;
    top: 0;
    left: 0px;

    display: block !important;

    animation: moveIn 3s forwards;
}

@keyframes moveIn {
    from {
        top: 20px;
        left: 30px;

    }

    to {
        left: 0px;
        top: 0px;
    }
}




.col3side-btn2 {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

.col3side-btn2:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}




.btn-save {
    float: left;
    font-size: 0.8em !important;
}

.btn-change {
    float: left;
}

#changeSentence {
    width: 110px;
    height: 45px;
    background: white;
    border: 1px solid #999;
    color: #333;
    border-radius: 50px;
    font-size: 1em !important;
    opacity: 0.8;
    margin-right: 10px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

@media (hover: hover) and (pointer: fine) {
#changeSentence:hover {
    color: #000;
    opacity: 1;
    font-weight: bold;
    color: #fff;
    border: 1px solid #d02f16;
    background: #EB462B;
}
}
#changeSentence { touch-action: manipulation; }

#changeSentence:visited {
    width: 110px;
    height: 45px;
    background: white;
    border: 1px solid #999;
    color: #333;
}

#changeSentence:active {
    width: 110px;
    height: 45px;
    background: white;
    border: 1px solid #999;
    color: #333;
}

#toggleFavorite {
    width: 64px;
    height: 45px;
    background: white;
    border: 1px solid #999;
    color: #333;
    border-radius: 50px;
    font-size: 1em !important;
    opacity: 0.8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

#toggleFavorite:hover {
    color: #000;
    opacity: 1;
    font-weight: bold;
    color: #EB462B;
    border: 1px solid #EB462B;
}

.closeCol {
    margin: -50px -10px 10px 0;
    float: right;
    padding: 5px 10px;
    color: #333;
    color: #fff;
    background: #EB482C;
    border: 1px solid #cf2e15;
    text-align: right;
    border-radius: 5px;
    font-size: 1em;
    border-radius: 3px;
    font-weight: bold;
}

.closeCol:hover {
    background: #fff;
    cursor: pointer;
    border: 1px solid #ee7c3e;
    color: #333;
}

.menubar4-t h2,
.menubar5-t h2 {
    margin-top: 60px;
}


.menubar4-t {
    margin: 20px;
}

.cBox4 {
    margin: 20px;
}

.cBox4 h3 {
    border-bottom: 1px solid #ece7e3;
    padding-bottom: 5px;
}

.cBox4 .c-c4 button {
    border: 1px solid #666;
    color: #333;
    padding: 5px;
    border-radius: 3px;
    margin: 0 5px 5px 0;
}

/* #toggleCol5{display: none;} */

.c-c4 p {
    font-size: 0.8em;
    color: #333;
}

.menubar5-t {
    margin: 20px;
}

.cBox5 {
    margin: 20px;
    color: #333 !important;
}

.cBox5 h3 {
    border-bottom: 1px solid #ece7e3;
    padding-bottom: 5px;
}

.cBox5 input {
    width: 100%;
    border: 1px soild #ccc;
    padding: 10px 5px;
    margin-bottom: 10px;
}

.cBox5 button {
    margin: 20px 10px 20px 0;
    border: 1px solid #666;
    background: white;
    color: #333 !important;
    border-radius: 5px;
    padding: 10px;
}

.cBox5 button:hover {
    background: #EB462B;
    color: white !important;
    opacity: 1;
}

.c-c4 p,
.c-c5 p {
    font-size: 0.8em;
    color: #333;
}

#iconSearch {
    display: flex;
    align-items: center;
}

#iconSearch img {
    margin-right: 5px;
    /* Adjust the spacing between the image and text as needed */
}



.btn-menu-mobile {
    width: 50px;
    padding: 10px 0;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    border-radius: 5px;
    font-size: 0.8em !important;
    opacity: 0.3;
}

.btn-menu-mobile:hover {
    background: #EB462B;
    color: white;
    opacity: 1;
}

@media (max-width: 768px) {
    .btn-menu-mobile {
        width: 100%;
        margin: 10px 0;
    }
}
/* The mood control shares the main action row. */
.col3 .menubar3-b { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: calc(100% - 24px); }
.col3 .menubar3-b > div { float: none; }
#changeSentence { margin-right: 0; }
#moodSelect {
    box-sizing: border-box;
    width: 110px;
    height: 45px;
    border: 1px solid #999;
    border-radius: 50px;
    background: white;
    color: #333;
    font: bold 16px -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
    opacity: .8;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    padding: 0 10px;
    appearance: none;
    text-align: center;
    text-align-last: center;
    cursor: pointer;
}
#moodSelect:hover { opacity: 1; color: #a6442c; border-color: #a6442c; }
#moodSelect:focus-visible { outline: 2px solid #a6442c; outline-offset: 3px; }
.col3 .mood-feedback { position: absolute; left: 50%; transform: translateX(-50%); bottom: 88px; width: max-content; max-width: calc(100% - 130px); text-align: center; color: #504038; font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif; }
.mood-feedback p { margin: 0; padding: 3px 7px; border-radius: 6px; background: rgba(255,255,255,.92); }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
.col3 .cBox3.long-poem { overflow: auto; max-height: calc(100dvh - 210px); max-width: calc(100% - 110px); margin-right: 60px; align-items: flex-start; direction: rtl; justify-content: flex-start; }
.col3 .cBox3.long-poem .c-c3 { flex-shrink: 0; max-width: none; direction: ltr; }
.col3 .cBox3.long-poem:has(.horizontal) { direction: ltr; }
.col3 .cBox3.long-poem .horizontal { max-width: 100%; box-sizing: border-box; }
@media(max-width:359px) { .col3 .menubar3-b { gap: 6px; } }
@media print { .mood-bar, .mood-feedback { display: none !important; } .col3 .cBox3.long-poem { max-height: none; overflow: visible; } }

/* A scrollable paper folio: generous margins, a fixed rhythm, no clipped verse. */
.col3 .cBox3.poetry-reader {
    width: min(1000px, calc(100% - 86px)); height: calc(100dvh - 250px);
    min-height: 230px; max-height: 720px; margin: 35px 46px 0 0;
    padding: 0 !important; overflow: hidden; display: block;
}
/* A flex item's intrinsic poem width must never widen the mobile viewport. */
.container, .col3 { min-width: 0; }
.col3 .menubar3-b { left: 50%; transform: translateX(-50%); width: max-content; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.col3 .poetry-reader .c-c3 {
    width: 100%; height: 100%; max-width: none; padding: 0 !important;
    display: block; writing-mode: horizontal-tb !important;
}
.poetry-reader .c-info { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.col3 .poetry-reader #randomSentence {
    display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
    writing-mode: horizontal-tb; direction: rtl; text-align: start;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
    white-space: normal !important; font-size: var(--poem-size, 42px) !important;
    -webkit-overflow-scrolling: touch;
}
.col3 .poetry-reader #randomSentence[dir="ltr"] { direction:ltr; }
#randomSentence::-webkit-scrollbar { display: none; }
.poem-page { direction:ltr; flex: 0 0 100%; min-width: 0; height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 18px; scroll-snap-align: start; scroll-snap-stop: always; }
.poem-lines { writing-mode: horizontal-tb; display: flex; flex: 0 0 auto; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: .32em; line-height: 1.12; letter-spacing: 0; }
.poem-line { display: flex; flex: 0 0 auto; flex-direction: column; white-space: pre; }
.poem-glyph { display: block; flex: 0 0 auto; width: 1em; height: 1.12em; line-height: 1.12em; text-align: center; writing-mode: horizontal-tb; }
.col3 .poetry-reader .cont em { color: #b65a49; opacity: .65; font-size: .65em !important; font-style: normal; margin: 0; padding: 0; }
.poem-source { display: flex; flex: 0 0 auto; flex-direction: column; writing-mode: horizontal-tb; font-size: 14px; line-height: 1.2; letter-spacing: 0; color: #746a5e; max-width: 46px; }
.poem-source .poem-glyph { height: 1.2em; line-height: 1.2em; }
.poetry-reader .horizontal .poem-page { flex-direction: column; gap: 24px; }
.poetry-reader .horizontal .poem-lines { flex-direction: column; align-items: flex-start; gap: .36em; }
.poetry-reader .horizontal .poem-source { display: block; max-width: 92%; max-height: none; text-align: right; }
.poetry-reader .horizontal .poem-line { display: block; }
.poetry-reader .horizontal .poem-glyph, .export-current .poem-glyph { display: inline; width: auto; height: auto; line-height: inherit; }
.poem-navigation { position: absolute; bottom: 104px; left: 50%; transform: translateX(-50%); width: min(280px,calc(100% - 80px)); color: #766758; font: 13px/1.5 -apple-system,BlinkMacSystemFont,'PingFang SC',sans-serif; }
.poem-navigation[hidden] { display: none; }
.poem-navigation .folio-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.poem-navigation.folio-reversed .folio-controls { flex-direction:row-reverse; }
.folio-reversed .folio-progress::after { margin-left:auto; }
.poem-navigation button { background: transparent; border: 0; padding: 8px 6px; color: #655548; font: inherit; cursor: pointer; }
.poem-navigation button:disabled { opacity: .28; cursor: default; }
.poem-navigation button:focus-visible,#randomSentence:focus-visible { outline: 1px solid #a54f3c; outline-offset: -2px; }
.folio-number { font-size: 12px; letter-spacing: .16em; font-variant-numeric: tabular-nums; }
.folio-progress { height: 1px; background: #86766530; margin: 0 6px; }
.folio-progress::after { content: ''; display: block; height: 1px; width: var(--progress,0); background: #a65c46; transition: width .3s ease; }
.folio-hint { display: block; text-align: center; font-size: 12px; opacity: .65; margin-top: 7px; letter-spacing: .12em; }
.col3 .mood-feedback { bottom: 178px; }
@media (max-height: 600px) { .col3 .cBox3.poetry-reader { height: calc(100dvh - 155px); min-height: 150px; margin-top: 0; } .poem-navigation { bottom: 67px; } .folio-hint { display: none; } }
@media (prefers-reduced-motion: reduce) { .folio-progress::after { transition: none; } }
/* Export only the selected folio; print all folios, keeping the whole poem. */
.col3 .cBox3.export-current { height: auto !important; max-height: none; overflow: visible; }
.export-current .c-c3 { height: auto !important; }
.col3 .export-current #randomSentence { display: block; height: auto; overflow: visible; }
.export-current .poem-page { height: auto; min-height: 360px; flex-direction: column; padding: 40px 25px; }
.export-current .poem-lines { writing-mode: horizontal-tb; flex-direction: column; font-size: 32px; white-space: normal; }
.export-current .poem-source { display: block; writing-mode: horizontal-tb; max-width: 100%; max-height: none; }
@media print {
    .poem-navigation { display: none !important; }
    .col3 .cBox3.poetry-reader { width: 100% !important; height: auto !important; max-height: none; overflow: visible; margin: 0; }
    .poetry-reader .c-c3 { height: auto !important; }
    .col3 .poetry-reader #randomSentence { display: block; height: auto; overflow: visible; }
    .poem-page { height: 85vh; break-after: page; break-inside: avoid; }
    .poem-page:last-child { break-after: auto; }
}
.export-current .poem-lines { max-width: 100%; align-items: stretch; }
.export-current .poem-line { display: block; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Ink grains sit above the paper and never intercept reading or controls. */
.ink-sand-layer { position: fixed; pointer-events: none; z-index: 5; contain: strict; }
@media (prefers-reduced-motion: reduce) { .ink-sand-layer { display: none; } }
@media print { .ink-sand-layer { display: none !important; } }