body{font-family:Arial,sans-serif;margin:0;padding:0;display:flex;justify-content:center;align-items:flex-start;height:100vh;background-color:#f5f5f5}
.container{text-align:center;margin-top:100px;width:90%;max-width:800px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center}
.logo{margin-bottom:20px;display:flex;justify-content:center}
.logo img{width:290px;height:60px}
.header-div{margin:0 auto;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;max-width:550px;text-align:center}
header{color:#f8ffe5;text-align:center}
header span{display:inline-block;box-sizing:border-box;width:3rem;height:3rem;line-height:3rem;margin:0 .4rem;background:#ffc43d;border-radius:8px 8px 8px 8px;font-family:"华文琥珀","楷体"}
header span:nth-of-type(2){background:#ef476f}
header span:nth-of-type(3){background:#1b9aaa}
header span:nth-of-type(4){background:#06d6a0}
.time-display{font-size:16px;color:#888;margin-bottom:20px;font-weight:400;text-align:center}
.search-container{display:flex;flex-direction:column;align-items:center;position:relative;width:100%;max-width:800px;margin-left:auto;margin-right:auto}
.engine-selector{display:flex;justify-content:flex-start;gap:8px;margin-bottom:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#1e90ff #f0f0f0;padding-bottom:6px;width:100%;opacity:1;transition:opacity .3s ease}
.engine-selector::-webkit-scrollbar{height:4px}
.engine-selector::-webkit-scrollbar-track{background:#f0f0f0;border-radius:4px}
.engine-selector::-webkit-scrollbar-thumb{background:#1e90ff;border-radius:4px;opacity:.8}
.engine-selector::-webkit-scrollbar-thumb:hover{background:#07c}
.engine-option{padding:8px 12px;font-size:15px;border-radius:8px;cursor:pointer;transition:background-color .2s ease,color .2s ease;background-color:#f0f0f0;color:#333;flex-shrink:0;white-space:nowrap;margin-bottom:2px}
.engine-option[data-value*="coolcode.info"]{color:#d419cb}
.engine-option[data-value*="baidu.com"]{color:#2932e1}
.engine-option[data-value*="sogou.com"]{color:#f60}
.engine-option[data-value*="so.com"]{color:#19b955}
.engine-option[data-value*="bing.com"]{color:#00809d}

.engine-option[data-value*="sm.cn"]{color:#4285f4}
.engine-option[data-value*="toutiao.com"]{color:#720e9e}
.engine-option[data-value*="chinaso.com"]{color:red}
.engine-option[data-value*="iconfont.cn"]{color:#de5833}
.engine-option[data-value*="iqiyi.com"]{color:#45b853}
.engine-option[data-value*="163.com"]{color:#d82027}

.engine-option[data-value*="weibo.com"]{color:#4285f4}
.engine-option[data-value*="zhihu.com"]{color:#720e9e}
.engine-option[data-value*="taobao.com"]{color:red}
.engine-option[data-value*="bilibili.com"]{color:#de5833}
.engine-option[data-value*="xiachufang.com"]{color:#45b853}
.engine-option[data-value*="csdn.net"]{color:#d82027}

.engine-option[data-value*="juejin.cn"]{color:#4285f4}
.engine-option[data-value*="douyin.com"]{color:#720e9e}
.engine-option[data-value*="kuaishou.com"]{color:red}
.engine-option[data-value*="1688.com"]{color:#de5833}
.engine-option[data-value*="google.com"]{color:#45b853}
.engine-option[data-value*="yahoo.com"]{color:#d82027}

.engine-option[data-value*="yandex.com"]{color:#4285f4}
.engine-option[data-value*="duckduckgo.com"]{color:#720e9e}
.engine-option[data-value*="ecosia.org"]{color:red}
.engine-option[data-value*="ask.com"]{color:#de5833}
.engine-option.active{background-color:#1e90ff;color:#fff}
.search-wrapper{display:flex;align-items:center;width:100%;gap:0;margin-top:2px}
.search-input-wrapper{position:relative;flex:1}
#search-input{height:50px;padding:0 60px 0 10px;font-size:16px;border:1px solid #ddd;border-radius:8px 0 0 8px;width:100%;outline:0;background-color:#fff;box-sizing:border-box;color:#333;transition:border-color .2s ease,box-shadow .2s ease}
#search-input:focus{border-color:#1e90ff;box-shadow:0 0 0 2px rgba(30,144,255,.2)}
#search-input::placeholder{color:#999}
#search-button{height:50px;padding:0 20px;font-size:16px;border:1px solid #ddd;border-radius:0 8px 8px 0;background:linear-gradient(135deg,#1e90ff,#07c);color:#fff;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;white-space:nowrap;margin-left:-1px}
#search-button:hover{background:linear-gradient(135deg,#07c,#1e90ff);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.toggle-container{position:absolute;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.toggle-label{font-size:12px;color:#666;white-space:nowrap;transition:color .2s ease}
.toggle-label.active{color:#1e90ff}
.toggle-button{position:relative;display:inline-block;width:40px;height:16px}
.toggle-button input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.2s;border-radius:16px}
.slider::before{position:absolute;content:'';height:12px;width:12px;left:2px;bottom:2px;background-color:#fff;transition:.2s;border-radius:50%}
input:checked+.slider{background-color:#1e90ff}
input:checked+.slider::before{transform:translateX(24px)}
.suggestions{position:absolute;top:calc(100% + 5px);left:0;width:100%;border:1px solid #ddd;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);display:none;z-index:10;overflow-y:hidden;max-height:none}
.suggestions div{padding:6px 10px;cursor:pointer;transition:background-color .2s ease;display:flex;align-items:center;white-space:normal;text-align:left;word-break:break-word}
.suggestions div:hover{background-color:#f0f0f0}
.suggestions div::before{content:attr(data-index);display:inline-block;width:20px;text-align:center;margin-right:10px;font-weight:700;font-size:16px;line-height:1;flex-shrink:0}
.suggestions div[data-index="1"]::before{color:#ff4757}
.suggestions div[data-index="2"]::before{color:#ff6b81}
.suggestions div[data-index="3"]::before{color:coral}
.suggestions div[data-index="4"]::before{color:#ffa502}
.suggestions div[data-index="5"]::before{color:#ffb142}
.suggestions div[data-index="6"]::before{color:#fc0}
.suggestions div[data-index="7"]::before{color:#7bed9f}
.suggestions div[data-index="8"]::before{color:#70a1ff}
.suggestions div[data-index="9"]::before{color:#5352ed}
.suggestions div[data-index="10"]::before{color:#1e90ff}
.custom-sites{margin-top:20px;width:100%;max-width:800px;margin-left:auto;margin-right:auto}
#add-site-btn{margin-bottom:10px;padding:6px 12px;font-size:12px;border-radius:8px;background:linear-gradient(135deg,#1e90ff,#07c);color:#fff;border:none;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease;height:30px}
#add-site-btn:hover{background:linear-gradient(135deg,#07c,#1e90ff);box-shadow:0 2px 4px rgba(0,0,0,.1)}
.custom-sites-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.custom-site{position:relative;display:flex;align-items:center;padding:10px;background-color:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,.1);width:calc(25% - 10px);box-sizing:border-box;transition:box-shadow .2s ease,border-color .2s ease}
.custom-site:hover{border-color:#1e90ff;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.custom-site img{width:30px;height:30px;margin-right:6px;border-radius:4px}
.custom-site a{flex:1;text-decoration:none;color:#1e90ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:7em;text-align:left}
.custom-site .delete-icon,.custom-site .edit-icon{position:absolute;cursor:pointer;font-size:12px;color:#999;transition:color .2s ease;opacity:0}
.custom-site .edit-icon{top:5px;right:5px}
.custom-site .delete-icon{bottom:5px;right:5px}
.custom-site:hover .delete-icon,.custom-site:hover .edit-icon{opacity:1}
.custom-site .delete-icon:hover::after,.custom-site .edit-icon:hover::after{content:attr(data-tooltip);position:absolute;background-color:#333;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;white-space:nowrap;top:-25px;left:50%;transform:translateX(-50%)}
.custom-site .delete-icon:hover,.custom-site .edit-icon:hover{color:#1e90ff}
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);justify-content:center;align-items:center;z-index:1000}
.modal-content{background-color:#fff;padding:20px;border-radius:8px;width:300px;position:relative;text-align:left;box-shadow:0 4px 8px rgba(0,0,0,.2)}
.modal-content .close{position:absolute;top:10px;right:10px;font-size:20px;cursor:pointer;color:#666;transition:color .2s ease}
.modal-content .close:hover{color:#1e90ff}
.modal-content h3{margin-bottom:5px;text-align:center;color:#333;margin-top:0}
.modal-content .modal-tip{font-size:12px;color:#666;text-align:left;margin-bottom:10px}
.modal-content form{display:flex;flex-direction:column;gap:5px}
.modal-content label{display:flex;align-items:center;color:#333;margin-bottom:2px}
.modal-content label .required{color:red;margin-left:4px}
.modal-content input{padding:6px;border:1px solid #ddd;border-radius:4px;outline:0;transition:border-color .2s ease,box-shadow .2s ease;margin-bottom:5px}
.modal-content input:focus{border-color:#1e90ff;box-shadow:0 0 0 2px rgba(30,144,255,.2)}
.modal-content button{padding:8px;background:linear-gradient(135deg,#1e90ff,#07c);color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s ease,box-shadow .2s ease}
.modal-content button:hover{background:linear-gradient(135deg,#07c,#1e90ff);box-shadow:0 2px 4px rgba(0,0,0,.1)}
@media (min-width:769px){.engine-selector{overflow-x:hidden;padding-bottom:0}
}
@media (max-width:768px){.custom-site{width:calc(50% - 10px)}
.engine-selector{gap:6px;padding:0 8px;padding-bottom:6px}
.engine-option{padding:8px 12px;font-size:15px;margin-bottom:2px}
.search-container{padding:0}
.search-wrapper{margin-top:2px}
}