:root{
    --msr-bg:#f8fafc;
    --msr-card:#ffffff;
    --msr-text:#0f172a;
    --msr-muted:#64748b;
    --msr-primary:#0d2f82;
    --msr-ring:#94a3b8;
    --msr-danger:#b91c1c;
    --msr-success:#065f46;
    --msr-border:#e5e7eb;
    --msr-radius:12px;
  }
  
  .msr-blank { background: var(--msr-bg); }
  
  /* .msr-container{
    display:grid;
    grid-template-columns: 1fr;
    gap:24px;
    max-width: 980px;
    margin: 40px auto;
    padding: 0 16px;
  }
  @media (min-width: 900px){
    .msr-container{ grid-template-columns: 1fr 1fr; align-items: stretch; }
  } */
  
  .msr-card{
    background: var(--msr-card);
    border: 1px solid var(--msr-border);
    border-radius: var(--msr-radius);
    padding: 24px;
    box-shadow: 0 6px 18px rgba(2,6,23,.06);
    height: 570px !important;
  }
  
  .msr-login { max-width: 420px; margin: 10vh auto; }
  
  .msr-aside{
    display:flex; align-items:center; justify-content:center;
    background: linear-gradient(180deg, #eef2ff, #f8fafc);
    border: 1px solid var(--msr-border);
    border-radius: var(--msr-radius);
    min-height: 420px;
    overflow: hidden;
  }
  .msr-aside img{ max-width: 100%; height: auto; object-fit: cover; }
  
  .msr-progress{
    display:flex; align-items:center; gap:12px; margin-bottom: 18px;
    color: var(--msr-muted);
    font-size: 14px;
  }
  .msr-progress__divider{ flex:1; height:1px; background: var(--msr-border); }
  .msr-progress__step{
    display:flex; align-items:center; gap:8px; white-space:nowrap;
  }
  .msr-progress__step span{
    display:inline-grid; place-content:center;
    width:28px; height:28px; border-radius:999px;
    border:1px solid var(--msr-border); background:#fff; font-weight:600;
  }
  
  .msr-step[hidden]{ display:none !important; }
  .msr-step h2{ margin:0 0 12px; font-size:20px; color: var(--msr-text); }
  
  label{ display:block; margin:10px 0; color: var(--msr-text); }
  input{
    width:100%; padding:12px 14px; border:1px solid var(--msr-border);
    border-radius:10px; font-size:16px; outline:none; background:#fff;
  }
  input:focus{ border-color: var(--msr-ring); box-shadow: 0 0 0 3px rgba(148,163,184,.25); }
  
  .msr-hint{ color: var(--msr-muted); font-size:12px; }
  
  .msr-card-el{
    padding:12px; border:1px solid var(--msr-border); border-radius:10px; background:#fff;
  }
  
  .msr-actions{ display:flex; gap:10px; margin-top:14px; }
  .msr-actions button{
    appearance:none; border:0; border-radius:10px; cursor:pointer;
    padding:12px 16px; font-weight:600; font-size:15px;
  }
  .msr-actions .msr-prev{ background:#eef2ff; color:#0d2f82; }
  .msr-actions .msr-next, .msr-actions #msr-submit, #msr-login-btn{
    background: var(--msr-primary); color:#fff;
  }
  .msr-disabled{ opacity:.6; pointer-events:none; }
  
  .msr-status{ margin-top:12px; min-height:20px; font-size:14px; }
  .msr-error-text, .msr-error{ color: var(--msr-danger); }
  .msr-success{ color: var(--msr-success); }
  

  


/* Card Container */
.msr-payment-card {
    max-width: 400px;
    margin: auto;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    font-family: sans-serif;
}

/* Header */
.msr-payment-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
}

.msr-plan-info {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
}

.msr-plan-price {
    font-weight: bold;
}

.msr-trial-text {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.25rem;
}

/* Card Section */
.msr-card-section {
    margin-bottom: 1.25rem;
}

.msr-card-section label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.msr-card-el {
    padding: 0.75rem;
    border: 1px solid var(--msr-border);
    border-radius: 6px;
    background: #fafafa;
}

/* Buttons */
.msr-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.msr-actions button {
    flex: 1;
    appearance: none;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

/* Cancel */
.msr-actions .msr-prev {
    background: #f0f0f0;
    color: #0d2f82;
}

.msr-actions .msr-prev:hover {
    background: #e2e2e2;
}

/* Confirm */
.msr-actions #msr-submit {
    background: #10399F;
    color: #fff;
}

.msr-actions #msr-submit:hover {
    background: #0d2f82;
}

/* Secure Note */
.msr-secure-text {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: #666;
    text-align: center;
}