:root{
  --bg-page:#EEF0F6; --card:#FFFFFF; --ink:#0A0E1A; --ink-2:#4B5563; --ink-3:#9CA3AF;
  --line:#E5E7EB; --cyan:#2DD4F4; --cyan-deep:#0EA5C0; --cyan-soft:#E0F8FB;
  --good:#10B981; --warn:#CA8A04; --warn-soft:#FEF9C3; --bad:#EF4444;
}
*{box-sizing:border-box;}
body{margin:0;font-family:'Inter',sans-serif;background:var(--bg-page);color:var(--ink);}

.brandmark{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.18em;font-size:13px;color:var(--ink);}
.brandmark .dot{width:9px;height:9px;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));box-shadow:0 0 0 4px var(--cyan-soft);}
.brandmark b{color:var(--cyan-deep);}
.brandmark .brand-logo{height:30px;width:auto;display:block;}
.login-card .brandmark .brand-logo{height:34px;}

.login-scrim{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 15% 15%, rgba(45,212,244,.16), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(14,165,192,.14), transparent 45%),
    var(--bg-page);
  padding:24px;
}
.login-card{
  width:100%; max-width:400px; background:var(--card); border-radius:28px;
  padding:36px 32px 30px; box-shadow:0 24px 60px rgba(10,14,26,.10);
  animation:cardIn .5s cubic-bezier(.2,.9,.25,1);
}
@keyframes cardIn{ from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;} }
.login-card h1{font-size:26px;margin:18px 0 6px;letter-spacing:-.02em;}
.login-card .sub{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin:0 0 22px;}

.field-label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px;}
#brandSelect{
  width:100%; padding:13px 14px; border-radius:14px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff; margin-bottom:18px;
  transition:border-color .2s;
}
#brandSelect:focus{border-color:var(--cyan-deep);}

.pw-wrap{max-height:0; opacity:0; overflow:hidden; transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .35s ease;}
.pw-wrap.open{max-height:220px; opacity:1;}

.pw-shell{border-radius:14px; transition:box-shadow .15s;}
#pwInput{
  width:100%; padding:13px 14px; border-radius:14px; border:1.5px solid var(--line);
  font-family:inherit; font-size:14.5px; background:#fff; color:var(--ink);
}
#pwInput:focus{border-color:var(--cyan-deep);}

/* Deliberate, narrow exception to the "no red, never alarming" rule used everywhere
   else in this app: this is feedback about the user's own login attempt, not about
   their business results, so a normal red wrong-password cue stays here on purpose. */
.pw-shell.shake-glow{ animation: shakeGlow .5s cubic-bezier(.36,.07,.19,.97); border-radius:14px; }
@keyframes shakeGlow{
  0%   { transform:translateX(0);   box-shadow:0 0 0 0 rgba(239,68,68,0); }
  12%  { transform:translateX(-9px);box-shadow:0 0 0 4px rgba(239,68,68,.35); }
  24%  { transform:translateX(8px); }
  36%  { transform:translateX(-6px);box-shadow:0 0 0 5px rgba(239,68,68,.4); }
  48%  { transform:translateX(5px); }
  62%  { transform:translateX(-3px);box-shadow:0 0 0 3px rgba(239,68,68,.25); }
  76%  { transform:translateX(2px); }
  100% { transform:translateX(0);   box-shadow:0 0 0 0 rgba(239,68,68,0); }
}
.pw-shell.shake-glow #pwInput{ border-color:var(--bad); }

.btn-enter{
  width:100%; margin-top:16px; padding:13px; border:none; border-radius:14px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:14.5px; color:#fff;
  background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-deep) 100%);
  box-shadow:0 10px 24px rgba(14,165,192,.35); transition:transform .15s, box-shadow .15s;
}
.btn-enter:hover{transform:translateY(-1px); box-shadow:0 14px 28px rgba(14,165,192,.42);}
.btn-enter:active{transform:translateY(0);}
.btn-enter:disabled{opacity:.6;cursor:default;transform:none;}

.login-err{min-height:18px;color:var(--bad);font-size:12.5px;font-weight:600;margin-top:10px;text-align:center;}

.admin-toggle{
  display:block; margin:22px auto 0; background:none; border:none; cursor:pointer;
  color:var(--ink-3); font-size:12px; font-weight:600; letter-spacing:.02em; font-family:inherit;
}
.admin-toggle:hover{color:var(--cyan-deep);}

.version-tag{
  font-size:10.5px; font-weight:700; letter-spacing:.08em; color:var(--ink-3);
  background:#fff; border:1px solid var(--line); padding:4px 10px; border-radius:999px;
}
.version-tag.corner{position:fixed; right:18px; bottom:18px;}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); opacity:0;
  background:var(--ink); color:#fff; padding:11px 20px; border-radius:12px; font-size:13.5px;
  font-weight:600; transition:opacity .25s, transform .25s; pointer-events:none; z-index:999;
}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.err{background:var(--bad);}

/* app-wide visible keyboard focus ring (mouse clicks don't trigger :focus-visible,
   so this only shows up for keyboard/assistive-tech navigation, not every click) */
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible{
  outline:2px solid var(--cyan-deep); outline-offset:2px;
}