@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap');

/* =====================================================================
   DUNGON RESIDENCE HALL — light, minimalist palette pulled directly
   from the logo: the roof's deep forest green, the "DUNGON" wordmark's
   terracotta orange, and the "N"/tree-trunk's maroon (used as the
   accent's natural darker shade) — set against a light ivory page.
   Every other tone on the site is a tint or shade of one of these,
   kept as CSS variables below so the whole site (and every page that
   still references the old --brand-* names) stays on one consistent
   system. Old variable names are kept as aliases so nothing else has
   to change.
   ===================================================================== */
:root{
  --ink:#26331f;         /* logo roof green — primary text, dark surfaces (sidebar, headers) */
  --ink-soft:#5c6650;    /* muted green-gray — secondary/muted text, subtle icons */
  --paper:#fbf9f4;       /* light ivory page background */
  --paper-dim:#ece7d9;   /* card borders, dividers, subtle fills */
  --white:#ffffff;       /* card surfaces */
  --accent:#b1552c;      /* logo "DUNGON" orange — links, buttons, highlights */
  --accent-dark:#7c2e1c; /* logo "N"/trunk maroon — accent hover/active, strong emphasis */
  --accent-soft:#f5e2d2; /* accent tint — badges, highlighted fields */

  /* aliases for existing markup/inline styles across the site */
  --brand-green:var(--ink);
  --brand-green-dark:var(--ink);
  --brand-sage:var(--accent);
  --brand-sand:var(--paper-dim);
  --brand-orange:var(--accent);
  --brand-orange-deep:var(--accent);
  --brand-maroon:var(--accent-dark);
  --brand-cream:var(--paper);

  --sidebar-bg:var(--ink);
  --gold:var(--paper-dim);
  --green-heading:var(--ink);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--brand-cream); font-family:'Inter',"Segoe UI","Helvetica Neue",Arial,sans-serif; }
body{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

:focus-visible{ outline:2px solid var(--brand-orange-deep); outline-offset:2px; }

.portal-title, .landing-subtitle{
  font-family:'Sora','Inter',"Segoe UI",sans-serif;
  letter-spacing:-.01em;
}

.portal-card{
  width:100%;
  max-width:620px;
  background:#ffffff;
  border-radius:8px;
  animation:fadeInUp .45s ease both;
  overflow:hidden;
  box-shadow:0 16px 40px rgba(38,51,31,.22);
}

.portal-top{
  background:var(--brand-green);
  background-image:linear-gradient(135deg, var(--brand-green) 0%, #26331f 60%, var(--brand-maroon) 140%);
  height:130px;
}

.portal-bottom{
  background:var(--brand-cream);
  padding:0 40px 40px;
  text-align:center;
}

.portal-logo-wrap{
  width:180px;
  height:150px;
  border-radius:20px;
  background:#ffffff;
  border:2px solid var(--brand-sand);
  margin:-70px auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(38,51,31,.22);
  padding:10px;
}
.portal-logo-wrap img{ width:100%; height:100%; object-fit:contain; }

.portal-title{
  color:var(--green-heading);
  font-size:24px;
  font-weight:800;
  margin:0 0 4px;
}
.portal-subtitle{
  color:var(--brand-orange-deep);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  margin:0 0 22px;
}

.portal-form{ text-align:left; max-width:340px; margin:0 auto; }
.portal-field{ margin-bottom:18px; }
.portal-field label{
  display:block;
  font-size:14px;
  font-weight:700;
  color:var(--green-heading);
  margin-bottom:6px;
}
.portal-field input{
  width:100%;
  padding:12px 16px;
  border:1.5px solid #fbf9f4;
  border-radius:22px;
  font-size:14px;
  font-family:inherit;
  background:#ffffff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.portal-field input:focus{ outline:none; border-color:var(--brand-orange-deep); box-shadow:0 0 0 3px rgba(177,85,44,.15); }

/* Show/hide password toggle */
.password-wrap{ position:relative; }
.password-wrap input{ padding-right:44px; }
.password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:none;
  padding:0;
  margin:0;
  cursor:pointer;
  color:var(--brand-sage);
  border-radius:50%;
  transition:color .15s ease, background-color .15s ease;
}
.password-toggle:hover{ color:var(--brand-orange-deep); background:rgba(177,85,44,.1); }
.password-toggle:focus-visible{ outline:2px solid var(--brand-orange-deep); outline-offset:1px; }
.password-toggle svg{ width:20px; height:20px; display:block; }
.password-toggle .icon-eye-off{ display:none; }
.password-toggle.is-showing .icon-eye{ display:none; }
.password-toggle.is-showing .icon-eye-off{ display:block; }

.portal-submit{
  width:100%;
  background:var(--brand-orange-deep);
  color:#ffffff;
  border:none;
  border-radius:22px;
  padding:12px 16px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  margin-top:6px;
  transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(177,85,44,.3);
}
.portal-submit:hover{ background:#7c2e1c; transform:translateY(-1px); box-shadow:0 6px 16px rgba(177,85,44,.38); }
.portal-submit:active{ transform:scale(.97); }

.portal-error{
  background:#fbf9f4;
  border:1px solid #ece7d9;
  color:var(--brand-maroon);
  font-size:13px;
  padding:8px 12px;
  border-radius:6px;
  margin-bottom:16px;
  max-width:340px;
  margin-left:auto;
  margin-right:auto;
  animation:fadeInUp .3s ease both;
}

.portal-links{
  margin-top:18px;
  font-size:12.5px;
}
.portal-links a{ color:var(--brand-orange-deep); font-weight:600; transition:opacity .15s ease; }
.portal-links a:hover{ opacity:.7; }

/* Landing page */
.landing-subtitle{
  color:var(--green-heading);
  font-size:19px;
  font-weight:700;
  margin:0 0 4px;
}
.landing-tagline{
  color:var(--brand-sage);
  font-size:12px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  margin:0 0 26px;
}
.landing-buttons{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding-bottom:10px;
}
.btn-pill{
  display:inline-block;
  width:220px;
  background:var(--brand-orange-deep);
  color:#ffffff;
  border:none;
  border-radius:22px;
  padding:13px 16px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  transition:background-color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(177,85,44,.3);
}
.btn-pill:hover{ background:#7c2e1c; transform:translateY(-1px); box-shadow:0 6px 16px rgba(177,85,44,.38); }
.btn-pill:active{ transform:scale(.97); }
.btn-pill.secondary{
  background:var(--brand-green);
  box-shadow:0 4px 12px rgba(38,51,31,.28);
}
.btn-pill.secondary:hover{ background:#26331f; }
.btn-pill.tertiary{
  background:var(--brand-sage);
  box-shadow:0 4px 12px rgba(177,85,44,.3);
}
.btn-pill.tertiary:hover{ background:#7c2e1c; }

@media (max-width:480px){
  .portal-top{ height:100px; }
  .portal-logo-wrap{ width:150px; height:120px; margin-top:-56px; }
  .portal-bottom{ padding:0 20px 32px; }
}

/* =====================================================================
   TOAST — same look everywhere on the site: a small dark bar that pops
   up bottom-center and fades on its own. Used here for a failed login,
   a signup/reset validation error, etc. — anything that's a quick
   heads-up rather than a whole new page state.
   ===================================================================== */
.toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:var(--paper);
  padding:12px 22px;
  border-radius:8px;
  font-size:14px;
  max-width:90vw;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.4);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  z-index:50;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-6px);
}