:root{
--bg:#f9f9fb;
--card:#fff;
--text:#15141a;
--secondary:#5b5b66;
--border:#e0e0e6;
--accent:#0060df;   /* 强调色：聚焦边框/选中项/开关 */
--on-accent:#fff;   /* 强调色上的文字 */
}

body.dark{

--bg:#2b2a33;
--card:#42414d;
--text:#fbfbfe;
--secondary:#cfcfd8;
--border:#5b5b66;
--accent:#3a5f8a;   /* 暗色下用较暗的蓝，避免选中项过亮 */
--on-accent:#fff;

}

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

body{
background:var(--bg);
color:var(--text);
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
min-height:100vh;
display:flex;
justify-content:center;
align-items:flex-start;
padding-top:120px;
}

.container{
width:100%;
max-width:900px;
text-align:center;
}

.logo{
font-size:32px;
font-weight:600;
margin-bottom:32px;
}

.search-wrapper{
position:relative;
width:600px;
max-width:90vw;
margin:auto;
}

.search-box{
width:100%;
height:48px;
padding:0 86px 0 20px;
border-radius:24px;
border:1px solid var(--border);
background:var(--card);
color:var(--text);
font-size:16px;
outline:none;
box-shadow:0 2px 6px rgba(0,0,0,.08);
}

.search-box:focus{
border-color:var(--accent);
}

/* 搜索按钮 + 引擎切换按钮：无底色框，hover 时轻微浮起 */
.search-actions{
position:absolute;
right:10px;
top:50%;
transform:translateY(-50%);
display:flex;
align-items:center;
}

#search-btn,
#search-engine-btn{
width:32px;
height:32px;
padding:0;
border:0;
background:transparent;
color:var(--secondary);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:background .15s,color .15s;
}

#search-engine-btn{
font-size:15px;
line-height:1;
z-index:5;
}

#search-btn:hover,
#search-engine-btn:hover{
background:var(--bg);
color:var(--text);
}

.search-icon{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
}

#search-engine-menu{
position:absolute;
right:0;
top:52px;
display:none;
min-width:130px;
padding:6px;
background:var(--card);
border:1px solid var(--border);
border-radius:10px;
box-shadow:0 5px 20px rgba(0,0,0,.15);
z-index:200;
}

#search-engine-menu.open{
display:block;
}

.search-engine-item{
padding:8px 12px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

.search-engine-item:hover{
background:var(--bg);
}

.search-engine-item.active{
background:var(--accent);
color:var(--on-accent);
}

.shortcuts{
margin:45px auto 0;
width:700px;
max-width:90vw;
display:grid;
grid-template-columns:repeat(6,96px); /* 兜底：不支持 CSS 变量/var-in-repeat 时固定 6 列 */
grid-template-columns:repeat(var(--columns),96px);
justify-content:center;
gap:16px;
}

.shortcut{
width:96px;
height:96px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border-radius:12px;
text-decoration:none;
color:var(--text);
transition:.15s;
cursor:grab;
}

.shortcut.dragging{
opacity:.5;
}

.shortcut:hover{
background:var(--card);
}

.shortcut-icon{
width:48px;
height:48px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
background:var(--card);
border:1px solid var(--border);
margin-bottom:8px;
overflow:hidden;
}

.shortcut-icon img{
width:32px;
height:32px;
object-fit:contain;
}

.shortcut-icon span{
font-size:32px;
}

.shortcut-title{
font-size:13px;
color:var(--secondary);
max-width:90px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.settings-btn{
position:fixed;
top:20px;
right:20px;
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border:0;
background:none;
cursor:pointer;
}

.settings-btn svg{
width:22px;
height:22px;
fill:none;
stroke:var(--secondary);
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}

#panel{
display:none;
position:fixed;
right:20px;
top:65px;
width:340px;
max-height:80vh;
overflow:auto;
padding:18px;
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,.15);
z-index:100;
text-align:left;
}

#panel h3{
font-size:16px;
margin:12px 0 8px;
}

#panel input{
width:100%;
height:38px;
padding:0 12px;
margin:5px 0;
border:1px solid var(--border);
border-radius:8px;
background:var(--bg);
color:var(--text);
font-size:14px;
outline:none;
}

#panel select,
#card-editor select{
width:100%;
height:38px;
padding:0 32px 0 12px;
border:1px solid var(--border);
border-radius:8px;
background-color:var(--bg);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%235b5b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:12px;
color:var(--text);
font-size:14px;
outline:none;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}

