/* ── Helpful Toolbox — shared styles (clean & modern) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
  --ink:#0f172a; --mute:#64748b; --acc:#2563eb; --acc-d:#1d4ed8; --acc-soft:#eaf1fe;
  --green:#16a34a; --bg:#f7f9fc; --card:#ffffff; --line:#e7ebf3;
  --radius:18px; --radius-sm:11px;
  --shadow:0 4px 20px rgba(15,23,42,.06); --shadow-lg:0 16px 40px rgba(15,23,42,.10);
  --ring:0 0 0 3px rgba(37,99,235,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:rgba(37,99,235,.16)}
.wrap{max-width:880px; margin:0 auto; padding:0 20px}

/* form controls */
select,input[type=number],input[type=text],input[type=search]{
  font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:9px 12px; transition:border-color .15s, box-shadow .15s}
select:hover,input:hover{border-color:#cdd6e6}
select:focus,input:focus{outline:none; border-color:var(--acc); box-shadow:var(--ring)}
select{appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 11px center; background-size:12px}
input[type=range]{accent-color:var(--acc)}

/* header */
header.site{background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:66px}
.brand{font-weight:800; font-size:1.18rem; color:var(--ink); display:flex; align-items:center; gap:9px; letter-spacing:-.01em}
.brand .dot{width:12px;height:12px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#60a5fa);display:inline-block;box-shadow:0 2px 6px rgba(37,99,235,.4)}
header.site nav{display:flex; align-items:center; gap:18px}
nav a{color:var(--mute); font-size:.92rem; font-weight:500; transition:color .15s}
nav a:hover{color:var(--ink); text-decoration:none}

/* hero */
.hero{text-align:center; padding:52px 0 28px}
.hero h1{font-size:2.45rem; margin:0 0 12px; letter-spacing:-.025em; font-weight:800; line-height:1.1}
.hero p{color:var(--mute); font-size:1.12rem; margin:0 auto; max-width:640px}
.badge{display:inline-block; background:#e7f7ee; color:var(--green); font-weight:700;
  font-size:.8rem; padding:6px 14px; border-radius:999px; margin-bottom:18px; letter-spacing:.01em}

/* card / dropzone */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; margin:22px 0}
.drop{border:2px dashed #cdd6e6; border-radius:var(--radius); padding:54px 20px; text-align:center;
  cursor:pointer; transition:.18s; background:#fbfcfe}
.drop:hover,.drop.drag{border-color:var(--acc); background:var(--acc-soft)}
.drop .big{font-size:1.2rem; font-weight:700; margin:10px 0 4px; letter-spacing:-.01em}
.drop .sub{color:var(--mute); font-size:.92rem}
.drop .icon{font-size:2.7rem}

/* controls */
.controls{display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-top:18px}
.controls label{font-size:.9rem; font-weight:600; color:var(--mute); display:flex; align-items:center; gap:10px}
.btn{background:linear-gradient(180deg,var(--acc),var(--acc-d)); color:#fff; border:0; border-radius:12px;
  padding:12px 22px; font-weight:600; font-size:.95rem; cursor:pointer; letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(37,99,235,.28); transition:transform .12s ease, box-shadow .12s ease, background .15s}
.btn:hover{transform:translateY(-1px); box-shadow:0 7px 20px rgba(37,99,235,.34)}
.btn:active{transform:translateY(0); box-shadow:0 2px 8px rgba(37,99,235,.28)}
.btn:focus-visible{outline:none; box-shadow:var(--ring)}
.btn.ghost{background:#fff; color:var(--acc); border:1px solid var(--line); box-shadow:none}
.btn.ghost:hover{background:var(--acc-soft); border-color:#bcd0fb; transform:translateY(-1px); box-shadow:none}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* results */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:20px}
.thumb{border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:#fff; box-shadow:var(--shadow); transition:transform .14s, box-shadow .14s}
.thumb:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg)}
.thumb img{width:100%; height:120px; object-fit:cover; display:block; background:#f0f2f7}
.thumb .meta{padding:9px 11px; font-size:.78rem; color:var(--mute)}
.thumb .meta b{display:block; color:var(--ink); font-size:.82rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thumb a.dl{display:block; text-align:center; padding:9px; font-weight:700; font-size:.82rem;
  border-top:1px solid var(--line); color:var(--acc); transition:background .14s}
.thumb a.dl:hover{background:var(--acc-soft); text-decoration:none}
.status{margin-top:14px; font-weight:600; color:var(--mute); min-height:22px}

/* content sections */
section.copy{padding:8px 0 30px}
section.copy h2{font-size:1.35rem; margin:28px 0 8px; letter-spacing:-.015em}
section.copy h3{font-size:1.05rem; margin:18px 0 6px}
section.copy p,section.copy li{color:#3a4456}
.faq dt{font-weight:700; margin-top:14px}
.faq dd{margin:4px 0 0; color:var(--mute)}

/* ad slots */
.ad{background:#f0f3f9; border:1px dashed #cdd6e6; border-radius:var(--radius-sm); color:#9aa4b6;
  text-align:center; font-size:.78rem; padding:18px; margin:22px 0; letter-spacing:.5px}

/* tool grid on home */
.tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; margin:24px 0}
.tool{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px;
  box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s; display:block}
.tool:hover{transform:translateY(-3px); text-decoration:none; border-color:#cdd9f5; box-shadow:var(--shadow-lg)}
.tool .t-ic{width:48px; height:48px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; font-size:1.6rem; background:var(--acc-soft)}
.t-ic.cat-image{background:#d1f5ef}
.t-ic.cat-pdf{background:#ffe2e6}
.t-ic.cat-math{background:#efe7fe}
.t-ic.cat-calculators{background:#fff1d6}
.t-ic.cat-text{background:#e3edff}
.t-ic.cat-developer{background:#eef7d4}

/* category cards (TinyWow-style: BIG solid-color blocks) */
.cat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin:10px auto 22px; max-width:1120px}
.cat-card{position:relative; text-align:left; border:0; cursor:pointer; border-radius:18px; padding:20px; color:#fff;
  background:linear-gradient(155deg, var(--c), color-mix(in srgb, var(--c) 72%, #000));
  box-shadow:0 10px 26px color-mix(in srgb, var(--c) 32%, transparent);
  transition:transform .15s, box-shadow .15s; display:flex; flex-direction:column; gap:6px; min-height:152px; overflow:hidden}
.cat-card:hover{transform:translateY(-4px); box-shadow:0 18px 38px color-mix(in srgb, var(--c) 45%, transparent)}
.cat-card.active{box-shadow:0 0 0 3px #fff, 0 18px 40px color-mix(in srgb, var(--c) 55%, transparent)}
.cc-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px}
.cc-ic{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.35rem; background:rgba(255,255,255,.22)}
.cc-n{font-size:.72rem; font-weight:700; background:rgba(255,255,255,.22); padding:4px 10px; border-radius:999px}
.cc-title{font-size:1.2rem; font-weight:800; letter-spacing:-.01em}
.cc-sub{font-size:.85rem; opacity:.88; line-height:1.3}
.cc-arrow{position:absolute; right:18px; bottom:15px; font-size:1.15rem; opacity:.85}

/* Popular / All toggle */
.cat-toggle{display:flex; justify-content:center; gap:10px; margin:0 0 32px}
.catlink{border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 18px; font-weight:700; font-size:.9rem; color:var(--mute); cursor:pointer; transition:.15s}
.catlink:hover{border-color:var(--acc); color:var(--acc)}
.catlink.active{background:var(--acc); border-color:var(--acc); color:#fff}

/* playful hero */
.home .hero{position:relative; overflow:hidden}
.home .hero h1{font-size:2.9rem; font-weight:900; line-height:1.06}
.hl{background:linear-gradient(transparent 60%, #ffe08a 60%, #ffe08a 88%, transparent 88%); padding:0 4px; color:inherit}
.deco{position:absolute; z-index:0; border-radius:50%; filter:blur(46px); opacity:.45; pointer-events:none}
.deco.d1{width:200px; height:200px; background:#5eead4; top:-50px; left:4%}
.deco.d2{width:160px; height:160px; background:#c4b5fd; top:-30px; right:6%}
.deco.d3{width:180px; height:180px; background:#fda4af; bottom:-70px; left:38%}
.home .hero h1,.home .hero p,.home .hero .searchbar{position:relative; z-index:1}

/* colorful category section headings */
.cat-h{display:flex; align-items:center; gap:10px}
.cat-badge{width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; box-shadow:0 3px 10px rgba(15,23,42,.14)}
.cat-count{font-size:.7rem; font-weight:700; color:var(--mute); background:#eef1f6; padding:3px 9px; border-radius:999px}

/* friendly gradient wash behind the hero */
.home .hero{background:radial-gradient(680px 240px at 50% -10px, #eef2ff 0%, transparent 70%)}

/* search bar (home) */
.searchbar{position:relative; max-width:540px; margin:24px auto 0}
.searchbar input{width:100%; padding:15px 18px 15px 48px; border:1px solid var(--line); border-radius:14px; font:inherit; font-size:1.05rem; background:#fff; box-shadow:var(--shadow)}
.searchbar input:focus{outline:none; border-color:var(--acc); box-shadow:var(--ring)}
.searchbar .search-ic{position:absolute; left:17px; top:50%; transform:translateY(-50%); opacity:.5}
.noresults{text-align:center; margin-top:16px; color:var(--mute); font-weight:600}
.tool h3{margin:11px 0 4px; color:var(--ink); font-size:1.05rem; letter-spacing:-.01em}
.tool p{margin:0; color:var(--mute); font-size:.88rem}
.tool .soon{display:inline-block; margin-top:8px; font-size:.72rem; font-weight:700; color:var(--mute);
  background:#eef1f6; padding:3px 9px; border-radius:999px}
.tool .live{color:var(--green); background:#e7f7ee}

/* footer */
footer.site{border-top:1px solid var(--line); background:var(--card); margin-top:36px}
footer.site .wrap{padding:26px 20px; color:var(--mute); font-size:.85rem; display:flex;
  flex-wrap:wrap; gap:6px 18px; justify-content:space-between; align-items:center}
footer.site a{color:var(--mute); font-weight:600}

/* cookie banner */
#cookie{position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto;
  background:#0f172a; color:#eef1f6; border-radius:14px; padding:16px 18px; box-shadow:0 14px 40px rgba(0,0,0,.28);
  font-size:.88rem; display:none; z-index:99; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between}
#cookie.show{display:flex}
#cookie button{background:var(--acc); color:#fff; border:0; border-radius:9px; padding:9px 17px; font-weight:700; cursor:pointer; transition:background .15s}
#cookie button:hover{background:var(--acc-d)}

/* ── home page: sidebar + 4-up tiles ─────────────────── */
.home{max-width:1180px;margin:0 auto;padding:0 20px}
.home .hero{padding:40px 0 20px}
.home .hero h1{font-size:2.3rem}
.home-layout{display:flex;gap:26px;align-items:flex-start}
.sidebar{width:200px;flex:0 0 200px;position:sticky;top:88px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}
.sidebar .side-h{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:6px 8px 10px}
.sidebar a{display:block;padding:9px 11px;border-radius:10px;color:var(--ink);font-weight:600;font-size:.93rem}
.sidebar a:hover{background:var(--bg);text-decoration:none}
.home-main{flex:1;min-width:0}
.home-main section{margin-bottom:32px;scroll-margin-top:84px}
.cat-h{font-size:1.3rem;margin:4px 0 14px;letter-spacing:-.015em}
.home-main .tools{grid-template-columns:repeat(4,1fr)}
.home-main .tool{padding:17px}
.home-main .tool h3{font-size:.98rem;margin:9px 0 3px}
.home-main .tool p{font-size:.82rem}
@media (max-width:1000px){.home-main .tools{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.home-layout{flex-direction:column}.sidebar{position:static;width:auto;flex:auto;display:flex;flex-wrap:wrap;gap:4px}.sidebar .side-h{width:100%}}
@media (max-width:680px){.home-main .tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:430px){.home-main .tools{grid-template-columns:1fr}}
/* coffee buttons */
.coffee-btns{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.coffee-btns a{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:12px;font-weight:700;color:#fff;font-size:1rem}
.coffee-btns a:hover{opacity:.9;text-decoration:none}
.c-cash{background:#00d54b}.c-venmo{background:#3d95ce}.c-paypal{background:#003087}

/* hero subtitle: one line on desktop, auto-wrap on small screens */
.home .hero p{max-width:none}
@media (max-width:560px){.home .hero h1{font-size:1.7rem}.home .hero p{font-size:.98rem}}

/* ── sliding sidebar pill + smooth scroll ───────────── */
html{scroll-behavior:smooth}
.side-indicator{position:absolute;top:0;left:5px;right:5px;height:40px;border:2px solid var(--acc);
  border-radius:999px;background:rgba(37,99,235,.07);pointer-events:none;z-index:0;
  transition:transform .38s cubic-bezier(.34,1.2,.4,1),height .3s ease}
.sidebar a{position:relative;z-index:1;transition:color .2s}
.sidebar a.active{color:var(--acc);font-weight:800}
@media (max-width:820px){.side-indicator{display:none}.sidebar a.active{background:var(--acc);color:#fff}}

/* freeze the top header while scrolling */
header.site{position:sticky;top:0;z-index:50}
.c-kofi{background:#ff5e5b}

/* coffee dropdown in the nav */
.coffee-dd{position:relative;display:inline-block}
.coffee-dd summary{list-style:none;cursor:pointer;font-weight:700;font-size:.86rem;color:#92400e;
  background:linear-gradient(180deg,#fff8e9,#ffefcc);border:1px solid #fbdd9b;padding:8px 15px;border-radius:999px;
  box-shadow:0 2px 8px rgba(214,158,46,.18);transition:transform .15s,box-shadow .15s}
.coffee-dd summary::-webkit-details-marker{display:none}
.coffee-dd summary:hover,.coffee-dd[open] summary{transform:translateY(-1px);box-shadow:0 6px 16px rgba(214,158,46,.3)}
.coffee-pop{position:absolute;right:0;top:160%;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:16px;width:290px;z-index:60}
.coffee-pop p{margin:0 0 12px;font-size:.88rem;color:var(--mute);line-height:1.45}
.coffee-pop a{display:block;text-align:center;background:linear-gradient(180deg,#b9822f,#9a6a1f);color:#fff;
  font-weight:700;padding:12px 16px;border-radius:12px;font-size:.95rem;
  box-shadow:0 4px 14px rgba(154,106,31,.35);transition:transform .15s,box-shadow .15s}
.coffee-pop a:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 7px 18px rgba(154,106,31,.45)}
@media (max-width:560px){.coffee-pop{position:fixed;left:16px;right:16px;width:auto;top:62px}}

/* bigger, friendlier intro on tool pages (not the home hero) */
.wrap .hero p{font-size:1.24rem;line-height:1.5;color:#3a4456}