/* ---------------------------------------------------------------------------
   ui.css — the application shell: sign-in screen, dashboard, app bar, toasts.
   Every design token the site uses lives here; app.css styles the data-entry
   workspace with them, and form.css (the printed paper) is untouched by both.
--------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* surfaces & ink */
  --bg: #eef2f7;
  --bg-2: #e3e9f2;
  --card: #ffffff;
  --card-2: #f6f8fb;
  --line: #dde4ee;
  --line-soft: #e9eef5;
  --text: #0f1b2d;
  --muted: #5b6b80;
  --faint: #8695a8;

  /* chrome accent — deliberately not one of the bank hues */
  --accent: #14345c;
  --accent-2: #1d4c85;
  --accent-ink: #ffffff;
  --accent-wash: #e8eef7;
  --ring: #2a78d6;

  /* bank identity (validated categorical palette, light mode) */
  --mtb: #b81e78;
  --jbl: #2a78d6;
  --mdb: #3f8f2f;

  /* status */
  --good: #0ca30c;
  --critical: #d03b3b;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(15, 27, 45, .06), 0 1px 3px rgba(15, 27, 45, .05);
  --shadow-2: 0 4px 12px rgba(15, 27, 45, .08), 0 12px 32px rgba(15, 27, 45, .07);
  --shadow-3: 0 18px 50px rgba(8, 20, 38, .22);

  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b0f16;
    --bg-2: #0f1520;
    --card: #151b24;
    --card-2: #1b222d;
    --line: #273040;
    --line-soft: #1f2734;
    --text: #e9eef6;
    --muted: #9dabbd;
    --faint: #7b8899;
    --accent: #2f6fbd;
    --accent-2: #3d83d6;
    --accent-ink: #ffffff;
    --accent-wash: #16263c;
    --ring: #5aa0f0;
    --mtb: #d94d97;
    --jbl: #3987e5;
    --mdb: #5aab3f;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f16;
  --bg-2: #0f1520;
  --card: #151b24;
  --card-2: #1b222d;
  --line: #273040;
  --line-soft: #1f2734;
  --text: #e9eef6;
  --muted: #9dabbd;
  --faint: #7b8899;
  --accent: #2f6fbd;
  --accent-2: #3d83d6;
  --accent-ink: #ffffff;
  --accent-wash: #16263c;
  --ring: #5aa0f0;
  --mtb: #d94d97;
  --jbl: #3987e5;
  --mdb: #5aab3f;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  line-height: 1;
  padding: 9px 15px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
}
.btn:hover { border-color: var(--accent); background: var(--card-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.btn.primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
.btn.primary:hover { filter: brightness(1.1); border-color: var(--accent); }
.btn.ghost { background: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.icon { padding: 9px; width: 34px; }
.btn.block { width: 100%; }
.btn.lg { padding: 12px 18px; font-size: 14px; }
.btn.sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* =========================================================================
   THE LOGO
   ========================================================================= */

svg.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.logo-mark {
  width: 38px;
  height: 38px;
  flex: none;
  filter: drop-shadow(0 6px 16px rgba(10, 60, 130, .5));
}
.logo-mark.lg { width: 64px; height: 64px; }
.logo-mark.xl { width: 74px; height: 74px; }
.login-nav .logo-mark { width: 48px; height: 48px; }

.brandmark { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.brandmark .logo-mark { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.brandmark:hover .logo-mark { transform: translateY(-2px) rotate(-4deg) scale(1.05); }
.brandtext b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
}
.brandtext i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: #93c2ef;
}

/* =========================================================================
   THE OWNER'S LOCKUP — the system belongs to Mega Packaging Bangladesh Ltd.
   The supplied mark is white artwork on a transparent ground, so it only
   shows against something dark; and its own wordmark is far too small to
   read at navbar size, which is why the name is set in real text beside a
   crop of the monogram rather than shown as part of the image.
   ========================================================================= */

.brand-sep {
  width: 1px;
  height: 30px;
  flex: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .26), transparent);
}

.owner { display: flex; align-items: center; gap: 11px; min-width: 0; }

.owner-mark {
  width: 48px;
  height: 29px;
  flex: none;
  object-fit: cover;
  object-position: 50% 0%;       /* keeps the monogram, drops its wordmark */
}

.owner-text i {
  display: block;
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #7ea6cf;
}
.owner-text b {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: #dbe9fa;
  white-space: nowrap;
}

/* --- the theme switch, with its state spelled out ------------------------- */

.theme-switch { display: flex; align-items: center; gap: 9px; }
.theme-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #93c2ef;
}

