/* ==========================================================
   Norvic @ Home — Login (ASP.NET WebForms)
   Palette follows the logo (teal / grey / leaf green / pink).
   The same green ramp is mapped into theme.css for the dashboard.
   ========================================================== */

:root {
  --green-900: #14532d;
  --green-800: #1d6638;
  --green-700: #2e7d46;
  --green-600: #368a50;
  --green-500: #45a063;
  --green-100: #e6f2e8;
  --green-50:  #f2f8f3;
  --leaf:      #b8ddb2;
  --teal:      #2185a3;
  --pink:      #f09ac2;

  --ink:       #243238;
  --ink-soft:  #5f6d73;
  --ink-mute:  #8a969b;
  --line:      #e1e7e4;
  --page:      #fdfefd;
  --danger:    #c2410c;

  --glass-bg:     rgba(255, 255, 255, .62);
  --glass-border: rgba(255, 255, 255, .85);
  --glass-shadow: 0 10px 30px -12px rgba(20, 83, 45, .22);

  --radius: 14px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "Bookman Old Style", "URW Bookman", "URW Bookman L", Bookman, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
    var(--page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--leaf); color: var(--green-900); }

/* ==========================================================
   Entrance reveal (staggered via --d)
   ========================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(6px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.is-ready .reveal { opacity: 1; transform: none; filter: none; }

/* ==========================================================
   Layout
   ========================================================== */
.login-shell {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(0, .9fr) minmax(420px, 520px);
}

/* ==========================================================
   Left brand panel
   ========================================================== */
.brand-panel {
  display: flex; flex-direction: column;
  padding: 40px 0 36px clamp(28px, 5vw, 80px);
  position: relative; z-index: 2;
}

.brand-logo { display: inline-block; align-self: flex-start; margin-top: 30px; }
.brand-logo img { width: 200px; height: auto; display: block; transition: transform .5s var(--ease-spring); }
.brand-logo:hover img { transform: scale(1.04) rotate(-1deg); }

.brand-content { margin: auto 0; padding: 18px 0; }

/* Glass status pill with shimmer */
.status-pill {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(230, 242, 232, .7);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border: 1px solid rgba(207, 229, 212, .9);
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--green-900);
  box-shadow: 0 4px 14px -6px rgba(46, 125, 70, .25);
}
.status-pill::after {
  content: ""; position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .8), transparent);
  animation: shimmer 4s 2s ease-in-out infinite;
}
@keyframes shimmer { 0% { left: -60%; } 40%, 100% { left: 130%; } }

.status-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); }
.status-dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green-500);
  animation: ping 1.8s var(--ease-out) infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }

.brand-title {
  margin-top: 16px;
  font-family: Manrope, "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(36px, 3vw, 54px);
  font-weight: 800; line-height: 1; letter-spacing: -.02em;
  color: var(--ink);
}
.brand-title .line { display: block; width: max-content; white-space: nowrap; }
.brand-title .accent {
  padding-bottom: .12em; margin-bottom: -.12em;   /* keeps g / y descenders from being clipped by the gradient */
  background: linear-gradient(90deg, var(--green-800), var(--green-500), var(--teal), var(--green-800));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: gradientFlow 8s ease-in-out infinite;
}
@keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.title-rule {
  display: block; width: 70px; height: 2px;
  background: linear-gradient(90deg, var(--green-700), var(--leaf));
  margin: 16px 0 14px;
  transform-origin: left;
}
.is-ready .title-rule { animation: growX 1s .5s var(--ease-out) both; }
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.brand-sub {
    white-space: nowrap;
    letter-spacing: 1px;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.55;
    color: var(--ink-soft);
}

