/* ---------- Global Reset & Base ---------- */
* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(135deg,#0f172a 0%, #111827 100%);
  color: #f8fafc;
  line-height:1.6;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* ---------- Header / Nav ---------- */
.site-header, header {
  background: linear-gradient(90deg,#0ea5e9,#6366f1);
  padding:14px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:sticky;
  top:0;
  z-index:1000;
  box-shadow:0 3px 10px rgba(2,6,23,.25);
}
.brand { font-weight:700; color:#fff; font-size:1.15rem; }
.nav-list { list-style:none; display:flex; gap:16px; align-items:center; }
.nav-list li a { color:#f1f5f9; text-decoration:none; font-weight:600; }
.nav-list li a:hover { text-decoration:underline; color:#fff; }

/* ---------- Layout ---------- */
.container { width:min(1200px,95%); margin:36px auto; padding-bottom:40px; }
.grid-2cols { display:grid; grid-template-columns:1fr 320px; gap:22px; align-items:start; }
@media(max-width:1024px){ .grid-2cols { grid-template-columns:1fr; } }

/* ---------- Cards ---------- */
.card { background: rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.03); padding:20px; border-radius:12px; box-shadow:0 8px 30px rgba(2,6,23,.45); margin-bottom:18px; }
.card-head h1, .card-head h2 { font-size:1.25rem; margin-bottom:8px; color: #fff; }
.card-head p { color:#cbd5e1; margin-bottom:12px; }

/* ---------- Inputs & Buttons ---------- */
textarea, input[type="text"], input[type="color"], input[type="email"] {
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:#f8fafc; margin-bottom:12px;
}
textarea { min-height:160px; resize:vertical; }
.input-card .tool-row, .tool-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:12px; }
@media(max-width:720px){ .tool-row { grid-template-columns:repeat(2,1fr); } }
@media(max-width:420px){ .tool-row { grid-template-columns:1fr; } }

.btn {
  display:inline-block; padding:11px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:700; color:#fff;
  background: linear-gradient(135deg,#10b981,#6366f1); box-shadow:0 8px 20px rgba(99,102,241,.12);
  transition: transform .12s ease, box-shadow .12s ease;
  text-align:center; text-decoration:none;
}
.btn:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(99,102,241,.14); }
.btn.danger { background: linear-gradient(135deg,#fb7185,#ef4444); }

/* ---------- Stats ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:8px; }
.stat { padding:12px; border-radius:10px; background:rgba(255,255,255,0.02); color:#0b1220; }
.k-label { color:#94a3b8; font-size:.9rem; margin-bottom:6px; }
.k-value { font-weight:700; font-size:1.6rem; color:#fff; }

/* color cards */
.k-blue { background: linear-gradient(180deg,#e0f2fe,#dbeafe); }
.k-green { background: linear-gradient(180deg,#dcfce7,#ccfbf1); }
.k-violet { background: linear-gradient(180deg,#ede9fe,#e9d5ff); }
.k-amber { background: linear-gradient(180deg,#fef3c7,#fde68a); }

/* ---------- Output blocks ---------- */
.output { background: rgba(255,255,255,0.02); padding:12px; border-radius:10px; color:#e6eef8; overflow:auto; white-space:pre-wrap; }

/* ---------- Tools list (homepage) ---------- */
.tools-list { list-style:none; margin-top:20px; max-width:640px; margin-left:auto; margin-right:auto; padding:0; }
.tools-list li { margin:10px 0; }
.tools-list a { display:block; background:#1e40af; padding:14px 18px; border-radius:10px; text-decoration:none; color:#fff; font-weight:700; text-align:center; }
.tools-list a:hover { background:#2563eb; transform:translateY(-3px); box-shadow:0 8px 20px rgba(37,99,235,.12); }

/* ---------- Two column small helper ---------- */
.two-cols { display:flex; gap:12px; align-items:center; }
.two-cols label { width:50%; display:flex; align-items:center; gap:8px; color:#cbd5e1; }
@media(max-width:420px){ .two-cols { flex-direction:column; } }

/* ---------- Footer ---------- */
.site-footer, footer { background: rgba(0,0,0,0.25); color:#94a3b8; padding:18px 28px; margin-top:auto; display:flex; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.02); }
.footer-links a { color:#38bdf8; text-decoration:none; margin-left:8px; }

/* ---------- Small screens ---------- */
@media(max-width:720px){
  .nav-list { gap:10px; flex-wrap:wrap; }
  .container { margin:18px auto; padding:0 12px; }
}