/* Marquee — sign-in screen (loads after WordPress login.css) */

body.mq-login {
  --field-h: 54px;
  --fs: 16px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #000 radial-gradient(130% 75% at 50% -10%, #1c2346 0%, #0a0c18 45%, #000 75%) no-repeat;
  color: #fff;
  font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs);
}

body.mq-login #login {
  width: min(440px, calc(100vw - 32px));
  padding: 48px 0 24px;
  margin: 0 auto;
}

/* Brand */
body.mq-login h1 { text-align: center; }
body.mq-login h1 a {
  background-image: none;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  width: auto;
  height: auto;
  margin: 0 auto 32px;
  text-indent: 0;
  overflow: visible;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  text-transform: lowercase;
  color: #fff;
  outline: none;
}

.mq-login-title {
  margin: 0 0 20px;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

/* Card */
body.mq-login form {
  margin: 0;
  padding: 28px;
  background: rgba(22, 24, 34, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
}

body.mq-login label {
  display: block;
  margin-bottom: 8px;
  font-size: calc(var(--fs) * .9);
  font-weight: 600;
  line-height: 1.4;
  color: rgba(255, 255, 255, .88);
}

body.mq-login #login form p,
body.mq-login #login .user-pass-wrap { margin: 0 0 22px; }
body.mq-login #login form p:last-child { margin-bottom: 0; }

body.mq-login form .input,
body.mq-login input[type="text"],
body.mq-login input[type="email"],
body.mq-login input[type="password"] {
  width: 100%;
  height: var(--field-h);
  min-height: var(--field-h);
  margin: 0;
  padding: 0 16px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: var(--fs);
  line-height: 1.3;
}

body.mq-login input::placeholder { color: rgba(255, 255, 255, .45); }

body.mq-login form .input:focus,
body.mq-login input[type="text"]:focus,
body.mq-login input[type="email"]:focus,
body.mq-login input[type="password"]:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 2px #fff;
  outline: none;
}

/* Browser autofill keeps the dark field */
body.mq-login input:-webkit-autofill {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #23252f inset;
  caret-color: #fff;
}

/* Show-password button */
body.mq-login .wp-pwd { position: relative; }
body.mq-login .wp-pwd input[type="password"],
body.mq-login .wp-pwd input[type="text"] { padding-right: 56px; }
body.mq-login .button.wp-hide-pw {
  top: 0;
  right: 0;
  width: 54px;
  height: var(--field-h);
  min-height: var(--field-h);
  background: transparent;
  border: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, .8);
}
body.mq-login .button.wp-hide-pw:hover,
body.mq-login .button.wp-hide-pw:focus { color: #fff; background: transparent; box-shadow: none; }
body.mq-login .button.wp-hide-pw .dashicons { top: 0; width: 22px; height: 22px; font-size: 22px; color: inherit; }

/* Remember me + submit */
body.mq-login #login .forgetmenot {
  float: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 28px;
}
body.mq-login #login .forgetmenot label {
  margin: 0;
  font-weight: 500;
  color: rgba(255, 255, 255, .88);
}
body.mq-login #login input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-grid;
  place-content: center;
  flex: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .6);
  border-radius: 5px;
  box-shadow: none;
  vertical-align: middle;
  cursor: pointer;
}
body.mq-login #login input[type="checkbox"]:checked { background: #fff; border-color: #fff; }
body.mq-login #login input[type="checkbox"]::before {
  content: '';
  display: block;
  float: none;
  width: 6px;
  height: 11px;
  margin: 0 0 2px;
  border: solid #000;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}
body.mq-login #login input[type="checkbox"]:checked::before { transform: rotate(45deg) scale(1); }
body.mq-login #login input[type="checkbox"]:focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: none; }

body.mq-login #login .submit,
body.mq-login #login .reset-pass-submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
}
body.mq-login #login .forgetmenot + .submit { margin-top: 0; }

/* Secondary buttons (e.g. Generate Password) */
body.mq-login #login form .button:not(.button-primary):not(.wp-hide-pw) {
  float: none;
  width: 100%;
  height: var(--field-h);
  min-height: var(--field-h);
  margin: 0;
  padding: 0 24px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: var(--fs);
  font-weight: 600;
}
body.mq-login #login form .button:not(.button-primary):not(.wp-hide-pw):hover { background: rgba(255, 255, 255, .18); }
body.mq-login #login form .button:not(.button-primary):not(.wp-hide-pw):focus { outline: 3px solid #fff; outline-offset: 2px; box-shadow: none; }
body.mq-login .button-primary,
body.mq-login #wp-submit {
  float: none;
  width: 100%;
  height: var(--field-h);
  min-height: var(--field-h);
  padding: 0 24px;
  background: #fff;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  text-shadow: none;
  color: #000;
  font-family: inherit;
  font-size: calc(var(--fs) * 1.05);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
body.mq-login .button-primary:hover,
body.mq-login #wp-submit:hover { background: rgba(255, 255, 255, .86); color: #000; }
body.mq-login .button-primary:focus,
body.mq-login #wp-submit:focus { box-shadow: 0 0 0 3px #000, 0 0 0 6px #fff; outline: none; }

