:root{
  --pink:#F43676;
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#6b6b6b;
  --text:#222;
  --radius:12px;
  --shadow: 0 8px 30px rgba(12,12,12,0.07);
  --max-width:980px;
}
.uaf-cgpa{font-family:Inter,system-ui,Segoe UI,Roboto,Arial;margin:12px auto;padding:12px;box-sizing:border-box}
.uaf-cgpa .card{max-width:var(--max-width);margin:8px auto;background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);color:var(--text)}
.uaf-cgpa.light{background:linear-gradient(180deg,#fff,#fff)}
.uaf-cgpa.dark{background:#0f0f10}
.uaf-cgpa.dark .card{background:#0b0b0c;color:#eaeaea}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.card-head h2{margin:0;color:var(--pink);font-size:1.25rem}
.controls{display:flex;gap:8px}
.instructions .muted{color:var(--muted);margin:6px 0}
.btn{background:var(--pink);color:#fff;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:600}
.btn.ghost{background:transparent;color:var(--pink);border:1px solid rgba(0,0,0,0.06)}
.btn.small{padding:6px 8px;font-size:0.85rem}
.btn.tiny{padding:6px 8px;font-size:0.8rem;border-radius:8px}
.btn.primary{box-shadow:0 6px 18px rgba(244,54,118,0.14)}
.actions-row{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:12px;flex-wrap:wrap}
.actions-row .left,.actions-row .right{display:flex;gap:8px;align-items:center}
.export-group{display:flex;gap:6px}
.semester-card{border-radius:10px;border:1px solid rgba(0,0,0,0.05);padding:10px;margin-bottom:12px;background:linear-gradient(180deg,rgba(244,54,118,0.03),transparent)}
.semester-head{display:flex;justify-content:space-between;align-items:center}
.semester-head h3{margin:0;font-size:1rem}
.course-table{width:100%;border-collapse:collapse;margin-top:8px}
.course-table th, .course-table td{padding:8px;border-bottom:1px dashed rgba(0,0,0,0.04);text-align:left}
.course-table input[type="number"], .course-table input[type="text"], .course-table select{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(0,0,0,0.08);box-sizing:border-box}
.gp-display{min-width:50px;text-align:center}
.semester-foot{display:flex;justify-content:flex-end;padding-top:8px}
.results{margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent)}
.results.hidden{display:none}
.results-table-wrap{overflow:auto;margin-top:8px}
.results-table{width:100%;border-collapse:collapse}
.results-table th, .results-table td{padding:8px;border:1px solid rgba(0,0,0,0.06)}
.muted{color:var(--muted)}
.small{font-size:0.85rem}
.tooltip-toggle{background:transparent;border:1px solid rgba(0,0,0,0.06);color:var(--pink);font-weight:700}
.tooltip-panel{margin-top:8px;padding:8px;border-radius:8px;background:#fff;border:1px solid rgba(0,0,0,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.04)}
.tooltip-panel.hidden{display:none}

/* mobile responsiveness */
@media (max-width:720px){
  .card-head{flex-direction:column;align-items:flex-start;gap:8px}
  .course-table th:nth-child(4), .course-table td:nth-child(4){display:none} /* hide gp display column on tiny screens (we still show it in calculation) */
  .actions-row{flex-direction:column;align-items:stretch}
  .actions-row .right{justify-content:flex-end}
}

/* dark tweaks */
.uaf-cgpa.dark :root { }
.uaf-cgpa.dark .card{background:#071018}
.uaf-cgpa.dark .tooltip-panel{background:#0d2733;border-color:rgba(255,255,255,0.06)}
.uaf-cgpa.dark .course-table th, .uaf-cgpa.dark .course-table td{border-bottom:1px dashed rgba(255,255,255,0.03)}
/* Collapsible results */
.collapse-btn{
  margin-top:10px;
  width:100%;
  text-align:left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.9rem;
}

#details-wrap{
  margin-top:8px;
  transition:max-height .3s ease;
  overflow:hidden;
}

#details-wrap.details-collapsed{
  max-height:0;
  padding:0;
}

#details-wrap.details-expanded{
  max-height:800px; /* large enough to fit */
}