/* COMSATS Merit Calculator (CSS) */
/* Theme + layout */
:root{
  --accent:#F43676;
  --bg:#ffffff;
  --card:#fff;
  --text:#222;
  --muted:#666;
  --radius:14px;
  --shadow: 0 6px 20px rgba(0,0,0,0.08);
  --gap:12px;
  --maxw:720px;
  --pad:18px;
}

#cui-merit-calculator{ 
  max-width:var(--maxw); 
  margin:18px auto; 
  background:var(--card); 
  border-radius:var(--radius); 
  box-shadow:var(--shadow); 
  padding:var(--pad); 
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
}

.cui-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.cui-header h2{ 
  margin:0; 
  font-size:1.25rem; 
  color:var(--accent);
}

.cui-lead{ color:var(--muted); margin:12px 0 18px; font-size:0.95rem; }

.cui-fieldset{ border:none; margin:0 0 14px; padding:0; }
.cui-fieldset legend{ font-weight:600; margin-bottom:8px; color:var(--accent); }

.cui-row{
  display:grid;
  grid-template-columns: 1fr 1fr 120px 40px;
  gap:10px;
  align-items:end;
}
.cui-row label{ display:block; font-size:0.85rem; color:var(--muted); }
.cui-row input{
  width:100%;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  font-size:0.95rem;
  box-sizing:border-box;
}
.cui-row input[readonly]{ background: #fafafa; color:var(--text); }

.info-btn{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent);
  border-radius:10px;
  width:36px;
  height:36px;
  cursor:pointer;
  font-weight:700;
}

.info-btn:focus{ outline:3px solid rgba(244,54,118,0.15); }

/* Tooltip (click to open) */
.tooltip{
  position:relative;
}
.tooltip-content{
  position:absolute;
  right:0;
  top:44px;
  width:220px;
  background:var(--card);
  border-radius:10px;
  padding:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  border:1px solid rgba(0,0,0,0.04);
  font-size:0.88rem;
  color:var(--text);
  z-index:40;
}

/* Controls */
.cui-controls{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.cui-btn{
  background:var(--accent);
  color:white;
  padding:10px 14px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  font-weight:600;
}
.cui-btn:active{ transform:translateY(1px); }
.cui-btn-secondary{
  background:transparent;
  border:1px solid rgba(0,0,0,0.08);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}

.cui-btn-small{ background:transparent; border:1px dashed rgba(0,0,0,0.06); padding:6px 8px; border-radius:8px; cursor:pointer; }

.cui-btn-download{ background:#2b7cff; color:#fff; border-radius:10px; padding:10px 12px; }

/* Result */
.cui-result{ margin-top:18px; background:linear-gradient(180deg, rgba(244,54,118,0.03), rgba(244,54,118,0.01)); padding:12px; border-radius:10px; border:1px solid rgba(244,54,118,0.08); }
.cui-result h3{ margin:0 0 8px; color:var(--accent); }
.cui-note{ font-size:0.85rem; color:var(--muted); margin-top:8px; }

/* Dark mode */
.dark-mode{
  --bg:#0f1113;
  --card:#0b0c0e;
  --text:#e6e6e6;
  --muted:#b8b8b8;
  --shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.dark-mode .cui-row input[readonly]{ background:#0f1113; border-color:rgba(255,255,255,0.03); }

/* Responsive */
@media (max-width:720px){
  .cui-row{ grid-template-columns: 1fr 1fr; }
  .cui-row .readonly{ grid-column:1 / -1; }
  .info-btn{ grid-column: 2 / 3; justify-self:end; }
  .cui-controls{ justify-content:flex-start; }
}