:root{
  /* Dark emerald shell */
  --bg:#08130f;

  /* Text */
  --text:#e9fff6;
  --muted:rgba(233,255,246,.72);

  /* Lines / borders */
  --line:rgba(255,255,255,.14);

  /* Brand greens */
  --brand:#22c55e;     /* emerald */
  --brand2:#16a34a;    /* forest */

  --ok:#34d399;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:
  radial-gradient(900px 450px at 10% 0%, rgba(34,197,94,.22), transparent 60%),
  radial-gradient(900px 450px at 90% 10%, rgba(22,163,74,.18), transparent 55%),
  radial-gradient(1200px 600px at 50% 100%, rgba(16,185,129,.10), transparent 60%),
  var(--bg);
  min-height:100vh;
  line-height:1.45;
}

.container{max-width:1100px;margin:0 auto;padding:24px}

.nav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:999px;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  position:sticky;top:14px;z-index:50;
}

.brand{display:flex;align-items:center;gap:10px;font-weight:800}
.logo{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  position:relative;
}
.logo:after{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,.55);
  transform:rotate(8deg);
}

.navlinks{display:flex;gap:14px;align-items:center}
.navlinks a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:999px;
  color:var(--muted);
}
.navlinks a:hover{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.card{
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;margin-top:22px}
@media (max-width:920px){
  .hero{grid-template-columns:1fr}
  .nav{position:static}
}

.heroMain{padding:26px 26px 22px}
.heroSide{padding:18px;display:flex;flex-direction:column;gap:12px}

.mini{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
}
.mini h3{margin:0 0 6px;font-size:15px}
.mini p{margin:0;color:var(--muted);font-size:14px}

.kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:var(--muted);
  font-size:13px;
}
.dot{width:9px;height:9px;border-radius:99px;background:var(--ok)}

h1{margin:14px 0 8px;font-size:clamp(34px,4vw,52px);line-height:1.05}
.sub{color:var(--muted);font-size:16px;max-width:60ch}

.ctaRow{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  text-decoration:none;
  font-weight:700;
  color:var(--text);
}
.btn.primary{
  border:none;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#071023;
}
.btn:hover{background:rgba(255,255,255,.10)}
.btn.primary:hover{filter:brightness(1.05)}

.section{margin-top:22px;padding:22px}
.section h2{margin:0 0 8px;font-size:22px}
.section .lead{color:var(--muted);margin:0 0 14px}

.searchRow{display:flex;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.searchRow input{
  flex:1 1 260px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
.searchRow input::placeholder{color:rgba(234,240,255,.55)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  cursor:pointer;
  user-select:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-size:13px;
}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.tool{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
}

.toolTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.toolTitleRow{display:flex;align-items:center;gap:10px;min-width:0}
.tool h3{margin:0;font-size:16px;min-width:0}

.tag{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  color:rgba(234,240,255,.72);
  white-space:nowrap;
}

.tool p{margin:0;color:var(--muted);font-size:14px}

.toolThumb{margin:-14px -14px 8px -14px}
.toolThumbImg{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  border-bottom:1px solid rgba(255,255,255,.14);
}

.toolIcon{
  width:26px;
  height:26px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  object-fit:cover;
  background:rgba(0,0,0,.18);
  flex:0 0 auto;
}

.toolByline{
  font-size:12px;
  color:rgba(234,240,255,.62);
  margin-top:-4px;
}
.toolByline a{
  color:rgba(234,240,255,.86);
  text-decoration:none;
  border-bottom:1px solid rgba(234,240,255,.18);
}
.toolByline a:hover{border-bottom-color:rgba(234,240,255,.5)}

/* Open Tool CTA — ALWAYS WHITE */
.tool a.dpt-open,
.tool a.dpt-open:link,
.tool a.dpt-open:visited,
.tool a.dpt-open:hover,
.tool a.dpt-open:active{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  font-weight:800;
  text-decoration:none;
  color:var(--text) !important;
}

.tool a.dpt-open:hover{
  background:rgba(255,255,255,.12);
}

/* Most used list */
.dpt-popular{list-style:none;padding:0;margin:10px 0 0}
.dpt-popular li{margin:6px 0}
.dpt-popular a{text-decoration:none;font-weight:800;color:rgba(234,240,255,.92)}
.dpt-popular a:hover{text-decoration:underline}
.dpt-popular .muted{color:rgba(234,240,255,.60)}

.footer{
  margin:26px 0 6px;
  color:rgba(234,240,255,.60);
  font-size:13px;
  text-align:center;
}

/* Brand / logo text should be white, not brand purple */
.brand,
.brand a,
.brand a:link,
.brand a:visited,
.brand a:hover,
.brand a:active {
  color: var(--text) !important;
  text-decoration: none;
}
/* =========================================================
   Filter chips – emerald theme (Tools + Featured)
   ========================================================= */

section#tools .chips .chip,
section#featured .chips .chip{
  background: rgba(34,197,94,.18);
  border: 1px solid rgba(34,197,94,.45);
  color: var(--text);
}

section#tools .chips .chip:hover,
section#featured .chips .chip:hover{
  background: rgba(34,197,94,.30);
  color: #ecfdf5;
}

section#tools .chips .chip.active,
section#featured .chips .chip.active{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-color: transparent;
  color: #071023;
}