:root {
  --circle-size: 650px;
}

/* Animated page background (keeps your radial drift) */
.animated-background {
  background: radial-gradient(circle at center, #2796BC 0%, #172E36 70%);
  background-size: 200% 200%;
  animation: driftGradient 15s linear infinite;
  min-height: 100vh;
}
@keyframes driftGradient {
  0%   { background-position: 30% 40%; }
  25%  { background-position: 70% 45%; }
  50%  { background-position: 68% 75%; }
  75%  { background-position: 27% 60%; }
  100% { background-position: 30% 40%; }
}

/* Center the vertical "stack": top logo, circle, bottom logo */
.center-stack {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; grid-template-rows: auto var(--circle-size) auto; row-gap: 16px;
  justify-items: center;
  width: 100%;
  padding: 16px;
}
#logo img, #mmslogo img {
  max-width: var(--circle-size);
  width: min(90vw, var(--circle-size));
  height: auto; display: block;
}

/* The main circle with background image that you swap on hover */
.outer-form-container {
  width: var(--circle-size); height: var(--circle-size);
  border-radius: 9999px;
  background-image: url("modoo.png");
  background-size: cover; background-position: center; background-repeat: no-repeat;
  display: grid; place-items: center;
}

/* Inner circular form container */
.form-circle {
  width: 350px; height: 350px; border-radius: 9999px;
  display: grid; place-items: center;
  padding: 0 36px; /* balanced padding inside the circle */
  font-family: "Overpass", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Overlay placeholder icon+text (centered over inputs) */
.placeholder-overlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  color: #838585; pointer-events: none; white-space: nowrap; transition: opacity .15s ease;
  font: 400 14px/1.1 "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}
.placeholder-overlay i { color: #179e9e; }

/* Hide overlay once typing starts; keep it visible on focus+empty */
.group:has(input:not(:placeholder-shown)) .placeholder-overlay { opacity: 0; }
.group:has(input:focus) .placeholder-overlay { opacity: .3; transform:translateX(-80px)}

/* Inputs: transparent, centered text, thin top/bottom borders like your design */
.login-input {
  width: 100%; height: 45px;
  background: transparent; border: 0; outline: none;
  font-size: 14px; letter-spacing: 0.5px; color: rgb(178 178 137);
  text-align: center; padding: 2px 10px 0 10px;
}
.email-border { border-bottom: 2px solid #e1e5e9; }
.pass-border  { border-top:    2px solid #e1e5e9; }

/* Animated glow for inputs on focus (bottom for email, top for password) */
@keyframes glowSlide1 { 0% { background-position: 0% 100%; } 100% { background-position: 200% 100%; } }
@keyframes glowSlide2 { 0% { background-position: 0 0; }     100% { background-position: 200% 0; } }

.email-glow:focus {
  background-image: linear-gradient(90deg,
    rgba(34,211,238,0.0) 0%,
    rgba(34,211,238,0.9) 15%,
    rgba(16,185,129,0.9) 50%,
    rgba(34,211,238,0.9) 85%,
    rgba(34,211,238,0.0) 100%);
  background-repeat: no-repeat; background-size: 200% 2px; background-position: 0 100%;
  animation: glowSlide1 1.6s linear infinite alternate;
}
.pass-glow:focus {
  background-image: linear-gradient(90deg,
    rgba(34,211,238,0.0) 0%,
    rgba(34,211,238,0.9) 15%,
    rgba(16,185,129,0.9) 50%,
    rgba(34,211,238,0.9) 85%,
    rgba(34,211,238,0.0) 100%);
  background-repeat: no-repeat; background-size: 200% 2px; background-position: 0 0%;
  animation: glowSlide2 1.6s linear infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .email-glow:focus, .pass-glow:focus { animation: none !important; }
}

/* Login button: square with animated gradient “border” on hover */
#loginBtn {
  width: 80px; height: 80px; border-radius: 8px; cursor: pointer;
  color: #fff; font: 600 14px/1.1 "Overpass", sans-serif; letter-spacing: .5px;
  border: 2px solid transparent; background: rgba(86,82,79,.95);
  background-image:
    linear-gradient(rgba(86,82,79,.95), rgba(86,82,79,.95)),
    linear-gradient(90deg,
      rgba(34,211,238,0.0) 0%,
      rgba(34,211,238,0.9) 15%,
      rgba(16,185,129,0.9) 50%,
      rgba(34,211,238,0.9) 85%,
      rgba(34,211,238,0.0) 100%);
  background-origin: border-box; background-clip: padding-box, border-box;
  background-size: 200% 100%, 200% 100%;
  transition: filter .2s ease;
}
#loginBtn:hover, #loginBtn:focus { filter: brightness(1.05); animation: glowSlide2 1.6s linear infinite alternate; }

/* Autofill normalization */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #000 !important;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px transparent inset;
  caret-color: #000;
}
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  display: none; align-items: center; justify-content: center; z-index: 3000;
}
.modal {
  background: #fff; color: #000; padding: 20px; border-radius: 10px;
  max-width: 360px; width: calc(100% - 40px);
  box-shadow: rgba(100, 111, 130, 0.2) 0px 7px 29px 0px;
  text-align: center;
}
.modal h3 { margin: 0 0 8px; font-weight: 600; }
.modal p { margin: 0 0 16px; }
.modal button {
  border: 0; padding: 10px 14px; border-radius: 8px; cursor: pointer;
  background: #251d33; color: #fff;
}

.app-modal__backdrop {
  position: fixed; inset: 0; display: none;
  background: rgba(0,0,0,0.5);
  align-items: center; justify-content: center;
  z-index: 3000;
}
.app-modal__backdrop.is-open { display: flex; }

.app-modal {
  background: #fff; color: #000; width: min(520px, 92vw);
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  display: grid; grid-template-rows: auto 1fr auto;
  max-height: 85vh; overflow: hidden;
}
.app-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #eee;
}
.app-modal__title { margin: 0; font-size: 16px; font-weight: 600; }
.app-modal__close {
  border: 0; background: transparent; cursor: pointer; padding: 6px; border-radius: 8px;
}
.app-modal__close:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.app-modal__body { padding: 16px 18px; overflow: auto; }
.app-field { display: grid; gap: 6px; margin-bottom: 12px; }
.app-field label { font-size: 12px; color: #555; }
.app-field input, .app-field select, .app-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #ddd; font: inherit;
}

.app-row { display: flex; gap: 12px; }
.app-row > * { flex: 1; }

.app-modal__footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid #eee;
}

.login-top-center {
  --lang-offset: 200px;          /* tweak as needed */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--lang-offset)));
  z-index: 30;                   /* above inner content */
  pointer-events: auto;
}

/* 3) Basic pill + segments (keeps your markup) */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: rgba(0,0,0,.35);
  color: #fff;
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(255,255,255,.2);
}

.lang-seg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9999px;
  background: transparent;
  color: inherit;
  border: 0;
  cursor: pointer;
  font: 600 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}

.lang-seg[aria-checked="true"] {
  background: rgba(173,216,230,.65); /*rgba(255,255,255,.15);*/
}

.lang-icon { display: inline-block; }
.lang-text { line-height: 1; }

.lang-sep {
  opacity: .6;
  user-select: none;
}

/* Optional: reduce the upward offset on small screens */
@media (max-width: 480px) {
  .outer-form-container .login-top-center { --lang-offset: 120px; }
}