/* Branding */
:root{
  --srb-blue:#1346AF;
  --srb-grey:#4F5A72;
  --srb-green:#065f46;
  --srb-orange:#f59e0b;
}

/* Layout */
.srb-wrap{max-width:960px;margin:30px auto;padding:10px;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
.srb-title{color:var(--srb-blue);text-align:center;margin-bottom:12px}
.srb-subtitle{text-align:center;color:var(--srb-grey);margin-top:-10px;margin-bottom:20px}

/* Stepper */
.srb-stepper{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:10px 0 16px}
.srb-step{padding:8px 12px;border-radius:999px;background:#eef2ff;color:#1f2a44;font-size:13px;border:1px solid #dbe4ff}
.srb-step.is-active{background:var(--srb-blue);color:#fff;border-color:var(--srb-blue)}

/* Cards */
.srb-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,.06);margin-bottom:16px}
.srb-muted{color:#6b7280;font-size:13px}

/* Inputs */
.srb-card label{display:block;font-weight:600;color:var(--srb-blue);margin-top:8px}
.srb-card input,.srb-card select,.srb-card textarea{
  width:100%;padding:10px;border:1px solid #e5e7eb;border-radius:10px;margin-top:6px;font-size:14px
}
.srb-card textarea{min-height:110px}

/* Hints and required fields */
.srb-hint{font-size:12px;color:#6b7280;margin-top:4px;margin-bottom:8px}
.srb-required{color:#ef4444}

/* Grid */
.srb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:720px){.srb-grid{grid-template-columns:1fr}}

.srb-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
.srb-actions button,.srb-send button,.srb-secondary{
  background:var(--srb-blue);color:#fff;border:none;padding:10px 16px;border-radius:10px;cursor:pointer
}
.srb-secondary{background:#eef2ff;color:#1f2a44;border:1px solid #cdd5ff}
.srb-actions button:hover,.srb-send button:hover{filter:brightness(.95)}

/* Skills list */
.srb-skill-box{display:flex;flex-wrap:wrap;gap:10px}
.srb-skill-box label{display:flex;align-items:center;gap:6px;background:#f3f4f6;color:#111827;border-radius:999px;padding:6px 10px;border:1px solid #e5e7eb}

/* Experience items */
.srb-exp,.srb-ref{border:1px dashed #cbd5e1;border-radius:10px;padding:12px;margin:10px 0}
.srb-exp .row,.srb-ref .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:720px){.srb-exp .row,.srb-ref .row{grid-template-columns:1fr}}

/* Preview */
.srb-preview{border:1px solid #e5e7eb;border-radius:12px;padding:24px}
.srb-preview h1{margin:0;color:#111827}
.srb-preview .sub{color:#374151;margin-top:4px}
.srb-preview h2{color:var(--srb-grey);border-bottom:2px solid #e5e7eb;padding-bottom:4px;margin-top:18px}
.srb-preview ul{margin:6px 0 0 18px}
.srb-preview li{margin:2px 0}

/* Send */
.srb-send{margin-top:14px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.srb-send input{max-width:420px}
.srb-status{font-size:13px;color:#065f46}

/* Upsell boxes */
.srb-upsell{background:#f0f9ff;border:1px solid #7dd3fc;border-radius:10px;padding:16px;margin:16px 0}
.srb-upsell h3{color:var(--srb-blue);margin:0 0 8px 0}
.srb-upsell p{color:var(--srb-grey);margin:0 0 12px 0;font-size:14px}
.srb-upsell-btn{background:var(--srb-orange);color:white;border:none;padding:8px 16px;border-radius:8px;cursor:pointer}

/* Processing animation */
.srb-processing{text-align:center;padding:40px 20px}
.srb-spinner{
  width:50px;height:50px;border:5px solid #eef2ff;border-top:5px solid var(--srb-blue);
  border-radius:50%;animation:srb-spin 1s linear infinite;margin:0 auto 20px
}
@keyframes srb-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.srb-processing h3{color:var(--srb-blue);margin-bottom:8px}
.srb-processing p{color:var(--srb-grey)}

/* Email status indicators */
.srb-status.sending {
  color: #f59e0b;
}
.srb-status.success {
  color: #065f46;
}
.srb-status.error {
  color: #dc2626;
}

/* Email options toggle */
.srb-email-options {
  margin-top: 10px;
  padding: 10px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.srb-email-options summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--srb-blue);
}