#panel select{
margin:5px 0;
}

#card-editor select{
margin-bottom:10px;
}

body.dark #panel select,
body.dark #card-editor select{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23cfcfd8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

#panel input:focus,
#panel select:focus{
border-color:var(--accent);
}

/* 原生下拉"展开中"（JS 切换 open 类）时箭头朝上，关闭时恢复朝下 */
#panel select.open,
#card-editor select.open{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 8l4-4 4 4' fill='none' stroke='%235b5b66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.dark #panel select.open,
body.dark #card-editor select.open{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 8l4-4 4 4' fill='none' stroke='%23cfcfd8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 自定义配色 */
.color-settings{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px 10px;
}

.color-settings label{
display:flex;
align-items:center;
justify-content:space-between;
font-size:13px;
color:var(--secondary);
padding:2px 0;
}

.color-settings input[type=color]{
width:34px;
height:26px;
border:1px solid var(--border);
border-radius:6px;
padding:2px;
background:none;
cursor:pointer;
}

#panel button{
height:36px;
padding:0 14px;
margin-top:8px;
border-radius:8px;
border:1px solid var(--border);
background:var(--card);
color:var(--text);
cursor:pointer;
}

#panel button:hover{
background:var(--bg);
}

.collapse-title{
cursor:pointer;
user-select:none;
padding:8px;
border-radius:8px;
display:flex;
align-items:center;
}
.collapse-title > span + span{
margin-left:4px; /* 旧浏览器（不支持 flex gap）用 margin 模拟间距 */
}

.collapse-title:hover{
background:var(--bg);
}

.collapse-title span{
font-size:14px;
}

.collapse-box{
display:none;
max-height:300px;
overflow:auto;
padding-right:4px;
}

.collapse-box.open{
display:block;
}

.card-setting{
display:flex;
align-items:center;
margin:8px 0;
}
.card-setting > * + *{
margin-left:8px; /* 旧浏览器（不支持 flex gap）用 margin 模拟间距 */
}

.card-setting input[type=number]{
width:80px!important;
}

.add-card{
cursor:pointer;
}

.add-card:hover{
background:var(--card);
}

.add-icon{
font-size:32px;
font-weight:300;
color:var(--secondary);
}

.engine-sort-item{
padding:6px 0;
border-bottom:1px solid var(--border);
cursor:grab;
}

.engine-sort-item.dragging{
opacity:.5; /* 拖拽排序时的视觉反馈（与卡片列表一致） */
}

.engine-title{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px;
border-radius:8px;
font-size:14px;
cursor:pointer; /* 整行可点击，展开/收起详情 */
}

.engine-title:hover{
background:var(--bg);
}

.engine-detail{
display:none;
padding:6px 0;
}

.engine-detail.open{
display:block;
}

.engine-detail input{
width:100%;
margin:4px 0;
}

#card-menu{
position:fixed;
background:var(--card);
color:var(--text);
border:1px solid var(--border);
border-radius:10px;
padding:6px;
box-shadow:0 5px 20px rgba(0,0,0,.2);
z-index:999;
min-width:120px;
}

#card-menu div{
padding:8px 12px;
border-radius:6px;
cursor:pointer;
font-size:14px;
}

#card-menu div:hover{
background:var(--bg);
}

#card-editor{
display:none;
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:320px;
padding:18px;
background:var(--card);
border:1px solid var(--border);
border-radius:12px;
box-shadow:0 8px 30px rgba(0,0,0,.25);
z-index:300;
}

#card-editor.open{
display:block;
}

#card-editor input{
width:100%;
height:38px;
padding:0 12px;
margin-bottom:10px;
border:1px solid var(--border);
border-radius:8px;
background:var(--bg);
color:var(--text);
}

#card-editor button{
height:36px;
padding:0 14px;
margin-right:8px;
border-radius:8px;
border:1px solid var(--border);
background:var(--card);
color:var(--text);
cursor:pointer;
}

#card-editor button:hover{
background:var(--bg);
}

.import-label{
display:block;
height:36px;
line-height:36px;
padding:0 14px;
margin-top:8px;
border:1px solid var(--border);
border-radius:8px;
cursor:pointer;
text-align:center;
background:var(--card);
}

.import-label:hover{
background:var(--bg);
}

#import-data{
display:none;
}

@media(max-width:600px){
.shortcuts{
gap:12px;
}

#panel{
right:10px;
width:calc(100vw - 20px);
}
}