/* Feature icons — glass circles */
.feature-list { list-style: none; display: flex; gap: 30px; margin-top: 24px; }
.feature-list li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center; font-size: 14.5px; line-height: 1.3; color: var(--ink);
  cursor: default;
}
.feature-icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(230, 242, 232, .75));
  border: 1px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px -10px rgba(46, 125, 70, .35), inset 0 1px 0 #fff;
  transition: transform .45s var(--ease-spring), box-shadow .35s, background .35s;
}
.feature-icon::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--green-500);
  opacity: 0; transform: scale(.85);
  transition: opacity .35s, transform .45s var(--ease-spring);
}
.feature-icon svg {
  width: 26px; height: 26px;
  fill: none; stroke: var(--green-700); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .45s var(--ease-spring);
}
.feature-list li:hover .feature-icon {
  transform: translateY(-6px);
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  box-shadow: 0 16px 28px -12px rgba(20, 83, 45, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.feature-list li:hover .feature-icon::before { opacity: .4; transform: scale(1); }
.feature-list li:hover .feature-icon svg { stroke: #fff; transform: scale(1.1); }

.ecg { stroke-dasharray: 100; stroke-dashoffset: 0; animation: ecg 3s ease-in-out infinite; }
@keyframes ecg { 0% { stroke-dashoffset: 100; } 55%, 100% { stroke-dashoffset: 0; } }


.tagline { align-self: flex-start; white-space: nowrap; margin-bottom: 30px; }
.tagline-rule { display: block; width: 28px; height: 1px; background: var(--ink-mute); margin-bottom: 10px; }
.tagline p { display: inline; }
.tagline p + p::before { content: "\00B7"; margin: 0 8px; color: var(--ink-mute); }
.tagline p {
  font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 1.9;
  transition: color .3s, letter-spacing .4s var(--ease-out);
}
.tagline:hover p { color: var(--green-700); }

/* ==========================================================
   Center hero image + glass chips
   ========================================================== */
.hero-visual { position: relative; margin: 0 -30px 0 -95px; z-index: 1; }

.hero-img {
  position: absolute; inset: 0; overflow: hidden;
}
.hero-img img {
  position: absolute; inset: -20px;
  width: calc(100% + 40px); height: calc(100% + 40px);
  object-fit: cover; object-position: center 20%;
  image-rendering: -webkit-optimize-contrast;
  filter: brightness(1.02);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right, transparent 0%, #000 22%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-composite: intersect;
  opacity: 0;
  transition: opacity 1s var(--ease-out);   /* fade in only — no movement */
}
.is-ready .hero-img img { opacity: 1; }

.glass-chip {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgba(255, 255, 255, .9);
  opacity: 0;
  transition: transform .7s var(--ease-out), box-shadow .3s;
  pointer-events: auto;
}
.is-ready .glass-chip { animation: chipIn .9s var(--ease-spring) forwards, float 6s ease-in-out infinite; }
.chip-1 { top: 11%; left: 12%;   --fd: 0s;   }
.chip-2 { top: 30%; right: 4%;  --fd: -2s;  }
.chip-3 { bottom: 12%; left: 14%; --fd: -4s; }
.is-ready .chip-1 { animation-delay: .9s, 1.8s; }
.is-ready .chip-2 { animation-delay: 1.1s, 2s; }
.is-ready .chip-3 { animation-delay: 1.3s, 2.2s; }
@keyframes chipIn { from { opacity: 0; translate: 0 24px; scale: .9; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes float { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }
.glass-chip:hover { box-shadow: 0 18px 36px -14px rgba(20, 83, 45, .35), inset 0 1px 0 #fff; }

.chip-icon {
  position: relative;
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--green-600), var(--green-800));
  box-shadow: 0 6px 12px -6px rgba(20, 83, 45, .7), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.chip-icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chip-icon.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--green-500);
  animation: ringPulse 2s var(--ease-out) infinite;
}
@keyframes ringPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

.chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.chip-text strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.chip-text small  { font-size: 12px; color: var(--ink-soft); }

/* ==========================================================
   Right form panel — glass card
   ========================================================== */
.form-panel {
  display: flex; align-items: center; justify-content: center;
  padding: 24px clamp(24px, 4vw, 64px) 40px 0;
  position: relative; z-index: 3;
  perspective: 1200px;
}

.login-card {
  position: relative; overflow: hidden;
  width: 100%; max-width: 440px;
  padding: 30px 40px 22px;
  border-radius: 26px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .78));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid #e8eeea;
  box-shadow: none;
  opacity: 0; transform: translateY(28px) rotateX(6deg);
  transition: opacity 1s .2s var(--ease-out), transform 1s .2s var(--ease-out);
}
.is-ready .login-card { opacity: 1; transform: none; }

/* light that follows the cursor */
.card-glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, -20%), rgba(184, 221, 178, .35), transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.login-card:hover .card-glare { opacity: 1; }