/* one icon for where you are, not for where you are going */
.theme .i-moon { display: none; }
:root[data-theme-state="dark"] .theme .i-sun { display: none; }
:root[data-theme-state="dark"] .theme .i-moon { display: block; }

/* =========================================================================
   PRELOADER
   ========================================================================= */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 18% -10%, #123f77 0%, rgba(18, 63, 119, 0) 58%),
    radial-gradient(760px 560px at 86% 108%, #0a5566 0%, rgba(10, 85, 102, 0) 60%),
    linear-gradient(160deg, #0a2348 0%, #061229 48%, #02060d 100%);
  transition: opacity .55s ease, visibility .55s, transform .55s cubic-bezier(.4, 0, .2, 1);
}
.preloader.gone {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.06);
  pointer-events: none;
}

.pre-aurora {
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(143, 199, 240, .12), rgba(47, 127, 214, .15),
    rgba(227, 184, 95, .06), rgba(143, 199, 240, .12));
  filter: blur(70px);
  animation: turn 30s linear infinite;
}

.pre-inner { position: relative; display: grid; justify-items: center; }

.pre-mark { position: relative; display: grid; place-items: center; width: 120px; height: 120px; }
.pre-mark .logo-mark { animation: beat 2.2s ease-in-out infinite; }

.pre-ring { position: absolute; inset: 0; width: 120px; height: 120px; animation: turn 2s linear infinite; }
.pre-ring circle { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.pre-track { stroke: rgba(255, 255, 255, .12); }
.pre-arc { stroke: #8fc7f0; animation: dash 1.6s ease-in-out infinite; }

@keyframes turn { to { transform: rotate(360deg); } }
@keyframes beat {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
@keyframes dash {
  0%   { stroke-dasharray: 18 310; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 190 310; stroke-dashoffset: -52; }
  100% { stroke-dasharray: 18 310; stroke-dashoffset: -310; }
}

.pre-name {
  margin: 20px 0 0;
  text-align: center;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .1em;
  animation: rise .7s ease-out both;
  animation-delay: .1s;
}
.pre-name span {
  display: block;
  margin-top: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: #93c2ef;
}

.pre-bar {
  width: 168px;
  height: 3px;
  margin-top: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.pre-bar i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8fc7f0, #2f7fd6, #e3b85f);
  animation: sweep 1.35s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(268%); }
}

.pre-note {
  margin: 14px 0 0;
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #6f9ccb;
  animation: rise .7s ease-out both;
  animation-delay: .25s;
}

/* =========================================================================
   SIGN IN
   ========================================================================= */

.login {
  position: relative;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  background: #02060d;
  color: #e6eefb;

  /* One cool family — navy through sapphire to teal — with a single warm
     accent picked out of the logo's own bolt. Depth comes from tone, not
     from putting five hues on screen at once. */
  --lg-ice: #8fc7f0;
  --lg-blue: #2f7fd6;
  --lg-deep: #16468f;
  --lg-gold: #e3b85f;
}

/* --- the moving backdrop -------------------------------------------------- */

.login-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(1150px 720px at 6% -14%, #17568f 0%, rgba(23, 86, 143, 0) 58%),
    radial-gradient(900px 640px at 98% 104%, #0c6076 0%, rgba(12, 96, 118, 0) 60%),
    radial-gradient(820px 600px at 76% 0%, #1e4384 0%, rgba(30, 67, 132, 0) 60%),
    radial-gradient(560px 470px at 14% 98%, #123f6e 0%, rgba(18, 63, 110, 0) 64%),
    radial-gradient(520px 460px at 52% 46%, #143a74 0%, rgba(20, 58, 116, 0) 66%),
    linear-gradient(158deg, #0c2a52 0%, #071730 48%, #030a16 100%);
}

.aurora {
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(143, 199, 240, .13), rgba(47, 127, 214, .17), rgba(227, 184, 95, .07),
    rgba(12, 110, 130, .13), rgba(143, 199, 240, .13));
  filter: blur(78px);
  animation: turn 46s linear infinite;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(82px);
  opacity: .38;
  animation: drift 26s ease-in-out infinite alternate;
}
.orb-1 { width: 430px; height: 430px; left: -110px; top: -90px; background: #2a6fbe; }
.orb-2 { width: 380px; height: 380px; right: -90px; bottom: -110px; background: #0d6d82; animation-duration: 33s; animation-delay: -9s; }
.orb-3 { width: 340px; height: 340px; left: 58%; top: 20%; background: #24437f; animation-duration: 40s; animation-delay: -18s; }
/* a breath of warmth, kept faint — it reads as candlelight, not colour */
.orb-4 { width: 260px; height: 260px; left: 10%; bottom: 3%; background: #8a6a2f; animation-duration: 36s; animation-delay: -24s; opacity: .17; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(64px, 50px, 0) scale(1.16); }
}

/* a faint engineering grid, fading out towards the edges */
.weave {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 65% at 50% 40%, #000 25%, transparent 76%);
  mask-image: radial-gradient(75% 65% at 50% 40%, #000 25%, transparent 76%);
  animation: weave 40s linear infinite;
}
@keyframes weave {
  to { background-position: 56px 56px, 56px 56px; }
}

/* specks of light rising through it all, each its own colour */
.motes { position: absolute; inset: 0; }
.motes i {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: var(--s, 3px);
  height: var(--s, 3px);
  border-radius: 50%;
  background: var(--c, #a8d4f5);
  box-shadow: 0 0 11px 1.5px var(--c, #a8d4f5);
  opacity: 0;
  animation: lift var(--d, 24s) linear infinite;
  animation-delay: calc(var(--d, 24s) / -3);
}
@keyframes lift {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: .9; }
  50%  { transform: translateY(-52vh) translateX(-14px); opacity: .7; }
  80%  { opacity: .55; }
  100% { transform: translateY(-104vh) translateX(26px); opacity: 0; }
}

/* the three banks, playing about in the background --------------------------
   Two motions are layered so nothing ever repeats visibly: the wrapper takes
   a long, looping voyage while the mark itself wobbles and breathes against
   it at a third of the speed. ghostMark() in shell.js has already lifted each
   mark off its white paper and dyed it that bank's colour.                  */

.floaters { position: absolute; inset: 0; }

.floater {
  position: absolute;
  animation: sail var(--t, 26s) ease-in-out infinite;
  will-change: transform;
}

.floater img {
  display: block;
  height: var(--h, 70px);
  width: auto;
  animation: wobble calc(var(--t, 26s) / 3) ease-in-out infinite alternate;
}

/* each mark carries a glow in its own tone, which is what keeps that tone
   reading true where it drifts across a pool of some other colour */
.floater img[data-bank-logo="mtb"] { filter: drop-shadow(0 0 18px rgba(230, 200, 147, .5)); }
.floater img[data-bank-logo="jbl"] { filter: drop-shadow(0 0 18px rgba(156, 205, 242, .5)); }
.floater img[data-bank-logo="mdb"] { filter: drop-shadow(0 0 18px rgba(179, 214, 196, .48)); }

.f1 { left: 5%;  top: 15%; }
.f2 { right: 7%; top: 11%; animation-delay: -6s; }
.f3 { left: 11%; bottom: 13%; animation-delay: -11s; }
.f4 { right: 13%; bottom: 17%; animation-delay: -3s; }
.f5 { left: 45%; top: 5%; animation-delay: -15s; }
.f6 { left: 39%; bottom: 5%; animation-delay: -20s; }
.f7 { right: 30%; top: 44%; animation-delay: -8s; }
.f8 { left: 24%; top: 47%; animation-delay: -17s; }
.f9 { right: 4%; top: 58%; animation-delay: -24s; }

@keyframes sail {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, -6deg)); }
  25%      { transform: translate3d(var(--dx, 24px), calc(var(--dy, -32px) * .55), 0) rotate(calc(var(--r, -6deg) * -.6)); }
  50%      { transform: translate3d(calc(var(--dx, 24px) * .3), var(--dy, -32px), 0) rotate(calc(var(--r, -6deg) * -1)); }
  75%      { transform: translate3d(calc(var(--dx, 24px) * -.55), calc(var(--dy, -32px) * .35), 0) rotate(calc(var(--r, -6deg) * .55)); }
}

@keyframes wobble {
  from { transform: scale(.92) rotate(-3deg); opacity: .44; }
  to   { transform: scale(1.1) rotate(3deg); opacity: .72; }
}

@media (max-width: 720px) {
  .f5, .f6, .f7, .f8 { display: none; }
}

/* --- navbar --------------------------------------------------------------- */

.login-nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 28px;
  animation: drop-in .7s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: .1s;
}
.login-nav .on-dark {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .17);
  color: #d8e7f8;
}
.login-nav .on-dark:hover {
  background: rgba(255, 255, 255, .15);
  border-color: rgba(255, 255, 255, .34);
  transform: rotate(35deg);
}
.login-nav .on-dark svg { transition: transform .3s; }

@keyframes drop-in { from { opacity: 0; transform: translateY(-16px); } }

/* --- the card ------------------------------------------------------------- */

.login-main {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 18px 20px 34px;
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 416px;
  padding: 34px 32px 26px;
  text-align: center;
  color: var(--text);
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  /* on a near-black canvas a dark shadow does nothing — the card is lifted by
     a cool halo of its own instead */
  box-shadow:
    0 40px 90px rgba(0, 0, 0, .62),
    0 0 80px rgba(43, 127, 224, .18),
    0 0 0 1px rgba(255, 255, 255, .05);
  animation: card-in .68s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: .06s;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
}

/* a thread of brand colour along the top edge, slowly drifting */
.login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16%;
  right: 16%;
  height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--lg-ice), var(--lg-blue), var(--lg-gold), transparent);
  background-size: 220% 100%;
  animation: thread 7s ease-in-out infinite alternate;
}
@keyframes thread {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}

/* everything inside arrives just after the card does */
.login-card > * { animation: rise .55s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 240ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* --- the badge, with its own weather ------------------------------------- */

.login-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
}

/* a ring of light sweeping round the mark */
.login-badge .halo {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: conic-gradient(from 0turn,
    transparent 0 52%, var(--lg-ice) 72%, var(--lg-gold) 89%, transparent 97%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
  animation: turn 6.5s linear infinite;
  opacity: .9;
}

/* and one spark going the other way */
.login-badge .orbit {
  position: absolute;
  inset: -15px;
  animation: turn 4.4s linear infinite reverse;
}
.login-badge .orbit i {
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #f0d49a;
  box-shadow: 0 0 12px 2px rgba(240, 212, 154, .8);
}

.login-badge .logo-mark { position: relative; animation: beat 4.5s ease-in-out infinite; }

.login-card h1 {
  margin: 0 0 5px;
  font-size: 20.5px;
  font-weight: 750;
  letter-spacing: -.015em;
}
.login-card .sub { margin: 0 0 22px; color: var(--muted); font-size: 13.5px; }

.f-label { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 550; color: var(--muted); text-align: left; }
.f-row { margin-bottom: 14px; }

.f-wrap { position: relative; display: block; }
.f-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
  transition: color .2s, transform .2s;
}
.f-wrap:focus-within .f-icon { color: var(--lg-blue); transform: translateY(-50%) scale(1.08); }

.f-input {
  display: block;
  width: 100%;
  padding: 12px 13px 12px 40px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.f-input::placeholder { color: var(--faint); }
.f-input:focus {
  outline: 0;
  background: var(--card);
  border-color: var(--lg-blue);
  box-shadow: 0 0 0 4px rgba(43, 127, 224, .18);
}
#loginPass { padding-right: 44px; }

.f-wrap #togglePw {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  padding: 7px;
  border-radius: 8px;
  line-height: 0;
}
.f-wrap #togglePw:hover { color: var(--lg-blue); background: var(--card-2); }

.f-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--lg-blue); margin: 0; }

.alert {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin: 0 0 15px;
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  text-align: left;
  background: rgba(208, 59, 59, .1);
  border: 1px solid rgba(208, 59, 59, .38);
  color: var(--text);
  animation: shake .42s cubic-bezier(.36, .07, .19, .97);
}
.alert svg { flex: none; color: var(--critical); margin-top: 1px; }
@keyframes shake {
  10%, 90% { transform: translateX(-1.5px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* --- the sign-in button --------------------------------------------------- */

.login-card .btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #3f92e2 0%, #1e5cb4 48%, #133f85 100%);
  background-size: 190% 100%;
  box-shadow: 0 10px 26px rgba(24, 76, 154, .36);
  transition: background-position .5s ease, box-shadow .25s, transform .12s;
}
.login-card .btn.primary:hover {
  filter: none;
  background-position: 100% 0;
  box-shadow: 0 12px 32px rgba(47, 127, 214, .42);
  transform: translateY(-1px);
}
.login-card .btn.primary:active { transform: translateY(0); }

/* the sweep of light across it */
.btn.sheen { position: relative; overflow: hidden; }
.btn.sheen::after {
  content: "";
  position: absolute;
  top: 0;
  left: -130%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
}
.btn.sheen:hover::after { animation: sheen 1s cubic-bezier(.3, .6, .4, 1); }
@keyframes sheen { to { left: 150%; } }
.btn.sheen svg { transition: transform .2s; }
.btn.sheen:hover svg { transform: translateX(4px); }

.card-banks { margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.card-banks .cap {
  margin: 0 0 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--faint);
}
.card-banks .row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.card-banks img {
  height: 21px;
  width: auto;
  max-width: 30%;
  object-fit: contain;
  background: #fff;
  padding: 4px 7px;
  border-radius: 7px;
  border: 1px solid var(--line);
  animation: bob 5s ease-in-out infinite;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card-banks img:nth-child(2) { animation-delay: -1.7s; }
.card-banks img:nth-child(3) { animation-delay: -3.4s; }
.card-banks img:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--lg-blue);
  box-shadow: 0 6px 16px rgba(32, 100, 201, .22);
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

.privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 17px 0 0;
  font-size: 11.5px;
  color: var(--faint);
}
.privacy svg { flex: none; }

/* --- the developer -------------------------------------------------------- */

.login-credit {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 0 20px 26px;
  animation: rise .7s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: .85s;
}
.login-credit .dev { margin: 0; font-size: 12.5px; color: #9cc0e4; }
.login-credit .dev a {
  position: relative;
  color: #e4f1ff;
  font-weight: 650;
  text-decoration: none;
  transition: color .18s;
}
.login-credit .dev a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--lg-ice), var(--lg-gold));
  transform: scaleX(.42);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.login-credit .dev a:hover { color: #fff; }
.login-credit .dev a:hover::after { transform: scaleX(1); }

.login-credit .gh {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #dbe9fa;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .17);
  transition: background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.login-credit .gh svg { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.login-credit .gh:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .36);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 14, 30, .45);
  color: #fff;
}
.login-credit .gh:hover svg { transform: rotate(-12deg) scale(1.12); }
.login-credit a:focus-visible, .login-nav .btn:focus-visible { outline: 2px solid #6fb6f2; outline-offset: 2px; }

@media (max-width: 860px) {
  .owner-text { display: none; }
}
@media (max-width: 620px) {
  .brand-sep, .owner { display: none; }
}
@media (max-width: 560px) {
  .login-nav { padding: 16px 18px; gap: 10px; }
  .login-nav .logo-mark { width: 42px; height: 42px; }
  .theme-label { display: none; }
  .login-card { padding: 28px 22px 22px; border-radius: 20px; }
  .login-main { padding: 10px 16px 26px; }
  .login-credit { gap: 10px; padding-bottom: 22px; }
  .pre-mark { width: 104px; height: 104px; }
  .pre-ring { width: 104px; height: 104px; }
  .logo-mark.xl { width: 64px; height: 64px; }
}

/* =========================================================================
   APP BAR (shared by the dashboard and the workspace)
   ========================================================================= */

.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.appbar .logo-mark { width: 40px; height: 40px; filter: drop-shadow(0 3px 8px rgba(8, 34, 68, .3)); }
.appbar-name b { display: block; font-size: 14px; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; }
.appbar-name span { display: block; font-size: 11.5px; color: var(--muted); }
.spacer { flex: 1 1 auto; }

/* --- section navigation --------------------------------------------------- */

.appnav {
  display: flex;
  gap: 3px;
  margin-left: 14px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
}
.navlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.navlink svg { opacity: .8; }
.navlink:hover { color: var(--text); background: var(--card); }
.navlink.on {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  box-shadow: var(--shadow-1);
}
.navlink.on svg { opacity: 1; }
.navlink:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@media (max-width: 1120px) { .navlink span, .navlink { font-size: 12px; } .appnav { margin-left: 8px; } }
@media (max-width: 1000px) { .appnav { display: none; } }

/* --- has the register reached the server? --------------------------------- */

.sync-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.sync-state::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  flex: none;
}
.sync-state.is-ok { color: var(--good); border-color: rgba(12, 163, 12, .45); }
.sync-state.is-ok::before { background: var(--good); }
.sync-state.is-working::before { background: var(--accent-2); animation: blink 1s ease-in-out infinite; }
.sync-state.is-off { color: #b07d00; border-color: rgba(250, 178, 25, .5); }
.sync-state.is-off::before { background: #fab219; }
@keyframes blink { 50% { opacity: .25; } }

@media (max-width: 900px) { .sync-state { display: none; } }

/* --- back to top ---------------------------------------------------------- */

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  animation: pop-in .25s cubic-bezier(.2, .8, .3, 1);
  transition: transform .18s, border-color .18s, color .18s;
}
.to-top:hover { transform: translateY(-3px); border-color: var(--accent); color: var(--accent-2); }
.to-top:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card-2);
}
/* The signed-in operator is the company. Its artwork is white, so it needs a
   navy disc under it; the monogram is wide and short, so a box wider than the
   source crops the wordmark away and leaves the mark centred in the circle. */
