:root{
  --ui-radius: 12px;
  --ui-shadow: 0 2px 10px rgba(0,0,0,.06);

  --ui-info-bg:   #eef6ff;
  --ui-info-fg:   #0b68b3;
  --ui-info-bd:   #cfe8ff;

  --ui-warn-bg:   #fff8ea;
  --ui-warn-fg:   #8a5600;
  --ui-warn-bd:   #ffe3b3;

  --ui-ok-bg:     #eefcf3;
  --ui-ok-fg:     #166534;
  --ui-ok-bd:     #c9f3d8;

  --ui-err-bg:    #fef2f2;
  --ui-err-fg:    #b91c1c;
  --ui-err-bd:    #f9caca;
}

.ui-status{
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.7rem .9rem;
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow);
  border:1px solid transparent;           /* base border so border-color works */
  font-size:.95rem; line-height:1.35;
  transition: opacity .15s ease, transform .15s ease;
}
.ui-status.is-hidden{ display:none; }
.ui-status__icon{
  display:inline-flex; width:1.1rem; height:1.1rem; flex: 0 0 1.1rem;
  align-items:center; justify-content:center; font-size:1.1rem; margin-top:.1rem;
}
.ui-status--info{ background:var(--ui-info-bg); color:var(--ui-info-fg); border-color:var(--ui-info-bd); }
.ui-status--warn{ background:var(--ui-warn-bg); color:var(--ui-warn-fg); border-color:var(--ui-warn-bd); }
.ui-status--ok  { background:var(--ui-ok-bg);   color:var(--ui-ok-fg);   border-color:var(--ui-ok-bd); }
.ui-status--err { background:var(--ui-err-bg);  color:var(--ui-err-fg);  border-color:var(--ui-err-bd); }

/* Force the status colors even if other libs (e.g., Bootstrap) try to override */
#statusMsg.ui-status--ok   { background:var(--ui-ok-bg)   !important; color:var(--ui-ok-fg)   !important; border-color:var(--ui-ok-bd)   !important; border-width:1px !important; border-style:solid !important; }
#statusMsg.ui-status--info { background:var(--ui-info-bg) !important; color:var(--ui-info-fg) !important; border-color:var(--ui-info-bd) !important; border-width:1px !important; border-style:solid !important; }
#statusMsg.ui-status--warn { background:var(--ui-warn-bg) !important; color:var(--ui-warn-fg) !important; border-color:var(--ui-warn-bd) !important; border-width:1px !important; border-style:solid !important; }
#statusMsg.ui-status--err  { background:var(--ui-err-bg)  !important; color:var(--ui-err-fg)  !important; border-color:var(--ui-err-bd)  !important; border-width:1px !important; border-style:solid !important; }

/* Button */
#continueBtn { position: relative; }
#continueBtn.is-loading .btn-text { opacity: 0; }
#continueBtn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:18px; height:18px;
  border:2px solid rgba(0,0,0,.2); border-top-color: rgba(0,0,0,.6);
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg) } }

/* spinner when verifying */
#statusMsg.is-loading::after{
  content:"";
  display:inline-block;
  width:1em; height:1em;
  margin-left:.5em;
  border:.15em solid rgba(0,0,0,.2);
  border-top-color: currentColor;
  border-radius:50%;
  animation:uiSpin 1s linear infinite;
  vertical-align:-.15em;
}
@keyframes uiSpin{ to { transform: rotate(360deg); } }