*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,button,fieldset,form,input,legend,textarea,th,td{margin:0;padding:0}
html,body{height:100%}
::selection{background:#333;color:#fff}
a{outline:none;text-decoration:none;color:#333}
button,input,optgroup,select,textarea,.user-copy{user-select:none;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-user-select:none}
button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit;outline:none}
select:focus{outline:none;box-shadow:none}
h1,h2,h3,h4,h5,h6{font-weight:normal}
button{cursor:pointer}
::-webkit-scrollbar{width:8px;height:1px;border-radius:5px}
::-webkit-scrollbar-track{border-radius:5px;background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.3);border:none;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid transparent;background-clip:content-box}
:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.3);border:none;border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid transparent;background-clip:content-box}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: auto !important;
  opacity: 1 !important;       /* 确保不透明 */
  display: block !important;   /* 明确显示 */
  margin: 0 !important;
}

/* 导航菜单样式 */
.svg-nav-menu {
    position: fixed;
    top: 50%;
    left: calc(50% + 780px);
    transform: translate(-50%,-50%);
    width: 150px;
    height: 90%;
    z-index: 99;
    background: #fff; /* 浅灰背景 */
    padding:10px;
    overflow-x: hidden;
    overflow-y: auto; /* 响应式：小屏滚动 */
}

.svg-nav-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.svg-nav-menu li {
    margin: 0 0px;
}

.svg-nav-menu a {
    text-decoration: none;
    color: #495057;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 4px;
    transition: background 0.3s;
    display: flex;
}

.svg-nav-menu a:hover,
.svg-nav-menu a.active {
    background: #333;
    color: white;
}