.avatar {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #1d4c85, #0d2344);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
}
.avatar img {
  display: block;
  width: 27px;
  height: 17px;
  object-fit: cover;
  object-position: 50% 0%;       /* the monogram, without its wordmark */
}
.user-chip .who { font-size: 12.5px; color: var(--muted); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .user-chip .who { display: none; }
  .user-chip { padding: 3px; }
}
@media (max-width: 620px) {
  .section-title { flex-direction: column; align-items: flex-start; gap: 3px; }
  .appbar { padding: 10px 14px; gap: 10px; }
  .appbar-name span { display: none; }
  .sign-out .lbl { display: none; }
  .sign-out { padding: 9px 10px; }
  .to-top { right: 16px; bottom: 16px; }
}
@media (max-width: 420px) {
  .appbar-name { display: none; }
}

/* =========================================================================
   DASHBOARD
   ========================================================================= */

.dash { max-width: 1280px; margin: 0 auto; padding: 26px 22px 72px; }

/* Each section gets enough room above it that the sticky app bar never lands
   on a heading when the nav scrolls to it. */
.dash-sec { scroll-margin-top: 84px; }

/* The whole board deals itself in, top-left to bottom-right. The class is
   re-applied on every visit so the deal replays, not just on first load. */
.dash.in .anim {
  animation: deal .55s cubic-bezier(.2, .8, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 65ms);
}
@keyframes deal {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
}

