:root{
  --focus-ring:rgba(52,120,246,.82);
  --focus-soft:rgba(52,120,246,.18);
  --card-hover-shadow:0 8px 22px rgba(32,36,44,.09);
}
html[data-theme=dark]{
  --focus-ring:rgba(110,161,255,.9);
  --focus-soft:rgba(110,161,255,.2);
  --card-hover-shadow:0 10px 26px rgba(0,0,0,.28);
}

body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.top a{font-size:.875rem;transition:color .16s ease}
.btn,.engine,.subnav button,.side button,.search-form button{min-height:40px;touch-action:manipulation}
.btn{display:inline-flex;align-items:center;justify-content:center;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.theme{width:40px;min-width:40px}
.engine{padding:8px 14px;transition:background-color .16s ease,color .16s ease,box-shadow .16s ease}
.search-form input{font-size:.92rem}
.side button{align-items:center;font-size:.84rem;line-height:1.3;transition:background-color .16s ease,color .16s ease}
.count{font-size:.7rem}
h2{font-size:1.2rem;line-height:1.3;letter-spacing:-.01em}
.group-head h3{font-size:.98rem;line-height:1.35}
.subnav button{font-size:.8rem;line-height:1.25;transition:background-color .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.card{min-height:64px;align-items:center;padding:12px 13px;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.copy{flex:1;min-width:0}
.name{font-size:.93rem;line-height:1.35}
.desc{margin-top:4px;font-size:.8rem;line-height:1.5}
.badge{font-size:.62rem;line-height:1.2;padding:2px 5px}

:is(a,button,input):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.card:focus-visible{background:var(--panel);border-color:var(--blue);box-shadow:0 0 0 4px var(--focus-soft)}
.search-form input:focus-visible{outline:2px solid #245fae;outline-offset:-2px;border-radius:7px}
.site-filter-top:has(input:focus-visible){border-color:var(--blue)!important;box-shadow:0 0 0 4px var(--focus-soft)!important}
.site-filter-top input:focus-visible{outline:0}

@media (hover:hover) and (pointer:fine){
  .top a:hover{color:var(--text)}
  .btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue2)}
  .engine:not(.active):hover{background:rgba(255,255,255,.25);color:#fff}
  .side button:hover{background:var(--blue2);color:var(--blue)}
  .subnav button:hover{border-color:var(--blue);background:var(--blue2);color:var(--blue)}
  .card:hover{background:var(--panel);border-color:var(--blue);box-shadow:var(--card-hover-shadow);transform:translateY(-1px)}
}

@media (hover:none), (pointer:coarse){
  .card:hover{background:var(--soft);border-color:transparent;box-shadow:none;transform:none}
  .side button:hover:not(.active){background:transparent;color:var(--muted)}
}

@media(max-width:900px){
  .layout{gap:14px}
  .sidebar{padding:7px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .sidebar::-webkit-scrollbar{display:none}
  .side{gap:4px}
  .side button{min-height:44px;padding:10px 12px}
}

@media(max-width:580px){
  .head{gap:10px;min-width:0}
  .brand{gap:8px;font-size:1.05rem;flex:0 0 auto}
  .mark{width:32px;height:32px;border-radius:9px}
  .actions{gap:6px;min-width:0;flex:1 1 auto;justify-content:flex-end}
  .head .site-filter-top{width:40px!important;height:40px;max-width:40px!important;min-width:0!important;padding:0 11px;flex:0 1 40px!important}
  .head .site-filter-top:focus-within,.head .site-filter-top:has(input:not(:placeholder-shown)){width:auto!important;max-width:150px!important;min-width:84px!important;flex:1 1 120px!important}
  .head .site-filter-top input{font-size:.875rem}
  .search-wrap{padding:17px 14px 19px}
  .engines{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
  .engines::-webkit-scrollbar{display:none}
  .engine{flex:0 0 auto;min-height:40px;padding:8px 13px}
  .search-form{padding:5px;border-radius:11px}
  .search-form input{min-height:44px;padding:10px 10px;font-size:16px}
  .search-form button{min-height:44px;padding:0 17px}
  .layout{padding:12px 10px}
  .section{margin-bottom:22px}
  .section-head{margin-bottom:10px}
  .subnav{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:1px 2px 3px;margin-left:-2px;margin-right:-2px}
  .subnav::-webkit-scrollbar{display:none}
  .subnav button{flex:0 0 auto;min-height:40px;padding:7px 11px}
  .panel{padding:12px}
  .group+.group{margin-top:18px;padding-top:17px}
  .group-head{margin-bottom:9px}
  .card{min-height:62px;padding:11px 12px;gap:10px}
  .icon{width:34px;height:34px;border-radius:9px}
  .favicon-img{width:22px;height:22px}
  .name{font-size:.91rem}
  .desc{font-size:.79rem;line-height:1.48}
  .footer{padding:18px 12px 28px;line-height:1.65}
}

@media(max-width:380px){
  .head{padding:0 10px}
  .brand{font-size:1rem}
  .mark{width:30px;height:30px}
  .layout{padding:10px 8px}
  .search-wrap{padding-left:10px;padding-right:10px}
  .panel{padding:10px}
  .card{padding:10px 11px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover{transform:none!important}
}