/* Compact hero, app bar, flat action rail, top-up page, glass auth pages. */

/* ---------------------------------------------------------------------------
   App bar
   ------------------------------------------------------------------------ */

.appbar-brand {
  display: none;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}
.appbar-brand .brand-logo { width: 26px; height: 26px; }
.icon-btn-plain { border-color: transparent; background: transparent; }

@media (max-width: 1024px) {
  .appbar-brand { display: inline-flex; }
}

/* ---------------------------------------------------------------------------
   Compact hero
   ------------------------------------------------------------------------ */

.hero-panel { padding: 1.25rem 1.35rem; }
.hero-panel-top { flex-wrap: nowrap; align-items: center; }
.hero-greeting .avatar-lg { width: 42px; height: 42px; font-size: .92rem; }
.hero-hello { font-size: .82rem; }
.hero-name { font-size: 1.05rem; }
.hero-clock { font-size: 1.25rem; line-height: 1.1; }
.hero-date { font-size: .76rem; }

.hero-balance { margin: 1rem 0 .95rem; align-items: center; }
.hero-balance-label { font-size: .85rem; }
.hero-balance-value { font-size: clamp(1.75rem, 3.4vw, 2.3rem); }
.hero-balance .trend { margin-top: .4rem; font-size: .76rem; }

