:root{
  --canvas-bg: #ffffff;

  --jj-red: #e30000;
  --footer-red: #e30000;
  --footer-blue: #0b2b66;

  --muted: #555;
  --border: #cfcfcf;

  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --radius: 16px;

  --btn-bg: #dbeeff;
  --btn-bg-hover: #cfe6ff;
  --btn-border: #6f93b7;
  --btn-shadow: 0 2px 0 rgba(0,0,0,.25);

  --btn-text: #000;
  --btn-text-accent: #0b66c3; /* for Recover Password button */

  --focus: 0 0 0 3px rgba(40,120,255,.25);
  --font: Arial, Helvetica, sans-serif;

  --maxw: 980px;

  /* animated footer logo tuning (no skew) */
  --logo-scale: 1.12;
  --logo-shift-x: 0px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  font-family: var(--font);
  background: linear-gradient(#9f9f9f, #f4f4f4);
  min-height: 100vh;
  padding: 0 14px 24px;
  display: grid;
  place-items: start center;
}

.app{
  width: min(var(--maxw), 100%);
  min-height: min(720px, calc(100vh - 24px));
  background: var(--canvas-bg);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: grid;
  grid-template-rows: 96px 1fr 96px;
}

/* HEADER */
.topbar{ background: var(--jj-red); }
.topbar-inner{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  gap: 16px;
}

/* header PNGs (2x assets rendered smaller) */
.brand-img{
  display: block;
  height: 44px;
  width: auto;
  object-fit: contain;
  max-width: 60%;
}
.brand-img-right{ margin-left: auto; }

/* MAIN */
.content{
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.login-wrap{
  width: min(520px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
}

.login-title{
  margin: 0 0 6px 0;
  font-size: 28px;
  letter-spacing: 1px;
  color: #666;
  font-weight: 500;
}

.card{
  width: min(520px, 100%);
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  padding: 18px 20px 16px;
}

.grid{
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px 12px;
  align-items: center;
}

label{
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
}

input[type="text"],
input[type="password"]{
  width: 100%;
  height: 26px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 2px;
  outline: none;
  font-size: 14px;
}
input[type="text"]:focus,
input[type="password"]:focus{
  box-shadow: var(--focus);
  border-color: #7aa7ff;
}

/* message row (acts like colspan=2) */
.message{
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid #e1b1b1;
  background: #ffecec;
  color: #8a1f1f;
  border-radius: 4px;
  font-size: 13px;
}

.actions{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  padding-left: 132px;
}

/* Default buttons: black text (and fix iOS/Safari) */
.btn,
.btn:visited,
.btn:active,
.btn:focus{
  color: var(--btn-text) !important;
  -webkit-text-fill-color: var(--btn-text);
}

.btn{
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  box-shadow: var(--btn-shadow);
}
.btn:hover{ background: var(--btn-bg-hover); }
.btn:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.22); }

.btn-login{
  width: clamp(130px, 45%, 190px);
}

.remember{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  user-select: none;
}
.remember input{ width: 14px; height: 14px; }

.recover-wrap{
  margin-top: 10px;
  padding-left: 132px;
}

/* FOOTER */
.footer{ background: var(--footer-red); color: #fff; }

.footer-inner{
  height: 100%;
  display: grid;
  grid-template-columns: 160px 1fr 220px;
  align-items: center;
  gap: 10px;
}

/* blue block crop viewport */
.footer-left{
  height: 100%;
  background: var(--footer-blue);
  position: relative;
  overflow: hidden;
}

.footer-anim{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  display: block;
  transform: translate(calc(-50% + var(--logo-shift-x)), -50%) scale(var(--logo-scale));
  transform-origin: center;
}

.footer-mid{
  padding: 0 18px;
  font-size: 13px;
  line-height: 1.25;
}

.footer-right{
  padding: 0 18px 0 0;
  text-align: right;
  font-size: 13px;
  line-height: 1.25;
}

.footer-small{ font-size: 12px; opacity: .95; }
.sep{ padding: 0 6px; opacity: .9; }

/* footer link styling */
.footer-link{
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .95;
}
.footer-link:hover{ opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .app{
    grid-template-rows: 78px 1fr 140px;
    min-height: calc(100vh - 24px);
  }

  .topbar-inner{ padding: 0 16px; }
  .brand-img{ height: 32px; max-width: 70%; }

  .login-title{ font-size: 24px; }

  .footer-inner{
    grid-template-columns: 110px 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .footer-left{ grid-row: 1 / span 2; }

  .footer-right{
    text-align: left;
    padding: 0 18px;
  }
}

/* Mobile: bigger header, hide animated logo, auto-height footer */
@media (max-width: 520px){
  body#login_v2{
    padding: 0 !important;
    margin: 0;
    background: var(--jj-red); /* bg red for mobile */
  }

  .app{
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    border-radius: 0;
    grid-template-rows: 88px 1fr auto;
    box-shadow: none;
    margin: 0;
  }

  .topbar-inner{
    padding: 0 16px;
  }

  .brand-img{
    height: 40px;
    max-width: 75%;
  }

  .card{ padding: 16px 16px 14px; }

  .grid{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  label{ margin-top: 6px; }

  .actions,
  .recover-wrap{
    padding-left: 0;
  }

  input[type="text"],
  input[type="password"]{
    height: 40px;
    font-size: 16px;
    border-radius: 6px;
  }

  .btn{
    height: 42px;
    font-size: 15px;
    border-radius: 8px;
  }

  .btn-login{ width: clamp(140px, 55%, 240px); }
  #recoverBtn{ 
    width: 100%; 
    color: var(--btn-text-accent) !important;
    -webkit-text-fill-color: var(--btn-text-accent);
  }

  /* Hide animated logo on mobile */
  .footer-left{ display: none; }

  .footer-inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 6px;
    align-items: start;
    padding: 10px 0 12px;
  }

  .footer-mid{
    padding: 0 14px;
    font-size: 12px;
  }

  .footer-right{
    padding: 0 14px;
    text-align: left;
    font-size: 12px;
  }
}

/* ================================
   Recover Password page section 
   (shares styles with login page, but some overrides and additions)
   ================================ */

/* Make the card a touch narrower on desktop like the original */

.page-recover .login-wrap{ width: min(560px, 100%); }
.page-recover .card{ width: min(560px, 100%); }

.helper{
  margin: 0 0 10px 0;
  color: #666;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
}

/* Success area */
.success{
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #b6d7b6;
  background: #eef9ee;
  color: #1f6b1f;
  border-radius: 4px;
  font-size: 13px;
}

/* keep form message at bottom consistent */
.message{ margin-top: 12px; }

/* Full-width button helper */
.btn-wide{ width: 100%; }

/* Align submit/back buttons under inputs on desktop */
.actions-recover{
  margin-top: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding-left: 132px; /* align with inputs on desktop */
  flex-wrap: wrap;
}

@media (max-width: 520px){
  .helper{ font-size: 14px; }
  .actions-recover{ padding-left: 0; }
}