/* Bank-style mobile app UI */
.raqba-app { max-width: 820px; margin: 20px auto; padding: 0 16px; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.raqba-app-header { background: linear-gradient(135deg, #0f4c81, #0b2e4e); color: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 6px 16px rgba(0,0,0,0.15); margin-bottom: 16px; }
.raqba-app-header h2 { margin: 0; font-weight: 600; }

.raqba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.raqba-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 16px; border: 1px solid #e6eef7; }
.raqba-card-title { font-weight: 600; margin-bottom: 8px; color: #0b2e4e; }
.raqba-card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 14px; color: #334e68; }
.raqba-card-value { font-size: 28px; letter-spacing: 2px; font-weight: 700; color: #0f4c81; }

.raqba-form { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); padding: 16px; border: 1px solid #e6eef7; }
.raqba-form-group { margin-bottom: 12px; }
.raqba-form-group label { display: block; font-size: 13px; color: #334e68; margin-bottom: 6px; }
.raqba-form-group input, .raqba-form-group select, .raqba-form-group textarea { width: 100%; padding: 10px 12px; border: 1px solid #cbd6e2; border-radius: 12px; font-size: 14px; }

.raqba-btn-primary { background: #0f4c81; color: #fff; border: none; padding: 12px 16px; border-radius: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 12px rgba(15,76,129,0.35); }
.raqba-btn-primary:hover { background: #0b2e4e; }

.raqba-alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 16px; }
.raqba-alert-success { background: #e7f8ef; border: 1px solid #b8e7cc; color: #0b6b3b; }
.raqba-alert-error { background: #ffe9e9; border: 1px solid #ffc1c1; color: #8a1f1f; }
.raqba-alert-info { background: #eef6ff; border: 1px solid #c7e0ff; color: #1b4b85; }

/* Responsive tweaks */
@media (max-width: 480px) {
  .raqba-app-header { padding: 16px; }
  .raqba-card { padding: 12px; }
  .raqba-card-value { font-size: 24px; }
}