/* Branded sign-in page (wp-login.php). Mobile first; hero panel from 960px. */
body.tpl-login { --tpl-ink: #14161f; --tpl-ink-2: #23263a; --tpl-text: #1c2024; --tpl-muted: #5b6270; --tpl-field: #f2f4f8; --tpl-line: #d9dde5;
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; background: var(--tpl-ink);
  background-image: radial-gradient(1200px 600px at 10% 0%, rgba(255, 216, 20, .14), transparent 60%), radial-gradient(900px 700px at 100% 100%, rgba(255, 138, 0, .16), transparent 60%), linear-gradient(135deg, var(--tpl-ink) 0%, var(--tpl-ink-2) 100%);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--tpl-text); }
body.tpl-login * { box-sizing: border-box; }

/* Hero */
.tpl-hero { text-align: left; color: #fff; padding: 22px 20px 6px; position: relative; overflow: hidden; }
.tpl-hero__brand { display: inline-flex; align-items: center; gap: 12px; color: #fff !important; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: .01em; }
.tpl-hero__brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.tpl-hero h1, .tpl-hero__lead, .tpl-hero__list, .tpl-hero__art, .tpl-hero__foot { display: none; }

/* Card */
body.tpl-login #login { width: auto; max-width: 440px; margin: 14px 16px 32px; padding: 28px 24px 22px; align-self: center; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); animation: tpl-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
@media (min-width: 480px) { body.tpl-login #login { margin-left: auto; margin-right: auto; width: 440px; padding: 34px 36px 26px; } }
body.tpl-login #login > h1 { display: none; }
.tpl-welcome h2 { margin: 0 0 4px; font-size: 28px; font-weight: 800; color: var(--tpl-ink); letter-spacing: -.01em; }
.tpl-welcome p { margin: 0 0 18px; color: var(--tpl-muted); font-size: 15px; }
body.tpl-login.login form { margin: 0; padding: 0; border: 0; box-shadow: none; background: transparent; overflow: visible; }
body.tpl-login.login label { font-size: 14px; font-weight: 600; color: var(--tpl-text); }
body.tpl-login.login form .input, body.tpl-login.login input[type="text"], body.tpl-login.login input[type="password"], body.tpl-login.login input[type="email"] {
  font-size: 16px; padding: 12px 14px; min-height: 50px; margin: 6px 0 16px; border: 1.5px solid var(--tpl-line); border-radius: 12px; background: var(--tpl-field); color: var(--tpl-text); box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s; }
body.tpl-login.login form .input:focus, body.tpl-login.login input:focus { border-color: #e0a800; background: #fff; box-shadow: 0 0 0 4px rgba(255, 216, 20, .35); outline: 0; }
body.tpl-login .wp-pwd { position: relative; }
body.tpl-login.login .button.wp-hide-pw { height: 50px; min-height: 50px; top: 6px; right: 4px; color: var(--tpl-ink); }
body.tpl-login.login .button.wp-hide-pw:focus { box-shadow: none; }
body.tpl-login.login .forgetmenot { float: none; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; }
body.tpl-login.login input[type="checkbox"] { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--tpl-line); margin: 0; }
body.tpl-login.login input[type="checkbox"]:checked::before { width: 24px; height: 24px; margin: -3px 0 0 -3px; }
body.tpl-login.login .submit { display: block; clear: both; padding-top: 14px; }
body.tpl-login.login .button-primary, body.tpl-login.login #wp-submit {
  float: none; width: 100%; min-height: 52px; padding: 0 18px; font-size: 16px; font-weight: 700; border: 0; border-radius: 12px; text-shadow: none;
  background: var(--tpl-ink); color: #fff; box-shadow: 0 8px 20px rgba(20, 22, 31, .25); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
body.tpl-login.login .button-primary:hover, body.tpl-login.login .button-primary:focus { background: #000; color: var(--tpl-brand, #ffd814); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(20, 22, 31, .3), 0 0 0 3px rgba(255, 216, 20, .45); }
body.tpl-login.login #nav, body.tpl-login.login #backtoblog { margin: 14px 0 0; padding: 0; text-align: center; font-size: 14px; }
body.tpl-login.login #nav a, body.tpl-login.login #backtoblog a, body.tpl-login.login .privacy-policy-link { color: #6b4e00; font-weight: 600; text-decoration: none; }
body.tpl-login.login #nav a:hover, body.tpl-login.login #backtoblog a:hover { text-decoration: underline; color: var(--tpl-ink); }
body.tpl-login.login .message, body.tpl-login.login .notice, body.tpl-login.login .success, body.tpl-login.login #login_error { margin: 0 0 16px; border-radius: 12px; box-shadow: none; background: #fff8d6; border-left: 4px solid #e0a800; }
body.tpl-login.login #login_error { background: #fdecec; border-left-color: #d63638; }
body.tpl-login .language-switcher, body.tpl-login .privacy-policy-page-link { color: rgba(255, 255, 255, .8); text-align: center; }
body.tpl-login .language-switcher label { color: rgba(255, 255, 255, .8); }

@keyframes tpl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tpl-grow { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes tpl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Desktop: hero on the left, card on the right. */
@media (min-width: 960px) {
  body.tpl-login { flex-direction: row; align-items: center; padding: 0 5vw; gap: 4vw; }
  .tpl-hero { flex: 1 1 55%; max-width: 760px; padding: 48px 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .tpl-hero__brand { position: absolute; top: 40px; left: 0; }
  .tpl-hero h1 { display: block; margin: 70px 0 18px; font-size: clamp(36px, 3.6vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; animation: tpl-rise .6s both; }
  .tpl-hero h1 em { font-style: normal; color: var(--tpl-brand, #ffd814); }
  .tpl-hero__lead { display: block; margin: 0 0 30px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 620px; animation: tpl-rise .6s .08s both; }
  .tpl-hero__list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 36px; margin: 0; padding: 0; list-style: none; max-width: 700px; }
  .tpl-hero__list li { display: flex; gap: 12px; animation: tpl-rise .6s both; }
  .tpl-hero__list li:nth-child(2) { animation-delay: .06s; } .tpl-hero__list li:nth-child(3) { animation-delay: .12s; } .tpl-hero__list li:nth-child(4) { animation-delay: .18s; } .tpl-hero__list li:nth-child(5) { animation-delay: .24s; } .tpl-hero__list li:nth-child(6) { animation-delay: .3s; }
  .tpl-hero__list svg { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: var(--tpl-brand, #ffd814); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .tpl-hero__list strong { display: block; font-size: 16px; margin-bottom: 3px; }
  .tpl-hero__list span { display: block; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, .72); }
  .tpl-hero__art { display: flex; align-items: flex-end; gap: 12px; height: 130px; margin-top: 44px; max-width: 420px; }
  .tpl-hero__art i { width: 92px; height: 100%; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); position: relative; animation: tpl-float 5s ease-in-out infinite; }
  .tpl-hero__art i:nth-child(2) { animation-delay: .8s; } .tpl-hero__art i:nth-child(3) { animation-delay: 1.6s; }
  .tpl-hero__art i::before, .tpl-hero__art i::after { content: ""; position: absolute; left: 10px; right: 10px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, .16); top: 12px; }
  .tpl-hero__art i::after { top: 42px; background: linear-gradient(90deg, #ffd814, #ff8a00); opacity: .85; }
  .tpl-hero__art b { width: 14px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ffd814, #ff8a00); transform-origin: bottom; animation: tpl-grow 1s cubic-bezier(.2, .8, .2, 1) both; }
  .tpl-hero__art b:nth-of-type(1) { height: 40%; animation-delay: .2s; } .tpl-hero__art b:nth-of-type(2) { height: 65%; animation-delay: .3s; } .tpl-hero__art b:nth-of-type(3) { height: 50%; animation-delay: .4s; } .tpl-hero__art b:nth-of-type(4) { height: 85%; animation-delay: .5s; } .tpl-hero__art b:nth-of-type(5) { height: 100%; animation-delay: .6s; }
  .tpl-hero__foot { display: block; position: absolute; bottom: 24px; left: 0; margin: 0; font-size: 12px; color: rgba(255, 255, 255, .5); }
  body.tpl-login #login { flex: 0 0 460px; width: 460px; margin: 40px 0; padding: 40px 40px 30px; }
}
@media (prefers-reduced-motion: reduce) { body.tpl-login *, body.tpl-login *::before, body.tpl-login *::after { animation: none !important; transition: none !important; } }
body.tpl-login.login .tpl-hero h1 { text-align: left; }
body.tpl-login.login #loginform p.submit { margin-top: 18px; }