/* Page spacing for this tool (shared with Ratio Balancer) */
:root { --page-top: 1rem; }

/* Card + controls */
.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;
}
.tool-card h1{ margin:.2rem 0 1rem; }
.tool-card h2{ margin:.2rem 0 1rem; font-size:1.2rem; }

.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;
}

select.control{ appearance:none; -webkit-appearance:none; -moz-appearance:none; }
select.control option{ background-color:#1a1a1a; color:#fff; }
body.light select.control option{ background-color:#fff; color:#000; }

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); }

/* Layout helpers */
.tool-wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
@media (max-width: 800px){ .tool-wrap{ grid-template-columns: 1fr; } }

.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; }

/* Swatches (palette preview) */
.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;
}