.skydrop-calc-card{
  --primary:#004aad;
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --ring:#93c5fd;
  max-width: 760px;
  margin: 24px auto;
  background: var(--bg);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  padding: 20px;
  border: 1px solid #e5e7eb;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, 'Helvetica Neue', Arial, 'Apple Color Emoji','Segoe UI Emoji';
}

.skydrop-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.skydrop-logo{font-size:28px}
.skydrop-title h3{margin:0;color:var(--primary)}
.skydrop-title p{margin:2px 0 0;color:var(--muted);font-size:14px}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width:720px){ .grid{ grid-template-columns: 1fr; } }

.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;color:var(--text);font-size:14px}
.field input,.field select{
  appearance:none;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  outline: none;
  transition: box-shadow .2s, border-color .2s, background .2s;
  background:#fafafa;
}
.field input:focus,.field select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,74,173,.15);
  background:#fff;
}

.btn-primary{
  margin-top: 10px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 6px 16px rgba(0,74,173,.2);
}
.btn-primary:hover{ background:#003a86; }
.btn-primary:active{ transform: translateY(1px); }

.calc-hint{color:var(--muted);font-size:12px;margin-top:6px}

.result.hidden{ display:none; }
.result.show{ 
  display:block;
  animation: slideUp .28s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.total-banner{
  margin-top:16px;
  background: linear-gradient(180deg, rgba(0,74,173,.06), rgba(0,74,173,.02));
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:18px;
}
.total-banner strong{font-size:20px}

.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #e5e7eb;border-top-color: var(--primary);
  animation: spin 1s linear infinite;
  display:none;
}
.spinner-text{ display:none; color: var(--muted); font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.result.loading .spinner,
.result.loading .spinner-text { display:inline-block; }

.breakdown-wrap{ margin-top: 10px; }
.collapse-toggle{
  background:transparent;
  border:1px solid #e5e7eb;
  padding:8px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--primary);
  transition: background .2s, box-shadow .2s;
}
.collapse-toggle:hover{
  background:#f5f7fb;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}

.breakdown table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}
.breakdown td{ padding:8px 6px; border-bottom:1px solid #eef2f7; }
.notes{ margin:10px 0 0 16px; color:#0f3c8a }