/* Sign-in screen: same dark blue-black tone as the landing page. Loaded after style.css, only touches .auth. */
body:has(.auth) { background: #060a14; }
.auth { max-width: 420px; margin: 5vh auto 0; padding: 0 16px 40px; }
.auth-brand { display: block; margin: 0 0 36px; }
.auth-brand img { display: block; height: 24px; width: auto; }
.auth-title { margin: 0 0 22px; font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em; color: #fff; text-align: left; }
.auth .card { background: transparent; border: 0; box-shadow: none; padding: 0; }
.auth label { display: grid; gap: 8px; color: #93a0c4; font-size: .86rem; font-weight: 600; }
.auth input { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid #1f2a52; background: #0b1226; color: #eaf0ff; font-size: .95rem; }
.auth input::placeholder { color: #566190; }
.auth input:focus { outline: 2px solid #4f6fd8; outline-offset: 1px; border-color: #4f6fd8; }
.auth .pw { position: relative; display: block; }
.auth .pw input { padding-right: 64px; }
.auth .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: #8da6ec; font-size: .8rem; font-weight: 700; cursor: pointer; }
.auth .eye:hover { background: #111a38; }
.auth button.primary { width: 100%; padding: 13px; border-radius: 10px; background: #4f6fd8; color: #fff; border: 0; font-weight: 700; font-size: .95rem; cursor: pointer; }
.auth button.primary:hover { background: #4263c2; }
.auth .tabs { margin-bottom: 18px; }
.auth-foot { margin-top: 28px; font-size: .86rem; }
.auth-foot a { color: #8da6ec; }
@media (max-width: 720px) { .auth { margin-top: 3vh; } .auth-title { font-size: 1.2rem; } .auth-brand { margin-bottom: 26px; } }

/* smaller everything + close button */
.auth { max-width: 360px; margin-top: 3vh; }
.auth-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.auth-brand { margin: 0; } .auth-brand img { height: 18px; }
.auth-close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #131b36; color: #cfd8f5; font-size: 1.2rem; line-height: 1; }
.auth-close:hover { background: #1b2650; color: #fff; }
.auth-title { font-size: 1.05rem; margin-bottom: 16px; }
.auth label { gap: 6px; font-size: .76rem; }
.auth input { padding: 9px 11px; font-size: .85rem; border-radius: 8px; }
.auth .pw input { padding-right: 54px; }
.auth .eye { font-size: .72rem; padding: 4px 8px; }
.auth button.primary { padding: 10px; font-size: .86rem; border-radius: 8px; }
.auth .stack { gap: 12px; }
.auth-foot { font-size: .78rem; margin-top: 20px; }

/* phones: full-height screen, form spread down, links pinned to the bottom */
@media (max-width: 720px) {
  .auth { max-width: none; margin: 0; padding: 20px 22px 26px; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  .auth-top { margin-bottom: 0; }
  .auth .card { margin-top: 13vh; }
  .auth-title { font-size: 1.25rem; margin-bottom: 26px; }
  .auth .stack { gap: 20px; }
  .auth label { font-size: .84rem; gap: 8px; }
  .auth input { padding: 14px 14px; font-size: 16px; border-radius: 10px; }
  .auth .pw input { padding-right: 64px; }
  .auth .eye { font-size: .8rem; padding: 6px 10px; }
  .auth button.primary { padding: 14px; font-size: .95rem; border-radius: 10px; margin-top: 8px; }
  .auth-foot { margin-top: auto; padding-top: 36px; font-size: .88rem; }
  .auth-close { width: 36px; height: 36px; font-size: 1.4rem; }
  .auth-brand img { height: 20px; }
}


/* phone proportions measured from the reference screen (viewport ~430px wide) */
@media (max-width: 720px) {
  .auth { padding: 27px 27px 28px; }
  .auth-brand img { height: 29px; }
  .auth-close { width: 48px; height: 48px; font-size: 1.7rem; }
  .auth .card { margin-top: clamp(70px, 17vh, 140px); }
  .auth-title { font-size: 1.65rem; line-height: 1.45; margin-bottom: 44px; }
  .auth .stack { gap: 24px; }
  .auth label { font-size: .95rem; gap: 14px; }
  .auth input { height: 50px; padding: 0 16px; font-size: 16px; border-radius: 8px; }
  .auth .pw input { padding-right: 70px; }
  .auth .eye { font-size: .85rem; padding: 8px 12px; right: 6px; }
  .auth button.primary { height: 46px; padding: 0; margin-top: 30px; font-size: 1rem; border-radius: 6px; }
  .auth-foot { font-size: 1rem; padding-top: 40px; }
}

/* phones: smaller text only (buttons, inputs height, close button unchanged) */
@media (max-width: 720px) {
  .auth-title { font-size: 1.3rem; margin-bottom: 36px; }
  .auth label { font-size: .8rem; gap: 10px; }
  .auth input { font-size: 14.5px; }
  .auth-foot { font-size: .84rem; }
}

/* phones: form a bit higher so the bottom link stays on screen */
@media (max-width: 720px) {
  .auth { padding-top: 20px; }
  .auth .card { margin-top: clamp(28px, 7vh, 64px); }
  .auth-title { margin-bottom: 26px; }
  .auth .stack { gap: 18px; }
  .auth button.primary { margin-top: 20px; }
  .auth-foot { padding-top: 24px; }
}

@media (max-width: 720px) { .auth { padding-bottom: 64px; } }

/* eye icon instead of the words Hiện / Ẩn (inline SVG as a background; the page CSP allows data: images) */
.auth .eye { width: 36px; height: 36px; padding: 0; font-size: 0; right: 6px; background: no-repeat center / 20px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da6ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.auth .eye.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238da6ec' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6.2A10 10 0 0 1 12 6c6.4 0 10 6 10 6a17 17 0 0 1-3.3 3.9M6.6 7.6A17 17 0 0 0 2 12s3.6 6 10 6c1.4 0 2.7-.3 3.8-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E"); }
.auth .eye:hover { background-color: #111a38; }
.auth .pw input { padding-right: 52px; }

/* forgot link + Google button (UI only for now) */
.auth .forgot { justify-self: end; margin-top: -8px; font-size: .8rem; color: #8da6ec; }
.auth .forgot:hover { text-decoration: underline; }
.auth .or { display: flex; align-items: center; gap: 12px; color: #566190; font-size: .8rem; margin-top: 2px; }
.auth .or::before, .auth .or::after { content: ""; flex: 1; height: 1px; background: #1a2447; }
.auth .gbtn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 46px; border-radius: 6px; border: 1px solid #25316a; background: transparent; color: #eaf0ff; font-size: .9rem; font-weight: 600; cursor: pointer; }
.auth .gbtn:hover { background: #0e1630; }
.auth .gico { width: 18px; height: 18px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.8 2.4 30.3 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.5 5.8c4.4-4.1 7.1-10.1 7.1-17.5z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.7A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.8l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.5-5.8c-2.1 1.4-4.8 2.3-8.4 2.3-6.3 0-11.600-4.100-13.500-9.800l-7.900 6.100C6.500 42.600 14.600 48 24 48z'/%3E%3C/svg%3E"); }
@media (max-width: 720px) { .auth .gbtn { height: 46px; } .auth .forgot { margin-top: -6px; } }

/* nicer eye icons (filled) */
.auth .eye { background-size: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238da6ec'%3E%3Cpath d='M12 5C7 5 2.7 8.1 1 12.5 2.7 16.9 7 20 12 20s9.3-3.1 11-7.5C21.3 8.1 17 5 12 5zm0 12.5a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E"); }
.auth .eye.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238da6ec'%3E%3Cpath d='M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75C21.27 7.61 17 4.5 12 4.5c-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z'/%3E%3C/svg%3E"); }

/* phones: exactly one screen, no vertical scrolling; spacing shrinks with the screen height */
html:has(.auth), body:has(.auth) { height: 100%; overflow: hidden; }
@media (max-width: 720px) {
  .auth { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding: 18px 27px 22px; }
  .auth-top { flex: none; }
  .auth .card { flex: none; margin-top: clamp(14px, 4.5vh, 48px); }
  .auth-title { margin-bottom: clamp(14px, 3vh, 26px); }
  .auth .stack { gap: clamp(10px, 2vh, 18px); }
  .auth button.primary { margin-top: clamp(6px, 1.5vh, 16px); }
  .auth .or { margin-top: 0; }
  .auth-foot { margin-top: auto; padding-top: 12px; }
}
@media (max-width: 720px) and (max-height: 640px) {
  .auth-brand img { height: 24px; } .auth-close { width: 40px; height: 40px; }
  .auth input, .auth .gbtn, .auth button.primary { height: 42px; }
}

/* thin text inside the inputs and placeholders (Inter 400 is the lightest weight shipped) */
.auth input { font-weight: 400; letter-spacing: 0; }
.auth input::placeholder { font-weight: 400; opacity: .85; }


/* register screen is longer than one phone screen: let it scroll; footer switch line */
.auth-foot { display: grid; gap: 14px; }
.auth-foot .auth-sw { color: #93a0c4; }
html:has(.auth.long), body:has(.auth.long) { height: auto; overflow: auto; }
.auth.long { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
@media (max-width: 720px) {
  .auth.long { height: auto; min-height: 100dvh; overflow: visible; padding-bottom: 48px; }
  .auth.long .card { margin-top: 28px; }
  .auth-foot .auth-sw { font-size: .84rem; }
}


/* no bright border when an input is focused */
.auth input:focus, .auth input:focus-visible { outline: none; border-color: #1f2a52; box-shadow: none; }

.auth .auth-note { color: #8da6ec; font-size: .84rem; line-height: 1.5; margin: 0; }
.auth button.primary:disabled { opacity: .45; cursor: not-allowed; }

.auth .stack label input[autocomplete='new-password'] { font-weight: 400; }

/* register screen: compact on phones so the Google button is on the first screen (no scrolling to find it) */
@media (max-width: 720px) {
  .auth.long { padding: 14px 24px 24px; }
  .auth.long .card { margin-top: 14px; }
  .auth.long .auth-title { font-size: 1.15rem; margin-bottom: 14px; }
  .auth.long .stack { gap: 10px; }
  .auth.long label { gap: 6px; font-size: .78rem; }
  .auth.long input { height: 44px; }
  .auth.long button.primary { height: 44px; margin-top: 6px; }
  .auth.long .or { margin: 0; }
  .auth.long .gbtn { height: 44px; }
  .auth.long .auth-foot { padding-top: 14px; gap: 10px; }
}