.results-line { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.11em;padding:32px 3px 18px; }.clear-btn { color:var(--coral);padding:0; }.tool-card { height:100%;display:flex;flex-direction:column;padding:10px;background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 10px 28px rgba(42,58,60,.05);transition:transform .25s,box-shadow .25s;animation:rise .55s both; }
:root { --ink:#17202a; --muted:#71808e; --paper:#f4f6f5; --line:#dce4e4; --mint:#a8e4c7; --coral:#ff806d; --night:#1d2935; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
body:before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.22; background-image:radial-gradient(#bbc9c8 1px,transparent 1px); background-size:25px 25px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.ambient { position:fixed; z-index:-1; border-radius:50%; filter:blur(5px); pointer-events:none; animation:drift 14s ease-in-out infinite alternate; }.ambient-one { width:390px;height:390px;right:-140px;top:80px;background:linear-gradient(135deg,#b1edd0,transparent);opacity:.8; }.ambient-two { width:300px;height:300px;left:-180px;bottom:70px;background:linear-gradient(135deg,#ffd3ab,transparent);opacity:.55;animation-delay:-5s; }
.navbar { background:rgba(244,246,245,.78); border-bottom:1px solid rgba(220,228,228,.7); backdrop-filter:blur(16px); }.navbar-brand { color:var(--ink); font:700 1.2rem 'Space Grotesk'; letter-spacing:-.04em; }.brand-accent { color:#ed705f; }.brand-mark { display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:var(--night);color:var(--mint);font-size:.85rem; }.muted { color:var(--muted); }.live-dot { width:8px;height:8px;border-radius:50%;background:#3ec58b;box-shadow:0 0 0 4px #d7f2e5; }
.hero { padding:7rem 0 4.8rem; }.eyebrow { color:#df6d5c;font-size:.72rem;letter-spacing:.2em;font-weight:700;margin-bottom:1.1rem; }.hero h1 { font:700 clamp(3.2rem,7vw,6.6rem)/.92 'Space Grotesk';letter-spacing:-.08em;margin:0; }.hero h1 em { color:#df6d5c;font-style:normal; }.hero-copy { max-width:490px;color:var(--muted);font-size:1.05rem;line-height:1.7;margin:2rem 0 0; }.hero-stat-wrap { display:flex;justify-content:flex-end; }.hero-stat { display:flex;align-items:center;gap:18px;border-left:2px solid var(--coral);padding-left:18px;margin-bottom:8px; }.stat-number { font:700 4rem/.8 'Space Grotesk';letter-spacing:-.08em; }.stat-label { color:var(--muted);font-size:.8rem;line-height:1.4;text-transform:uppercase;letter-spacing:.08em; }
.toolbar { display:flex;align-items:center;gap:12px;padding:12px;background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 35px rgba(42,58,60,.06); }.search-wrap { position:relative;flex:1;min-width:180px; }.search-wrap i { position:absolute;left:15px;top:12px;color:var(--muted); }.search-wrap input,.plan-select { height:44px;border:0;background:transparent;outline:0;color:var(--ink); }.search-wrap input { width:100%;padding:0 15px 0 43px; }.filter-group { display:flex;gap:5px; }.filter-btn,.clear-btn { border:0;background:transparent;border-radius:9px;padding:11px 13px;color:var(--muted);font:600 .82rem 'DM Sans';white-space:nowrap;transition:.2s; }.filter-btn:hover,.filter-btn.active { color:var(--ink);background:#e8efec; }.filter-btn.active { box-shadow:inset 0 -2px var(--coral); }.filter-btn i { color:var(--coral); }.filter-count { font-size:.7rem;background:var(--night);color:white;padding:2px 6px;border-radius:10px;margin-left:3px; }.plan-select { border-left:1px solid var(--line);padding:0 14px; }
.results-line { display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.11em;padding:32px 3px 18px; }.clear-btn { color:var(--coral);padding:0; }.tool-card { height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 10px 28px rgba(42,58,60,.05);transition:transform .25s,box-shadow .25s;animation:rise .55s both; }.tool-card:hover { transform:translateY(-5px);box-shadow:0 22px 45px rgba(42,58,60,.13); }.cover-wrap { position:relative;aspect-ratio:16/8.8;overflow:hidden;background:var(--night); }.tool-cover { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s; }.tool-card:hover .tool-cover { transform:scale(1.04); }.plan-pill { position:absolute;left:14px;top:14px;background:rgba(20,30,35,.7);color:#fff;padding:5px 9px;border-radius:5px;font-size:.62rem;text-transform:uppercase;letter-spacing:.12em;backdrop-filter:blur(5px); }.like-btn { position:absolute;right:13px;top:12px;width:37px;height:37px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:1.05rem;box-shadow:0 5px 15px #18272a40;transition:.2s; }.like-btn:hover,.like-btn.liked { color:var(--coral);transform:scale(1.1); }.card-body { padding:22px 20px 18px;flex:1; }.card-body h2 { font:700 1.28rem 'Space Grotesk';letter-spacing:-.04em;margin:0 0 10px; }.card-body p { color:var(--muted);font-size:.88rem;line-height:1.55;margin:0 0 20px; }.use-case { border-top:1px solid #edf0ef;padding-top:13px;color:#4f6266;font-size:.75rem;line-height:1.5; }.use-case span { display:block;color:#9aa8aa;font-size:.6rem;letter-spacing:.15em;font-weight:700;margin-bottom:4px; }.card-footer { display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf0ef;padding:14px 20px; }.rate-label { color:#9aa8aa;font-size:.6rem;letter-spacing:.12em;font-weight:700; }.stars { display:flex;gap:1px; }.star { border:0;background:transparent;padding:1px;color:#cbd4d2;font-size:1.05rem;transition:.15s; }.star:hover,.star.selected { color:#efb83f;transform:scale(1.1); }.empty-state { text-align:center;padding:6rem 1rem;color:var(--muted); }.empty-state i { font-size:3rem;color:var(--coral); }.empty-state h2 { font:700 1.6rem 'Space Grotesk';color:var(--ink);margin:1rem 0 .4rem; }.footer { display:flex;justify-content:space-between;color:#9aa8aa;font-size:.68rem;letter-spacing:.13em;margin-top:4rem;border-top:1px solid var(--line); }.footer span:last-child { text-transform:none;letter-spacing:0; }
@keyframes rise { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} } @keyframes drift { from{transform:translate(0,0) rotate(0)} to{transform:translate(30px,20px) rotate(15deg)} }
@media (max-width:767px) { .hero { padding:4.3rem 0 3rem; }.hero h1 { font-size:3.5rem; }.hero-stat-wrap { justify-content:flex-start; }.toolbar { flex-wrap:wrap; }.search-wrap { flex-basis:100%; }.filter-group { flex:1;overflow:auto; }.filter-btn { padding-left:9px;padding-right:9px; }.plan-select { max-width:120px; }.footer { flex-direction:column;gap:8px; } }

.homepage-btn { display:inline-flex; align-items:center; gap:7px; margin-top:17px; color:#d86657; font-size:.75rem; font-weight:700; text-decoration:none; }
.homepage-btn:hover { color:#a63d31; }
.save-status { color:#3b9b72; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; }
.save-error { color:#d85f50; }