/* Saturated navigation and controls shared by all web pages. */
@media (min-width: 761px) {
  html { scrollbar-gutter: stable; }
  @supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
}
#app > main { min-height: calc(100dvh - 88px); animation: none; }
#app > main .account-card, #app > main .panel,
#app > main .currency-card, #app > main .operation { animation: none; }
@keyframes page-appear { from { opacity: .35; } to { opacity: 1; } }
#app[aria-busy="false"] > main.dashboard {
  animation: page-appear .2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #app[aria-busy="false"] > main.dashboard { animation: none; }
}
.history-layout { --calendar-width: 340px; grid-template-columns: var(--calendar-width) minmax(0,1fr); transition: grid-template-columns .26s cubic-bezier(.2,.7,.2,1), gap .26s cubic-bezier(.2,.7,.2,1); }
.history-layout.calendar-hidden { grid-template-columns: 0px minmax(0,1fr); gap: 0; }
.history-calendar-slot { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; position: sticky; top: 20px; border-radius: 18px; }
.history-calendar-slot .history-calendar-card { position: static; width: var(--calendar-width); }
.history-layout > .history-content { grid-column: 2; grid-row: 1; }
@media (max-width: 1150px) { .history-layout { --calendar-width: 300px; } }
@media (max-width: 760px) {
  .history-layout, .history-layout.calendar-hidden { grid-template-columns: minmax(0,1fr); }
  .history-calendar-slot { position: static; top: auto; }
  .history-calendar-slot .history-calendar-card { width: 100%; }
  .history-layout.calendar-hidden .history-calendar-slot { height: 0; }
  .history-layout > .history-content { grid-column: 1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .history-layout { transition: none; } }
#app[aria-busy="true"]::before {
  content: ''; position: fixed; z-index: 150; top: 0; left: 0; right: 0;
  height: 3px; background: #e4c374; pointer-events: none;
}
.site-header {
  background: #cbd3c5;
  color: #17372e;
  border-bottom-color: #8fa18d;
  box-shadow: 0 3px 14px #17372e20;
}
.site-header .brand { color: #17372e; }
.site-header .brand i { background: #dae3cd; border-radius: 11px; }
.site-header .brand-dot { color: #526d48; }
.site-header .header-rates .rates-source,
.site-header .header-rates i, .site-header .header-rates small { color: #425c4d; }
.site-header .header-rates .rates-source { border-color: #8fa18d; }
.site-header .top-actions > .link-btn { color: #344e3f; }
.site-header .top-actions > .link-btn:hover,
.site-header .top-actions > .link-btn:focus-visible,
.site-header .top-actions > .link-btn.active,
.site-header .top-actions > .link-btn.active:hover { background: #315c45; color: #fff; }
.site-header .chat-trigger, .site-header .account-trigger {
  background: #dce5d3; color: #17372e; border-color: #64816b;
}
.site-header .chat-trigger:hover, .site-header .account-trigger:hover,
.site-header .account-menu[open] .account-trigger { background: #b8cbb6; border-color: #315c45; box-shadow: 0 0 0 2px #315c451a; }
.site-header .account-menu { border-left: 0; padding-left: 0; margin-left: 0; }
.site-header .chat-trigger { margin-left: 28px; }
.site-header .chat-trigger::before {
  content: ''; position: absolute; left: -19px; top: 50%;
  width: 1px; height: 28px; background: #8fa18d;
  transform: translateY(-50%); pointer-events: none;
}
.account-dropdown { background: #dfebe3; }
.primary:not(.reset-submit) { background: linear-gradient(110deg, #146044, #176463); }
.primary:not(.reset-submit):hover { background: #0e4937; }
.outline, .choice { background: #d8e8df; }
.outline:hover, .choice:hover { background: #c3dfcf; }
.icon-btn, .modal-close { background: #c9e0d3; }
.mobile-navigation { background: #164b36; border-top-color: #0e4937; }
.mobile-navigation button { color: #d9e9e0; }
.mobile-navigation button:hover { background: #2b7157; }
.mobile-navigation button.active { background: #c5dfaa; color: #164b36; }

.bank-art-button {
  position: relative; display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 10px; border-radius: 12px;
  border: 1px solid #638574; background: #c9dfd2;
  box-shadow: 0 3px 8px #17372e15; flex-shrink: 0;
}
.bank-art-button.primary:not(.reset-submit) { background: #146044; border-color: #0d4933; color: #fff; }
.bank-art-button:hover { background: #b3d2bf; border-color: #146044; }
.bank-art-button.primary:not(.reset-submit):hover { background: #0d4933; }
.bank-art-button > .category-svg { display: block; width: 24px; height: 24px; }
.bank-art-button::after {
  content: attr(data-tooltip); position: absolute; z-index: 5;
  right: 0; top: calc(100% + 8px); padding: 7px 10px;
  background: #17372e; color: #fff; font-size: 11px;
  line-height: 1.4; border-radius: 8px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
}
.bank-art-button:hover::after, .bank-art-button:focus-visible::after { opacity: 1; }
.bank-tile > .bank-art-button { margin-top: 12px; }
.banks-page > .dash-head > .bank-page-actions { width: auto; flex-wrap: nowrap; }
.banks-page > .dash-head > .bank-page-actions button { flex: 0 0 48px; }
@media (max-width: 760px) {
  .site-header .chat-trigger { margin-left: 12px; }
  .site-header .chat-trigger::before { left: -10px; }
  .banks-page > .dash-head { align-items: center; }
  .banks-page > .dash-head > .bank-page-actions { gap: 10px; }
}