/*公用组件*/
@font-face{font-family:'font';src:url('https://asset.simsoft.top/products/fonts/mi.woff2');}
@font-face{font-family:'icon';src:url('https://static.nlrdev.top/sites/poem/icon.woff2');}
body{user-select:none;text-align:center;background:#f8f2f1;overflow:hidden;}
*{box-sizing:border-box;scrollbar-width:none;font-family:font,icon,微软雅黑;outline:none;}
::-webkit-scrollbar{display:none;}
#background{position:fixed;z-index:-1;top:0;left:0;width:100%;height:100%;pointer-events:none;object-fit:cover;}
el{height:5px;display:block;}

/*基础组件*/
textarea,select,input{background:white;border-radius:5px;width:100%;border:1px solid white;caret-color:#b7766c;resize:none;font-size:1rem;padding:10px;transition:border .2s;}
textarea:focus,select:hover,input:focus{border:1px solid #b7766c;}
a,aa{color:#b7766c;text-decoration:none;cursor:default;}
a:hover,aa:hover{text-decoration:underline;}
a:active{opacity:.8;}
.clickable{transition:filter .2s;}
.clickable:hover{filter:brightness(.95);}
button{color:white;border:0;background:#b7766c;width:100%;border-radius:5px;font-size:1rem;transition:filter .2s;}
button:not(.helpTip):hover{filter:brightness(1.1);}
button:not(.helpTip):active,.clickable:active{filter:brightness(.9);}
.inputGroup{position:relative;height:40px;}
.inputGroup>input{position:absolute;top:0;left:0;width:100%;height:100%;}
.inputGroup>button{position:absolute;top:5px;right:5px;width:fit-content;padding:0 20px;border-radius:3px;height:calc(100% - 10px);}
.roundIcon{font-size:1.5rem;padding:.3rem;line-height:1.5rem;height:2.1rem;width:2.1rem;text-align:center;display:inline-block;vertical-align:middle;background:#f8f2f1;border-radius:50%;color:#b7766c;}
center{margin:20px 0;font-size:.9rem;}

/*帮助提示*/
.helpTip{position:relative;cursor:help;z-index:3;}
.helpTip .helpTipBody{position:absolute;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:10px;color:black;pointer-events:none;min-width:250px;text-align:left;left:-5px;right:-5px;top:100%;margin:auto;box-shadow:0 0.25rem 1.125rem rgba(0,0,0,.1);border-radius:5px;white-space:initial;font-size:.8rem;font-weight:normal;opacity:0;margin-top:-10px;transition:opacity .2s,margin-top .2s;}
.helpTip:hover .helpTipBody{opacity:1;margin-top:5px;}
.helpTip.isClick{cursor:default;}
.helpTip.isClick .helpTipBody{width:fit-content;min-width:unset;font-size:1rem;white-space:nowrap;}
.helpTip.isClick:hover .helpTipBody{pointer-events:all;margin-top:0px;}

/*顶栏部分*/
header{position:fixed;left:0;width:100vw;top:0px;padding:20px;display:flex;align-items:center;z-index:2;}
header .branding{display:flex;align-items:center;white-space:nowrap;}
header .branding img{width:50px;height:50px;flex:50px;transition:filter .2s;}
header .branding span{font-size:1.9rem;font-weight:bold;margin-left:10px;text-align:center;transition:color .2s,filter .2s;}
header .branding span small{font-size:.98rem;font-weight:normal;display:block;opacity:.8;margin-top:-5px;}
header .branding:not(.appActive div) #backHomeTip{display:none;}
.appActive header .branding:hover span{color:#b7766c;}
.appActive header .branding:active span,.appActive header .branding:active img{color:#b7766c;filter:brightness(.95);}
header .links{width:100%;text-align:right;}
header #browserWarning{font-size:.8rem;background:red;color:white;border-radius:5px;margin-bottom:5px;padding:5px 10px;width:fit-content;display:inline-block;}
header #browserWarning .helpTipBody{width:300px}

/*兼容提示*/
#compatibilityMask{position:fixed;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(20px);top:0;left:0;width:100vw;height:100%;text-align:center;display:none;}
#compatibilityMask .maskMain{position:absolute;top:0;left:0;bottom:0;right:0;width:fit-content;height:fit-content;margin:auto;}
#compatibilityMask .maskMain font{font-size:5rem;}
#compatibilityMask .maskMain div{font-size:2rem;margin-bottom:10px;}
#compatibilityMask .maskMain span{display:block;font-size:.8rem;line-height:1rem;}
@media screen and (max-width:800px){#compatibilityMask{display:block;}}

/* 加载动画 */
#loading{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10;}
#loading::before,#loading::after{content:"";height:3px;border-radius:0 0 3px 3px;background:#b7766c;position:fixed;display:block;top:0;animation:loadingBar1 1s infinite;}
#loading::after{animation:loadingBar2 1s .6s infinite;}
@keyframes loadingBar1{from{left:-300px;width:300px;}to{left:100vw;width:100px;}}
@keyframes loadingBar2{from{left:-100px;width:100px;}to{left:100vw;width:300px;}}

/* 应用主页 */
#appHome{position:fixed;top:85px;left:0;width:100%;height:calc(100% - 175px);display:flex;align-items:center;justify-content:center;transition:opacity .2s;}
.appActive #appHome{opacity:0;}
#appHome>div{width:250px;margin:0 10px;height:fit-content;text-align:center;transition:color .3s,filter .3s;}
#appHome>div:hover{color:#b7766c;}
#appHome>div:active{color:#b7766c;filter:brightness(.95);}
#appHome>div>img{width:150px;height:150px;border-radius:20px;transition:transform .3s;}
#appHome>div:hover>img{transform:scale(1.05);}
#appHome>div:active>img{transform:scale(.98);}
#appHome>div>b{display:block;font-size:1.7em;margin:10px 0 5px 0;}
#appHome>div>span{display:block;font-size:.9em;opacity:.8;}

/* 底栏推荐 */
#appHome>.bottomRecommendations{background:rgba(255,255,255,.5);padding:10px 20px 15px 20px;position:fixed;bottom:0;left:0;width:100%;margin:0;border-radius:10px 10px 0 0;display:flex;align-items:center;color:#b7766c!important;filter:none!important;}
#appHome>.bottomRecommendations>div{transition:opacity .2s,filter .2s;border-right:1px solid #F8F2F1;display:flex;align-items:center;flex:100%;text-align:left;padding:0 15px;}
#appHome>.bottomRecommendations>div:last-child{border-right:none;}
#appHome>.bottomRecommendations>div:hover{opacity:.8;}
#appHome>.bottomRecommendations>div:active{opacity:1;filter:brightness(.9);}
#appHome>.bottomRecommendations>div>font{font-size:2.1em;margin-right:10px;}
#appHome>.bottomRecommendations>div>div{font-size:.8em;margin-bottom:-2px;}
#appHome>.bottomRecommendations>div>div>b{display:block;font-size:1.1rem;}

/* 应用框架 */
#appFrame{position:fixed;top:85px;left:0;width:100%;height:calc(100% - 85px);border:0;transition:opacity .2s;pointer-events:none;opacity:0;}
.appActive #appFrame{opacity:1;pointer-events:all;}