/* Basic reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background:#f5f6f8; color:#222; line-height:1.5; }

/* Container */
.container { max-width: 980px; margin: 0 auto; padding: 20px; }

/* Header / Nav */
.site-header { background:#2b6a4a; color:#fff; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand { color:#fff; text-decoration:none; font-weight:700; font-size:18px; }
.main-nav a { color:#fff; text-decoration:none; margin-left:16px; font-weight:600; font-size:14px; }
.main-nav a:hover { text-decoration:underline; }

/* Panel */
.panel { background:#fff; border-radius:10px; padding:20px; margin-top:20px; box-shadow:0 6px 18px rgba(20,20,20,0.06); }
.lead { color:#444; margin-bottom:12px; }

/* Course row */
.course { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:10px; }
.course input, .course select { padding:8px 10px; border:1px solid #ddd; border-radius:6px; min-width:120px; }
.course .remove-course { background:transparent; border:none; font-size:16px; color:#888; cursor:pointer; padding:6px; }

/* Buttons */
.controls { display:flex; gap:10px; justify-content:center; margin-top:10px; }
.btn { padding:8px 14px; border-radius:6px; border:1px solid #2b6a4a; background:transparent; color:#2b6a4a; cursor:pointer; font-weight:600; }
.btn.primary { background:#2b6a4a; color:#fff; border-color:#2b6a4a; }
.btn:hover { opacity:0.95; }

/* Result */
.result { margin-top:12px; font-size:18px; text-align:center; }

/* Textarea and stats */
textarea { width:100%; padding:12px; border-radius:8px; border:1px solid #ddd; font-size:15px; }
.stats { display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; }

/* Citation */
.form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:10px; margin-top:12px; }
.citation-result { background:#fafafa; border:1px solid #eee; padding:12px; margin-top:12px; border-radius:6px; }

/* Footer */
.site-footer { text-align:center; color:#666; padding:14px 0; margin-top:20px; }

/* Small screens */
@media (max-width: 640px) {
  .site-header .container { flex-direction:column; align-items:flex-start; gap:8px; padding:12px; }
  .main-nav { display:flex; gap:10px; flex-wrap:wrap; }
  .controls { flex-direction:column; }
  .course { flex-direction:column; align-items:stretch; }
}