.card-head { text-align: center; margin-bottom: 20px; position: relative; }
.card-logo { display: block; width: 130px; max-width: 70%; height: auto; margin: 0 auto 10px; }

.card-head h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.card-head p { margin-top: 6px; font-size: 15px; color: var(--ink-soft); font-weight: 300; }

/* Fields (stagger in) */
.field {
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(.55s + var(--i, 0) * .09s);
}
.is-ready .field { opacity: 1; transform: none; }
@keyframes btnIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }

.field { margin-bottom: 15px; position: relative; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  transition: color .25s, transform .25s var(--ease-out);
  transform-origin: left;
}
.field:focus-within label { color: var(--green-700); transform: translateX(3px); }

.input-wrap {
  position: relative;
  display: flex; align-items: center;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 252, 251, .85);
  transition: border-color .25s, box-shadow .25s, background .25s, transform .25s var(--ease-out);
}
.input-wrap:hover { border-color: #c9dccd; background: #fff; }
.input-wrap:focus-within {
  border-color: var(--green-600);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(54, 138, 80, .12), 0 8px 18px -12px rgba(46, 125, 70, .4);
  transform: translateY(-1px);
}
.field.has-error .input-wrap { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(194, 65, 12, .08); }
.field.is-valid  .input-wrap { border-color: #9ccdaa; }

/* animated underline inside the field */
.focus-line {
  position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--green-700), var(--teal));
  border-radius: 2px;
  transform: scaleX(0); transition: transform .45s var(--ease-out);
}
.input-wrap:focus-within .focus-line { transform: scaleX(1); }

.input-icon {
  width: 20px; height: 20px; margin-left: 16px; flex-shrink: 0;
  fill: none; stroke: var(--ink-mute); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s, transform .4s var(--ease-spring);
}
.input-wrap:focus-within .input-icon { stroke: var(--green-700); transform: scale(1.15); }

.input-wrap input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; outline: 0; background: transparent;
  padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--ink);
}
.input-wrap input::placeholder { color: #a3adb1; font-weight: 300; transition: opacity .25s, transform .25s; }
.input-wrap input:focus::placeholder { opacity: .5; transform: translateX(4px); }
.input-wrap input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 40px #fff inset;
  -webkit-text-fill-color: var(--ink);
}