/* Messages */
body.mq-login .message,
body.mq-login .notice,
body.mq-login .success,
body.mq-login #login_error {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 4px solid var(--mq-accent);
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  font-size: calc(var(--fs) * .92);
}
body.mq-login #login_error { border-left-color: #ff5a5f; }
body.mq-login .message a,
body.mq-login .notice a,
body.mq-login #login_error a { color: #fff; text-decoration: underline; }

body.mq-login .description,
body.mq-login .indicator-hint,
body.mq-login #reg_passmail { color: rgba(255, 255, 255, .72); }

/* Links under the card */
body.mq-login #nav,
body.mq-login #backtoblog {
  margin: 18px 0 0;
  padding: 0;
  text-align: center;
  font-size: calc(var(--fs) * .92);
  color: rgba(255, 255, 255, .5);
}
body.mq-login #nav a,
body.mq-login #backtoblog a,
body.mq-login .privacy-policy-page-link a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  border-radius: 4px;
}
body.mq-login #nav a:hover,
body.mq-login #backtoblog a:hover,
body.mq-login .privacy-policy-page-link a:hover { color: #fff; text-decoration: underline; }
body.mq-login #nav a:focus,
body.mq-login #backtoblog a:focus,
body.mq-login .privacy-policy-page-link a:focus { color: #fff; box-shadow: none; outline: 3px solid #fff; outline-offset: 3px; }

body.mq-login .language-switcher { display: none; }

/* Layout switch */
.mq-login-mode {
  display: flex;
  justify-content: center;
  padding: 8px 16px 40px;
}
.mq-login-mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: calc(var(--fs) * .95);
  font-weight: 600;
  text-decoration: none;
}
.mq-login-mode-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mq-login-mode-btn:focus { outline: 3px solid #fff; outline-offset: 3px; box-shadow: none; color: #fff; }
.mq-login-mode-btn .mq-icon { width: 22px; height: 22px; }

/* ---------- TV layout ---------- */

body.mq-login.is-tv {
  --field-h: 76px;
  --fs: 24px;
  cursor: default;
}
body.mq-login.is-tv #login { width: min(720px, 90vw); padding-top: 4vh; }
body.mq-login.is-tv h1 a { font-size: 72px; margin-bottom: 40px; }
body.mq-login.is-tv .mq-login-title { font-size: 40px; margin-bottom: 28px; }
body.mq-login.is-tv form { padding: 44px; border-radius: 20px; }
body.mq-login.is-tv #login form p,
body.mq-login.is-tv #login .user-pass-wrap { margin-bottom: 32px; }
body.mq-login.is-tv #login .submit,
body.mq-login.is-tv #login .reset-pass-submit { margin-top: 40px; gap: 16px; }
body.mq-login.is-tv #login .forgetmenot + .submit { margin-top: 0; }
body.mq-login.is-tv label { margin-bottom: 12px; }
body.mq-login.is-tv form .input,
body.mq-login.is-tv input[type="text"],
body.mq-login.is-tv input[type="password"] { padding: 0 24px; border-radius: 12px; }
body.mq-login.is-tv form .input:focus,
body.mq-login.is-tv input[type="text"]:focus,
body.mq-login.is-tv input[type="password"]:focus { box-shadow: 0 0 0 4px #fff; }
body.mq-login.is-tv .button.wp-hide-pw { width: 76px; }
body.mq-login.is-tv .button.wp-hide-pw .dashicons { width: 32px; height: 32px; font-size: 32px; }
body.mq-login.is-tv .button.wp-hide-pw:focus { outline: 4px solid #fff; outline-offset: -8px; border-radius: 12px; }
body.mq-login.is-tv #login input[type="checkbox"] { width: 34px; height: 34px; min-width: 34px; border-radius: 8px; border-width: 2px; }
body.mq-login.is-tv #login input[type="checkbox"]::before { width: 9px; height: 17px; margin-bottom: 3px; border-width: 0 4px 4px 0; }
body.mq-login.is-tv #login input[type="checkbox"]:focus { outline: 4px solid #fff; outline-offset: 4px; }
body.mq-login.is-tv #login .forgetmenot { gap: 16px; margin-bottom: 40px; }
body.mq-login.is-tv #wp-submit,
body.mq-login.is-tv .button-primary { border-radius: 12px; transition: transform .15s ease; }
body.mq-login.is-tv #wp-submit:focus,
body.mq-login.is-tv .button-primary:focus { transform: scale(1.03); box-shadow: 0 0 0 4px #000, 0 0 0 8px #fff; }
body.mq-login.is-tv #nav,
body.mq-login.is-tv #backtoblog { margin-top: 28px; }
body.mq-login.is-tv #nav a,
body.mq-login.is-tv #backtoblog a { display: inline-block; padding: 8px 14px; }
body.mq-login.is-tv #nav a:focus,
body.mq-login.is-tv #backtoblog a:focus,
body.mq-login.is-tv .mq-login-mode-btn:focus { outline: 4px solid #fff; outline-offset: 2px; }
body.mq-login.is-tv .mq-login-mode-btn { padding: 18px 32px; }
body.mq-login.is-tv .mq-login-mode-btn .mq-icon { width: 32px; height: 32px; }

@media (max-width: 480px) {
  body.mq-login form { padding: 22px; }
  .mq-login-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  body.mq-login * { transition: none !important; }
}