@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

:root{
  --bg:#f6f8fb;
  --card-bg:#fff;
  --primary:#2d6cdf;
  --radius:12px;
  --font-stack:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

html,body{margin:0;padding:0;font-family:var(--font-stack);background:var(--bg);color:#222}

.card{
  max-width:800px;margin:4rem auto;padding:2rem;
  background:var(--card-bg);border-radius:var(--radius);
  box-shadow:0 6px 20px rgba(0,0,0,.07);
}

h1{margin-top:0;font-size:clamp(1.6rem,4vw,2.2rem)}
.tagline{margin-top:.25rem;font-size:1.05rem;color:#555}

form{display:flex;flex-direction:column;gap:1rem}
input[type=text]{
  padding:.85rem 1rem;font-size:1rem;border:1px solid #ccc;
  border-radius:var(--radius);width:100%;
}

.actions{display:flex;align-items:center;gap:.75rem}
button{
  align-self:flex-start;padding:.75rem 1.5rem;font-size:1rem;border:none;
  border-radius:var(--radius);background:var(--primary);color:#fff;
  cursor:pointer;transition:background .2s;
}
button:hover{background:#1d54c0;}button:disabled{opacity:.6;cursor:not-allowed}

.loader{
  display:none;width:24px;height:24px;border:4px solid #d0d6e4;
  border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.info{margin-top:2.5rem}
.info h2{font-size:1.25rem;margin:.5rem 0 1rem}

.ideas{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.25rem 1rem;padding:0;list-style:none}
.ideas li::before{content:"• ";color:var(--primary)}

/* --- make topic field a comfortable width (index page) --- */
input[type=text]{
  width:100%;
  max-width:600px;             /* NEW: no more super‑wide field */
}

/* --- bump up poem font size (results page) --- */
.result{
  font-family:'Lora', Georgia, 'Times New Roman', serif;
  font-size:1.25rem;           /* larger & easier to read */
  line-height:1.6;
  white-space:pre-wrap;        /* keep stanzas intact */
}

/* --- share buttons --- */
.share-wrap{margin-top:2rem}
.share-btn{
  display:inline-block;margin-right:.5rem;
  padding:.6rem 1rem;border-radius:var(--radius);
  background:var(--primary);color:#fff;text-decoration:none;
  font-size:.95rem;transition:background .2s;
}
.share-btn:hover{background:#1d54c0;}
.recent-link a {
  color: var(--primary);
  text-decoration: none;
}
.recent-link a:hover {
  text-decoration: underline;
}