:root {
  --tv-sky: #7EC8E3;
  --tv-sky-deep: #5BAFD4;
  --tv-sun: #FFC857;
  --tv-sun-glow: #FFE082;
  --tv-coral: #FF7E67;
  --tv-cream: #FFF8E7;
  --tv-ink: #2D4059;
  --tv-muted: #5C6B7A;
  --tv-white: #FFFFFF;
  --tv-shadow: 0 8px 32px rgba(45, 64, 89, 0.12);
  --tv-radius: 20px;
  --tv-radius-sm: 12px;
  --tv-font-display: 'Fredoka', system-ui, sans-serif;
  --tv-font-body: 'Nunito', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.login {
  min-height: 100vh;
  margin: 0;
  font-family: var(--tv-font-body);
  color: var(--tv-ink);
  background: linear-gradient(180deg, var(--tv-sky) 0%, #A8DCE8 35%, var(--tv-cream) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
}

body.login #login {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(480px, 92vw);
  padding: 2rem 0 3rem;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  order: 1;
  flex: 0 0 auto;
}

.tv-login-scene {
  position: fixed;
  inset: 0 0 auto 0;
  height: 280px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.tv-login-scene .tv-sun {
  position: absolute;
  top: 40px;
  right: 8%;
  width: 90px;
  height: 90px;
  background: radial-gradient(circle at 35% 35%, var(--tv-sun-glow), var(--tv-sun));
  border-radius: 50%;
  box-shadow: 0 0 60px rgba(255, 200, 87, 0.6);
  animation: tv-login-pulse 4s ease-in-out infinite;
}

.tv-login-scene .tv-cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50px;
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.4));
}

.tv-login-scene .tv-cloud-1 {
  width: 120px;
  height: 40px;
  top: 60px;
  left: 10%;
  animation: tv-login-drift 28s linear infinite;
}

.tv-login-scene .tv-cloud-2 {
  width: 90px;
  height: 32px;
  top: 110px;
  left: 55%;
  animation: tv-login-drift 36s linear infinite reverse;
}

.tv-login-scene .tv-cloud-3 {
  width: 140px;
  height: 44px;
  top: 30px;
  left: 72%;
  animation: tv-login-drift 32s linear infinite;
}

.tv-login-scene .tv-plane {
  position: absolute;
  top: 95px;
  left: -40px;
  font-size: 1.75rem;
  animation: tv-login-fly 18s linear infinite;
}

@keyframes tv-login-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes tv-login-drift {
  from { transform: translateX(-20px); }
  to { transform: translateX(20px); }
}

@keyframes tv-login-fly {
  from { transform: translateX(-10vw) translateY(0); }
  to { transform: translateX(110vw) translateY(-12px); }
}

body.login #login h1 {
  margin: 0 0 0.35rem;
  text-align: center;
}

body.login #login h1 a {
  background: none !important;
  width: auto;
  height: auto;
  text-indent: 0;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-family: var(--tv-font-display);
  font-size: clamp(1.75rem, 5vw, 2.2rem);
  font-weight: 700;
  color: var(--tv-ink) !important;
  text-decoration: none;
  line-height: 1.1;
}

body.login #login h1 a::before {
  content: "🧳";
  font-size: 2rem;
  line-height: 1;
}

.tv-login-about {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--tv-muted);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.tv-login-free {
  display: inline-block;
  margin-top: 0.65rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

body.login-action-login #login > .message:not(#login_error) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}

body.login-action-login #login > .message:not(#login_error) .tv-login-about {
  margin-bottom: 0;
}

body.login #backtoblog {
  display: none !important;
}

.tv-login-tagline {
  margin: 0 0 1.25rem;
  text-align: center;
  color: var(--tv-muted);
  font-size: 1rem;
  line-height: 1.4;
}

.tv-login-intro {
  margin: 0 0 1rem;
  text-align: center;
  color: var(--tv-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
  margin-top: 0;
  padding: 2rem 1.75rem;
  background: rgba(255, 255, 255, 0.92);
  border: 3px solid var(--tv-ink);
  border-radius: var(--tv-radius);
  box-shadow: var(--tv-shadow);
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
  width: 100%;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--tv-ink);
  border-radius: var(--tv-radius-sm);
  background: var(--tv-white);
  color: var(--tv-ink);
  font-family: var(--tv-font-body);
  font-size: 1rem;
  box-shadow: none;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
  border-color: var(--tv-sky-deep);
  box-shadow: 0 0 0 3px rgba(91, 175, 212, 0.25);
  outline: none;
}

