: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(1000px, 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; display:block; margin-bottom:8px; }
input, select, button {
  width:100%; box-sizing:border-box; border-radius:10px; border:1px solid #334155;
  background:#0b1220; color:#e5e7eb; padding:10px; font-size:.95rem;
}
button { cursor:pointer; background:#1f2937; font-weight:600; }
button:hover { border-color:#38bdf8; }
.small-btn { max-width: 90px; padding: 6px 8px; font-size: .85rem; }
.actions { display:flex; gap:10px; margin-top:12px; flex-wrap: wrap; }
.actions button { width: auto; min-width: 150px; }
.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; }
.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}
.table-wrap { margin-top: 14px; overflow-x: auto; border:1px solid #334155; border-radius:10px; }
table { width:100%; border-collapse: collapse; min-width: 760px; }
th, td { padding:10px; border-bottom:1px solid #1f2937; text-align:left; }
th { color:#cbd5e1; background:#0b1220; }