:root{--bg:#f7f8f7;--white:#fff;--text:#151918;--muted:#737b78;--line:#e4e8e6;--accent:#12695f;--soft:#edf6f4}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif}.wrap{width:min(100% - 28px,940px);margin:auto}.top{height:62px;display:flex;align-items:center}.brand{font-size:23px;font-weight:700;letter-spacing:-.7px}.brand span{color:var(--accent)}.hero{padding:30px 0 24px;text-align:center}.hero h1{font-size:clamp(27px,4vw,39px);letter-spacing:-1.4px;line-height:1.08;margin:0 0 7px}.hero p{font-size:12px;color:var(--muted);margin:0 auto 18px}.searchbar{max-width:620px;margin:auto;display:flex;gap:7px}.search{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;padding:0 13px}.search svg{width:16px;color:#8b9390}.search input{width:100%;border:0;outline:0;padding:13px 9px;font:inherit;font-size:12px;background:transparent}.favOnly{width:43px;border:1px solid var(--line);background:#fff;border-radius:12px;font-size:18px;color:#b6bdb9;cursor:pointer}.favOnly.active{color:#d7a528;background:#fff}.cats{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:0 0 13px}.cat{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 11px;font:inherit;font-size:10px;font-weight:600;color:#525957;cursor:pointer}.cat.active{background:var(--text);border-color:var(--text);color:#fff}
.moreWrap{position:relative;flex:0 0 auto}
.moreMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.12);padding:6px;display:none;z-index:50}
.moreMenu.show{display:block}
.more-item{width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;font:inherit;color:var(--text);cursor:pointer}
.more-item:hover,.more-item:focus{background:var(--soft);outline:none}
@media(max-width:620px){.wrap{width:min(100% - 18px,940px)}.top{height:52px}.hero{padding:22px 2px 21px}.hero h1{font-size:30px}.hero p{font-size:11px}.thead{display:none}.directory{border-radius:12px}.row{grid-template-columns:25px minmax(0,1fr) 30px;min-height:57px;padding:7px 10px}.fav{grid-column:1;grid-row:1/3}.toolname{grid-column:2}.use{grid-column:2;padding-left:41px;margin-top:-11px;font-size:8px;color:#858c89}.use:after{content:' · ' attr(data-cost)}.cost{display:none}.visit{grid-column:3;grid-row:1/3}.icon{width:31px;height:31px}.name{font-size:10px}.cats{padding-bottom:10px}.filterPanel{justify-content:flex-start}.foot{padding-top:24px}}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}body{min-height:100dvh;-webkit-tap-highlight-color:transparent}button,input,select,a{touch-action:manipulation}.appbar{display:none}
@media(max-width:620px){
  body{background:#fff;overscroll-behavior-y:none}
  .wrap{width:100%;max-width:none;margin:0;padding:0 12px 24px}
  .top{height:54px;position:sticky;top:0;z-index:14;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);margin:0 -12px;padding:0 14px}
  .brand{font-size:20px;letter-spacing:-.5px}
  .hero{padding:18px 0 12px;text-align:left}
  .hero h1{font-size:24px;letter-spacing:-.8px;line-height:1.12;margin-bottom:5px}
  .hero p{font-size:11px;margin:0 0 13px}
  .searchbar{max-width:none;gap:8px}
  .search{height:48px;border-radius:14px;padding:0 12px;box-shadow:0 4px 16px rgba(20,30,27,.04)}
  .search svg{width:18px;flex:0 0 18px}
  .search input{font-size:16px!important;line-height:1.2;padding:13px 9px;min-width:0}
  .favOnly{width:48px;height:48px;flex:0 0 48px;border-radius:14px;font-size:19px}
  .cats{position:sticky;top:54px;z-index:13;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);margin:0 -12px;padding:9px 12px 10px;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:7px;scrollbar-width:none;border-bottom:1px solid #f0f2f1}
  .cats::-webkit-scrollbar{display:none}
  .cat{font-size:11px;padding:8px 12px;min-height:34px;flex:0 0 auto}
  .moreMenu{position:fixed;left:12px;right:12px;top:99px;min-width:0;max-height:46dvh;overflow:auto;border-radius:14px}
  .moreMenu button{font-size:12px;padding:11px}
  .bar{margin:9px 2px 8px;font-size:10px}
  .filterBtn{font-size:11px;padding:7px 5px}
  .filterPanel{justify-content:stretch;gap:8px;margin-bottom:10px}
  .select{flex:1;min-width:0;height:42px;font-size:16px!important;padding:0 10px;border-radius:11px}
  .thead{display:none}
  .directory{border:0;border-radius:0;overflow:visible;background:transparent}
  .row{display:grid;grid-template-columns:34px 42px minmax(0,1fr) 36px;grid-template-rows:auto auto;column-gap:7px;min-height:70px;padding:9px 2px;border-bottom:1px solid #edf0ee;background:#fff}
  .row:hover{background:#fff}
  .fav{grid-column:1;grid-row:1/3;align-self:center;width:32px;height:42px;font-size:17px}
  .toolname{display:contents}
  .icon{grid-column:2;grid-row:1/3;align-self:center;width:38px;height:38px;flex-basis:38px;border-radius:10px}
  .icon img{width:22px;height:22px}
  .name{grid-column:3;grid-row:1;align-self:end;font-size:13px;font-weight:650;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .use{grid-column:3;grid-row:2;align-self:start;padding:3px 0 0;margin:0;font-size:10px;line-height:1.25;color:#818986;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .use:after{content:' · ' attr(data-cost)}
  .cost{display:none}
  .visit{grid-column:4;grid-row:1/3;align-self:center;width:36px;height:44px;border-radius:10px;font-size:17px}
  .empty{padding:42px 10px;font-size:12px}
  .foot{padding:26px 0 calc(24px + env(safe-area-inset-bottom));font-size:10px;line-height:1.7}
  .footer-meta{font-size:9px;margin-top:4px}
  .modal{padding:14px;align-items:flex-end}
  .panel{width:100%;max-width:none;border-radius:18px 18px 12px 12px;padding:20px 18px calc(18px + env(safe-area-inset-bottom))}
  .panel h2{font-size:19px}
  .panel p{font-size:12px;line-height:1.7}
  .close{width:100%;height:44px;font-size:13px}
}


.moreWrap{position:relative;flex:0 0 auto}
.moreMenu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.12);padding:6px;display:none;z-index:50}
.moreMenu.show{display:block}
.more-item{width:100%;border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;font:inherit;color:var(--text);cursor:pointer}
.more-item:hover,.more-item:focus{background:var(--soft);outline:none}
@media(max-width:620px){
  .moreMenu{position:fixed;left:12px;right:12px;top:auto;bottom:calc(env(safe-area-inset-bottom) + 14px);min-width:0;max-height:52vh;overflow:auto;border-radius:18px;padding:8px}
  .more-item{font-size:16px;padding:13px 14px}
}