html, body {    height: 100%;    margin: 0;    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;}
body {    height: 100vh;    min-height: 100vh;    display: flex;    flex-direction: row; /* 原背景改为纯色，真正滚动背景用伪元素实现 */
    background: #eee;    overflow:hidden;}
/* 滚动背景：改为往返移动，避免循环跳变顿挫 */
body::before {content:"";position:fixed;inset:0;z-index:-1;width:200%;height:100%;background:url('/img/p_bgL.webp') repeat-x center center; background-size:cover;animation:bgScroll 120s linear infinite alternate;will-change:transform;}
@keyframes bgScroll {0%{transform:translateX(0);}100%{transform:translateX(-50%);} }
#sidebar {    width:270px;    background: none;    border-right: 1px solid #aaa;    display: flex;    flex-direction: column;    align-items: stretch;    min-width: 220px;}
#logo {    display: flex;    align-items: center;    justify-content: center;    border-bottom: 1px solid #eee;padding:10px 0 20px 0 ;}
    #logo img {width:250px;    }

.menu-list { padding: 0;    list-style: none;}
.menu-item {display: flex;align-items: center;padding: 12px 24px;margin:10px 10px;cursor: pointer;    font-size: 18px;font-weight:500;    color: #333;    transition: background 0.2s;border:1px solid #449D48;border-radius:10px;  background: rgba(255,255,255,0.3);}
.menu-item .icon {    font-size: 22px;    margin-right: 16px;    color: #449D48;}
.menu-item.selected {        background: #e6f4ea;        color: #449D48;    }
.menu-grid {    display: grid;    grid-template-columns: repeat(3, 1fr);    gap: 8px;    margin:10px 10px;margin-top:0px;}
.grid-item {    border: 1px solid #449D48;    border-radius: 10px;    text-align: center;    padding:10px 0px;    cursor: pointer;    transition: box-shadow 0.2s, border-color 0.2s;    background: rgba(255,255,255,0.1);}
.grid-item span {display:block;    }
.grid-item .icon {font-size: 28px;color: #449D48;        margin-bottom: 4px;    }
.grid-item .svgicon {width: 1.5em;height: 1.5em; margin:-3px 0px;   vertical-align: -0.15em;        fill: currentColor;        overflow: hidden;        font-size: 22px;   margin-bottom:3px;}
.grid-item .text {        font-size: 14px;        color: #333;    }
.grid-item.selected {        border-color: #449D48; color: #449D48;    background: #e6f4ea;       }
.List-Line {     margin:10px 10px;margin-top:0px;}
.List-Line a {display:block;text-align:center;color:#347938;margin-top:5px;}

#btm-list { position:absolute;display:flex; bottom:10px;padding:10px;width:270px;    border-radius: 10px;    box-shadow: 0 2px 8px rgba(0,0,0,0.06);  
    flex-direction: column;    align-items: center;    font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;     box-sizing: border-box;}
#btm-list-unlogin {    display: none;    gap: 24px;    align-items: center;    justify-content: center;}
#btm-list-unlogin a {        color: #449D48;        font-size: 16px;        text-decoration: none;        padding: 6px 18px;display:inline-block;
        border-radius: 6px;        border: 1px solid #449D48;        background: #fff;        transition: background 0.2s, color 0.2s;        font-weight: 500;    }
#btm-list-unlogin a:hover {            background: #449D48;            color: #fff;}
#btm-list-logined { display:none;   align-items: center;    gap: 14px;    width: 100%;    justify-content: flex-start; padding:5px 20px; box-sizing:border-box;   color: #333;    transition: background 0.2s;border:1px solid #449D48;border-radius:10px;  background: rgba(255,255,255,0.3);}
#user-avatar {    width: 48px;    height: 48px;    border-radius: 50%;    object-fit: cover;}
#btm-list-logined > div {    display: flex;    flex-direction: column;    justify-content: center;}
#user-InCenter{position:absolute;right:20px;display:inline-block;right:20px; padding:10px;border:1px solid #f6f6f6;border-radius:5px;}
#user-InCenter .iconfont {color:#ccc;    }
#user-InCenter:hover {border:1px solid #ccc;background:#f6f6f6;}
#user-InCenter:hover .iconfont {color:#449D48;    }
#user-nickname {    font-size: 18px;    font-weight: 500;    color: #333;    line-height: 1.2;overflow:hidden;}
#user-username {    font-size: 13px;    color: #888;    font-weight: 400;    margin-top: 2px;    line-height: 1.2;overflow:hidden;}

#content-area {    flex: 1 1 auto;    display: flex;    flex-direction: row;    height: 100vh;    background: none;    position: relative;    overflow: hidden;}

.content-frame {  position: absolute;  top: 0; left: 0; width: 50%; height: 100%; border: none; transition: left 0.3s; overflow-x: hidden;}
    /*overflow-y: auto;*/    /* 让滚动条平时不显示，仅内容超出时显示 */    /*scrollbar-width: thin;*/ /* Firefox */    /*scrollbar-color: #b2d8b6 transparent;*/ /* Firefox *//*}*/
    .content-frame.left { left: 0;margin-right:10px; z-index: 1; border-right:1px solid #aaa;}
    .content-frame.right {left:50%; z-index: 2; border-left:1px solid #aaa;}
@media (max-width: 900px) {
    #sidebar { width: 200px; min-width: 120px; }
}