.dash-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dash-head h1 { margin: 0 0 3px; font-size: 24px; font-weight: 650; letter-spacing: -.02em; }
.dash-head p { margin: 0; color: var(--muted); font-size: 13.5px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

.card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: -.01em; }
.card-head p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

/* --- KPI row -------------------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 4px;
}
@media (max-width: 1080px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .kpis { grid-template-columns: 1fr; } }

.kpi { position: relative; padding: 16px 18px 17px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kpi::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-2), transparent);
  opacity: .5;
}
.kpi-ic {
  position: absolute;
  top: 15px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-wash);
  color: var(--accent-2);
}
.kpi .label { margin: 0 0 8px; padding-right: 36px; font-size: 12.5px; color: var(--muted); font-weight: 550; }
.kpi .value { font-size: 27px; font-weight: 650; letter-spacing: -.025em; line-height: 1.1; }
.kpi .note { margin: 7px 0 0; font-size: 12px; color: var(--faint); }
.kpi.hero { background: linear-gradient(140deg, var(--accent-wash), var(--card) 62%); }
.kpi.hero .value { font-size: 48px; letter-spacing: -.03em; }
.kpi.hero .cur { font-size: 20px; font-weight: 600; color: var(--muted); margin-right: 7px; letter-spacing: 0; }
.kpi .extra { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* --- bank cards ----------------------------------------------------------- */

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 2px 12px;
}
.section-title h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.section-title p { margin: 0; font-size: 12.5px; color: var(--muted); }

