/* Uses your global theme variables from /css/styles.css */
.tool-card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:1.25rem;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  max-width:560px;
}
.label{ display:block; margin:.25rem 0 .35rem; color:var(--text); font-weight:600; }
.control{
  display:block; width:100%;
  margin:0 0 .9rem; padding:.65rem .7rem;
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
input[type="color"].control{
  padding:0; height:3rem; border-radius:10px; cursor:pointer;
}
.btn{
  display:inline-block; border:0; cursor:pointer;
  background:var(--blue); color:#fff; font-weight:700;
  padding:.8rem 1rem; border-radius:10px;
  box-shadow:0 6px 14px rgba(14,118,188,.25);
}
.btn:hover{ filter:brightness(1.08); }

.palette{
  margin-top:1.25rem;
  display:flex; flex-wrap:wrap; gap:.75rem;
}
.swatch{
  width:120px; height:110px; border:0; cursor:pointer;
  border-radius:12px;
  background:var(--sw, #333);
  color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 6px rgba(0,0,0,.15);
  position:relative;
}
.swatch span{
  background:rgba(0,0,0,.25);
  padding:.25rem .4rem; border-radius:.4rem;
  font-size:.85rem;
}
.swatch.copied::after{
  content:"Copied!";
  position:absolute; bottom:8px;
  background:rgba(255,255,255,.9); color:#111;
  padding:.15rem .4rem; border-radius:.4rem; font-weight:800; font-size:.75rem;
}
    /* Minimal tool specific tweaks that reuse your site tokens */
    .tool-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
    @media (max-width: 800px){ .tool-wrap{ grid-template-columns: 1fr; } }
    .tool-card h2{ margin:.2rem 0 1rem; font-size:1.2rem }
    .row{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }
    .row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:.75rem; }
    .result{ background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.18);
             padding:.65rem .75rem; border-radius:10px; font-weight:700; }
    .muted{ color:var(--muted); font-size:.92rem; }
    .pill{ display:inline-block; padding:.18rem .5rem; border-radius:999px;
           background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); font-weight:700;}
    .tight{ margin:.25rem 0 0; }
    .kicker{ color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }

    /* Anti-gap fix for this page only */
main { display: flow-root; }
main > *:first-child { margin-top: 0; }
.tool-card h1 { margin-top: .2rem; }
/* Remove unwanted top gap below the header across all tools */
main { display: flow-root; } /* stops margin-collapsing with parent */
main > :is(section, article, div, header):first-child { margin-top: 0; }

/* If the first child has its own inner wrapper, zero that too */
main > :is(section, article, div, header):first-child
  > :is(section, article, div, header):first-child { margin-top: 0; }

/* Browsers give h1 a big default top margin - remove it when it’s the first thing */
main :is(h1, .h1):first-child { margin-top: 0; }

/* Optional - if your tool cards always start the page */
.tool-card:first-child { margin-top: 0; }
.tool-card h1:first-child { margin-top: 0; }
/* Only if needed */
main > :is(section, article, div, header):first-child { padding-top: 0; }
/* Uniform page start - guarantees the first visible panel sits tight to the header */
.page-top { margin-top: 0 !important; padding-top: 0 !important; }
.page-top > *:first-child { margin-top: 0 !important; }
.page-top h1:first-child { margin-top: 0 !important; }

/* If your first card is the hero/panel, zero it too */
.page-top .tool-card:first-child { margin-top: 0 !important; }