/* Colorful, mobile-first styles (v1.4) */
:root{
  --pri:#6a5acd; /* slate blue */
  --pri-2:#ff6f61; /* coral */
  --pri-3:#00b894; /* teal */
  --bg:#f7f8fc;
  --text:#222;
  --muted:#666;
}

.sap-wrap .sap-quick-links .button{margin-right:8px}

.sap-form, .sap-filter, .sap-profile, .sap-card, .sap-success, .sap-error, .sap-status, .sap-status-card, .sap-portal {
  background: white;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  padding: 18px;
  margin: 16px 0;
  border:1px solid #e9ecf3;
}

.sap-field{display:flex;flex-direction:column;margin-bottom:12px}
.sap-field label{font-weight:700;margin-bottom:6px;color:var(--pri)}
.sap-field input[type=text],
.sap-field input[type=email],
.sap-field input[type=tel],
.sap-field input[type=number],
.sap-field input[type=date],
.sap-field select,
.sap-field textarea{
  padding:12px 14px;border:1px solid #dde1ee;border-radius:12px;background:var(--bg)
}
.sap-field .req{color:#c00}

.sap-btn{
  display:inline-block;padding:10px 16px;border-radius:12px;border:none;
  background:linear-gradient(135deg,var(--pri),var(--pri-2));
  color:white;font-weight:800;cursor:pointer;transition:transform .05s ease, box-shadow .2s;
  box-shadow:0 8px 18px rgba(106,90,205,.28);
  text-decoration:none
}
.sap-btn:hover{transform:translateY(-1px);box-shadow:0 12px 22px rgba(106,90,205,.36)}

.sap-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.sap-note{color:var(--muted)}

.sap-table{width:100%;border-collapse:collapse}
.sap-table th,.sap-table td{padding:12px;border-bottom:1px solid #eee;font-size:15px}
.sap-table thead{background:#fafafa}

.sap-link{color:var(--pri-2);text-decoration:none;font-weight:700}
.sap-link:hover{text-decoration:underline}

.sap-profile{text-align:left}
.sap-profile-pro .sap-profile-header{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.sap-avatar{width:120px;height:120px;border-radius:16px;object-fit:cover;border:4px solid var(--pri-3)}
.sap-profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#f0f2fb;border:1px solid #e7e9f6;margin-right:6px;font-size:12px}

.sap-status.sap-ok,.sap-status-card.sap-ok{border-left:6px solid #0a7}
.sap-status.sap-pending,.sap-status-card.sap-pending{border-left:6px solid #f5a623}
.sap-status.sap-error{border-left:6px solid #c00}

.sap-section{margin:20px 0 28px}
.sap-section-title{
  margin:0 0 10px 0;padding:10px 14px;border-radius:12px;
  background:linear-gradient(90deg, rgba(106,90,205,.12), rgba(255,111,97,.12));
  border:1px solid #eee;color:#333
}

@media (max-width:640px){
  .sap-profile-grid{grid-template-columns:1fr}
  .sap-table th,.sap-table td{font-size:14px}
}