.bank-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .bank-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 660px) { .bank-grid { grid-template-columns: 1fr; } }

.bank-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 18px 18px;
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.bank-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--hue);
}
.bank-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.bank-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Every bank's mark gets the same plate, whatever shape it is. The marks vary
   from very wide and short to nearly square, so matching them on height alone
   leaves one looking tiny — an identical box with `contain` lets each fill as
   much of the same area as its own proportions allow. */
.bank-card .logo-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 190px;
  height: 58px;
  padding: 7px 12px;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
}
/* `contain` on a filled box scales small marks up as well as large ones down,
   which max-width/max-height alone will not do. The plate is deliberately not
   very wide: a wider one would leave every mark limited by height, and the
   near-square Modhumoti mark would then sit much smaller than the other two. */
.bank-card .logo-plate img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bank-card h3 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.bank-card .tag { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

.bank-stats { display: flex; gap: 24px; }
.bank-stats div { min-width: 0; }
.bank-stats .n { font-size: 20px; font-weight: 650; letter-spacing: -.02em; }
.bank-stats .k { font-size: 11.5px; color: var(--muted); }

.meter { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.meter i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--hue);
  transition: width .8s cubic-bezier(.2, .7, .3, 1);
}
.meter-note { margin: 7px 0 0; font-size: 11.5px; color: var(--faint); }

