:root{
  --pink: #F43676;
  --bg: #ffffff;
  --card: #ffffff;
  --text: #222;
  --muted: #666;
  --radius: 14px;
  --shadow: 0 6px 22px rgba(0,0,0,0.08);
}

.uog-calc { max-width: 900px; margin: 18px auto; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); }
.uog-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.uog-header h1{ margin:0; font-size:1.2rem; color:var(--pink); }
.controls{ display:flex; gap:8px; align-items:center; }

.uog-calc .options{ display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.mode-row label{ margin-right:10px; font-weight:600; color:var(--muted); }
.precision select{ padding:6px 8px; border-radius:8px; border:1px solid #e5e5e5; }

.semester-card{ background:var(--card); padding:14px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; }
.sem-header{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sem-title{ margin:0; font-size:1rem; color:var(--pink); }
.sem-actions{ display:flex; gap:8px; align-items:center; }
.sem-actions label{ font-weight:600; font-size:0.9rem; color:var(--muted); margin-right:6px; }

.sem-body{ margin-top:10px; }
.course-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.course-row input[type="text"], .course-row input[type="number"], .course-row select{
  padding:8px; border-radius:8px; border:1px solid #e8e8e8; font-size:0.95rem;
}
.course-row .course-name{ flex:1; min-width:120px; }
.course-row .course-credits{ width:90px; }
.course-row .course-grade{ width:110px; }

.course-controls{ margin-top:8px; }
button{ background:var(--pink); color:#fff; border:none; padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:600; }
button.primary{ background:var(--pink); }
button:hover{ opacity:0.95; }

.actions{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0; }
.results{ background:var(--card); padding:14px; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; }
.results.hidden{ display:none; }

.uog-foot{ text-align:center; color:var(--muted); font-size:0.9rem; margin-top:10px; }

/* small screens */
@media (max-width:700px){
  .course-row{ flex-direction:column; align-items:stretch; }
  .course-row .course-credits, .course-row .course-grade{ width:100%; }
  .sem-actions{ flex-direction:column; align-items:flex-end; gap:6px; }
}

/* Dark mode */
.uog-dark{
  --bg: #0f1220;
  --card: #11121a;
  --text: #e6e6e6;
  --muted: #9aa0b2;
  --shadow: none;
}
.uog-dark body, .uog-dark .uog-calc { background:var(--bg); color:var(--text); }
.uog-dark .semester-card, .uog-dark .results{ background:var(--card); box-shadow:none; border:1px solid rgba(255,255,255,0.03); }

/* small helpers */
.hidden{ display:none !important; }
.remove-course, .remove-sem{ background:transparent; color:var(--muted); border:1px solid rgba(0,0,0,0.06); padding:6px 8px; border-radius:8px; }
.remove-course:hover, .remove-sem:hover{ opacity:0.9; }
label{ display:inline-flex; gap:8px; align-items:center; }