/* Insights — snippet tuner + library */
.serp-tool{padding:16px;display:grid;gap:8px;background:var(--paper)}
.serp-prev{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:8px;font-family:Arial,Helvetica,sans-serif;max-width:100%;overflow:hidden}
.sp-site{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.sp-fav{width:26px;height:26px;border-radius:50%;background:#f1f3f4;display:grid;place-items:center;font:700 12px Arial;color:var(--indigo);border:1px solid #e3e3e3}
.sp-site b{display:block;font:400 14px Arial;color:#202124}
.sp-site small{display:block;font:400 12px Arial;color:#4d5156}
.serp-prev h4{font:400 20px/1.3 Arial,Helvetica,sans-serif;color:#1a0dab;margin:0 0 4px;letter-spacing:0;white-space:nowrap;overflow:hidden}
.serp-prev p{font:400 14px/1.58 Arial,Helvetica,sans-serif;color:#4d5156;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.serp-prev p b{color:#202124;font-weight:700}
.fld{display:grid;gap:6px}
.fld .mono{display:flex;justify-content:space-between;color:var(--ink-2)}
.fld em{font-style:normal;color:var(--mute)}
.fld input,.fld textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;background:#fff;font-size:15px;resize:none;transition:border-color .2s,box-shadow .2s}
.fld input:focus,.fld textarea:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--indigo-soft)}
.meter{height:4px;border-radius:4px;background:var(--line);overflow:hidden;margin:-2px 0 6px}
.meter i{display:block;height:100%;width:0;border-radius:4px;background:var(--green);transition:width .35s var(--ease),background .3s}
.meter i.warn{background:var(--amber)}.meter i.bad{background:var(--red)}
.checks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;font-size:13px}
.checks li{display:flex;gap:8px;align-items:baseline;color:var(--ink-2)}
.checks li:before{content:"○";font:600 12px var(--mono);color:var(--mute)}
.checks li.ok:before{content:"●";color:var(--green)}
.checks li.no:before{content:"●";color:var(--amber)}
.score{font:600 26px/1 var(--display);letter-spacing:-.03em;margin-right:auto;transition:color .3s;min-width:3ch}
/* library */
.filters{display:grid;gap:14px}
.search input{width:100%;border:0;border-bottom:1px solid var(--ink);padding:10px 0;font:500 20px var(--display);background:transparent;outline:0}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tagrow .chip{font-size:13px;padding:7px 12px}
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:transform .45s var(--ease),box-shadow .45s;animation:aIn .6s var(--ease) both}
@keyframes aIn{from{opacity:0;transform:translateY(14px)}}
.art:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.art .cover{aspect-ratio:16/9;background:var(--bg-c);color:var(--fg-c);padding:20px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.art .cover b{font:560 clamp(24px,2.2vw,32px)/1 var(--display);letter-spacing:-.04em;max-width:9em;position:relative;z-index:1}
.art .cover span{font:500 11px var(--mono);opacity:.75;position:relative;z-index:1}
.art .cover svg{position:absolute;right:-10px;bottom:-10px;width:56%;opacity:.9;transition:transform .8s var(--ease)}
.art:hover .cover svg{transform:rotate(-8deg) scale(1.06)}
.art .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.art .mono{color:var(--mute);display:flex;justify-content:space-between}
.art h3{font-size:21px}
.art p{font-size:14px;color:var(--ink-2);margin:0}
.art .rd{margin-top:auto;padding-top:12px;font-weight:600;font-size:14px}
.empty{margin-top:24px}
.news{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end}
.nl{display:grid;grid-template-columns:1fr auto;gap:10px}
.nl input{border:1px solid var(--line-2);border-radius:999px;padding:14px 20px;background:#fff;font-size:16px;outline:0}
.nl input:focus{border-color:var(--ink)}
@media(max-width:1080px){.arts{grid-template-columns:repeat(2,1fr)}.news{grid-template-columns:1fr}}
@media(max-width:640px){.arts{grid-template-columns:1fr}.nl{grid-template-columns:1fr}.nl .btn{justify-content:center}.serp-prev h4{font-size:18px}}
.art .cover svg{top:30px;bottom:auto;right:14px;width:40%;opacity:.85}.art .cover b{max-width:8.5em}