:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --ink:#0f1b2d;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#2a64ea;
  --radius:16px;
  --shadow:0 14px 40px rgba(15,27,45,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Background */
.auth-wrap{
  min-height:100vh;
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 78% 6%, rgba(42,100,234,.08), transparent),
    radial-gradient(900px 540px at 0% 100%, rgba(255,99,132,.06), transparent),
    linear-gradient(180deg, #f9fbff 0%, #f3f6fb 100%);
  padding:24px;
}

/* Card */
.auth-card{
  width:100%; max-width:460px;
  background:var(--card);
  border:1px solid #eef1f6;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px 28px 24px;
}

/* Brand */
.brand{ text-align:center; margin-bottom:4px }
.brand-top{
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.logo{ height:45px; width:auto; display:block }
.brand-top h1{
  margin:0; font-size:40px; font-weight:800; letter-spacing:.1px; color:#0f1b2d;
}
.tagline{
  margin-top:0px; color:var(--muted); font-size:13px;
}

/* Title */
.form-title{font-size:24px; margin:18px 0 10px; font-weight:700}

/* Form fields */
.form{display:grid; gap:12px}
.field{position:relative}
.field input{
  width:100%; height:48px; padding:0 12px 0 44px;
  border:1px solid var(--line); border-radius:12px; background:#fff; font-size:15px; outline:0;
}
.field input::placeholder{color:#9aa6b2}
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(42,100,234,.14) }
.icon{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#8aa1c5 }

/* Show/Hide */
.peek{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#5b6c8e; font-weight:600;
  padding:6px 8px; border-radius:8px; cursor:pointer;
}
.peek:hover{ background:#eef3ff }

/* Button */
.btn-primary{
  width:100%; height:52px; border:0; border-radius:12px;
  font-weight:700; font-size:16px; cursor:pointer;
  background:#2a64ea; color:#fff; margin-top:8px;
  transition:transform .05s ease, box-shadow .2s ease;
}
.btn-primary:hover{ box-shadow:0 6px 16px rgba(42,100,234,.28) }
.btn-primary:active{ transform:scale(.995) }

/* Links */
.meta{ text-align:center; margin-top:10px }
.muted{ color:#2a64ea; text-decoration:none; font-weight:600 }
.muted:hover{ color:#1f54d6; text-decoration:underline }

/* Overlay (optional) */
.overlay{
  width:100%; height:100%; position:fixed; inset:0; z-index:30;
  background:#fff; display:grid; place-items:center; opacity:.9;
}

/* Tidy up the jQuery UI dialog so it looks like a small toast */
.ui-dialog, .ui-widget.ui-widget-content{
  border-radius:12px !important;
  border:1px solid #e6eefb !important;
  box-shadow:0 10px 24px rgba(15,27,45,.18) !important;
}
.ui-dialog .ui-dialog-titlebar{ display:none } /* title bar hidden */
#loading{ padding:0 } /* content padding handled by JS */

/* Responsive */
@media (max-width: 480px){
  body{ font-size:15px }
  .auth-wrap{ padding:16px }
  .auth-card{ padding:18px; border-radius:12px }
  .brand-top h1{ font-size:40px }
  .tagline{ font-size:12px }
  .form-title{ font-size:16px; margin:14px 0 8px }
  .field input{ height:46px; padding-left:40px; font-size:15px }
  .btn-primary{ height:50px; font-size:16px }
}
/* Compact toast dialog */
.ui-dialog, 
.ui-widget.ui-widget-content {
  border-radius: 10px !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.15) !important;
  padding: 0 !important;
}

.ui-dialog .ui-dialog-content {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

#loading {
  padding: 0;
}

/* Remove min-height and make size auto */
.ui-dialog-content {
  min-height: unset !important;
  height: auto !important;
}

/* Hide default title bar */
.ui-dialog-titlebar {
  display: none !important;
}