/* ---------- Glass small buttons (eye + refresh) ---------- */
.glass-btn {
  position: relative;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(145deg, rgba(255, 255, 255, .75), rgba(230, 242, 232, .55));
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 4px 10px -6px rgba(20, 83, 45, .35), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: transform .35s var(--ease-spring), box-shadow .25s, background .25s;
}
.glass-btn:hover {
  transform: translateY(-1px) scale(1.06);
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(214, 234, 219, .8));
  box-shadow: 0 8px 16px -8px rgba(20, 83, 45, .45), inset 0 1px 0 #fff;
}
.glass-btn:active { transform: scale(.94); }
.glass-btn:focus-visible { outline: 2px solid rgba(54, 138, 80, .45); outline-offset: 2px; }
.glass-btn svg {
  fill: none; stroke: var(--green-700); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.toggle-pass { width: 38px; height: 38px; margin-right: 7px; border-radius: 11px; flex-shrink: 0; }
.toggle-pass svg { width: 19px; height: 19px; transition: transform .35s var(--ease-spring); }
.toggle-pass .eye-open { display: none; }
.toggle-pass.is-visible .eye-open { display: block; animation: blinkIn .35s var(--ease-spring); }
.toggle-pass.is-visible .eye-closed { display: none; }
.toggle-pass:not(.is-visible) .eye-closed { animation: blinkIn .35s var(--ease-spring); }
@keyframes blinkIn { from { transform: scaleY(.1); } to { transform: scaleY(1); } }

.caps-hint {
  display: none; margin-top: 6px;
  font-size: 12px; color: var(--teal); font-weight: 500;
}
.caps-hint.show { display: block; animation: fadeUp .3s var(--ease-out); }

/* Captcha */
.captcha-row { display: flex; gap: 10px; }
.captcha-row .input-wrap { flex: 1; min-width: 0; }

.captcha-box {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  height: 52px;
  padding: 0 6px;
  border: 1px dashed #c9dccd;
  border-radius: var(--radius);
  background: rgba(242, 248, 243, .8);
  flex-shrink: 0;
  transition: border-color .25s;
}
.captcha-box:hover { border-color: var(--green-500); }
.captcha-box canvas { display: block; border-radius: 8px; user-select: none; transition: opacity .25s, transform .25s; }
.captcha-box canvas.swap { opacity: 0; transform: scale(.9); }

/* Server code (lblCaptchaCode). Shown as plain text until the canvas is drawn. */
.captcha-code-text {
  min-width: 70px; padding: 0 8px; text-align: center;
  font-size: 20px; font-weight: 600; letter-spacing: .25em; color: var(--green-900);
  user-select: none;
}
.captcha-box canvas { display: none; }
.captcha-drawn .captcha-box canvas { display: block; }
.captcha-drawn .captcha-code-text {
  position: absolute; width: 1px; height: 1px; min-width: 0; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.captcha-refresh { width: 36px; height: 36px; border-radius: 10px; }
.captcha-refresh svg { width: 17px; height: 17px; stroke-width: 1.9; transition: transform .6s var(--ease-out); }
.captcha-refresh:hover svg { transform: rotate(180deg); }
.captcha-refresh.spin svg { animation: spinOnce .6s var(--ease-out); }
@keyframes spinOnce { to { transform: rotate(360deg); } }

.field-error {
  display: block; margin-top: 6px;
  font-size: 12.5px; color: var(--danger);
  animation: fadeUp .3s var(--ease-out);
}
.field-error:empty { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ==========================================================
   Login button — glass
   The real <input type="submit"> (asp:Button btnSignIn) fills the wrap;
   gloss / shine / label / ripple sit on top with pointer-events: none.
   ========================================================== */
.btn-login-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100%; height: 56px; margin-top: 8px;
  border-radius: 16px;
  box-shadow: 0 16px 30px -14px rgba(20, 83, 45, .75);
  transition: box-shadow .3s, transform .25s var(--ease-out);
  opacity: 0;
}
.is-ready .btn-login-wrap { animation: btnIn .7s .85s var(--ease-out) forwards; }

.btn-login {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .04) 50%, rgba(0, 0, 0, .06) 100%),
    linear-gradient(120deg, var(--green-600), var(--green-800) 55%, #1f7a5a);
  background-size: 100% 100%, 200% 100%;
  background-position: 0 0, 0% 0;
  color: transparent;               /* text is drawn by .btn-label */
  font: inherit; font-size: 18px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 6px rgba(0, 0, 0, .12);
  transition: background-position .6s var(--ease-out), box-shadow .3s;
}
.btn-login:focus { outline: none; }
.btn-login:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }

/* glossy top highlight */
.btn-gloss {
  position: absolute; left: 6px; right: 6px; top: 3px; height: 45%;
  border-radius: 13px 13px 40% 40% / 13px 13px 20px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0));
  z-index: 1; pointer-events: none;
}
/* shine sweep */
.btn-shine {
  position: absolute; top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  z-index: 1; pointer-events: none;
}
.btn-login-wrap:hover .btn-shine { animation: sweep .9s var(--ease-out); }
@keyframes sweep { to { left: 130%; } }