body.login label {
  font-family: var(--tv-font-body);
  font-weight: 600;
  color: var(--tv-ink);
  font-size: 0.92rem;
}

body.login .forgetmenot {
  margin-bottom: 1rem;
}

body.login .forgetmenot label {
  font-weight: 600;
}

body.login .submit {
  margin-top: 0.25rem;
}

body.login .button-primary,
body.login .button-primary:hover,
body.login .button-primary:focus,
body.login .button-primary:active {
  width: 100%;
  min-height: 48px;
  height: auto;
  padding: 0.85rem 1.5rem;
  border: 3px solid var(--tv-ink) !important;
  border-radius: 999px !important;
  background: var(--tv-coral) !important;
  color: var(--tv-white) !important;
  font-family: var(--tv-font-display) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 0 var(--tv-ink) !important;
  transition: transform 0.15s, box-shadow 0.15s;
}

body.login .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--tv-ink) !important;
}

body.login .button-primary:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--tv-ink) !important;
}

body.login #nav,
body.login #backtoblog {
  margin: 1rem 0 0;
  padding: 0;
  text-align: center;
}

body.login #nav a,
body.login #backtoblog a {
  color: var(--tv-sky-deep) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--tv-sun);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
  color: var(--tv-coral) !important;
}

body.login .message,
body.login .success,
body.login #login_error,
body.login .notice {
  border: 3px solid var(--tv-ink) !important;
  border-left: 3px solid var(--tv-ink) !important;
  border-radius: var(--tv-radius-sm) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: var(--tv-shadow);
  color: var(--tv-ink) !important;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

body.login #login_error {
  border-color: #FF6B6B !important;
}

body.login .privacy-policy-page-link {
  margin-top: 1rem;
  text-align: center;
  color: var(--tv-muted);
  font-size: 0.88rem;
}

body.login .privacy-policy-page-link a {
  color: var(--tv-sky-deep);
}

body.login.interim-login #login {
  padding-top: 4rem;
}

body.login-action-register .privacy-policy-page-link {
  display: none !important;
}

.tv-register-consents {
  margin: 0 0 1.25rem;
  padding: 1rem 1rem 0.25rem;
  border: 2px solid rgba(45, 64, 89, 0.15);
  border-radius: var(--tv-radius-sm);
  background: rgba(255, 248, 231, 0.65);
}

.tv-register-captcha {
  margin: 0 0 1.25rem;
}

.tv-register-captcha-note {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--tv-radius-sm);
  font-size: 0.9rem;
  line-height: 1.45;
}

.tv-register-captcha-note--warn {
  background: rgba(255, 248, 231, 0.9);
  border: 2px solid rgba(45, 64, 89, 0.15);
  color: var(--tv-ink);
}

.tv-register-consents legend {
  padding: 0;
}

.tv-consent-item {
  margin: 0 0 0.85rem;
}

.tv-consent-item label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
}

.tv-consent-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.15rem 0 0;
  flex-shrink: 0;
  accent-color: var(--tv-coral);
}

.tv-consent-item a {
  color: var(--tv-sky-deep);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.tv-consent-item .tv-required {
  color: var(--tv-muted);
  font-weight: 600;
  font-size: 0.85em;
}

body.login .button-primary:disabled,
body.login .button-primary[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 4px 0 var(--tv-ink) !important;
}

.tv-login-legal-links {
  width: min(480px, 92vw);
  margin: 1.25rem auto 0;
  padding: 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--tv-muted);
  order: 2;
}

.tv-login-legal-links a {
  color: var(--tv-sky-deep) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--tv-sun);
}

body.login .language-switcher {
  order: 3;
  width: min(480px, 92vw);
  margin: 0.75rem auto 1.5rem;
  padding: 0;
  text-align: center;
}

body.login .language-switcher form {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

body.login .language-switcher select {
  border: 2px solid var(--tv-ink);
  border-radius: var(--tv-radius-sm);
  padding: 0.45rem 0.65rem;
  font-family: var(--tv-font-body);
  color: var(--tv-ink);
  background: rgba(255, 255, 255, 0.92);
}

body.login .language-switcher .button {
  border: 2px solid var(--tv-ink) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--tv-sky-deep) !important;
  font-family: var(--tv-font-display) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  min-height: auto !important;
  width: auto !important;
  padding: 0.45rem 1rem !important;
  text-shadow: none !important;
}

