:root{
  --ucup-primary: #0b1b6a;
  --ucup-accent:  #2f6bff;

  --ucup-text:  #0f172a;
  --ucup-muted: #64748b;

  --ucup-border: rgba(15,23,42,.12);
  --ucup-card: #ffffff;

  --ucup-danger: #be123c;

  --ucup-radius: 14px;
  --ucup-shadow: 0 16px 55px rgba(2,6,23,.16);
}

/* --- Soft animations --- */
@keyframes ucupFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ucupPopIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Soft overlay (not black) */
.ucup-overlay{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;

  background: rgba(240, 244, 255, .78);
  backdrop-filter: blur(10px);

  animation: ucupFadeIn .16s ease-out;
}

/* Slim, screen-fit modal */
.ucup-modal{
  width: min(480px, 92vw);
  background: var(--ucup-card);
  border: 1px solid var(--ucup-border);
  border-radius: var(--ucup-radius);
  box-shadow: var(--ucup-shadow);
  overflow: hidden;

  animation: ucupPopIn .18s ease-out;
}

/* Header */
.ucup-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: linear-gradient(180deg, rgba(11,27,106,.06), rgba(11,27,106,0));
}

.ucup-modal-header h2{
  margin:0;
  font-size: 15px;
  font-weight: 850;
  color: var(--ucup-text);
}

.ucup-close{
  text-decoration:none;
  color: var(--ucup-muted);
  font-size: 20px;
  line-height: 20px;
  padding: 6px 9px;
  border-radius: 10px;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.ucup-close:hover{
  background: rgba(15,23,42,.06);
  color: var(--ucup-text);
  transform: translateY(-1px);
}

.ucup-body{
  padding: 12px 14px 14px;
}

/* Tabs */
.ucup-tabs{
  display:flex;
  gap:8px;
  flex-wrap: wrap;
  margin: 2px 0 12px;
}
.ucup-tabs a{
  text-decoration:none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  color: var(--ucup-text);
  font-weight: 750;
  font-size: 12px;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.ucup-tabs a:hover{ transform: translateY(-1px); }
.ucup-tabs a.active{
  border-color: rgba(11,27,106,.26);
  background: rgba(11,27,106,.06);
}

/* Alerts (error bar inside popup) */
.ucup-alert{
  margin: 10px 14px 0;
  padding: 9px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.ucup-alert-error{
  border-color: rgba(190,18,60,.18);
  background: rgba(190,18,60,.06);
  color: var(--ucup-danger);
}

/* Form */
.ucup-form{ display:block; }

.ucup-field{ margin-top: 10px; }

.ucup-label{
  font-size: 12px;
  font-weight: 750;
  color: var(--ucup-text);
}

/* Inputs: compact & clean */
.ucup-input{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  transition: box-shadow .12s ease, border-color .12s ease, transform .12s ease;
}
.ucup-input:focus-within{
  border-color: rgba(47,107,255,.45);
  box-shadow: 0 0 0 3px rgba(47,107,255,.10);
  transform: translateY(-1px);
}

.ucup-input svg{
  width: 16px;
  height: 16px;
  opacity: .75;
  color: rgba(11,27,106,.9);
  flex: 0 0 auto;
}

.ucup-input input{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: var(--ucup-text);
  font-size: 13px;
  line-height: 1.2;
}

/* Password eye */
.ucup-toggle{
  border:0;
  background: transparent;
  cursor:pointer;
  padding: 5px 7px;
  border-radius: 10px;
  transition: background .12s ease, transform .12s ease;
}
.ucup-toggle:hover{ background: rgba(15,23,42,.06); transform: translateY(-1px); }
.ucup-toggle svg{ width: 16px; height: 16px; opacity: .75; }

/* Button */
.ucup-action{ margin-top: 12px; }

.ucup-btn{
  width:100%;
  padding: 10px 12px;
  border-radius: 12px;
  border:0;
  cursor:pointer;
  font-weight: 850;
  font-size: 13px;
  color:#fff;
  background: linear-gradient(135deg, var(--ucup-primary), #1433b8);
  box-shadow: 0 10px 22px rgba(11,27,106,.16);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.ucup-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(11,27,106,.18);
}
.ucup-btn:active{ transform: translateY(0); }
.ucup-btn[disabled]{ opacity:.7; cursor:not-allowed; transform:none; }

/* Toast: soft */
.ucup-toast{
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1000000;
  padding: 10px 12px;
  border-radius: 14px;
  max-width: 360px;
  font-size: 12px;
  font-weight: 650;
  color: var(--ucup-text);
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 14px 40px rgba(2,6,23,.12);
  animation: ucupPopIn .18s ease-out;
}

/* Logout card */
.ucup-logout-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  box-shadow: 0 12px 30px rgba(2,6,23,.08);
  margin: 14px 0;
}
.ucup-logout-title{ font-weight: 850; color: var(--ucup-text); }
.ucup-logout-sub{ font-size: 12.5px; color: var(--ucup-muted); margin-top: 2px; }
.ucup-btn.ucup-btn-ghost{
  width:auto;
  padding: 8px 11px;
  font-size: 13px;
  color: var(--ucup-primary);
  background: rgba(11,27,106,.06);
  border: 1px solid rgba(11,27,106,.18);
  box-shadow: none;
  transition: transform .12s ease, background .12s ease;
}
.ucup-btn.ucup-btn-ghost:hover{
  transform: translateY(-1px);
  background: rgba(11,27,106,.10);
}