.bank-card .go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--hue);
}
.bank-card:hover .go svg { transform: translateX(3px); }
.bank-card .go svg { transition: transform .16s; }

/* --- bank-wise bar chart -------------------------------------------------- */

.dash-split { display: grid; grid-template-columns: 372px 1fr; gap: 14px; align-items: start; }
@media (max-width: 1060px) { .dash-split { grid-template-columns: 1fr; } }

/* A grid item's automatic minimum size is its content, so without this the
   register table's min-content width props the column open and the whole
   page scrolls sideways instead of the table scrolling inside its card. */
.dash-split > *, .kpis > *, .bank-grid > * { min-width: 0; }

.bars { padding: 6px 18px 20px; display: grid; gap: 16px; }
.bar-row { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: center; }
.bar-key { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.bar-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--hue); flex: none; }
.bar-key span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-val { font-size: 13px; font-weight: 650; font-variant-numeric: tabular-nums; }
.bar-track { grid-column: 1 / -1; border-left: 1px solid var(--line); }
.bar-track i {
  display: block;
  height: 10px;
  min-width: 2px;
  border-radius: 0 4px 4px 0;
  background: var(--hue);
  transition: width .5s cubic-bezier(.2, .7, .3, 1);
}
.bars .empty { font-size: 13px; color: var(--muted); padding: 6px 0 4px; }

