/* Scoped styles for the "Can This Integral Be Solved?" widget */
.cita-container { padding: 12px; box-sizing: border-box; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:#033047; }
.cita-container * { box-sizing: inherit; }

/* Card */
.cita-card {
  max-width: 780px;
  margin: 10px auto;
  background: linear-gradient(180deg,#f6fbff,#eaf6ff);
  border-radius: 12px;
  padding: 18px;
  border: 1px solid rgba(3,64,112,0.08);
  box-shadow: 0 8px 20px rgba(6,48,75,0.06);
  color: #033047;
}

/* Header */
.cita-card h1 { margin:0 0 6px; font-size:1.25rem; color:#012837; }
.cita-desc { margin:0 0 12px; color:#024a60; font-size:0.95rem; }

/* Form */
.cita-form { display:flex; flex-direction:column; gap:10px; }
.cita-form label { display:block; font-size:0.92rem; color:#023b4d; }
.cita-form textarea, .cita-form input[type="text"]{
  width:100%;
  padding:8px 10px;
  margin-top:6px;
  border-radius:8px;
  border:1px solid rgba(2,70,102,0.10);
  background:#fff;
  font-family: inherit;
  font-size:0.95rem;
  outline:none;
}
.cita-form textarea { resize:vertical; min-height:60px; font-family: inherit; }

/* two-column row */
.cita-row { display:flex; gap:10px; }
.cita-row label { flex:1; }

/* Actions */
.cita-actions { display:flex; gap:8px; margin-top:4px; flex-wrap:wrap; }
.cita-btn {
  background: linear-gradient(180deg,#1e88e5,#1565c0);
  color:#fff; border: none; padding:9px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow: 0 6px 12px rgba(21,101,192,0.10);
}
.cita-btn:active{ transform: translateY(1px); }
.cita-btn.ghost { background:transparent; border:1px solid rgba(5,80,128,0.12); color:#03485f; }

/* Result area */
.cita-result { margin-top:14px; padding-top:10px; border-top:1px dashed rgba(2,70,102,0.06); }
.cita-score { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cita-score-label { font-weight:700; color:#033047; }
.cita-score-bar { flex:1 1 200px; height:12px; background:linear-gradient(90deg,#ecf8ff,#f7feff); border-radius:999px; overflow:hidden; border:1px solid rgba(2,70,102,0.06); }
.cita-score-fill { height:100%; width:0%; background:linear-gradient(90deg,#38bdf8,#1976d2); transition: width 600ms ease; }
.cita-score-text { min-width:72px; text-align:right; font-weight:600; color:#023b4d; }

/* Techniques suggestions */
.cita-techniques { margin-top:10px; display:grid; gap:8px; }
.cita-tech { background:#ffffff; border-radius:8px; padding:10px; border:1px solid rgba(2,70,102,0.06); box-shadow: 0 4px 8px rgba(6,48,75,0.02); }
.cita-tech h4 { margin:0 0 4px; font-size:0.98rem; color:#022e3b; }
.cita-tech p { margin:0; font-size:0.9rem; color:#044755; }

/* Breakdown */
.cita-breakdown { margin-top:8px; color:#033047; }
.cita-breakdown pre { white-space:pre-wrap; background: #f3fbff; padding:10px; border-radius:6px; border:1px solid rgba(2,70,102,0.04); }

/* small note */
.cita-small { font-size:0.82rem; color:#04566f; margin-top:8px; }

/* Responsive */
@media (max-width:680px){
  .cita-row { flex-direction:column; }
  .cita-card { padding:14px; border-radius:10px; }
}