/* ==========  COLOURS + GLASS VARIABLES  ========== */
:root{
  --glass-bg:       rgba(255,255,255,0.12);
  --glass-border:   rgba(255,255,255,0.35);
  --accent-brown:   #6d4619;
  --page-bg:        #c79b74;
}

/* ==========  RESET / BASE  ========== */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',sans-serif;
  background:var(--page-bg) url("../imgs/loginimgs/86595D79-D75F-499B-8622-C83B06BE98A6.PNG") center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* ==========  BLURRED DECORATIVE BLOBS  ========== */
.bg-art{
  position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
     radial-gradient(900px at 15% 25%, rgba(255,255,255,.35) 0%,transparent 70%),
     radial-gradient(800px at 85% 30%, rgba(255,255,255,.25) 0%,transparent 65%),
     radial-gradient(900px at 50% 80%, rgba(255,255,255,.30) 0%,transparent 70%);
  filter:blur(120px) saturate(120%);
}

/* ==========  GENERAL GLASS MIXIN  ========== */
.glass{
  background:var(--glass-bg);
  backdrop-filter:blur(25px) saturate(180%);
  -webkit-backdrop-filter:blur(25px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:
    0 1px 3px rgba(255,255,255,.4) inset,
    0 0 12px rgba(255,255,255,.25) inset,
    0 12px 26px rgba(0,0,0,.25);
}

/* ==========  LOGIN CARD  ========== */
.login-container{
  width:92vw;max-width:380px;
  padding:40px 34px 46px;
  border-radius:28px;
  display:flex;justify-content:center;
}

/* ==========  FORM  ========== */
.login-form{
  width:100%;display:flex;flex-direction:column;gap:18px;
}
.login-form h2{
  text-align:center;color:var(--accent-brown);margin-bottom:10px;
}

/* Inputs */
.login-form input{
  padding:14px 16px;font-size:1rem;border:none;border-radius:16px;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(8px);
  color:#37210f;
  box-shadow:0 2px 6px rgba(0,0,0,.15) inset;
}

/* Button */
.login-form button{
  padding:14px 16px;font-size:1rem;font-weight:600;
  color:#f0e8e1;
  background:var(--accent-brown);
  border:none;border-radius:18px;
  cursor:pointer;transition:background .3s,transform .2s;
}
.login-form button:hover{
  background:#845829;
  transform:translateY(-1px);
}

/* ==========  MOBILE TWEAKS  ========== */
@media(max-width:420px){
  .login-container{padding:32px 26px}
  .login-form input,.login-form button{font-size:.95rem}
}