.bars-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
  color: var(--muted);
}
.bars-foot b { font-size: 13.5px; font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; }

#barTip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}
#barTip[hidden] { display: none; }
#barTip b { font-weight: 650; }
#barTip span { color: var(--muted); }

/* --- records table -------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
table.records { width: 100%; border-collapse: collapse; font-size: 13px; }
table.records th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--card-2);
  white-space: nowrap;
}
table.records td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.records tr:last-child td { border-bottom: 0; }
table.records tbody tr:hover { background: var(--card-2); }
table.records th.num, table.records td.num { text-align: right; }
table.records td.num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
table.records .who { font-weight: 550; }
table.records .sub { font-size: 11.5px; color: var(--muted); }
table.records .when { color: var(--muted); white-space: nowrap; }
table.records .row-actions { display: flex; gap: 6px; justify-content: flex-end; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  background: var(--card-2);
  border: 1px solid var(--line);
}
.badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); flex: none; }

.empty-state { padding: 42px 20px 46px; text-align: center; color: var(--muted); }
.empty-state svg { color: var(--faint); margin-bottom: 10px; }
.empty-state h3 { margin: 0 0 5px; font-size: 14.5px; font-weight: 650; color: var(--text); }
.empty-state p { margin: 0 0 16px; font-size: 13px; }

/* =========================================================================
   TOASTS
   ========================================================================= */

#toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 250px;
  max-width: 360px;
  padding: 11px 14px;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  font-size: 13px;
  animation: toast-in .22s ease-out;
}
.toast.out { animation: toast-out .2s ease-in forwards; }
.toast svg { flex: none; margin-top: 1px; }
.toast.ok svg { color: var(--good); }
.toast.err svg { color: var(--critical); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}