/* Increase line/paragraph spacing in the output textbox */
#output {
  line-height: 2.2;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  font-size: 1.08em;
  white-space: pre-wrap;
}
:root{
  --bg: #0b0f14;
  --card: #0f1621;
  --muted: #9fb0c4;
  --text: #e6edf3;
  --primary: #6aa2ff;
  --primary-600: #4d8cff;
  --accent: #1f2a3a;
  --outline: #243244;
  --success: #66d19e;
}

*{box-sizing: border-box}
html, body{height: 100%}
body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, #0c1219, #0b0f14);
}

.container{
  width: min(960px, 92vw);
  margin: 0 auto;
}

header{
  padding: 28px 0 12px;
}
header h1{
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.3px;
}
.tagline{
  margin: 6px 0 0;
  color: var(--muted);
}

.card{
  background: radial-gradient(1200px 600px at 50% -10%, rgba(77,140,255,0.08), rgba(0,0,0,0)), var(--card);
  border: 1px solid var(--outline);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.controls label{ display:block; margin: 12px 0 6px; color: var(--muted); }
textarea{
  width: 100%;
  background: #0b131d;
  border: 1px solid var(--outline);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 14px;
  outline: none;
  resize: vertical;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(106,162,255,.15); }

.options{
  display:flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 8px;
}
.toggle{ display:flex; align-items:center; gap:8px; color: var(--muted); }

.buttons{ display:flex; gap:12px; margin: 12px 0 0; }
button{
  appearance: none;
  border: 1px solid var(--outline);
  background: #0b131d;
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform .02s ease, background .2s, border-color .2s, box-shadow .2s;
}
button:hover{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(106,162,255,.1); }
button:active{ transform: translateY(1px); }
button.primary{ background: linear-gradient(180deg, var(--primary), var(--primary-600)); border-color: transparent; color:#06142b; font-weight: 600; }
button.secondary{ background: #0f1621; }
button.ghost{ background: transparent; }
button:disabled{ opacity:.6; cursor: not-allowed; }

.results{ margin-top: 18px; }
.results-header{ display:flex; align-items:center; justify-content: space-between; gap: 12px; }
.results-header h2{ margin: 0 0 8px; font-size: 18px; color: var(--muted); font-weight: 600; }
.results-actions{ display:flex; gap:10px; }

.stats{ margin-top: 8px; color: var(--muted); font-size: 12px; }
.apa-report{ margin-top: 10px; }
.apa-report summary{ cursor: pointer; color: var(--muted); }
.apa-report ul{ margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.ref-list{
  margin-top: 8px;
  padding: 12px 14px;
  background: #0b131d;
  border: 1px solid var(--outline);
  border-radius: 12px;
  white-space: pre-wrap;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial;
}
.ref-item{
  margin: 0 0 8px;
  padding-left: 28px; /* hanging indent */
  text-indent: -28px;
}
.footer{ text-align:center; color: var(--muted); padding: 22px 0 40px; }

@media (max-width: 600px){
  .buttons{ flex-wrap: wrap; }
  .results-header{ flex-direction: column; align-items: flex-start; }
}