:root { color-scheme: light dark; }
body {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at top, #0b1227 0%, #0f172a 70%);
  color: #e5e7eb;
}
main {
  width: min(960px, 95vw);
  border: 1px solid #334155;
  border-radius: 14px;
  background: #111827;
  padding: 24px;
}
h1 { margin: 0; font-size: 1.8rem; }
p { color: #9ca3af; margin-top: 8px; }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:10px; margin-top:12px; }
label { font-size:.9rem; color:#cbd5e1; }
input, select, button, textarea {
  width:100%; box-sizing:border-box; border-radius:10px; border:1px solid #334155;
  background:#0b1220; color:#e5e7eb; padding:10px; font-size:.95rem;
}
textarea { min-height: 120px; resize: vertical; }
button { cursor:pointer; background:#1f2937; font-weight:600; }
button:hover { border-color:#38bdf8; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap: wrap; }
.result { margin-top:12px; padding:12px; border-radius:10px; border:1px solid #334155; background:#0b1220; white-space:pre-wrap; }
a { color:#93c5fd; text-decoration:none; }
a:hover { text-decoration:underline; }
.card { border:1px solid #334155; border-radius:10px; padding:14px; background:#1f2937; display:block; }
.name { font-weight:600; color:#e5e7eb; }
.desc { margin-top:6px; color:#9ca3af; font-size:.92rem; }
.seo-content{margin-top:14px;padding:12px;border:1px solid #334155;border-radius:10px;background:#0b1220}
.seo-content h2{margin:0 0 8px;font-size:1rem;color:#cbd5e1}
.seo-content p{margin:6px 0;color:#9ca3af;line-height:1.5}