: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(10px,2vw,22px) 16px 0;
  -webkit-tap-highlight-color:transparent;
}
.wrap{width:100%;max-width:1280px;}
.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;}
.engines{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:12px;
}
.engine{
  border:0;cursor:pointer;font-size:16px;font-weight:600;
  padding:7px 16px;border-radius:999px;color:#31c193;
  background:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
  transition:.18s;
}
.engine:hover{color:#27a37b;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
.engine.active{background:linear-gradient(135deg,var(--bg1),var(--bg3));color:#fff;box-shadow:0 6px 16px rgba(106,92,255,.35);}
.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);}

/* 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);
}

/* 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;}

/* 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);}
}