.card-sort-item{
padding:6px 0;
border-bottom:1px solid var(--border);
cursor:grab;
}

.card-title{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px;
border-radius:8px;
font-size:14px;
cursor:pointer; /* 整行可点击，展开/收起详情 */
}

.card-title:hover{
background:var(--bg);
}

.card-detail{
display:none;
padding:6px 0;
}

.card-detail.open{
display:block;
}

.card-detail input,
.card-detail select{
width:100%;
margin:4px 0;
}

.card-sort-item.dragging{
    opacity:.5;
}

.hide-setting label{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer;
}

.switch{
position:relative;
width:42px;
height:22px;
}

.switch input{
display:none;
}

.slider{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:var(--border);
border-radius:20px;
transition:.2s;
}

.slider:before{
content:"";
position:absolute;
width:18px;
height:18px;
left:2px;
top:2px;
background:var(--card);
border-radius:50%;
transition:.2s;
box-shadow:0 1px 3px rgba(0,0,0,.25);
}

.switch input:checked + .slider{
background:var(--accent);
}

.switch input:checked + .slider:before{
transform:translateX(20px);
}

.add-form{
display:none;
margin-top:10px;
}


.add-form.show{
display:block;
}


.form-buttons{
display:flex;
}
.form-buttons > * + *{
margin-left:10px; /* 旧浏览器（不支持 flex gap）用 margin 模拟间距 */
}


.form-buttons button{
flex:1;
}

/* ---- 提示条 / 确认对话框 ---- */
.toast{
position:fixed;
left:50%;
bottom:24px;
transform:translateX(-50%) translateY(16px);
background:var(--text);
color:var(--card);
padding:10px 18px;
border-radius:8px;
font-size:14px;
opacity:0;
visibility:hidden;
transition:.25s;
z-index:999;
pointer-events:none;
}

.toast.show{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

.modal{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(0,0,0,.35);
display:flex;
align-items:center;
justify-content:center;
z-index:1000;
}

.modal[hidden]{
display:none;
}

.modal-box{
background:var(--card);
color:var(--text);
border:1px solid var(--border);
border-radius:12px;
padding:20px;
min-width:280px;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.modal-box p{
margin:0 0 16px;
}

/* ---- 收藏夹 ---- */
.favorites-tree{
list-style:none;
padding:0;
margin:8px 0;
font-size:14px;
}

.favorites-tree ul{
list-style:none;
padding-left:18px;
margin:0;
}

.favorite-folder,
.favorite-bookmark{
margin:4px 0;
}

.favorite-folder-title{
display:flex;
align-items:center;
gap:6px;
padding:4px 6px;
border-radius:6px;
background:var(--bg);
}

.favorite-folder-title .folder-arrow{
display:inline-block;
width:12px;
color:var(--secondary);
}

.favorite-folder-title .folder-name{
flex:1;
font-weight:600;
}

.favorite-folder-title button,
.favorite-bookmark button{
height:24px;
padding:0 8px;
font-size:12px;
border:1px solid var(--border);
border-radius:6px;
background:var(--card);
color:var(--text);
cursor:pointer;
}

.favorite-bookmark{
display:flex;
align-items:center;
gap:6px;
padding:4px 6px;
border-radius:6px;
}

.favorite-bookmark:hover{
background:var(--bg);
}

.favorite-bookmark a{
flex:1;
color:var(--text);
text-decoration:none;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

.favorite-bookmark a:hover{
color:var(--accent);
}

.favorites-empty{
color:var(--secondary);
padding:12px;
text-align:center;
font-size:13px;
}

.favorite-search-result{
padding:6px 8px;
border-bottom:1px solid var(--border);
font-size:13px;
}

.favorite-search-result a{
color:var(--text);
text-decoration:none;
}

.favorite-search-result a:hover{
color:var(--accent);
}

#favorites-editor .form-buttons{
margin-top:6px;
}

#import-favorites{
display:none;
}

/* ---- 主界面收藏夹面板 ---- */
.favorites-panel{
width:700px;
max-width:90vw;
margin:32px auto 0;
text-align:left;
}

.favorites-panel h2{
font-size:18px;
margin-bottom:10px;
color:var(--text);
}

.favorites-panel input{
width:100%;
height:38px;
padding:0 12px;
border:1px solid var(--border);
border-radius:8px;
background:var(--card);
color:var(--text);
font-size:14px;
outline:none;
}

.favorites-panel input:focus{
border-color:var(--accent);
}