/* --- Global resets / layout guards --- */
*,
*::before,
*::after{ box-sizing:border-box; }

:root{
  --primary:#0033A0;
  --primary-600:#0a2a86;
  --secondary:#00AEEF;
  --bg-1:#edf2f7;
  --bg-2:#e6eef7;
  --text:#1f2937;
  --muted:#6b7280;
  --card-bg:rgba(255,255,255,0.72);
  --glass-stroke:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.35));
  --ring:0 0 0 4px rgba(0,174,239,.18);
  --shadow:0 10px 30px rgba(0,51,160,.12), 0 2px 10px rgba(0,0,0,.04);
  --radius:16px;
}

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  display:grid;
  place-items:center;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, #f7fbff 0%, var(--bg-1) 60%, var(--bg-2) 100%);
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  animation: bgShift 22s ease-in-out infinite alternate;
}
@keyframes bgShift{ from{background-position:0% 50%} to{background-position:100% 50%} }

/* animated illustration container */
.scene{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85; }
.float-slow{ animation: floatY 9s ease-in-out infinite; }
.float-slow2{ animation: floatY2 12s ease-in-out infinite; }
.float-tilt{ transform-origin:center; animation: tilt 8s ease-in-out infinite; }
@keyframes floatY{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes floatY2{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(12px)} }
@keyframes tilt{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-1.8deg)} }

/* --- Card sizing/centering --- */
.login-wrap{ position:relative; z-index:1; width:min(92vw, 420px); margin:0 auto; }
.login-card{
  position:relative;
  padding:28px 24px 24px;
  border-radius:var(--radius);
  background:var(--card-bg);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  overflow:hidden;
}
.login-card::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(0,174,239,.7), rgba(0,51,160,.35), rgba(255,255,255,.25));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

/* --- Header --- */
.brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:10px; color:var(--primary); }
.brand i{ font-size:1.35rem; filter: drop-shadow(0 1px 0 rgba(255,255,255,.6)); }
.title{ font-weight:700; font-size:1.35rem; letter-spacing:.2px; margin:0; }
.subtitle{ margin:.2rem 0 1rem 2rem; font-size:.9rem; color:var(--muted); }

/* --- Fields (floating labels) --- */
.field{ position:relative; margin:16px 0; }

.input{
  width:100%;
  border:1px solid rgba(2,26,68,.09);
  border-radius:12px;
  background:linear-gradient(0deg, rgba(255,255,255,.86), rgba(255,255,255,.95));
  padding:14px 56px 14px 44px;           /* room for icon + toggle */
  line-height:1.2;
  font-size:15px;
  color:var(--text);
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
.input::placeholder{ color:transparent; } /* keep label pattern clean */

.input:focus{
  outline:none; border-color:rgba(0,174,239,.8);
  box-shadow:var(--ring);
  background:#fff;
}

.field .icon{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:#178ec2; opacity:.95; font-size:16px; pointer-events:none;
}

.label{
  position:absolute; left:44px; top:50%; transform:translateY(-50%);
  color:#7a88a5; pointer-events:none;
  transition: transform .15s ease, top .15s ease, font-size .15s ease, color .15s ease, background .15s ease;
  background:transparent; padding:0 .25rem; z-index:1;
}

/* float when filled or focused */
.input:focus + .label,
.input:not(:placeholder-shown) + .label{
  top:-8px;
  font-size:.72rem;
  color:#097fb1;
  background:rgba(255,255,255,.9);
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(255,255,255,.7);
}

/* Make autofill behave like "filled" so label floats */
input:-webkit-autofill + .label{
  top:-8px !important;
  font-size:.72rem !important;
  color:#097fb1 !important;
  background:rgba(255,255,255,.9) !important;
  border-radius:8px;
  box-shadow:0 0 0 3px rgba(255,255,255,.7);
}

/* Password toggle spacing */
.toggle-pass{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:none; background:transparent; cursor:pointer;
  color:#5a6b8a; padding:6px 8px; border-radius:8px;
}
.toggle-pass:hover{ background:rgba(0,0,0,.05); color:#1f355a; }

/* If you added class="field has-toggle" in HTML, this perfects spacing */
.field.has-toggle .input{ padding-right:72px; }

/* --- Row / links --- */
.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:.5rem; margin:8px 0 14px; font-size:.92rem;
}
.row a{ color:var(--primary); text-decoration:none; }
.row a:hover{ color:var(--secondary); }

/* --- Buttons --- */
.btn{
  width:100%;
  border:none; cursor:pointer;
  border-radius:12px; padding:14px 16px;
  color:#fff; background:linear-gradient(135deg, var(--primary), #2450b2);
  box-shadow:0 8px 18px rgba(0,51,160,.25);
  font-weight:600; letter-spacing:.2px;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, opacity .2s;
}
.btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 12px 26px rgba(0,51,160,.28); }
.btn:active{ transform:translateY(0); }
.btn[disabled]{ opacity:.7; cursor:not-allowed; }

.legal{ margin-top:12px; font-size:.8rem; color:#6c7280; text-align:center; }

/* --- Help modal --- */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:3; background:rgba(7,18,44,.32); backdrop-filter:blur(6px); }
.modal.open{ display:grid; }
.modal-card{
  width:min(92vw, 520px); background:#fff; border-radius:16px;
  box-shadow:var(--shadow); padding:20px 18px 18px; position:relative; animation:pop .2s ease;
}
@keyframes pop{ from{transform:scale(.98); opacity:0} to{transform:scale(1); opacity:1} }
.modal-close{ position:absolute; right:10px; top:10px; border:none; background:transparent; font-size:20px; cursor:pointer; color:#374151; }
.modal h2{ margin:0 0 6px; color:var(--primary); }
.modal ul{ margin:8px 0 0 18px; color:#4b5563; }

/* --- Toast --- */
.toast{
  position:fixed; right:18px; bottom:18px; z-index:4;
  background:#0b3a7a; color:#fff; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:10px; font-size:.9rem;
  transform:translateY(20px); opacity:0; pointer-events:none; transition:.2s;
}
.toast.show{ transform:translateY(0); opacity:1; pointer-events:auto; }

/* Reduce Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}