:root {
  --text-muted:#aaaaaa;
  --text-normal:#dddddd;
  --text-strong:#f0f0f0;
  --bg:#0f0f0f;
  --section-bg:#212121;
  --section-fg:#ffffff;
  --section-border: rgba(255,255,255,.08);
  --brand:#178f2d;              /* existing accent green */
  --topbar:#084a5a;            /* header/nav teal from screenshot */
  --section-chip-bg: color-mix(in srgb, #084a5a 12%, #ffffff);
  --card-accent:#084a5a;
  --pill-bg: color-mix(in srgb, #084a5a 18%, #ffffff);
  --pill-fg:#084a5a;
}

/* Top bar / header */
.topbar{ background:var(--topbar) !important; }

/* All accounts pill */
.all-accounts{ border-color: color-mix(in srgb, var(--topbar) 40%, #ffffff); color:#fff; }

/* Card slide tint to match new palette */
.card-slide{ 
  background: linear-gradient(180deg, color-mix(in srgb, var(--card-accent) 90%, #0b2c3a 10%) 0%, color-mix(in srgb, var(--card-accent) 70%, #0b2c3a 30%) 100%), 
              url('assets/card-bg.jpg') center/cover no-repeat !important;
}

/* Section headers like 'Історія', 'Вибрані сервіси', 'Курс Валют' */
.history-head h3, .rates-head h3{ color:#243b45; } /* title text */
.small-btn{ background:var(--pill-bg) !important; color:#123; }

/* Fav services panel button border */
.add-service{ border-color: color-mix(in srgb, var(--topbar) 20%, #bbbbbb) !important; }

/* Minor chips */
.card-exp{ background: color-mix(in srgb, var(--topbar) 24%, #ffffff) !important; }


/* === Section panels colors (History, Favorites, Rates) === */
.history-card, .sel-services-card, .rates-card{
  background: var(--section-bg) !important;
  color: var(--section-fg) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,.28) !important;
  border: 1px solid var(--section-border) !important;
}
.history-head h3, .sel-services-card h3, .rates-head h3{ color:#fff !important; }
.small-btn{ background: rgba(255,255,255,.12) !important; color:#fff !important; }
.tx-item + .tx-item{ border-top: 1px solid rgba(255,255,255,.08) !important; }
.tx-icon{ background: rgba(255,255,255,.12) !important; color:#fff !important; }
.sel-add .add-circle{ border-color: rgba(255,255,255,.35) !important; background: rgba(255,255,255,.06) !important; color:#fff !important; }
.rates-head .link{ color: #a7f3ce !important; } /* м'який контраст до темного */


/* === Balance block to match dark page background === */
.balance-card{
  background: var(--bg) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: none !important;
}
.balance-card .balance-compact .lbl,
.balance-card h3{ color:#e7e7e7 !important; }


/* Force dark bottom navigation background and safe-area */
.bottom-nav{
  background: var(--bg) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 -6px 20px rgba(0,0,0,.25) inset !important;
}

/* iOS Safari safe area fallback */
@supports (padding: max(0px)) {
  .bottom-nav{ padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}


/* Global wrappers to remove white background */
body, .app, .main{
  background: var(--bg) !important;
}

/* Generic panels with white background */
.panel, .field-card, .confirm-box{
  background: #212121 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* Fix transfer-page panels */
.transfer-page .panel{
  background: #212121 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* Fix input fields background */
.fc-input, .amount-input, .note-input{
  background: transparent !important;
  color:#fff !important;
}
.fc-input::placeholder, .amount-input::placeholder, .note-input::placeholder{
  color:#aaa !important;
}


/* Unified dark panels with shadow */
.panel, .field-card, .confirm-box,
.history-card, .sel-services-card, .rates-card,
.balance-card {
  background:#212121 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.35) !important;
  border-radius:14px !important;
}


/* Card: accent gradient on top half, image below */
.card-slide{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--card-accent) 88%, transparent) 0%,
      color-mix(in srgb, var(--card-accent) 72%, transparent) 35%,
      rgba(0,0,0,0) 60%
    ),
    url('assets/card-bg.jpg') center/cover no-repeat !important;
}


/* Panel text palette */
.history-card, .sel-services-card, .rates-card, .balance-card, .panel, .field-card, .confirm-box{
  color: var(--text-normal) !important;
}
.history-card h3, .sel-services-card h3, .rates-head h3, .balance-card h3{
  color: var(--text-strong) !important;
}
.muted, .lbl, .tx-date, .tx-meta, .small-note{
  color: var(--text-muted) !important;
}
::placeholder{ color: var(--text-muted) !important; opacity: 1; }


/* Transparent bottom nav with blur */
.bottom-nav{
  background: rgb(15 15 15 / 0%) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
@supports (padding: max(0px)) {
  .bottom-nav{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}


/* Ensure image is visible beneath overlay */
.card-bg{ opacity:1 !important; filter:none !important; }
.card-content{ position:relative; z-index:3; }

/* === Typography palette for dark UI (design only) === */
:root{
  --text-strong:#f0f0f0;
  --text-normal:#dddddd;
  --text-muted:#9aa3af;
}
.history-card h3, .sel-services-card h3, .rates-head h3,
.balance-card h3{ color:var(--text-strong) !important; }
.muted, .lbl, .tx-date, .tx-meta, .small-note{ color:var(--text-muted) !important; }
.history-card, .sel-services-card, .rates-card, .balance-card,
.panel, .field-card, .confirm-box{ color:var(--text-normal) !important; }

/* === Payments (tx list) colors (design only) === */
.tx-amount.plus, .plus .tx-amount{ color:#4ade80 !important; }   /* green */
.tx-amount.minus, .minus .tx-amount{ color:#f87171 !important; } /* red  */
.tx-title{ color:var(--text-strong) !important; }
.tx-sub{ color:var(--text-muted) !important; }

/* Quick actions */
.action .label{ color:#e5e7eb !important; }
.action .circle{ box-shadow:0 16px 38px rgba(2,6,23,.22) !important; }

/* Pastel tx colors */
.tx-amount.plus, .plus .tx-amount{ color:#4ade80 !important; }
.tx-amount.minus, .minus .tx-amount{ color:#f87171 !important; }


/* === Blue background under cards area (to ~half card), then fade to page bg === */
.card-wrap{ position:relative; z-index:1; }
.card-wrap::before{
  content:""; position:absolute; left:0; right:0; top:-16px; height:240px;
  /* background: linear-gradient(180deg,
    var(--card-accent) 0%,
    var(--card-accent) 58%,
    var(--bg) 100%
  ); */
  z-index:-1;
}
.carousel{ padding-top:0px; padding-bottom:3px; }


/* === Credits/Debits typography & color (as example) === */
.tx-amount{
  font-family: Inter, "SF Pro Display", "SF Pro Text", Roboto, Arial, sans-serif !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: .3px !important;
}
.tx-amount.plus, .plus .tx-amount{ color:#4ade80 !important; }  /* soft green */
.tx-amount.minus, .minus .tx-amount{ color:#e5e7eb !important; } /* light gray for debits */


/* === Balance header & amount styling (design) === */
.balance-compact .lbl{
  color:#ffffff !important;
  font-weight:300 !important;
  letter-spacing:.2px !important;
}
#mainBalance, .balance-right .amount, .balance-left .amount{
  color:#e5e7eb !important;
  font-weight:600 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing:.3px !important;
}


/* === Full-width blue band behind cards (doesn't move with carousel) === */
.main{ position:relative; z-index:0; }
.main::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100vw;           /* span full viewport width to cover black margins */
  height:260px;          /* approx. to half-card+padding; tweak if needed */
  background: linear-gradient(180deg,
    var(--card-accent) 0%,
    var(--card-accent) 85%,
    var(--bg) 87%);
  z-index:0;
  pointer-events:none;
}
.card-wrap{ position:relative; z-index:1; } /* keeps cards above the blue band */


/* height adjust */
  background: var(--card-accent);
  z-index:-1;
}


/* cover full viewport height */
  background: var(--card-accent);
  z-index:-1;
}

/* ====== Card layout: title bottom-left, number + expiry on one row ====== */
.card-content{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  padding:18px !important;
  height:100%;
  box-sizing:border-box;
}
.card-top{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}
.card-title{
  margin:0 0 1px 0 !important;
  font-weight:800;
  font-size:16px;
  line-height:1.1;
}
.card-bottom{ display:flex; align-items:baseline; gap:14px; }
.card-number{ font-size:16px; font-weight:700; }
.card-exp{ font-size:14px; font-weight:600; }


/* === Fixed full-width blue band strictly behind cards === */
.cards-area, .card-wrap, .card-carousel{
  position:relative;
  z-index:1;
}
.cards-area::before{
  content:"";
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100vw;
  height:280px;
  background: var(--card-accent);
  z-index:-1;
}


/* === Gear (settings) pin to top-right on the card === */
.card-content{ position:relative; }
.card-top{
  position:absolute;
  top:10px;
  right:10px;
}
.card-top .gear{
  background:rgba(0,0,0,0.35);
  border:none;
  border-radius:50%;
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px; cursor:pointer;
}


/* === Card brand (VISA/MC) alignment & easy sizing === */
:root{
  --card-brand-img-h: 18px;
  --card-brand-right: 12px;
  --card-brand-bottom: 12px;
}
.card-brand{
  position:absolute;
  right: var(--card-brand-right);
  bottom: var(--card-brand-bottom);
  display:flex; align-items:center; justify-content:flex-end;
  gap:8px; z-index: 4;
}
.card-brand img{
  height: var(--card-brand-img-h);
  width:auto; object-fit: contain;
}