.hero-account { padding: .75rem .9rem; gap: .7rem; }
.hero-account-icon { width: 36px; height: 36px; }
.hero-account-number { font-size: .98rem; }
.hero-account-actions .btn { min-height: 32px; padding: .3rem .75rem; font-size: .82rem; }
.btn-topup { background: #fff; color: #047857; }

/* ---------------------------------------------------------------------------
   Flat action rail inside its panel
   ------------------------------------------------------------------------ */

.panel-actions { padding: 1.1rem 1.1rem .9rem; }
.panel-actions .section-head { margin-bottom: .6rem; }
.action-rail-flat {
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
  background: none;
  gap: .35rem;
}
.action-rail-flat .action { padding: .55rem .2rem; }
.action-rail-flat .action-icon svg { width: 18px; height: 18px; }
.action-rail-flat .action-label { font-size: .76rem; }

/* One neutral glass treatment for every shortcut; colour is reserved for hover. */
.action-rail-flat .action-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #334155;
  background: linear-gradient(160deg, rgba(248, 250, 252, .95), rgba(226, 232, 240, .75));
  border: 1px solid rgba(203, 213, 225, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 2px 6px rgba(15, 23, 42, .06);
  backdrop-filter: blur(6px);
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease,
              transform .2s var(--ease-spring, ease);
}
.action-rail-flat .action:hover { background: none; }
.action-rail-flat .action:hover .action-icon {
  color: var(--brand);
  background: linear-gradient(160deg, #fff, var(--brand-soft));
  border-color: #c7d7f7;
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(29, 78, 216, .14);
}
.action-rail-flat .action.is-locked .action-icon { color: #94a3b8; }

/* ---------------------------------------------------------------------------
   One neutral icon chip everywhere in the app — colour only signals state.
   ------------------------------------------------------------------------ */

.chrome-app .stat-tile-icon,
.chrome-app .stat-row-icon,
.chrome-app .method .action-icon {
  color: #334155 !important;
  background: linear-gradient(160deg, rgba(248, 250, 252, .95), rgba(226, 232, 240, .78)) !important;
  border: 1px solid rgba(203, 213, 225, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Stat tiles: drop the coloured card tints too, so the whole strip is calm. */
.chrome-app .stat-tile { background: #fff; border-color: var(--line); }

/* Keep money in / out readable: a small coloured value, not a coloured block. */
.chrome-app .stat-positive .stat-tile-value { color: #047857; }
.chrome-app .stat-negative .stat-tile-value { color: #b91c1c; }

/* Selected deposit method still reads as chosen via its ring, not the icon. */
.chrome-app .method.is-selected .action-icon {
  color: var(--brand) !important;
  background: linear-gradient(160deg, #fff, var(--brand-soft)) !important;
  border-color: #c7d7f7;
}

/* ---------------------------------------------------------------------------
   Top-up page
   ------------------------------------------------------------------------ */

.crumbs {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .86rem;
  color: var(--ink-subtle);
  margin-bottom: 1rem;
}
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs span:last-child { color: var(--ink); font-weight: 600; }

.panel-flush { padding: 0; overflow: hidden; }

.wave-banner {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 2rem 1.5rem 3.4rem;
  background: linear-gradient(140deg, #2563eb, #1d4ed8 55%, #1e3a8a);
}
.wave-banner-icon {
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  margin-bottom: .8rem;
}
.wave-banner-icon svg { width: 28px; height: 28px; }
.wave-banner h1 { font-size: 1.45rem; }
.wave-banner p { color: #d4e2fc; font-size: .93rem; margin-top: .3rem; }
.wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 42px;
}

.deposit-form { padding: 1.35rem; }

.method-list { display: grid; gap: .6rem; margin-bottom: 1.35rem; }
.method {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .8rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 13px;
  cursor: pointer;
  background: #fff;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.method:hover { border-color: #b5c8f2; }
.method.is-selected {
  border-color: var(--brand);
  background: #f5f8ff;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, .1);
}
.method input { position: absolute; opacity: 0; pointer-events: none; }
.method .action-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.method .action-icon svg { width: 19px; height: 19px; }
.method-text { display: grid; gap: .1rem; margin-right: auto; }
.method-text strong { font-size: .95rem; font-weight: 620; }
.method-text span { font-size: .8rem; color: var(--ink-subtle); }
.method-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  flex: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.method.is-selected .method-radio {
  border-color: var(--brand);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--brand);
}

.quick-amounts { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.25rem 0 .5rem; }
.chip {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .85rem;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------------------------------------------------------------------------
   Glass auth pages (sign in, already-signed-in)
   ------------------------------------------------------------------------ */

.chrome-bare {
  position: relative;
  min-height: 100vh;
  background: #e8eef9;
  isolation: isolate;
}
/* Colour fields, blurred, behind the sign-in card. To use a photo instead, save
   one as assets/img/auth-bg.jpg and add url("img/auth-bg.jpg") center / cover
   no-repeat as the first background layer below. */
.chrome-bare::before {
  content: "";
  position: fixed;
  inset: -40px;
  z-index: -2;
  background:
    radial-gradient(38% 34% at 18% 22%, rgba(59, 130, 246, .55), transparent 68%),
    radial-gradient(34% 32% at 84% 18%, rgba(139, 92, 246, .45), transparent 66%),
    radial-gradient(42% 38% at 70% 86%, rgba(14, 165, 233, .45), transparent 70%),
    radial-gradient(30% 30% at 12% 88%, rgba(37, 99, 235, .4), transparent 70%),
    #dfe8f7;
  filter: blur(26px) saturate(140%);
  animation: blobDrift 32s ease-in-out infinite;
}
.chrome-bare::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(240, 245, 253, .28);
}

.chrome-bare .auth-card {
  background: rgba(255, 255, 255, .66);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15, 33, 78, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.chrome-bare .input { background: rgba(255, 255, 255, .8); }
.chrome-bare .demo-note { background: rgba(255, 255, 255, .55); border-color: rgba(148, 163, 184, .5); }
.chrome-bare .footer { color: #475569; }

/* ---------------------------------------------------------------------------
   Registration on small screens: the form comes first, promo is dropped
   ------------------------------------------------------------------------ */

@media (max-width: 960px) {
  .split-promo { display: none; }
  .split-form { min-height: 100vh; padding-top: 1.5rem; }
  .split-form .wizard-card::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    margin: -.25rem auto 1rem;
    background: url("img/logo.svg") center / contain no-repeat;
  }
}

@media (max-width: 640px) {
  .appbar .balance-pill { display: none; }
  .hero-panel { padding: 1rem 1.05rem; }
  .hero-panel-top { flex-direction: row; }
  .hero-time { text-align: right; }
  .hero-clock { font-size: 1.1rem; }
  .hero-date { font-size: .7rem; max-width: 7.5rem; margin-left: auto; }
  .hero-account {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
  }
  .hero-account-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .action-rail-flat { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: .25rem; }
  .wave-banner { padding: 1.6rem 1.1rem 3rem; }
  .deposit-form { padding: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chrome-bare::before { animation: none; }
}

/* Dashboard card without its button row: the account strip stays one compact line. */
.hero-account { flex-direction: row; flex-wrap: nowrap; align-items: center; padding: .7rem .9rem; }
.hero-account-meta { margin-right: 0; }
@media (max-width: 640px) {
  .hero-account { display: flex; flex-direction: row; align-items: center; }
  .hero-balance { margin: 1rem 0 .9rem; }
}