* { box-sizing: border-box; }
body { font-family: Arial, sans-serif; background:#f0f2f5; color:#333; margin:0; padding:20px; }
.container { max-width: 1200px; margin: 0 auto; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.08); }
.header { background:#2c3e50; color:#fff; padding:28px 24px; }
.header h1 { margin:0 0 6px; font-size:26px; }
.header p { margin:0; opacity:.9; }
.content { padding:24px; }

.grid { display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
.box { border:1px solid #e6e6e6; border-radius:10px; padding:16px 16px 18px; background:#fff; }
h3 { margin:0 0 12px; font-size:18px; }

.form-group { margin-bottom:12px; }
label { display:block; font-weight:600; margin-bottom:6px; font-size:14px; }
select, input[type="number"], input[type="text"] { width:100%; padding:10px; border:1px solid #ccc; border-radius:8px; }

.btn { display:inline-block; padding:10px 14px; border:none; border-radius:8px; background:#2c3e50; color:#fff; cursor:pointer; font-weight:600; }
.btn.secondary { background:#6b7280; }
.btn.ghost { background:#f8fafc; color:#111827; border:1px solid #e5e7eb; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.alert { border-radius:10px; padding:12px 14px; margin-bottom:12px; font-weight:600; }
.alert-success { background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.alert-info    { background:#eff6ff; color:#1e3a8a; border:1px solid #bfdbfe; }
.alert-warning { background:#fff7ed; color:#9a3412; border:1px solid #fed7aa; }
.alert-danger  { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

.value-boxes { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; margin-top:12px; }
.value-box { border:1px solid #eee; border-radius:10px; padding:10px; background:#fafafa; }
.value-box h4 { margin:0 0 6px; font-size:20px; }
.recommendation-item { background:#f9fafb; border:1px solid #eef2f7; padding:8px 10px; border-radius:8px; margin:6px 0; }

.panel { border:1px dashed #e5e7eb; border-radius:10px; padding:12px; margin-top:12px; }
.panel h4 { margin:0 0 8px; font-size:16px; }
.drivers-list { list-style:none; padding-left:0; margin:0; }
.drivers-list li { padding:6px 8px; margin:6px 0; background:#fff; border:1px solid #eee; border-radius:8px; }
.badge { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid #ddd; background:#fff; }

.screeners .item { border:1px solid #e5e7eb; border-radius:10px; padding:8px; margin:8px 0; background:#fff; }
.screeners .q { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-top:1px dashed #eee; }
.screeners .q:first-child { border-top:none; }
.score-pill { display:inline-block; padding:2px 8px; border-radius:999px; background:#111827; color:#fff; font-size:12px; margin-left:8px; }

.note { width:100%; min-height:140px; border:1px solid #e5e7eb; border-radius:10px; padding:10px; font-family:inherit; }
.subtle { color:#6b7280; font-size:12px; }

.followup-row {
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 0;
  margin-bottom:10px;
  border-top:1px dashed #e5e7eb;
}
.followup-row:first-child { border-top:none; }

#note-panel .row { margin-bottom: 10px; }
#note-panel .note { margin-top: 4px; }

@media (max-width: 980px) { .grid { grid-template-columns: 1fr; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 10px 14px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); font-weight:600; font-size:14px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

.hidden { display: none; }

/* Print-friendly chart note */
@media print {
  .btn, #results-placeholder, #drivers-panel, #screeners-panel, #followup-panel, .header { display:none !important; }
  .box, .panel { box-shadow:none !important; border:0 !important; }
  body { background:#fff; }
  #note-panel .note { border:0; padding:0; min-height:0; }
}