:root{
  --bg1:#0b1026;--bg2:#1a1147;
  --orb1:#6d5efc;--orb2:#18d2c4;--orb3:#ff6aa8;
  --text:#f2f4ff;--muted:#a9b0d6;
  --glass:rgba(255,255,255,.08);--glass-strong:rgba(255,255,255,.14);
  --edge:rgba(255,255,255,.22);--edge-soft:rgba(255,255,255,.08);
  --accent:#8c80ff;--accent-ink:#0b1026;
  --shadow:0 20px 50px rgba(5,6,25,.45);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg1:#eef0ff;--bg2:#dfe6ff;--text:#161a3a;--muted:#4f5683;
  --glass:rgba(255,255,255,.5);--glass-strong:rgba(255,255,255,.75);
  --edge:rgba(255,255,255,.9);--edge-soft:rgba(80,90,170,.14);
  --accent:#5b4cf0;--accent-ink:#fff;--shadow:0 20px 40px rgba(70,80,160,.18);}}
:root[data-theme="light"]{
  --bg1:#eef0ff;--bg2:#dfe6ff;--text:#161a3a;--muted:#4f5683;
  --glass:rgba(255,255,255,.5);--glass-strong:rgba(255,255,255,.75);
  --edge:rgba(255,255,255,.9);--edge-soft:rgba(80,90,170,.14);
  --accent:#5b4cf0;--accent-ink:#fff;--shadow:0 20px 40px rgba(70,80,160,.18);}
:root[data-theme="dark"]{color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:'DM Sans',system-ui,sans-serif;color:var(--text);
  background:linear-gradient(160deg,var(--bg1),var(--bg2));background-attachment:fixed;overflow-x:hidden}
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.o1{width:44vw;height:44vw;background:var(--orb1);top:-12vw;left:-8vw;animation:drift 22s ease-in-out infinite alternate}
.o2{width:38vw;height:38vw;background:var(--orb2);top:30vh;right:-10vw;opacity:.38;animation:drift 28s ease-in-out infinite alternate-reverse}
.o3{width:34vw;height:34vw;background:var(--orb3);bottom:-14vw;left:25vw;opacity:.35;animation:drift 25s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(6vw,5vh) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}*{transition:none!important}}
.glass{background:var(--glass);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--edge-soft);border-top-color:var(--edge);border-left-color:var(--edge);box-shadow:var(--shadow)}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px 80px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;margin:14px 0 0;padding:10px 14px;border-radius:18px;
  display:flex;align-items:center;gap:10px}
