/* ---- Base Reset ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* ---- Theme (Light-Only Maroon-Gold + Purple Button) ---- */
:root{
  --bg1:#faf7f2;           /* ivory */
  --bg2:#f3ede2;
  --card:#ffffff;           /* solid white card */
  --text:#1a1a1a;
  --muted:#6b7280;
  --brand:#7b1e24;          /* maroon */
  --accent:#d4af37;         /* gold */
  --btn1:#7e22ce;           /* purple top */
  --btn2:#6d28d9;           /* purple bottom */
  --btn-ring:147 51 234;    /* purple focus ring */
  --radius:16px;
  --shadow:0 10px 35px rgba(0,0,0,.15);
  --ring:200 150 40;
}

/* ---- Background ---- */
body{
  background:
    radial-gradient(800px 600px at 10% 10%, rgba(123,30,36,.10), transparent 50%),
    radial-gradient(800px 700px at 90% 20%, rgba(212,175,55,.12), transparent 55%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  display:grid; place-items:center;
  padding:24px;
  min-height:100vh;
}

/* ---- Layout ---- */
.container{width:min(100%,1120px);margin-inline:auto;}
.card{
  width:min(100%,440px);
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(20px,4vw,32px);
  border:1px solid #e7e7e7;
  position:relative;
}

/* subtle corner glow */
.card::after{
  content:"";
  position:absolute;right:-40px;top:-40px;width:160px;height:160px;
  background:radial-gradient(closest-side,rgba(212,175,55,.28),transparent 65%);
  filter:blur(18px);pointer-events:none;
}

/* header */
.brand-header{display:grid;gap:8px;justify-items:center;text-align:center;margin-bottom:6px;}
.brand-logo{
  width:64px;height:64px;border-radius:50%;
  border:2px solid #eee;display:grid;place-items:center;background:#fff;
}
.brand-logo img{width:56px;height:56px;object-fit:contain;border-radius:50%;}
.brand-title{font-weight:800;letter-spacing:.3px;font-size:clamp(1.2rem,1rem+1vw,1.6rem);}
.brand-sub{color:var(--muted);font-size:.95rem;}

/* flash message */
.flash{
  margin-top:12px;
  background:#ffecec;
  border:1px solid #ffb3b3;
  color:#8c1c1c;
  padding:.75rem .9rem;
  border-radius:10px;
  font-weight:600;
}

/* form */
.form{margin-top:18px;display:grid;gap:16px;}
.field{display:grid;gap:6px;}
label{font-weight:600;letter-spacing:.2px;font-size:.95rem;}

.input-wrap{position:relative;}
.input{
  width:100%;
  padding:.9rem 1rem;
  border-radius:12px;
  border:1px solid #d0d0d0;
  background:#fff;
  color:#111;
  font-size:1rem;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.input::placeholder{color:#888;}
.input:focus{
  border-color:rgb(var(--ring));
  box-shadow:0 0 0 3px rgba(var(--ring)/.22);
}

/* show/hide password icon */
.eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  border:0;background:transparent;cursor:pointer;padding:6px;border-radius:8px;color:#555;
}
.eye:hover{color:var(--brand);}
.eye:focus-visible{outline:2px solid rgba(var(--ring)/.5);}

/* button */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  height:48px;width:100%;
  border:0;border-radius:12px;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,var(--btn1),var(--btn2));
  font-weight:700;letter-spacing:.3px;font-size:1rem;
  box-shadow:0 10px 24px rgba(111,67,200,.25);
  transition:transform .08s ease,filter .2s ease,box-shadow .2s ease;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(var(--btn-ring)/.3);}

/* spinner */
.spinner{
  width:18px;height:18px;border-radius:50%;
  border:2px solid #ffffff90;border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* foot links */
.meta{margin-top:16px;display:grid;gap:10px;justify-items:center;}
.meta a{text-decoration:none;font-weight:700;color:var(--brand);}
.meta a:hover{text-decoration:underline;}

/* responsive */
@media(max-width:480px){
  .card{padding:20px;}
  .brand-sub{font-size:.9rem;}
}

/* Disable dark mode completely */
@media(prefers-color-scheme:dark){
  body, .card, .input {
    background:#fff !important;
    color:#111 !important;
  }
}