/* Compact login of the phone app address (js/view-app-login.js). Measurements of the original's app login
   (docs/app-tinhtienso-login-do-dac-2026-10-09.txt, 375px): navy card rgba(16,24,46,.9) 315px wide, radius 4; inputs
   with a 1px gold line; yellow "Đăng nhập"; blue trial button; gold underlined links; italic support link under the
   card. The background is our own: CSS gradients and gold ribbons, no picture. Phone rules: inputs 16px (iOS does not
   zoom), every control at least 40px high, the page scrolls only when the screen is shorter than the card. */
.app-login {
  --al-gold: #f8d114;
  --al-navy: #22356b;
  --al-blue: #146db1;
  position: relative; display: flex; min-height: 100vh; min-height: 100dvh; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 0%, #d4202a 0%, rgba(212, 32, 42, 0) 60%),
    radial-gradient(90% 60% at 100% 100%, #c11a23 0%, rgba(193, 26, 35, 0) 65%),
    linear-gradient(170deg, #a5141b 0%, #7c0c12 55%, #5c070c 100%);
  color: #f8f8f8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body:has(.app-login) { background: #7c0c12; }

/* gold ribbons: three wide rings, cut by the screen edges */
.app-login-deco { position: absolute; inset: 0; pointer-events: none; }
.app-login-deco i { position: absolute; display: block; border-radius: 50%; }
.app-login-deco .is-a {
  top: -38vh; left: -30vw; width: 120vw; height: 70vh;
  border: 10px solid rgba(248, 209, 20, .55); border-left-color: transparent; border-bottom-color: transparent;
  box-shadow: 0 0 0 18px rgba(20, 109, 177, .35), inset 0 0 40px rgba(255, 210, 120, .25);
  transform: rotate(-12deg);
}
.app-login-deco .is-b {
  bottom: -42vh; right: -40vw; width: 130vw; height: 72vh;
  border: 9px solid rgba(248, 209, 20, .5); border-right-color: transparent; border-bottom-color: transparent;
  box-shadow: 0 0 0 16px rgba(20, 109, 177, .3);
  transform: rotate(-8deg);
}
.app-login-deco .is-c {
  bottom: 9vh; left: -18vw; width: 46vw; height: 46vw; max-width: 260px; max-height: 260px;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
  border: 2px solid rgba(248, 209, 20, .3);
}

.app-login-main {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.app-login-card {
  width: 315px; max-width: 100%; padding: 22px 20px 14px; border-radius: 4px;
  background: rgba(16, 24, 46, .9); box-shadow: 0 18px 48px rgba(40, 0, 4, .45);
}
.app-login-brand { display: flex; justify-content: center; margin: 0 0 26px; font-size: 0; line-height: 0; }
.app-login-logo { display: block; width: 160px; max-width: 100%; height: auto; aspect-ratio: 174 / 53; }

.app-login-form { display: flex; flex-direction: column; gap: 0; margin: 0; }
.app-login-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app-login .app-login-input {
  display: block; width: 100%; height: 44px; margin: 0 0 16px; padding: 8px 12px;
  border: 1px solid var(--al-gold); border-radius: 4px; background: transparent; color: #fff;
  font: inherit; font-size: 16px; line-height: 24px; box-shadow: none; -webkit-appearance: none; appearance: none;
}
.app-login .app-login-input::placeholder { color: rgb(156, 163, 175); opacity: 1; }
.app-login .app-login-input:focus { outline: none; border-color: #ffe56a; box-shadow: 0 0 0 3px rgba(248, 209, 20, .25); }
/* the browser's saved-password fill must keep the dark field */
.app-login .app-login-input:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 40px #18213d inset; box-shadow: 0 0 0 40px #18213d inset;
}
.app-login-pass { position: relative; }
.app-login-pass .app-login-input { padding-right: 46px; }
.app-login-eye {
  position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; background: none; color: rgba(248, 209, 20, .85); cursor: pointer;
}
.app-login-eye .ic { width: 18px; height: 18px; }
.app-login-msg { min-height: 0; margin: -6px 0 10px; color: #ffb4b4; font-size: 13px; line-height: 18px; text-align: center; }
.app-login-msg:empty { display: none; }

.app-login-submit, .app-login-trial {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 10px; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; -webkit-tap-highlight-color: transparent;
}
.app-login-submit { height: 44px; margin: 4px 0 18px; border-radius: 4px; background: var(--al-gold); color: var(--al-navy); font-weight: 600; }
.app-login-submit:hover { background: #ffdd3a; }
.app-login-trial { min-height: 42px; border-radius: 6px; background: var(--al-blue); color: #f8f8f8; text-transform: uppercase; line-height: 18px; }
.app-login-trial:hover { background: #1879c4; }
.app-login-submit:disabled, .app-login-trial:disabled { opacity: .7; cursor: default; }

.app-login-links { display: flex; justify-content: space-around; gap: 8px; margin-top: 6px; }
.app-login-link {
  min-height: 40px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  color: var(--al-gold); font: inherit; font-size: 12px; line-height: 16px; text-decoration: underline; text-underline-offset: 2px;
}
.app-login-link:hover { color: #ffe56a; }

.app-login-help {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 8px; padding: 0 12px;
  color: #f8f8f8; font-size: 14px; font-style: italic; text-decoration: none;
}
.app-login-help .ic { width: 20px; height: 20px; color: var(--al-gold); font-style: normal; }
.app-login-help:hover { color: #fff; text-decoration: underline; }
.app-login-helpbox {
  width: 315px; max-width: 100%; margin-top: 4px; padding: 12px 14px; border: 1px solid rgba(248, 209, 20, .45); border-radius: 4px;
  background: rgba(16, 24, 46, .88); font-size: 14px; line-height: 20px;
}
.app-login-helpbox p { margin: 0; }
.app-login-helplinks { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px !important; }
.app-login-helplinks a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--al-gold); }
.app-login-helplinks .ic { width: 16px; height: 16px; }

/* narrow phones (320px): the card keeps 16px from the edges */
@media (max-width: 359.98px) {
  .app-login-card { padding: 20px 16px 12px; }
  .app-login-link { font-size: 11px; }
}
/* desktop: the same card, a little larger, centred */
@media (min-width: 768px) {
  .app-login-card { width: 360px; padding: 28px 28px 18px; }
  .app-login-logo { width: 180px; }
  .app-login-helpbox { width: 360px; }
}