:root {
	--bg:#f5f7ff;
	--color:#000;
	--box-bg: #fff;
	--top-h: 60px;
	--margin: 20px;
	--toolbox-w: 410px;
	--footer-h: 144px;
	--border-color: #eff1f6;
	--bar-bg: linear-gradient(to right, #00b8ff, #2a4bff, #8a2be2, #d6487e, #ff7a5c );
	--bar-bg-down: linear-gradient(to bottom, #00b8ff, #2a4bff, #8a2be2, #d6487e, #ff7a5c );
	--tt-h:50px;
	--btn-zz-bg: rgba(0,0,0,0.2);
}

:root.dark {
  --bg: #12141a;
  --color: #e0eaf5; 
  --box-bg: #24272f;
  --border-color: #303a45;
  --bar-bg: #16b777;
  --bar-bg-down: #16b777;
  --btn-zz-bg: #303a45;
}

html,body{ background: var(--bg); color: var(--color); font-family: Pingfang SC,helvetica neuepingfang SC,helvetica neue,arial,hiragino sans gb,microsoft yahei ui,microsoft yahei,simsun,sans-serif,'微软雅黑';}
div{ box-sizing: border-box;}
.layui-text :where(a:not(.layui-btn)){cursor: pointer; color: var(--color);}
.box{ background: var(--box-bg); box-shadow: 0 2px 8px 0 rgba(96,114,252,.05); border-radius: 10px; overflow: hidden;}

.layui-timeline-item::before{background:var(--border-color) ;}
.layui-timeline-axis{ background:var(--box-bg) ;}

.top-box{ position: fixed; top: 0; left: 0; width: calc(100vw); height: var(--top-h); padding: 0 var(--margin);}
.top-box .c1{height: var(--top-h);  display: flex; justify-content: space-between; align-items: center; }
.top-box .c1 .logo-box{ height: calc(100%); display: flex; align-items: center; gap: 5px;}
.top-box .c1 .logo-box img{ height:40px;}


.tool-box{ position: fixed; top: var(--top-h); right: var(--margin); width: var(--toolbox-w); height: calc( 100vh - var(--margin) - var(--top-h) );}

.main-box{ position: fixed; top: var(--top-h); left: var(--margin); width:calc(100vw - var(--toolbox-w) - ( var(--margin) * 3 ) ); height: calc( 100vh - (var(--margin) * 2) - var(--top-h) - var(--footer-h)); }

.footer-box{position: fixed; bottom: var(--margin); left: var(--margin); width:calc(100vw - var(--toolbox-w) - ( var(--margin) * 3 ) ); height: var(--footer-h);}


.main-box .tags-box{ height: var(--tt-h); border-bottom: 1px solid var(--border-color); padding: 0 var(--margin); display: flex; gap: 20px; box-shadow: 0px 2px 8px rgba(0,0,0,0.1);}
.main-box .tags-box .home{ height: var(--tt-h); display: flex; align-items: center; cursor: pointer;}
.main-box .tags-box .home *{ font-size: 20px;}
.main-box .tags-box .menu{ height: var(--tt-h); display: flex; gap: 20px; align-items: center;}
.main-box .tags-box .menu li{ height: var(--tt-h); display: flex; align-items: center; position: relative; cursor: pointer;}
.main-box .tags-box .menu li a{ padding: 0; color: var(--color);}
.main-box .tags-box .layui-nav,.main-box .tags-box .layui-bg-gray{ background:none !important; padding: 0;}
.main-box .tags-box .menu .layui-nav-bar{background: var(--bar-bg); border-radius: 3px; }
.main-box .tags-box .menu .layui-this::after{content: ''; display: block; width: 100%; height: 2px; background:var(--bar-bg); position: absolute; bottom: 0; left: 0; border-radius: 3px; }
.main-box .tags-box .menu .layui-this a{ color: var(--color);}

#main{ width: calc(100%); height: calc(100% - var(--tt-h)); position:sticky; left: 0; bottom: 0; display: flex; }

#main #main-tag{ width: 200px; height: calc(100%); overflow: hidden;}
#main #main-tag .tagbox{ width: calc(100%); height: calc(100%); overflow: hidden; overflow-y: auto; padding: 10px 0; border-right: 1px solid var(--border-color);}
#main #main-tag .tab-list{}
#main #main-tag .tab-list li{ width: 200px; height: 45px; display: flex; align-items: center; position: relative;}
#main #main-tag .tab-list li.this{ background: var(--bg);}
#main #main-tag .tab-list li.this::after{ content: ''; width: 3px; height: 15px; position: absolute; left: 0; top: 15px; background: var(--bar-bg-down);}
#main #main-tag .tab-list li .tb{ width: 45px; height: 45px; display: flex; align-items: center; justify-content: center;}
#main #main-tag .tab-list li .tt{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; cursor: pointer;}
#main #main-tag .tab-list li .close{width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; position: relative; }
#main #main-tag .tab-list li .close:hover{}
#main #main-tag .tab-list li .close:hover::after{ content: ''; display: block; width: 25px; height: 25px; background: var(--btn-zz-bg); color: #fff; position: absolute; left: 10px; top: 10px; z-index: 0; border-radius: 5px;}
#main #main-tag .tab-list li .close i{ font-size: 14px; cursor: pointer; position: relative; z-index: 1;}

#main #main-body{ flex: 1; height: calc(100% - 26px); overflow: hidden; margin: 13px; padding: 15px; border-radius: 10px; background: var(--bg);}
#main #main-body .main-win{ width: calc(100%); height: calc(100%);overflow: hidden; display: none; position: relative;}
#main #main-body .main-win .ifm{ display: block; background:none; border: none; width: calc(100%); height: calc(100%); border-radius: 15px;}
#main #main-body .main-win .active{ position: absolute; top: 15px; left: 10px; z-index: 999; width: 36px; padding:10px 0;backdrop-filter: blur(8px);  background: rgba(255, 255, 255, 0.15); display: flex;flex-direction: column;align-items: center; border: 1px solid rgba(0,0,0,0.1); border-radius: 15px; box-shadow: 0 2px 10px rgba(55,99,170,.06);}
#main #main-body .main-win .active i{ font-size: 22px;}
#main #main-body .main-win .active .bn{cursor: pointer;}


.tool-box{}
.tool-box .tool-main{ display: flex; flex-direction: row-reverse; height: calc(100%);}
.tool-box .tool-main .tool-list-box{ width: 50px; height: calc(100%); border-left:1px solid var(--border-color); padding: 10px 0;}
.tool-box .tool-main .tool-list{}
.tool-box .tool-main .tool-list li{ width: 50px; height: 46px; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer;}
.tool-box .tool-main .tool-list li.this::after{ content: ''; width: 3px; height: 16px; background: var(--bar-bg-down); position: absolute; top: 15px; left: -1px;}
.tool-box .tool-main .tool-list li *{ font-size: 20px !important;}

.tool-box .tool-main .tool-page-box{ width: calc(100% - 50px); height: calc(100%);overflow: hidden;}
.tool-box .tool-main .tool-page-box .tool-page{width: calc(100%); height: calc(100%); display: none;}
.tool-box .tool-main .tool-page-box .tool-page .tool-page-tt{ width: calc(100%); height: var(--tt-h); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; padding: 0 15px; font-size: 16px;}
.tool-box .tool-main .tool-page-box .tool-page .tool-page-body{width: calc(100%); height: calc( 100% - var(--tt-h) ); overflow-y: auto; padding:0 15px;}

/* 工具类通用样式 */
.tool-page .title{ padding-left:10px; height: 26px; line-height: 22px;  width: calc(100%); position: relative; margin: 10px 0;}
.tool-page .title::after{ content: ''; display: block; position: absolute; height: 10px; width: 3px; top: 8px; left: 0; background: #16b777;}
.tool-page .app-list{ width: calc(100%); display: flex; gap: 15px; flex-wrap: wrap; justify-content: flex-start;}
.tool-page .app-list .app{ width: 100px;display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.tool-page .app-list .app .app-tb img{ width: 30px; height: 30px; border-radius: 5px;}
.tool-page .app-list .app .app-tt{ width: 60px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tool-page .app-list .app-2{ width: 100px; overflow: hidden; text-align: center; background: var(--bg); height: 30px; line-height: 26px !important; font-size: 12px; border-radius: 5px; }

/* 内容页样式 */
.details-box{ margin: 0 auto; width: calc(100%); max-width: 1100px; background: var(--dt-bg); border: 2px solid var(--dt-bg); box-shadow: 0 2px 10px rgba(55,99,170,.06);border-radius: 2px; padding: 32px; position: relative;}
.details-box .header{}
.details-box .header h1{ margin-bottom: 15px; font-weight: 500;}
.details-box .header .date{ color: var(--header-color); margin-bottom: 10px;}
.details-box .header .tags{ display: flex; gap: 15px; color: var(--header-tags-color); margin-bottom: 15px;}
.details-box .header .tags #article-tags{display: flex; gap: 15px;}
.details-box .header .tags .tg{background: #ffeeea;color: #fc5531; font-size: 12px; padding: 2px 8px; border-radius: 3px;}
.details-box .header .Guide-box{background: var(--header-Guide-box-bg); padding: 16px 20px;}
.details-box .header .Guide-box .tt{ display: flex; align-content: center; font-size: 20px; gap: 10px;}
.details-box .header .Guide-box .tt i{font-size: 20px; color: #16b777;}
.details-box .header .Guide-box .tt .dd{color: var(--header-color); font-weight: bold;}
.details-box .header .Guide-box p{color: var(--header-color); font-size: 14px; line-height: 24px;}

.ditails{ display: block; margin-top: 20px; font-size: 16px; line-height: 26px;}
.ditails img{ max-width: 100%;}
.ditails p,
.ditails h1,
.ditails h2,
.ditails h3,
.ditails hr,
.ditails img,
.ditails pre{ margin-top: 18px;}
/* 代码块样式 - 保留换行和空格 */
.ditails pre,
.ditails code,
.ditails .code-block,
.ditails .hljs {
	white-space: pre-wrap !important;
	word-wrap: break-word;
	word-break: break-word;
	overflow-x: auto;
}