.logo{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;margin-right:auto}
.gem{width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,var(--orb2),var(--orb1) 60%,var(--orb3));box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
button{font:inherit;color:inherit;cursor:pointer}
.btn{border:1px solid var(--edge-soft);border-top-color:var(--edge);background:var(--glass-strong);padding:8px 14px;border-radius:12px;font-weight:600;font-size:.9rem;transition:transform .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.chip:focus-visible,input:focus-visible,select:focus-visible,.save:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero{padding:64px 0 28px;max-width:760px}
h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(2.3rem,6vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 16px}
.hero p{font-size:1.1rem;line-height:1.55;color:var(--muted);margin:0 0 28px;max-width:56ch}
.search{display:flex;align-items:center;gap:12px;padding:6px 8px 6px 18px;border-radius:20px}
.search input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:1.05rem;padding:14px 0}
.search input::placeholder{color:var(--muted)}
.search select{background:var(--glass-strong);color:var(--text);border:1px solid var(--edge-soft);border-radius:12px;padding:10px 12px;font:inherit;font-size:.9rem}
.search select option{color:#161a3a}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 10px}
.chip{border:1px solid var(--edge-soft);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px 15px;border-radius:99px;font-size:.9rem;font-weight:500;transition:background .2s}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.meta{color:var(--muted);font-size:.9rem;margin:6px 2px 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px}
.card{border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:12px;position:relative;transition:transform .2s,background .2s}
.card:hover{transform:translateY(-4px);background:var(--glass-strong)}
.top{display:flex;align-items:center;gap:12px}
.ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.55),0 6px 16px rgba(0,0,0,.25)}
.card h3{margin:0;font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem;letter-spacing:-.01em}
.cat{font-size:.82rem;color:var(--muted)}
.card p{margin:0;color:var(--muted);line-height:1.5;font-size:.94rem;flex:1}
.foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tag{font-size:.78rem;font-weight:600;padding:4px 10px;border-radius:99px;background:var(--glass-strong);border:1px solid var(--edge-soft)}
.tag.Free{color:#4de0a8}.tag.Paid{color:#ffb86b}.tag.Freemium{color:#8fc7ff}
.visit{font-weight:600;font-size:.9rem;color:var(--text);text-decoration:none;padding:6px 12px;border-radius:10px;background:var(--glass-strong);border:1px solid var(--edge-soft)}
.visit:hover{background:var(--accent);color:var(--accent-ink)}
.save{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:11px;border:1px solid var(--edge-soft);background:var(--glass);display:grid;place-items:center;font-size:1rem}
.save[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.empty{grid-column:1/-1;text-align:center;padding:48px 20px;border-radius:22px;color:var(--muted)}
.empty b{display:block;color:var(--text);font-family:'Bricolage Grotesque',sans-serif;font-size:1.3rem;margin-bottom:6px}
footer{margin-top:56px;text-align:center;color:var(--muted);font-size:.85rem}
@media(max-width:560px){.search{flex-wrap:wrap;padding:8px 12px}.search select{width:100%}.hero{padding-top:40px}}

.ic img{width:62%;height:62%;display:block}
.ic.lg{width:76px;height:76px;border-radius:22px;font-size:2rem;flex:none}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{text-decoration:underline}
.logo{color:inherit;text-decoration:none}
.crumbs{margin:34px 0 14px;color:var(--muted);font-size:.9rem}
.crumbs a{color:var(--muted)}.crumbs span{color:var(--text)}
.dhead{display:flex;align-items:center;gap:20px;padding:24px;border-radius:26px;flex-wrap:wrap}
.dtitle{flex:1;min-width:220px}
.dtitle h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 6px}
.dtitle p{margin:0 0 12px;color:var(--muted);font-size:1.05rem}
.meta2{display:flex;gap:8px;flex-wrap:wrap}
.dact{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cta{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none;padding:13px 22px;border-radius:14px;box-shadow:0 8px 24px rgba(109,94,252,.35);transition:transform .15s}
.cta:hover{transform:translateY(-2px)}.cta.wide{text-align:center}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;margin-top:18px;align-items:start}
.prose{padding:28px;border-radius:24px;line-height:1.7}
.prose h2{font-family:'Bricolage Grotesque',sans-serif;font-size:1.45rem;margin:26px 0 8px;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.02rem;margin:16px 0 4px}
.prose p,.prose li{color:var(--muted);max-width:68ch;margin:0 0 8px}
.prose a{color:var(--accent)}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:90px}
.pc{padding:20px 22px;border-radius:22px}
.pc h2{font-family:'Bricolage Grotesque',sans-serif;margin:0 0 10px;font-size:1.2rem}
.pc ul{margin:0;padding:0;list-style:none}
.pc li{padding:7px 0 7px 26px;position:relative;line-height:1.45;color:var(--muted)}
.pc li:before{position:absolute;left:0;font-weight:800}
.pro h2,.pro li:before{color:#4de0a8}.pro li:before{content:"+"}
.con h2,.con li:before{color:#ff8a8a}.con li:before{content:"–"}
.simh{font-family:'Bricolage Grotesque',sans-serif;font-size:1.6rem;margin:44px 0 16px;letter-spacing:-.02em}
[hidden]{display:none!important}
@media(max-width:860px){.dgrid{grid-template-columns:1fr}.side{position:static}}

.herorow{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:36px;align-items:start}
.ads{display:flex;flex-direction:column;gap:14px;padding-top:30px}
.ad{position:relative;border-radius:20px;padding:18px 18px 16px;min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:4px;border-style:dashed;border-color:var(--edge-soft)}
.ad b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;letter-spacing:-.01em}
.ad small{color:var(--muted);font-size:.84rem}
.adtag{position:absolute;top:10px;right:12px;font-size:.72rem;font-weight:600;color:var(--muted);padding:2px 8px;border-radius:99px;background:var(--glass-strong);border:1px solid var(--edge-soft)}
@media(max-width:980px){.herorow{grid-template-columns:1fr;gap:0}.ads{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding-top:0;margin-bottom:8px;order:2}}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto}
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.card{content-visibility:auto;contain-intrinsic-size:auto 230px}
.chip,.btn,.save,.visit{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.save{min-width:44px}
.search input{min-height:48px}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 16px;border-radius:14px;border:1px solid var(--edge-soft)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:.93rem}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--edge-soft);vertical-align:top;color:var(--muted)}
th{color:var(--text);font-weight:600;background:var(--glass)}td a{color:var(--accent);font-weight:600}
.verdict{background:var(--glass-strong);border-radius:14px;padding:14px 16px;color:var(--text)!important}
.catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.catcard{border-radius:20px;padding:20px;text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:6px;transition:transform .2s}
.catcard:hover{transform:translateY(-3px)}.catcard b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.15rem}
.catcard span{font-size:.85rem;color:var(--accent);font-weight:600}.catcard small{color:var(--muted);line-height:1.45}
.flinks{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center}
.flinks a{color:var(--muted)}footer p{margin:6px 0}
.qf dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px}.qf dt{color:var(--muted)}.qf dd{margin:0;font-weight:600}.qf a{color:var(--accent)}
.qp{color:var(--muted);line-height:1.55;margin:0}.qp a{color:var(--accent);font-weight:600}
.cathead .dtitle p{max-width:70ch;line-height:1.6}
.empty{text-align:center;padding:40px 20px;border-radius:22px;color:var(--muted);margin-top:18px}
@media(max-width:700px){
 .glass{backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
 .orb{filter:blur(60px)}.wrap{padding-bottom:56px}
 header{margin-top:10px;padding:8px 10px;gap:8px}
 .hero{padding-top:34px}.hero p{font-size:1rem}
 .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}
 .chips::-webkit-scrollbar{display:none}.chips .chip{flex:none}
 .grid{grid-template-columns:1fr}.prose{padding:20px}.dhead{padding:18px}
 .dact{width:100%}.dact .cta{flex:1;text-align:center}.ic.lg{width:60px;height:60px}
}
@media(min-width:701px) and (max-width:980px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(hover:none){.card:hover,.catcard:hover,.cta:hover,.btn:hover{transform:none}}