/* -------------------------
基础
------------------------- */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
background:#f5f6f7;
color:#333;
}

a{
text-decoration:none;
color:#333;
}

ul{
list-style:none;
}


/* -------------------------
页面容器
------------------------- */

.inner-center{
max-width:1200px;
margin:auto;
}

.main{
padding:40px 20px;
}

.content{
display:none;
}

.content.show{
display:block;
}


/* -------------------------
顶部按钮
------------------------- */

.btn1{
text-align:center;
margin-top:20px;
}

.btn{
border:none;
background:#eee;
padding:8px 16px;
margin:0 6px;
border-radius:6px;
cursor:pointer;
}

.btn.active{
background:#1890ff;
color:#fff;
}


/* -------------------------
工具栏
------------------------- */

.toolbar{
position:absolute;
top:20px;
right:30px;
display:flex;
gap:10px;
}

.toolbar button{
border:none;
background:#1890ff;
color:#fff;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

#actionButtons{
display:flex;
gap:6px;
}

#import-file{
display:none;
}


/* -------------------------
LOGO
------------------------- */

.logo-box{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
}

.logo-left img{
height:50px;
}

.logo-right{
font-size:26px;
font-weight:bold;
margin-left:10px;
}


/* -------------------------
搜索框
------------------------- */

.search-section{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:30px;
}

.search-left{
position:relative;
display:flex;
align-items:center;
border:1px solid #ddd;
border-radius:6px;
background:#fff;
padding:6px;
width:520px;
}

.search-logo{
width:26px;
height:26px;
margin-right:8px;
cursor:pointer;
background-size:contain;
background-repeat:no-repeat;
}


/* 搜索引擎图标 */

.search-logo.baidu{
background-image:url('./img/scbaidu.png');
}

.search-logo.google{
background-image:url('./img/scgoogle.png');
}

.search-logo.bing{
background-image:url('./img/scbing.png');
}

.search-logo.so{
background-image:url('./img/scso.png');
}

.search-logo.sogou{
background-image:url('./img/scsogou.png');
}

.search-logo.wangpan{
background-image:url('./img/scwangpan.png');
}


/* 输入框 */

.input-wrap{
flex:1;
position:relative;
}

.search-input{
width:100%;
border:none;
outline:none;
font-size:15px;
padding:6px;
}

.clear-keyword{
position:absolute;
right:8px;
top:50%;
transform:translateY(-50%);
cursor:pointer;
display:none;
color:#888;
}


/* 搜索按钮 */

.search-submit{
margin-left:10px;
background:#1890ff;
color:#fff;
border:none;
padding:10px 20px;
border-radius:6px;
cursor:pointer;
}


/* -------------------------
搜索引擎列表
------------------------- */

#search_methods{
position:absolute;
top:100%;
left:0;
width:120px;
background:#fff;
border:1px solid #ddd;
border-radius:6px;
display:none;
z-index:999;
}

#search_methods li{
padding:8px 12px;
cursor:pointer;
}

#search_methods li:hover{
background:#f2f2f2;
}


/* -------------------------
搜索建议
------------------------- */

.search-result{
position:absolute;
top:100%;
left:36px;
right:0;
background:#fff;
border:1px solid #ddd;
border-top:none;
display:none;
z-index:998;
}

.search-result li{
padding:8px 12px;
cursor:pointer;
}

.search-result li:hover,
.search-result .active{
background:#f5f5f5;
}


/* -------------------------
导航列表
------------------------- */

.nav-content{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:20px;
}

.jj-list{
background:#fff;
border-radius:8px;
padding:10px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.jj-list-tit{
font-weight:bold;
margin-bottom:10px;
display:flex;
align-items:center;
justify-content:space-between;
}

.jj-list-con li{
display:flex;
align-items:center;
padding:6px 0;
}

.jj-list-link{
flex:1;
}

.nav-item button{
margin-left:4px;
border:none;
background:#eee;
padding:2px 6px;
cursor:pointer;
border-radius:4px;
}


/* -------------------------
添加分类按钮
------------------------- */

.add-cat-btn{
margin-top:20px;
border:none;
background:#52c41a;
color:#fff;
padding:8px 16px;
border-radius:6px;
cursor:pointer;
}


/* -------------------------
日历
------------------------- */

#calendar-container{
max-width:900px;
margin:20px auto;
}

.calendar-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.calendar-header button{
border:none;
background:#1890ff;
color:#fff;
padding:6px 12px;
border-radius:6px;
cursor:pointer;
}

.calendar-weekdays,
.calendar-days{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:6px;
}

.calendar-weekdays div{
text-align:center;
font-weight:bold;
padding:8px 0;
}

.calendar-day{
background:#fff;
border:1px solid #eee;
border-radius:6px;
padding:6px;
min-height:70px;
cursor:pointer;
transition:0.2s;
}

.calendar-day:hover{
background:#f5f5f5;
}

.calendar-day.empty{
background:transparent;
border:none;
cursor:default;
}

.solar-date{
font-size:16px;
font-weight:600;
}

.lunar-date{
font-size:12px;
color:#999;
}

.calendar-day.has-note{
background:#fff7e6;
border-color:#ffd591;
}

.calendar-day.solar-term{
color:#52c41a;
}

.calendar-day.holiday{
color:#f5222d;
}


/* -------------------------
记事弹窗
------------------------- */

.note-modal{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
}

.note-modal.show{
display:flex;
}

.note-modal-content{
background:#fff;
padding:20px;
border-radius:8px;
width:400px;
}

.note-modal textarea{
width:100%;
height:120px;
margin:10px 0;
}

.note-save{
background:#1890ff;
color:#fff;
border:none;
padding:6px 12px;
border-radius:6px;
}

.note-cancel{
margin-left:10px;
}


/* -------------------------
footer
------------------------- */

.footer{
text-align:center;
margin-top:40px;
color:#999;
}

.footer img{
vertical-align:middle;
}