/* PU Merit Calculator - Styles */
/* Theme color */
:root{
  --accent: #F43676;
  --bg: #ffffff;
  --card: #ffffff;
  --text: #222;
  --muted: #6b6b6b;
  --error: #c62828;
  --radius: 14px;
}

/* Dark mode vars */
.pu-tool.dark {
  --bg: #0f1114;
  --card: #111214;
  --text: #e8e8e8;
  --muted: #99a0a6;
}

/* Layout */
#pu-merit-tool { font-family: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial; color:var(--text); background:transparent; padding:10px; }
.tool-card { max-width:740px; margin:12px auto; background:var(--card); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.06); padding:18px; }

/* Header */
.tool-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tool-header h2 { margin:0; color:var(--accent); font-size:20px; letter-spacing:0.2px; }
.icon-btn { background:transparent; border:1px solid rgba(0,0,0,0.06); padding:8px 10px; border-radius:8px; cursor:pointer; }

/* Body */
.tool-body { margin-top:12px; }
.row { margin-bottom:12px; display:flex; flex-direction:column; gap:6px; }
.two-cols { gap:12px; }
.two-cols .col { flex:1; }
.weights { display:flex; gap:8px; }
.weights input { flex:1; }

label { font-size:13px; color:var(--muted); }
input[type="number"], select { width:100%; padding:12px; border-radius:10px; border:1px solid #ddd; font-size:15px; background:transparent; color:var(--text); }

/* Buttons / Actions */
.actions { display:flex; gap:10px; margin-top:6px; align-items:center; flex-wrap:wrap; }
button.primary, button.secondary {
  padding:12px 16px; border-radius:12px; border:none; cursor:pointer; font-weight:600; font-size:15px;
}
button.primary { background:var(--accent); color:#fff; flex:1 1 220px; min-width:180px; }
button.secondary { background:transparent; border:1px solid #ddd; color:var(--text); flex:1 1 180px; min-width:140px; }

/* Result */
.result-card { margin-top:14px; background: rgba(244,54,118,0.04); padding:14px; border-radius:12px; border:1px solid rgba(244,54,118,0.08); }
.result-row { display:flex; justify-content:space-between; padding:6px 0; font-size:15px; }
.final-row { display:flex; justify-content:space-between; padding:8px 0; font-size:17px; font-weight:700; color:var(--text); }

/* Small text / error */
.muted { color:var(--muted); font-size:13px; }
.small-note { font-size:13px; color:var(--muted); margin-top:8px; }
.error { color:var(--error); background: rgba(198, 40, 40, 0.06); padding:8px 10px; border-radius:8px; font-weight:600; }

/* Hidden helper */
.hidden { display:none; }

/* Responsive - big horizontal buttons on mobile */
@media (max-width:640px){
  .tool-card { padding:14px; border-radius:12px; }
  .two-cols { display:block; }
  .actions { flex-direction:column; }
  button.primary, button.secondary { width:100%; padding:14px; font-size:16px; border-radius:12px; }
  .weights { flex-direction:column; }
}