:root{
    --bg:#0b1016; --panel:#121826; --muted:#8ea0b5; --text:#e7eef7; --brand:#39a6ff;
    --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
  .page{display:grid;grid-template-columns:3fr 2fr;min-height:100vh}
  .brand{position:relative;overflow:hidden}
  .brand-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.05) brightness(.6)}
  .brand-overlay{position:absolute;inset:0;background:radial-gradient(1200px 800px at 20% 20%, rgba(57,166,255,.25), transparent), linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.6))}
  .brand-content{position:relative;z-index:2;padding:clamp(24px,5vw,64px);max-width:640px}
  .brand-title{font-size:clamp(28px,4vw,56px);line-height:1.1;margin:.25em 0}
  .brand-sub{color:var(--muted);max-width:48ch}
  .brand-bullets{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px;padding-left:18px}
  .brand-bullets li{color:#c8d6e5}
  .auth{display:grid;place-items:center;padding:clamp(24px,4vw,48px)}
  .card{width:min(520px,92%);background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,3vw,40px);border:1px solid rgba(57,166,255,.05)}
  .card h2{margin:0 0 20px 0;font-size:1.5rem;font-weight:600;color:var(--text)}
  .field{position:relative;display:grid;gap:6px;margin:16px 0}
  .field > *:first-child{position:relative}
  .field span{position:absolute;left:14px;top:18px;color:var(--muted);font-size:.875rem;pointer-events:none;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:1}
  .field input{width:100%;border:1px solid #263141;background:#0e1420;color:var(--text);border-radius:12px;padding:20px 14px 8px 14px;outline:none;transition:all .3s cubic-bezier(.4,0,.2,1);font-size:1rem;font-family:inherit;min-height:48px}
  .field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(57,166,255,.1);background:#0f1622}
  .field.has-content span,
  .field input:focus ~ span{top:4px;font-size:.75rem;color:var(--brand);font-weight:500}
  .password-wrap{position:relative;display:flex;align-items:center}
  .password-wrap input{padding-right:56px; box-sizing: border-box}
  .password-wrap .ghost{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:1px solid #263141;background:#0e1420;color:#9fb2c7;border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;z-index:2;width:32px;height:32px;display:flex;align-items:center;justify-content:center;pointer-events:auto}
  .password-wrap .ghost:hover{background:#1a2332;border-color:#39a6ff;color:#39a6ff}
  .password-wrap .ghost:active{transform:translateY(-50%) scale(.95)}
  .primary{width:100%;margin-top:16px;padding:14px 18px;border:none;border-radius:12px;cursor:pointer;background:linear-gradient(135deg,var(--brand),#6bc1ff);color:#06121c;font-weight:600;font-size:1rem;transition:all .2s ease;transform:translateY(0)}
  .primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 4px 12px rgba(57,166,255,.3)}
  .primary:active{transform:translateY(0)}
  .fineprint{color:#8ea0b5;font-size:.9rem;margin-top:14px}
  .flash{display:grid;gap:8px;margin-bottom:16px}
  .flash .err{padding:12px 14px;border-radius:10px;background:rgba(255,107,107,.15);border:1px solid rgba(255,107,107,.4);color:#ff9b9b;font-size:.9rem;animation:slideIn .3s ease}
  .field.error input{border-color:#ff6b6b}
  .field.error input:focus{box-shadow:0 0 0 3px rgba(255,107,107,.2)}
  .field.error span{color:#ff9b9b}
  @keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
  /* --- soften the right edge of the branding image --- */
  /* Right-edge fade on the branding image (no blur) */
  .brand { position: relative; overflow: hidden; }
  
  /* Fade the whole left pane into the right side (no blur) */
  .brand{
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0,0,0,0) 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0,0,0,0) 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  .brand-content{
    position:absolute; inset:0;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding: clamp(32px, 6vw, 80px);
    max-width: min(64ch, 60%);     /* readable line-length */
    gap: clamp(10px, 2vh, 22px);
  }
  /* tighter, bolder headline with balanced wrapping */
  .brand-title{
    margin:0;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(36px, 5.6vw, 72px);
    text-wrap: balance;
    color: #e9f1fb;
  }
  /* calmer subhead */
  .brand-sub{
    margin: 0;
    max-width: 52ch;
    font-size: clamp(14px, 1.2vw, 18px);
    line-height: 1.45;
    color: #a9bbcf;
  }
  /* cleaner bullets with modern dots */
  .brand-bullets{
    margin: 50px 0 0 0;    /* space from subhead */
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column; /* <-- vertical */
    gap: 8px;
    max-width: 48ch;        /* comfortable line length */
  }
  
  .brand-bullets li{
    color: #c9d6e5;
    display: flex;
    align-items: center;
    line-height: 1.25;
  }
  
  .brand-bullets li::before{
    content:"";
    width: 4px; height: 12px; margin-right: 10px; border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 4px rgba(57,166,255,.18);
  }

/* logo row breathing room and scale */
.logo-row{ gap: 10px; margin: 0 0 8px 0; }
.logo-text{ font-weight: 700; opacity: .95 }

  /* Ensure the image itself isn't also masked separately */
  .brand-bg{
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }
  .brand-bg {
    /* keep your existing position/size/filters... */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 55%,           /* solid image until here */
      rgba(0,0,0,0) 100%  /* fade out to transparent on the right */
    );
            mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 55%,
      rgba(0,0,0,0) 100%
    );
  }
  .logo-row{
  position: absolute;
  top: clamp(16px, 3vw, 32px);
  left: clamp(16px, 3vw, 32px);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;               /* ignore any previous margins */
  z-index: 3;              /* stay above the image/overlay */
}

/* Logotype styling */
/* Logotype styling */
.logo-text{
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: clamp(18px, 1.6vw, 24px);
  color: #e9f1fb;
}

/* Logo image with round edges */
.logo-image{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 18px rgba(57,166,255,.55);
}

/* keep title readable even if JS fails */
.brand-title{
  position: relative;
  white-space: normal;
  word-break: keep-all;
  text-wrap: balance;
}

/* per-character reveal (smooth, modern) */
.tw-ch{
  display: inline;           /* no mid-word breaks */
  opacity: 0;
  animation: twIn .28s ease forwards;
  /* optional subtle lift: uncomment next line if you want it */
  /* transform: translateY(3px); */
}
@keyframes twIn{ to{ opacity:1; /* transform:none; */ } }

/* blinking caret */
.caret{
  display:inline-block; width:0.6ch; margin-left:4px;
  border-right:2px solid var(--brand);
  animation: caretBlink 1.1s steps(1) infinite;
}
.caret.soft{ opacity:.7; }
@keyframes caretBlink { 50%{ border-color: transparent; } }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .tw-ch{ animation:none; opacity:1; }
  .caret{ animation:none; border-color:transparent; }
}

/* page exit animation */
/* Smooth, modern page exit */
.page{
  opacity: 1;
  transform: none;
  transition:
    opacity .75s cubic-bezier(.2,.8,.2,1),
    transform .75s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.page.is-leaving{
  opacity: 0;
  transform: translateY(10px); /* subtle slide while fading */
  pointer-events: none;
}

/* Button loading state (non-blocking UI hint) */
.primary.is-loading{
  position: relative;
  pointer-events: none;
  filter: saturate(.95);
}
.primary.is-loading .button-text{opacity:0}
.primary.is-loading::after{
  content: "Signing in…";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-weight:600;
}

/* Password toggle icon */
.password-wrap .ghost svg{
  transition: opacity .2s ease;
}
.primary .button-text{
  transition: opacity .2s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .page{ transition: none; }
}