.btn-login-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 36px -14px rgba(20, 83, 45, .85), 0 0 0 4px rgba(69, 160, 99, .15);
}
.btn-login-wrap:hover .btn-login { background-position: 0 0, 100% 0; }
.btn-login-wrap:active { transform: translateY(0) scale(.985); }

.btn-label {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: #fff; font-size: 18px; font-weight: 500; letter-spacing: .01em;
  pointer-events: none;
}
.btn-arrow {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .35s var(--ease-spring);
}
.btn-login-wrap:hover .btn-arrow { transform: translateX(5px); }

.btn-spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.btn-login-wrap.is-loading { pointer-events: none; }
.btn-login-wrap.is-loading .btn-arrow { display: none; }
.btn-login-wrap.is-loading .btn-spinner { display: inline-block; }

/* click ripple */
.ripple {
  position: absolute; border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transform: scale(0); pointer-events: none; z-index: 1;
  animation: ripple .65s var(--ease-out) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* Alert */
.form-alert {
  display: none; margin: 0 0 16px;
  padding: 10px 14px; border-radius: 12px;
  font-size: 13.5px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.form-alert.show { display: block; animation: fadeUp .35s var(--ease-out); }
.form-alert.error   { background: rgba(255, 244, 237, .9); color: var(--danger); border: 1px solid #fed7aa; }
.form-alert.success { background: rgba(230, 242, 232, .9); color: var(--green-900); border: 1px solid #cfe5d4; }

.card-foot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(225, 231, 228, .8);
  font-size: 13px; color: var(--ink-mute);
}
.card-foot svg { width: 14px; height: 14px; fill: none; stroke: var(--green-600); stroke-width: 1.8; stroke-linejoin: round; }

/* Shake on error */
.shake { animation: shake .45s ease; }
@keyframes shake {
  20%, 60% { translate: -7px 0; }
  40%, 80% { translate: 7px 0; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1280px) {
  .login-shell { grid-template-columns: minmax(360px, 1fr) minmax(0, .7fr) minmax(400px, 480px); }
  .feature-list { gap: 24px; }
  .chip-2 { right: 12%; }
}

@media (max-width: 1080px) {
  .login-shell { grid-template-columns: 1fr minmax(380px, 460px); }
  .hero-visual { display: none; }
  .brand-panel { padding-right: 24px; }
}

@media (max-width: 820px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); }
  .brand-panel { padding: 28px 20px 0; align-items: center; text-align: center; }
  .brand-logo { align-self: center; }
  .brand-logo img { width: 190px; }
  .brand-content { padding: 26px 0 8px; display: flex; flex-direction: column; align-items: center; }
  .status-pill { font-size: 12px; padding: 6px 12px; }
  .brand-title { font-size: 34px; margin-top: 18px; }
  .title-rule { margin: 18px auto 14px; transform-origin: center; }
  .brand-sub { font-size: 16px; white-space: normal; }
  .feature-list, .tagline { display: none; }
  .form-panel { padding: 20px 16px 36px; }
  .login-card { padding: 30px 22px 22px; border-radius: 22px; }
  .card-head h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .field, .btn-login-wrap, .login-card, .glass-chip, .hero-img img { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ---------- Powered-by line + contact pills (bottom of the card) ---------- */
.card-foot { font-size: 12px; white-space: nowrap; }
.card-foot b { color: var(--green-800); font-weight: 600; }
.card-contact {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 12px;
}
.contact-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid #d7e8da; border-radius: 999px;
  background: var(--green-50);
  font-size: 12.5px; color: var(--green-800); text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s var(--ease-out);
}
.contact-pill svg {
  width: 14px; height: 14px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.contact-pill:hover { background: var(--green-100); border-color: var(--green-500); transform: translateY(-1px); }