: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(900px, 94vw);
  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(180px,1fr)); gap:10px; margin-top: 12px; }
label { font-size:.9rem; color:#cbd5e1; }
input, select, textarea, button {
  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: 130px; resize: vertical; }
button { cursor: pointer; background: #1f2937; font-weight: 600; }
button:hover { border-color: #38bdf8; }
.actions { display:flex; gap:10px; margin-top:12px; }
.result { margin-top: 12px; padding: 12px; border-radius: 10px; border:1px solid #334155; background:#0b1220; white-space: pre-wrap; }
.canvas-wrap { margin-top: 12px; border:1px solid #334155; border-radius: 10px; padding:10px; background:#0b1220; }
.preview-box { width:100%; min-height:80px; border-radius:10px; border:1px dashed #475569; }
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}