@media (max-width: 480px) {
  body.login #loginform,
  body.login #registerform,
  body.login #lostpasswordform {
    padding: 1.5rem 1.25rem;
  }
}


body.login-action-register .message.register,
body.login-action-register .notice.register,
body.login-action-lostpassword .message {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}

body.login-action-register .message.register p:not(.tv-login-tagline):not(.tv-login-intro),
body.login-action-lostpassword .message p:not(.tv-login-tagline):not(.tv-login-intro) {
  display: none;
}

#loginform .tv-login-tagline,
#registerform .tv-login-tagline,
#lostpasswordform .tv-login-tagline,
#loginform .tv-login-intro,
#registerform .tv-login-intro,
#lostpasswordform .tv-login-intro {
  width: 100%;
  text-align: center;
  margin-top: 0;
}

#registerform .tv-login-tagline,
#loginform .tv-login-tagline,
#lostpasswordform .tv-login-tagline {
  margin-bottom: 0.35rem;
  font-family: var(--tv-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tv-ink);
}

#registerform .tv-login-intro,
#loginform .tv-login-intro,
#lostpasswordform .tv-login-intro {
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
}

body.login #loginform .tv-login-tagline,
body.login #registerform .tv-login-tagline,
body.login #lostpasswordform .tv-login-tagline {
  margin-top: -0.5rem;
}

body.login form p {
  margin-bottom: 1rem;
}

body.login form p.submit {
  margin-bottom: 0;
}

body.login #reg_passmail {
  color: var(--tv-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

body.login .message .tv-login-tagline,
body.login .message .tv-login-intro {
  display: block;
  width: 100%;
  text-align: center;
}

body.login .message .tv-login-tagline {
  font-family: var(--tv-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--tv-ink);
  margin: 0 0 0.35rem;
}

body.login .message .tv-login-intro {
  color: var(--tv-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

body.login #login {
  width: min(480px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: 4rem;
}

body.login #login > .message,
body.login #login > .notice {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.login-action-register .message.register,
body.login-action-lostpassword .message {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 3px solid var(--tv-ink) !important;
  border-bottom: none !important;
  border-radius: var(--tv-radius) var(--tv-radius) 0 0 !important;
  box-shadow: none !important;
  margin: 0.75rem 0 0 !important;
  padding: 1.75rem 1.75rem 0.25rem !important;
}

body.login-action-register #registerform,
body.login-action-lostpassword #lostpasswordform {
  border-top: none !important;
  border-radius: 0 0 var(--tv-radius) var(--tv-radius) !important;
  margin-top: 0 !important;
  padding-top: 1.25rem !important;
}

body.login-action-login #loginform .tv-login-tagline {
  margin-top: 0;
}

body.login.tv-logged-out-screen #loginform,
body.login.tv-logged-out-screen #nav {
  display: none !important;
}

body.login.tv-logged-out-screen #login-message.message {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 3px solid var(--tv-ink) !important;
  border-radius: var(--tv-radius) !important;
  box-shadow: var(--tv-shadow) !important;
  padding: 2rem 1.75rem !important;
  margin: 0.75rem 0 0 !important;
  text-align: center;
}

body.login.tv-logged-out-screen #login-message.message p {
  margin: 0;
}

.tv-logout-confirm .tv-login-tagline {
  margin: 0 0 0.35rem;
  font-family: var(--tv-font-display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--tv-ink);
}

.tv-logout-confirm .tv-login-intro {
  margin: 0;
  color: var(--tv-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.tv-logout-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.tv-logout-btn {
  display: block;
  text-align: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--tv-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-decoration: none;
  border: 3px solid var(--tv-ink);
  transition: transform 0.15s, box-shadow 0.15s;
}

.tv-logout-btn-primary {
  background: var(--tv-coral);
  color: var(--tv-white);
  box-shadow: 0 4px 0 var(--tv-ink);
}

.tv-logout-btn-primary:hover,
.tv-logout-btn-primary:focus {
  color: var(--tv-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--tv-ink);
}

.tv-logout-btn-ghost {
  background: rgba(255, 255, 255, 0.65);
  color: var(--tv-sky-deep);
  box-shadow: none;
}

.tv-logout-btn-ghost:hover,
.tv-logout-btn-ghost:focus {
  color: var(--tv-coral);
  transform: translateY(-1px);
}