i.isvg{width:100px;height:100px;font-size:24px;line-height:1;vertical-align:-0.125em;overflow:visible;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0px;color:#333;cursor:pointer;background-color:#f6f6f7;border-radius:10px}
i.isvg:hover{box-shadow:0 0 8px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.1);background:#fff}
i.isvg svg{width:24px;height:24px;display:block}
.copy-toast svg{width:20px;height:20px}
main{width:calc(1440px - 0px);margin:0 auto;position:relative}
#svgContainer{width:calc(100% - 310px);position:relative;left:310px;padding:0px 0 150px 0}
.svg-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;width:calc(100% - 0px);margin:0px auto;padding:50px 0 10px 0}
.svg-list .svg-list-title{width:100%;display:flex;flex:auto}
.logo{width:100%;height:auto;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.logo svg{color:#333;width:128px;height:128px}
.alliconData {color:#333;margin-bottom: 20px;}
#searchWrapper{position:fixed;top:0;display:flex;flex-direction:column;width:280px;height:calc(100% - 20px);margin:50px 0 10px 0;align-items:center;z-index:999}
#searchWrapper.fixed{}
#searchWrapper .svgSearchContainer{position:relative;display:flex;flex-direction:column;width:100%}
#searchWrapper .svgSearchContainer #svgSearch{padding:15px 30px;line-height:1;width:100%;border:1px solid #ddd;box-shadow:0 3px 10px rgba(0,0,0,0.08);border-radius:10px;text-align:center;transition:all 0.15s ease}
#searchWrapper .svgSearchContainer input::placeholder{color:#ccc !important}
#searchWrapper .svgSearchContainer:hover #svgSearch,#searchWrapper .svgSearchContainer #svgSearch:focus{border:1px solid #333;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
#searchWrapper .svgSearchContainer #clearBtn{position:absolute;z-index:99;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;font-weight:bold;display:none;color:#888;font-size:20px;line-height:1;width:26px;height:26px;border-radius:100px;align-items:center;justify-content:center}
#searchWrapper .svgSearchContainer #clearBtn svg{width:14px;height:14px}
#commonWords{margin-top:20px;display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;max-height:calc(100% - 300px);overflow-x:hidden;overflow-y:auto}
#commonWords span{display:inline-block;background:#f5f5f5;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:12px}
#commonWords span:hover{background:#d0d0d0}
#backToTop{position:fixed;bottom:20px;right:20px;display:none;cursor:pointer;height:48px;width:48px;background-color:#fff;border-radius:100px;font-size:12px;border:1px solid #ddd;color:#ccc;line-height:14px;box-shadow:0 0 5px rgba(0,0,0,0.1)}
#backToTop span{font-size:20px;font-family:'Font Awesome 6 Pro'}
#backToTop:hover{color:#999}


#svg-config-panel{position:fixed;top:0;left:0;z-index: 999;}
#svg-config-panel .config-panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #ccc;box-shadow:0 5px 15px rgba(0,0,0,0.2);border-radius:8px;z-index:999;width:500px;max-width:90%;font-family:Arial,sans-serif;padding-bottom:15px}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;background:#f0f0f0;border-bottom:1px solid #eee;border-top-left-radius:8px;border-top-right-radius:8px}
.panel-header #panel-filename{font-weight:bold;font-size:1.1em;color:#333}
.close-btn{background:none;border:none;font-size:1.5em;cursor:pointer;color:#666;padding:0 5px}
.close-btn:hover{color:#333}
.panel-body{padding:10px;font-size:14px}
.setting-group {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #eee;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.setting-group:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.setting-group label{display:inline-block;font-weight:bold;color:#555}
.setting-group input[type="number"],.setting-group input[type="color"]{width:60px;padding:5px;border:1px solid #ddd;border-radius:4px}
.preset-sizes{display:flex;flex-wrap:wrap;gap:5px}
.preset-sizes button{background:#f5f5f5;border:1px solid #ddd;padding:5px 5px;border-radius:4px;cursor:pointer;font-size:0.9em;height: 30px;}
.preset-sizes button:hover{background:#ddd}
.panel-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.panel-actions button{background:#007bff;color:white;border:none;padding:10px 5px;border-radius:5px;cursor:pointer;font-size:14px;flex:1 1 auto;max-width:48%;box-sizing:border-box}
.panel-actions button:hover{background:#0056b3}
#reset-btn{background:#6c757d}
#reset-btn:hover{background:#5a6268}
#copy-toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,1);box-shadow:0 5px 15px rgba(0,0,0,0.15);border:2px solid #333;color:#333;padding:15px;border-radius:10px;font-size:14px;display:none;z-index:9999;max-width:500px}
#copy-toast pre{margin:0 0 5px 0;max-height:150px;overflow:auto;background:#f8f8f8;padding:8px;border-radius:4px;border:1px solid #eee;white-space:pre-wrap;word-wrap:break-word;word-break:break-all}
#copy-toast span{display:block;text-align:center;color:#00a151;font-weight:bold}
#svg-preview-container{display:flex;justify-content:center;align-items:center;width:100%;min-height:200px;border:1px dashed #ddd;border-radius:4px;margin-bottom:20px;background-color:#f9f9f9}
#svg-preview-container svg{max-width:90%;max-height:180px;width:auto;height:auto;display:block}
.color-settings > div{display:flex;align-items:center;margin-bottom:10px;width: 100%;}
.color-settings label{width:120px;margin-bottom:0}
.color-text-input{flex-grow:1;margin-right:5px;padding:5px;border:1px solid #ddd;border-radius:4px;height:30px;box-sizing:border-box}
.color-picker-input{width:30px;height:30px;padding:0;border:1px solid #ddd;border-radius:4px;cursor:pointer;background:transparent}
.setting-group input[type="number"]{height:30px;padding:5px;box-sizing:border-box}
.color-preset-panel{position:fixed;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);padding:8px;z-index:10000;max-width:330px;min-width:200px;max-height:300px;flex-direction:row;flex-wrap:wrap;gap:5px;display:none;animation:fadeIn 0.2s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(-5px)}
to{opacity:1;transform:translateY(0)}
}
.color-preset-item{display:flex;align-items:center;padding:6px 8px;cursor:pointer;border-radius:4px;transition:background-color 0.1s;white-space:nowrap;flex:auto}
.color-preset-item:hover{background-color:#f5f5f5}
.color-preset-item.text-preset{background-color:#f5f5f5;justify-content:center}
.color-preset-item.text-preset .color-preset-text{margin:0;text-align:center}
.color-preset-text{margin-left:8px;font-size:14px;color:#333}
.color-block{width:20px;height:20px;border:1px solid #ccc;border-radius:3px;flex-shrink:0}
.preset-close{position:absolute;top:-10px;right:-10px;background:#666;border:none;font-size:16px;cursor:pointer;color:#fff;width:20px;height:20px;border-radius:100px;display:flex;align-items:center;justify-content:center}
#svg-config-panel .masklayer{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1;

}

#svgFavorites{display: none;}
#svgFavorites.show {
    display: block; /* 或 flex、grid 等，根据您的布局 */
  }
#svgFavorites ul{

}

#svgFavorites ul li{position: relative;}

#svgFavorites ul li button{display: none;border: none;align-items: center;justify-content: center;background: #fff;border-radius: 100px; position: absolute;top: 2px;right: 2px;width: 20px;height: 20px;border:1px solid rgba(0,0,0,0.1);box-shadow: 0 0 5px rgba(0,0,0,0.2);}
#svgFavorites ul li:hover button{display: flex;}
#svgFavorites ul li button svg{width: 12px;height: 12px;}

#svgFavorites{position: fixed;bottom: 10px; z-index: 99;background: #fff;box-shadow: 0 0 20px rgba(0,0,0,0.3);width: 1090px;border-radius: 8px;overflow: hidden; padding: 10px;}
#svgFavorites ul {
    padding: 0;
    gap: 6px;
    overflow-y: auto;
    height: 50px;
    width: calc(100% - 4px);
    list-style-type:none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
#svgFavorites:hover ul {
    padding: 0;
    gap: 6px;
    overflow-y: auto;
    height: 106px;
    width: calc(100% - 4px);
}


#svgFavorites ul li .isvg{background: none;width: 50px; height: 50px;}
#svgFavorites ul li .isvg:hover{background-color:#f6f6f7;border: none;box-shadow: none;}
#svgFavorites .favorites-menu {
    display: none;
    gap: 5px;
    justify-content: flex-end;
}
#svgFavorites:hover .favorites-menu {
    display: flex;

}
#svgFavorites .favorites-menu button{
    border: none;
    background: #f5f5f5;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    margin-top: 5px;
}



@media screen and (max-width:1440px){

  main {
      width: calc(100% - 0px);
      margin: 0 auto;
  }
  main .logo{
  width: 80px;
  }
  main .logo svg{
    width: 48px;
    height: 48px;
  
  }
  #searchWrapper {
    top: 0;
    display: flex;
    width: calc(100% - 0px);
    margin: 0px 0 10px 0;
    padding: 20px;
    background: #fff;
    height: 265px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
  #commonWords {
      margin-top: 20px;
      gap: 5px;
      max-height: 85px;
  }
  #commonWords span {
  
  }
  #svgContainer {
      width: 100%;
      position: relative;
      left: 0px;
      top: 235px;
      padding: 40px 20px;
  }
  
  .svg-list {
      gap: 5px;
  }
  i.isvg {
      width: calc(20% - 4px);
      height: 50px;
  }
  i.isvg svg {
      width: 20px;
      height: 20px;
      display: block;
  }
  #svgFavorites {

    width: calc(100% - 40px);
}
  #svgFavorites ul{gap: 5px;}
  #svgFavorites ul li i{min-width: 50px;}



      }