:root{
  --bg1:#6a5cff; --bg2:#8a5cff; --bg3:#ff6a9c;
  --page:#ffffff;            /* 与 logo 白底融为一体 */
  --card:#ffffff;
  --text:#2b2f38;
  --muted:#8a8f99;
  --line:rgba(0,0,0,.12);
  --shadow:0 8px 24px rgba(43,47,56,.08);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
button,input,textarea,select{font-family:inherit;}
body{
  font-family:"楷体","KaiTi","STKaiti","Kaiti SC","DFKai-SB","BiauKai",serif;
  color:var(--text);
  min-height:100vh;
  background:var(--page);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(56px,11vh,132px) 16px 0;
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%;max-width:1280px;flex:1;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Logo */
.logo{
  display:flex;justify-content:center;align-items:center;gap:14px;
  margin-bottom:0;
  color:var(--text);
}
.logo .mark{
  height:clamp(68px, 11.3vw, 125px);
  width:auto;
  display:block;
}
.logo .name{font-size:clamp(26px,5vw,38px);font-weight:800;letter-spacing:2px;}

/* Search */
.search{margin-bottom:20px;}
.box{
  display:flex;align-items:center;
  border:2px solid transparent;border-radius:999px;
  background:
    linear-gradient(var(--card),var(--card)) padding-box,
    linear-gradient(90deg,#6a5cff,#ff6a9c,#31c193) border-box;
  box-shadow:0 8px 26px rgba(106,92,255,.22);
  padding:6px 6px 6px 20px;
  max-width:760px;margin:0 auto;
  transition:.2s;
}
.box:focus-within{
  transform:scale(1.02);
  box-shadow:0 12px 34px rgba(255,106,156,.32);
}
.box input{
  flex:1;border:0;outline:0;font-size:18px;color:var(--text);background:transparent;min-width:0;
}
.box button{
  border:0;cursor:pointer;flex-shrink:0;
  width:46px;height:46px;border-radius:50%;
  background:linear-gradient(135deg,var(--bg1),var(--bg3));
  color:#fff;font-size:19px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(106,92,255,.4);
  transition:.18s;
}
.box button:hover{transform:scale(1.06);}
.box button:active{transform:scale(.96);}

/* 选择搜索按钮 */
.pick{display:flex;justify-content:center;margin-top:12px;}
.pick-btn{
  border:0;cursor:pointer;font-size:15px;font-weight:600;
  padding:8px 20px;border-radius:999px;color:#31c193;
  background:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:.18s;
}
.pick-btn:hover{color:#27a37b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
.pick-btn span{font-weight:700;}

/* 展开/收回指示 */
.caret{display:inline-block;transition:transform .2s;}
.pick-btn[aria-expanded="true"] .caret{transform:rotate(180deg);}

/* 搜索引擎展开面板 */
.epanel{max-width:760px;margin:2px auto 0;}
.epanel-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease;}
.epanel.open .epanel-wrap{grid-template-rows:1fr;}
.epanel-inner{overflow:hidden;min-height:0;}
.epanel:not(.open) .epanel-inner{visibility:hidden;transition:visibility 0s .3s;}
.epanel.open .epanel-inner{visibility:visible;}

/* 分类：引擎 内联行 */
.cat-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 4px;border-top:1px solid rgba(0,0,0,.05);
}
.cat-row:first-child{border-top:0;}
.cat-name{
  flex:0 0 auto;font-size:14px;font-weight:700;
  color:#31c193;letter-spacing:1px;
}
.cat-links{display:contents;}

.pop-opt{
  flex:0 0 auto;
  border:1px solid #dfe3ea;cursor:pointer;
  padding:4px 10px;border-radius:8px;
  font-size:13px;font-weight:600;color:#31c193;
  background:#fff;transition:.15s;
}
.pop-opt:hover{border-color:#a9d3f2;transform:translateY(-2px);}
.pop-opt.active{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--bg1),var(--bg3));
  box-shadow:0 6px 16px rgba(106,92,255,.35);
}

/* Welcome + divider */
.welcome{
  text-align:center;color:#e03131;font-size:clamp(14px,2.6vw,17px);
  margin:26px auto 18px;letter-spacing:.5px;
}
.divider{
  height:3px;max-width:520px;margin:0 auto clamp(26px,4vw,40px);border-radius:3px;
  background:linear-gradient(90deg,#6a5cff,#8a5cff,#ff6a9c,#ffb36b,#31c193,#3aa0ff,#6a5cff);
}

/* Logo link + nav entry */
.logo a{display:block;line-height:0;text-decoration:none;}
.nav-entry{
  display:flex;justify-content:center;
  margin-bottom:56px;
}
.nav-entry a{
  display:inline-block;
  font-size:clamp(15px,2.4vw,18px);font-weight:600;
  color:#fff;
  background:linear-gradient(135deg,var(--bg1),var(--bg3));
  padding:10px 28px;border-radius:999px;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(106,92,255,.35);
  transition:.18s;
}
.nav-entry a:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(106,92,255,.4);}

/* Nav grid 6x6 */
.grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.5vw,16px);
  padding-bottom:56px;
}
.nav{
  display:flex;align-items:center;justify-content:center;
  border:2px solid #a9d3f2;border-radius:12px;
  background:var(--card);
  padding:11px 4px;text-decoration:none;color:var(--text);
  box-shadow:var(--shadow);transition:.18s;
}
.nav:hover{transform:translateY(-2px);}
.nav .label{font-size:clamp(13px,2.4vw,16px);font-weight:600;color:#31c193;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* Footer */
footer{
  width:100%;text-align:center;color:#31c193;
  font-size:12px;padding:20px 12px calc(20px + env(safe-area-inset-bottom));
  letter-spacing:.5px;
}
footer a{color:inherit;text-decoration:none;}
footer a:hover{text-decoration:underline;}
.footer-site{
  display:block;width:max-content;margin:0 auto 12px;
  font-size:15px;font-weight:700;letter-spacing:1px;
  color:#31c193;background:#fff;
  padding:7px 24px;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(49,193,147,.6);
  transition:.18s;
}
.footer-site:hover{
  text-decoration:none;
  color:#27a37b;
  box-shadow:inset 0 0 0 1.5px #31c193, 0 6px 16px rgba(49,193,147,.28);
  transform:translateY(-1px);
}
.footer-btns{
  display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
  margin-bottom:12px;
}
.footer-btns .footer-site{margin:0;}

/* Responsive */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(3,1fr);}
  .box{padding-left:14px;}
}
@media (max-width:380px){
  .grid{grid-template-columns:repeat(2,1fr);}
}