/* Overrides for second design */
.card-slide{box-shadow:0 10px 18px rgba(0,0,0,.12);transform:translateY(0);transition:transform .25s,box-shadow .25s}
.card-slide.is-focused{transform:translateY(-2px);box-shadow:0 14px 24px rgba(0,0,0,.16)}
.dots{display:flex;justify-content:center;gap:8px;padding:0px 0 0px}
.dots .dot{width:6px;height:6px;border-radius:999px;background:#cfd6df}
.dots .dot.active{background:#6b7280}
.balance-card{background:#f5f6f9;border-radius:14px;padding:10px 14px;margin-top:6px}
.balance-card .label{color:#6b7280}
.balance-card .amount{font-weight:700}
.balance-card .balance-right{border-top:1px dashed #d7dbe2;margin-top:8px;padding-top:8px}
.balance-card .row{display:flex;justify-content:space-between;margin-top:6px}
.balance-card .muted{color:#6b7280}
.quick-actions{display:flex;justify-content:space-between;gap:12px;margin:12px 0}
.quick-actions .action{display:flex;flex-direction:column;align-items:center;gap:6px;background:transparent;border:0}
.quick-actions .circle{width:56px;height:56px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#2ea63a;color:#fff;box-shadow:0 6px 14px rgba(46,166,58,.25)}
.quick-actions .action span{font-size:13px;color:#ffffff}
.history-card{background:#fff;border-radius:16px;padding:12px 12px 8px;margin:10px 0;box-shadow:0 6px 14px rgba(0,0,0,.05)}
.history-card h3{margin:0 0 8px;font-size:16px}
.history-card .tx-item{display:flex;align-items:center;justify-content:space-between;padding:10px 6px}
.tx-left{display:flex;align-items:center;gap:10px}
.tx-icon{width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#f3f4f6}
.tx-amt{font-weight:600}
.tx-amt.minus{color: #ffffff;}
.tx-amt.plus{color:#29d13a}
.history-btn{display:inline-flex;align-items:center;gap:6px;border:2px solid #2ea63a;color:#2ea63a;border-radius:999px;padding:8px 14px;background:#f7fff8}


/* === Pull-to-Refresh (PTR) === */
.ptr-content {
  will-change: transform;
  transform: translateY(0);
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
}

.ptr-indicator {
  position: relative;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}

.ptr-indicator .ptr-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  transform: scale(0.8);
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;
}

.ptr-indicator .ptr-text {
  margin-left: 10px;
  font-size: 14px;
  opacity: 0;
  transition: opacity 150ms ease;
}

.ptr-pulling .ptr-indicator .ptr-spinner,
.ptr-pulling .ptr-indicator .ptr-text {
  opacity: .9;
}

.ptr-threshold .ptr-indicator .ptr-spinner {
  transform: scale(1);
}

.ptr-refreshing .ptr-indicator .ptr-spinner {
  animation: ptr-spin 900ms linear infinite;
  opacity: 1 !important;
  transform: scale(1) !important;
}

@keyframes ptr-spin {
  to { transform: rotate(360deg) scale(1); }
}


/* === PTR v2 constraints: bars fixed, mid content only === */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
}
.bottombar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
}
main.main {
  padding-top: var(--topbar-h, 64px);
  padding-bottom: var(--bottombar-h, 72px);
}


/* === PTR v3 (only card+below move; no text) === */
.ptr-content {
  will-change: transform;
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.ptr-indicator {
  position: relative;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}
.ptr-indicator .ptr-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.65);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.9);
  transition: opacity 120ms ease, transform 120ms ease;
}

.ptr-threshold .ptr-indicator .ptr-spinner { transform: scale(1); }
.ptr-refreshing .ptr-indicator .ptr-spinner { animation: ptr-spin 900ms linear infinite; opacity:1 !important; transform: scale(1) !important; }
@keyframes ptr-spin { to { transform: rotate(360deg) scale(1); } }

/* Fixed bars (top stays on top, bottom stays on bottom) */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; }

/* Add safe space so content isn't covered by bars */
main.main { padding-top: var(--topbar-h, 64px); padding-bottom: var(--bnav-h, 88px); }



.topbar-extend {
  position: relative;
  width: 100%;
  height: 0; /* JS will set actual height */
  background: var(--topbar-bg, inherit); /* fallback: inherit from topbar via JS if set inline */
  pointer-events: none;
  transition: height 140ms ease;
}

/* Make sure the card header/year stays visually above the extend if needed */
.card-year, .card__year, .year {
  position: relative;
  z-index: 1;
}


/* === PTR v5: smoother animations + topbar color bridge === */
:root{ --bridge-target-ratio: 0.42;
  --ptr-threshold: 90px;
  --ptr-snap-ease: cubic-bezier(.18,.89,.32,1.28); /* springy */
  --ptr-drag-ease: cubic-bezier(.22,.61,.36,1);
}

/* Only middle content moves */
.ptr-content{
  transform: translateY(0);
  transition: transform 260ms var(--ptr-drag-ease);
  will-change: transform;
  position: relative;
  z-index: 0;
}

/* Color bridge from topbar down to card year/month */
.topbar-extend{
  position: relative;
  width: 100%;
  height: 0; /* JS sets */
  background: var(--topbar-bg, inherit);
  background-image: linear-gradient(to bottom, var(--topbar-bg, transparent), var(--topbar-bg, transparent));
  pointer-events: none;
  z-index: 0;
  transition: height 160ms ease;
}

/* Keep year/month above the bridge */
.card-year, .card__year, .year, .card-month, .card__month, .month, .card-exp, .expiry, [data-exp], [data-issued-month]{
  position: relative;
  z-index: 1;
}

/* Spinner: nicer */
.ptr-indicator{
  position: relative;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
}
.ptr-indicator .ptr-spinner{
  width: 26px;
  height: 26px;
  border: 3px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.7);
  border-right-color: rgba(0,0,0,.35);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(6px) scale(.9);
  transition: opacity 120ms ease, transform 180ms ease;
}

.ptr-refreshing .ptr-indicator .ptr-spinner{ animation: ptr-rot 900ms linear infinite; opacity:1 !important; }

@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* Subtle content lift while pulling (optional, looks nice) */
.ptr-pulling main.main .card, .ptr-pulling .card-current{
  transform: translateZ(0) scale(1.005);
  transition: transform 160ms ease;
}

/* Fixed bars (safety) */
.topbar{ position: fixed; top:0; left:0; right:0; z-index: 1000; }
.bottombar, .bottom-nav{ position: fixed; left:0; right:0; bottom:0; z-index: 1000; }

/* Spacing so bars don't overlap content */
main.main{ padding-top: var(--topbar-h, 64px); padding-bottom: var(--bnav-h, 88px); }


/* === Modern Card Swipe Animations (v6) === */
.card-carousel, #cardCarousel, .card-wrap{
  perspective: 1000px; /* 3D depth */
  transform-style: preserve-3d;
}

.card-slide{
  transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease, box-shadow 280ms ease;
  will-change: transform, opacity;
}

.card-slide.is-active{
  transform: translateZ(30px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.card-slide.is-prev, .card-slide.is-next{
  transform: translateZ(0) rotateY(var(--tilt, -12deg)) scale(.98);
  opacity: .96;
}

.card-slide.is-prev{
  --tilt: 12deg;
  transform-origin: right center;
}
.card-slide.is-next{
  --tilt: -12deg;
  transform-origin: left center;
}

/* Parallax layers inside card (if present) */
.card-slide .parallax-bg{
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.card-slide.is-active .parallax-bg{
  transform: translateX(0);
}
.card-slide.is-prev .parallax-bg{
  transform: translateX(8px);
}
.card-slide.is-next .parallax-bg{
  transform: translateX(-8px);
}

/* Drag feedback */
.card-swiping .card-slide{
  transition: none !important; /* direct transform during drag */
}


/* === Quick actions: equal columns & safe gutters === */
.quick-actions{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin: 12px 0;
  padding: 0; /* use main's horizontal padding */
}
.quick-actions .action{
  width: 100%;
  align-items: center;
}
.quick-actions .circle{
  width: 56px; height: 56px; border-radius: 999px;
}

/* === Selected services card (like currencies styles) === */
.sel-services-card{
  background: var(--card);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(2,6,23,.06);
  margin-top: 12px;
}
.sel-services-card h3{
  margin: 0 0 10px 0;
}
.sel-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.sel-add{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background: transparent; border:0;
}
.sel-add .add-circle{
  width: 68px; height: 68px; border-radius: 999px;
  border: 2px dashed #d7dde8;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 28px; color: #0b1a2b;
}
.sel-add span{ font-size: 13px; color:#ffffff }


/* === Balance compact (like screenshot) === */
.balance-compact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 4px 2px 10px;
}
.balance-compact .b-left{
  color:#6b7280;
  font-size: 17px;
  font-weight: 400;
}
.balance-compact .b-right{
  font-weight: 800;
  font-size: 22px;
}

/* Keep quick actions right under balance with ample space */
.balance-compact + .quick-actions{
  margin-top: 8px;
}


/* === Fixed Topbar Bridge (v9): extends topbar color down to card year/month without overshoot === */
:root{ --bridge-target-ratio: 0.42; --bridge-max: 55vh; }
.topbar-bridge{
  position: fixed;
  top: env(safe-area-inset-top, 0px); /* sit right under status area */
  left: 0; right: 0;
  height: 0; /* JS controls */
  background: var(--topbar-bg, #0a5366);
  z-index: 60; /* below .topbar (80) but above content (0) */
  pointer-events: none;
  transition: height 160ms ease;
}


/* === Card sizing & style like screenshot === */
.card-slide{
  min-width: 92% !important;
  height: 210px !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 36px rgba(2,6,23,.18) !important;
}

/* Soft gear bubble top-right */
.card-slide .gear{
  background: rgba(0,0,0,.12) !important;
  backdrop-filter: blur(2px);
  width: 38px; height: 38px; border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px;
}

/* Pills typography */

.card-title
.card-exp

/* Align pill rows like screenshot */


.brand-badge{ display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.18); border-radius:14px; padding:6px 8px; }
.brand-badge img{ display:block; height:18px; }

/* Mastercard as overlapping circles if no SVG */
.mc-duo{ position:relative; width:34px; height:22px; }
.mc-duo .c1, .mc-duo .c2{
  position:absolute; top:1px; width:20px; height:20px; border-radius:999px;
}
.mc-duo .c1{ left:0; background:#eb001b; }
.mc-duo .c2{ right:0; background:#f79e1b; mix-blend-mode:multiply; }

/* VISA wordmark fallback */
.visa-badge{
  font-weight:900; letter-spacing:.5px; font-size:14px;
}

/* Topbar: "Усі рахунки" pill refinement */
.topbar .all-accounts{
  border: 1.5px solid rgba(255,255,255,.6) !important;
  padding: 10px 8px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.12) !important;
  backdrop-filter: blur(2px);
}

/* Dots bigger like screenshot */
.dots button{ width:10px !important; height:10px !important; }
.dots button.active{ width:30px !important; border-radius:12px !important; }



.card 
.card 
.card 
.card 
.card 

.card-brand{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:8px}
.brand-mc{width:38px;height:26px;position:relative}
.brand-mc .c1,.brand-mc .c2{position:absolute;top:3px;width:22px;height:22px;border-radius:999px}
.brand-mc .c1{left:0;background:#EB001B}
.brand-mc .c2{right:0;background:#F79E1B}
.brand-mc .overlap{position:absolute;top:3px;left:8px;width:22px;height:22px;border-radius:999px;background:#FF5E1F;mix-blend-mode:multiply;opacity:.85}
.brand-visa{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 6px}
.brand-visa .word{font-weight:900;font-size:16px;letter-spacing:.6px;color:#fff}

.card-content{padding-bottom:52px !important}


/* PTR spinner refine (v13) */
.ptr-indicator{display:flex;align-items:center;justify-content:center;height:0;overflow:visible}
.ptr-indicator .ptr-spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;border-right-color:rgba(255,255,255,.6);border-radius:999px;opacity:0;transform:translateY(6px) scale(.9);transition:opacity 150ms ease, transform 220ms cubic-bezier(.2,.8,.2,1)}

.ptr-refreshing .ptr-indicator .ptr-spinner{animation:ptr-rot 900ms linear infinite;opacity:1}
@keyframes ptr-rot{to{transform:rotate(360deg)}}
.ptr-content{transition:transform 280ms cubic-bezier(.18,.89,.32,1.28)}


/* === Card face: label pills EXACT === */
.card-slide{
  border-radius: 20px !important;
  height: 210px !important;
}

.card-content{
  position: relative;
  padding: 16px 16px 58px 16px !important; /* left/right per screenshot, extra bottom for pills */
}

/* Title pill */
.card-title

/* Row of small pills under title */


.card-brand img{ height:30px; width:auto; display:block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }

/* Ensure left alignment of pills from edge equals 16px */
.card-title.title,  /* internal tweak to visually match rounded bubble spacing */

/* Optional: lighten overall overlay for legibility */
.card-overlay{ background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0)); border-radius: inherit; }


/* === Pixel-tune (v15) — match reference exactly === */
:root{
  --card-pad-x: 16px;
  --card-pad-y: 16px;
  --pill-title-fs: 17.5px;
  --pill-title-py: 9.5px;
  --pill-title-px: 17px;
  --pill-title-radius: 25px;
  --pill-small-fs: 16px;
  --pill-small-py: 9px;
  --pill-small-px: 15px;
  --pill-small-radius: 22px;
  --pill-gap: 12px;
  --gear-size: 40px;
  --brand-h: 28px;
}

/* Card block */
.card-slide{
  height: 210px !important;
  border-radius: 20px !important;
}
.card-content{
  padding: var(--card-pad-y) var(--card-pad-x) 56px var(--card-pad-x) !important;
}

/* Title pill */
.card-title

/* Bottom pills row */


.card-brand img{ height: var(--brand-h); width: auto; display:block; filter: drop-shadow(0 1px 0 rgba(0,0,0,.1)); }

/* Align pill left edge optically with rounded corner */
.card-title.title, 


/* === Smooth transition for per-card history lists === */
#tx-lists {
  position: relative;
  min-height: 120px; /* prevents layout jump while animating */
}
#tx-lists .tx-list {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  will-change: opacity, transform;
}
#tx-lists .tx-list.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#tx-lists .tx-list.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
#tx-lists .tx-list.is-entering {
  opacity: 0.01; /* start small to ensure transition kicks in */
  transform: translateY(8px);
}
/* Prevent double bullets if browser applies default list styles */
#tx-lists .tx-list { list-style: none; margin: 0; padding: 0; }


/* header for history block */
.tx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.tx-head .link{font-size:.9rem;text-decoration:none;opacity:.8}
.tx-head .link:hover{opacity:1}


/* === History tabs === */
.tabs-wrap{position:sticky; top:0; z-index:5; background:#fff; padding:8px 12px 0; margin:-8px -12px 12px; border-bottom:1px solid rgba(0,0,0,.06)}
.card-tabs{display:flex; gap:8px; flex-wrap:nowrap; overflow:auto; padding:0 12px 8px}
.card-tabs .tab{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:8px 12px; border-radius:999px; text-decoration:none; font-size:.94rem; background:#f4f5f7; color:#111; border:1px solid transparent; transition:background .2s ease, border-color .2s ease}
.card-tabs .tab .dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.card-tabs .tab .tail{opacity:.7; margin-left:2px; font-variant-numeric:tabular-nums}
.card-tabs .tab.is-active{background:#fff; border-color:rgba(0,0,0,.12); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card-tabs::-webkit-scrollbar{display:none}

/* theme color dots (approximate hues) */
.card-tabs .dot.theme-blue{background:#3b82f6}
.card-tabs .dot.theme-teal{background:#14b8a6}
.card-tabs .dot.theme-purple{background:#8b5cf6}
.card-tabs .dot.theme-gold{background:#f59e0b}
.card-tabs .dot.theme-sparkblue-plain{background:#2563eb}
.card-tabs .dot.theme-field-wheat{background:#d4a373}
.card-tabs .dot.theme-choice-coffee{background:#6b4f4f}
.card-tabs .dot.theme-uman-park{background:#10b981}
.card-tabs .dot.theme-karaya-sunset2{background:#f97316}
.card-tabs .dot.theme-operators-blue{background:#0ea5e9}
.card-tabs .dot.theme-happy-money-2{background:#22c55e}
.card-tabs .dot.theme-eyes{background:#9333ea}


/* === Transfer screen like screenshot === */
.transfer-like-p24 .row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.transfer-like-p24 .row-head .lbl{font-weight:600}
.transfer-like-p24 .row-head .link.green{color:#16a34a;text-decoration:none}

.templates .templates-scroll{display:flex;gap:14px;overflow:auto;padding:6px 4px}
.templates .tpl{display:flex;flex-direction:column;align-items:center;min-width:72px}
.templates .tpl .avatar{width:48px;height:48px;border-radius:12px;background:#e5e7eb;display:block}
.templates .tpl .tpl-num{font-size:.78rem;opacity:.7;max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px}

.source-cards .src-cards-scroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding:6px 2px}
.src-card-tile{display:flex;gap:12px;min-width:290px;scroll-snap-align:start;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.src-card-tile .thumb{width:64px;height:40px;border-radius:8px;background-size:cover;background-position:center}
.src-card-tile .info{display:flex;flex-direction:column;align-items:flex-start}
.src-card-tile .brand{font-weight:700;letter-spacing:.5px}
.src-card-tile .title{font-weight:600}
.src-card-tile .row.small{font-size:.82rem;opacity:.7}
.src-card-tile .row.small .sep{opacity:.4;margin:0 6px}
.src-card-tile .amount{margin-top:4px;font-weight:700}
.src-card-tile.is-active{border-color: #6d6d6d;box-shadow:0 0 0 2px rgba(22,163,74,.15)}

.input-with-icons{display:flex;align-items:center;gap:8px;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px}
.input-with-icons .text-input{border:none;flex:1;outline:none;background:transparent}
.input-with-icons .icon{opacity:.7}
.input-with-icons .icon-btn{border:none;background:transparent;font-size:1.1rem}

.amount-input{width:100%;padding:12px;border:1px solid #7878785c;border-radius:12px;font-size:1.1rem}
.currency-chip{border:none;background:#f3f4f666;border-radius:999px;padding:4px 10px}

.sticky-cta{position:sticky;bottom:0;background:linear-gradient(to top, #fff, rgba(255,255,255,.85) 60%, rgba(255,255,255,0));padding:12px 0 0;margin:8px -4px 0}


/* === Precise templates & card tiles styling === */
.templates{padding-top:6px;padding-bottom:10px}
.templates .templates-scroll{display:flex;gap:14px;overflow:auto;padding:6px 4px}
.templates .tpl{display:flex;flex-direction:column;align-items:center;min-width:76px}
.templates .tpl .avatar{width:48px;height:48px;border-radius:12px;background:#e5e7eb;display:block}
.templates .tpl .tpl-num{font-size:.78rem;opacity:.7;max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-variant-numeric:tabular-nums}

.source-cards .src-cards-scroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding:6px 2px}
.src-card-tile{display:flex;gap:12px;min-width:320px;scroll-snap-align:start;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px 14px;box-shadow:0 2px 4px rgba(0,0,0,.06)}
.src-card-tile .thumb{width:64px;height:40px;border-radius:10px;background-size:cover;background-position:center}
.src-card-tile .info{display:flex;flex-direction:column;align-items:flex-start}
.src-card-tile .line1{display:flex;align-items:baseline;gap:8px}
.src-card-tile .brand{font-weight:800;letter-spacing:.5px}
.src-card-tile .brand.visa{color: #ffffff;}
.src-card-tile .brand.mc{color:#ef4444}
.src-card-tile .title{font-weight:700}
.src-card-tile .row.small{font-size:.9rem;opacity:.75; font-variant-numeric:tabular-nums}
.src-card-tile .row.small .sep{opacity:.4;margin:0 6px}
.src-card-tile .amount{margin-top:2px;font-weight:800}
.src-card-tile.is-active{border-color: #9d9d9d;box-shadow:0 0 0 2px rgba(22,163,74,.15)}


/* Small tile cards carousel */
.source-cards .row-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.source-cards .row-head .link.green{color:#16a34a;text-decoration:none}
.source-cards .src-cards-scroll{display:flex;gap:12px;overflow:auto;scroll-snap-type:x mandatory;padding:6px 2px}
.src-card-tile{display:flex;gap:12px;min-width:320px;scroll-snap-align:start;align-items:center;background: #2b2b2b91;border:1px solid #e5e7eb;border-radius:18px;padding:12px 14px;box-shadow:0 2px 4px rgba(0,0,0,.06)}
.src-card-tile .thumb{width:64px;height:40px;border-radius:10px;background-size:cover;background-position:center}
.src-card-tile .info{display:flex;flex-direction:column;align-items:flex-start}
.src-card-tile .line1{display:flex;align-items:baseline;gap:8px}
.src-card-tile .brand{font-weight:800;letter-spacing:.5px}
.src-card-tile .brand.visa{color: #ffffff;}
.src-card-tile .brand.mc{color:#ef4444}
.src-card-tile .title{font-weight:700}
.src-card-tile .row.small{font-size:.9rem;opacity:.75; font-variant-numeric:tabular-nums}
.src-card-tile .row.small .sep{opacity:.4;margin:0 6px}
.src-card-tile .amount{margin-top:2px;font-weight:800}
.src-card-tile.is-active{/* border-color:#16a34a; */box-shadow:0 0 0 2px rgba(22,163,74,.15)}

/* --- FIX: відступи для блоку Історія та платежів --- */
.history-card {
  margin-top: 16px !important;
  clear: both;
}
.card.panel {
  margin-bottom: 20px !important;
}



/* === Card label styling to match photo (bottom-left pills) === */
.card-slide { position: relative; overflow: hidden; }
.card-content { padding: 126px 18px !important; align-items: flex-start; }
.card-top { width: 100%; }
.card-title {
 /* background: rgb(10 83 102 / 58%) !important; */
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  display: inline-block !important;
}
.card-number {
  display: inline-block !important;
  background: rgb(255 255 255 / 11%) !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  margin-top: 10px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.card-exp {
  display: inline-block !important;
  background: rgb(10 83 102 / 58%) !important;
  color: #ffffff !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  margin-left: 8px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
.card-brand { bottom: 10px !important; right: 12px !important; }


/* === Layout tweaks per request === */
/* Adjust page horizontal padding via variable */
:root { --page-xpad: 14px; --balance-weight: 600; }

.main { padding-left: var(--page-xpad) !important; padding-right: var(--page-xpad) !important; }

/* Balance under the card: make font a bit lighter */
.balance-left .amount,
.balance-compact .b-right { font-weight: var(--balance-weight) !important; }

/* Compact balance row styling */
.balance-compact { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0 4px; padding:4px 2px; }
.balance-compact .b-left { color: var(--muted); }
.balance-compact .b-right { font-size: 18px; }

/* History button like outline style */
.history-btn {
  display:inline-flex; align-items:center; gap:8px;
  border: 2px solid #25812f; background:transparent; color:var(--accent);
  border-radius:8px; padding:2px 16px; font-weight:600;
}

/* Transaction list spacing to match screenshot */
.history-card { padding-top: 4px !important; }
.history-card .tx-item { padding: 13px 6px !important; }

/* Allow easy left/right adjustment for the history and quick-actions wrappers if needed */
.history-card, .quick-actions, .balance-card, .balance-compact { margin-left: 0; margin-right: 0; }


/* === Center the history button at bottom of history card === */
.history-card { display:flex; flex-direction:column; align-items:stretch; }
.history-card .history-btn {
  align-self:center;
  margin-top:12px;
  margin-bottom:4px;
}


/* === Control gap between topbar and cards === */
:root { --cards-top-gap: 16px; }
.card-wrap { margin-top: var(--cards-top-gap) !important; }


/* === Balance font adjustments === */
.balance-left .amount,
.balance-compact .b-right {
  font-size: 16px !important; /* smaller than before */
  font-weight: 700 !important; /* keep bold */
}


.top-bar {
    background-color: #007BFF; /* синій колір */
    height: 240px;             /* опускаємо бар до середини картки */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 0;                /* бар під карткою */
}

.card-container {
    position: relative;
    z-index: 1;        /* карта поверх синього фону */
    margin-top: 100px; /* регулює відстань, щоб карта заходила на бар */
}


/* --- Фон сторінки: синій до середини картки, далі білий --- */
body {
    background: linear-gradient(to bottom, #0a5366 0%, #0a5366 220px, #ffffff 220px, #ffffff 100%);
}



/* Крутити колечко і під час тягнення */


/* Трохи плавніший показ/приховування спінера */
.ptr-indicator .ptr-spinner {
  transition: opacity 180ms ease, transform 180ms ease;
}


/* === PTR tweaks v2 (ChatGPT) === */
/* Крутити колечко і під час тягнення, з існуючим ключом ptr-rot */
.ptr-pulling .ptr-indicator .ptr-spinner {
  animation: ptr-rot 900ms linear infinite !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  will-change: transform;
}

/* Плавніша поява/зникнення спінера */
.ptr-indicator .ptr-spinner {
  transition: opacity 180ms ease, transform 200ms cubic-bezier(.22, .61, .36, 1) !important;
}


/* === PTR spinner force-rotate fix (v3) === */
/* Забороняємо будь-які статичні transform на спінері — тільки анімація керує transform */
.ptr-indicator .ptr-spinner { transform: none !important; }
.ptr-pulling .ptr-indicator .ptr-spinner { transform: none !important; }
/* Обов'язково крутимо під час тягнення */
.ptr-pulling .ptr-indicator .ptr-spinner {
  animation-name: ptr-rot !important;
  animation-duration: 900ms !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  opacity: 1 !important;
}


/* === PTR spinner fix v4 (rotate a pseudo-element) === */
.ptr-indicator .ptr-spinner{
  position: relative;
}

.ptr-indicator .ptr-spinner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  /* жодних сторонніх transform; обертання тільки тут */
  transform-origin: 50% 50%;
}

/* під час тягнення або оновлення крутиться саме ::before */
.ptr-pulling .ptr-indicator .ptr-spinner::before,
.ptr-refreshing .ptr-indicator .ptr-spinner::before{
  animation: ptr-rot 900ms linear infinite;
  opacity: 1;
}


/* === PTR spinner live ring v5 === */
/* Нормалізуємо спінер як контейнер без графіки */
.ptr-indicator .ptr-spinner{
  position: relative;
  width: 26px !important;
  height: 26px !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
}

/* Малюємо саме кільце бордерами на ::before */
.ptr-indicator .ptr-spinner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(0,0,0,.18);
  border-top-color: rgba(0,0,0,.72);
  background: transparent;
  transform-origin: 50% 50%;
}

/* Обертання під час тягнення/оновлення */
.ptr-pulling .ptr-indicator .ptr-spinner::before,
.ptr-refreshing .ptr-indicator .ptr-spinner::before{
  animation: ptr-rot 900ms linear infinite;
  opacity: 1;
}

/* Плавність появи */
.ptr-indicator .ptr-spinner{ transition: opacity 160ms ease, transform 200ms cubic-bezier(.22,.61,.36,1); }


/* === PTR spinner pure white v6 === */
.ptr-indicator .ptr-spinner{
  position: relative;
  width: 28px !important;
  height: 28px !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  border: none !important;
}

/* малюємо кільце тільки через ::before */
.ptr-indicator .ptr-spinner::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #ffffff;
  background: transparent !important;
  transform-origin: 50% 50%;
}

/* крутиться під час тягнення та оновлення */
.ptr-pulling .ptr-indicator .ptr-spinner::before,
.ptr-refreshing .ptr-indicator .ptr-spinner::before{
  animation: ptr-rot 1s linear infinite;
  opacity: 1;
}


/* === PTR spinner iOS-like v7 === */
.ptr-indicator .ptr-spinner{
  width: 24px !important;
  height: 24px !important;
}
.ptr-indicator .ptr-spinner::before{
  border-width: 2px !important;
  border-color: rgba(255,255,255,0.28) !important;
  border-top-color: #fff !important;
}
.ptr-pulling .ptr-indicator .ptr-spinner::before,
.ptr-refreshing .ptr-indicator .ptr-spinner::before{
  animation-duration: 0.8s !important;
}


/* === PTR spinner position v8 (closer to card) === */
.ptr-indicator{
  position: relative !important;
  display: flex !important;
  justify-content: flex-end !important; /* push content to bottom vertically (with absolute we still control exact offset) */
  height: auto; /* height is set inline via JS; keep auto here */
}
.ptr-indicator .ptr-spinner{
  position: absolute !important;
  left: 47% !important;
  transform: translateX(-50%) !important; /* keep centered horizontally */
  bottom: var(--ptr-spinner-offset, -6px) !important; /* negative pulls it closer into the card area */
}


:root{
  /* Optional: tune spinner position without editing JS */
  --ptr-spinner-offset: -6px; /* make more negative to sit even closer to the card */
  --ptr-threshold: 65;
  --ptr-max-pull: 65;
}


/* === PTR polish v9 === */

/* Lower spinner even more by default */
:root{
  --ptr-spinner-offset: -16px; /* make more negative for even lower */
}

/* Spinner entrance/refresh animations */
@keyframes ptr-scale-in { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ptr-bounce {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(3px); }
  70%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* When threshold reached (before release), gently scale spinner in */
.ptr-threshold .ptr-indicator .ptr-spinner{ animation: ptr-scale-in 160ms ease both; }

/* During refreshing, add a subtle bounce loop to the container; ::before still rotates */
.ptr-refreshing .ptr-indicator .ptr-spinner{
  animation: ptr-bounce 900ms ease-in-out infinite;
}

/* Make card pull feel smoother visually (content springs slightly less) */
.ptr-content{
  transition: transform 320ms cubic-bezier(.22,.61,.36,1) !important;
}
.card-slide {
background: none !important;
}

/* === Fix: keep bottom nav and QR button pinned (iOS Safari friendly) === */
html, body{
  /* гарантуємо, що на предках немає transform */
  transform: none !important;
}

.bottom-nav{
  position: fixed !important;
  left: 0; right: 0;
  bottom: 0;
  /* безпечна зона для iOS */
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
  /* знімаємо будь-які небажані зсуви */
  transform: translateZ(0) !important;
  backface-visibility: hidden;
  will-change: auto;
  z-index: 999;
}

.fab-qr{
  position: fixed !important;
  right: 18px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  transform: translateZ(0) !important;
  backface-visibility: hidden;
  will-change: auto;
  z-index: 1000;
}

/* Щоб контент не перекривався навбаром */
.main{
  padding-bottom: 96px !important;
}


/* === Brand badges on main card: white capsule like reference === */
.card-brand{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background:#00000000;
  border-radius: 10px;
  padding: 4px 8px;
  box-shadow: 0 4px 12px rgba(2,6,23,.12);
  border: 1px solid rgba(2,6,23,.06);
}
.card-brand img{
  height: 18px;
  width: auto;
  object-fit: contain;
  display:block;
}
/* Slightly bolder Visa blue when SVG inherits currentColor */
.card-brand img[alt="VISA"]{
  color:#1a4dd7;
}
/* Compact mode on small screens (just in case) */
@media (max-width: 360px){
  .card-brand{ padding: 3px 6px; border-radius: 9px; }
  .card-brand img{ height: 16px; }
}


/* === Light topbar for all non-home pages === */
body:not(.home) .app-header {
  background: #fff !important;
  color: #111 !important;
  border-bottom: 1px solid #e5e5e5;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
body:not(.home) .app-header .back {
  color: #111 !important;
}


/* === Light topbar for all non-home pages (supports .topbar and .app-header) === */
body:not(.home) .topbar,
body:not(.home) .app-header{
  background:#fff !important;
  color:#111 !important;
  border-bottom:1px solid #e5e5e5;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
}
body:not(.home) .topbar .back,
body:not(.home) .app-header .back,
body:not(.home) .topbar .title,
body:not(.home) .app-header h1{
  color:#111 !important;
}


/* === Force white bar on all non-home pages (remove blue background) === */
body:not(.home) .topbar,
body:not(.home) .app-header,
body:not(.home) header{
  background:#fff !important;
  color:#111 !important;
  border-bottom:1px solid #e5e5e5 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
}
body:not(.home) .topbar .back,
body:not(.home) .app-header .back,
body:not(.home) .topbar .title,
body:not(.home) .app-header h1{
  color: #ffffff !important;
}


/* === Force white bar globally on non-home pages (even if inline styles set blue) === */
body:not(.home) header.topbar,
body:not(.home) header.app-header,
body:not(.home) .topbar,
body:not(.home) .app-header {
  background:#fff !important;
  color:#111 !important;
  border:none !important;
  border-bottom:1px solid #e5e5e5 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
}

body:not(.home) header.topbar .title-grow,
body:not(.home) header.topbar .back-btn,
body:not(.home) header.app-header .back,
body:not(.home) header.app-header h1 {
  color:#111 !important;
}


/* === Remove colored backgrounds from inner page headers === */
body:not(.home) .wrap > section:first-child,
body:not(.home) .info-card,
body:not(.home) .rates-head,
body:not(.home) .sel-services-card,
body:not(.home) .history-head {
  background:#fff !important;
  color:#111 !important;
  box-shadow:none !important;
  border:none !important;
}
body:not(.home) .wrap > section:first-child h1,
body:not(.home) .info-card h1,
body:not(.home) .rates-head h3,
body:not(.home) .sel-services-card h3,
body:not(.home) .history-head h2 {
  color:#111 !important;
}


/* === Hard fallback: make inner page top area white no matter what === */
body:not(.home) .main{
  position: relative;
  background: #fff !important;
}
/* White cap behind the first screenful to cover any colored hero/strip */
body:not(.home) .main::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  background: #fff;
  z-index: 0;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  pointer-events: none;
}
/* Ensure actual content renders above the white cap */
body:not(.home) .main > *{
  position: relative;
  z-index: 1;
}

/* Neutralize any residual colored wrappers */
body:not(.home) .wrap,
body:not(.home) section,
body:not(.home) .header-strip,
body:not(.home) .hero,
body:not(.home) .section-head{
  background: #212121 !important;
}


/* === FINAL COLOR OVERRIDES (no functionality changes) === */
/* Усі внутрішні сторінки: робимо topbar/headers білими, текст темним */
body:not(.home) header,
body:not(.home) .topbar,
body:not(.home) .app-header{
  background: #fff !important;
  background-image: none !important;
  color: #111 !important;
  border: none !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
}
/* Кнопки/текст у шапці */
body:not(.home) .topbar .title-grow,
body:not(.home) .topbar .back-btn,
body:not(.home) .app-header .back,
body:not(.home) .app-header h1,
body:not(.home) header .back,
body:not(.home) header h1{
  color: #111 !important;
}

/* Глушимо кольорові "шапки" секцій під топбаром на внутрішніх сторінках */
body:not(.home) .wrap,
body:not(.home) .section-head,
body:not(.home) .header-strip,
body:not(.home) .hero,
body:not(.home) section.header,
body:not(.home) section:first-of-type{
  background: #111112 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
}

/* Для історії: вкладки/фільтри — біла смуга */
body:not(.home) .filters-row,
body:not(.home) .tabs,
body:not(.home) .day-label{
  background: #212121 !important;
  color: #ffffff !important;
}

/* Якби верх все одно підливався фоном — ставимо білу "кришку" */
body:not(.home) .main{
  position: relative;
  background: #212121 !important;
}
body:not(.home) .main::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 220px;
  background: #212121;
  z-index: 0;
  pointer-events: none;
}
body:not(.home) .main > *{ position: relative; z-index: 1; }


/* === Force white header on review and other inner pages === */
body:not(.home) header.topbar,
body:not(.home) .topbar,
body:not(.home) header.app-header,
body:not(.home) .app-header{
  background: #0f0f0f !important;
  color:#111 !important;
  border:none !important;
  border-bottom:1px solid #212121 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.05) !important;
}
body:not(.home) header.topbar .title-grow,
body:not(.home) header.topbar .back-btn,
body:not(.home) header.app-header .back,
body:not(.home) header.app-header h1{
  color: #e5e5e5 !important;
}

/* === Segmented tabs above search (history page) === */
.seg-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:8px 12px 6px;
}
.seg-tabs{
  display:inline-flex; align-items:center; gap:4px;
  background:#2c2c2c; padding:4px; border-radius:22px;
}
.seg-tab{
  display:inline-flex; align-items:center; gap:6px;
  font-weight:600; font-size:16px; line-height:1;
  padding:8px 12px; border-radius:18px; text-decoration:none;
  color:#ffffff; opacity:.85;
}
.seg-tab .seg-ico{ display:inline-flex; }
.seg-tab.is-active{
  background:#0000003d; color:#29d13a; /* Приватівський зелений */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  opacity:1;
}
/* three-dot menu */
.kebab{
  background:#2c2c2c; border:none; border-radius:16px; padding:8px 10px; display:inline-flex; gap:3px; align-items:center;
}
.kebab span{ width:4px; height:4px; background:#ffffff; border-radius:50%; display:block; }
@media (prefers-color-scheme: dark){
  .seg-tabs{ background:#2c2c2c; }
  .seg-tab{ color:#ddd; }
  .seg-tab.is-active{ background:#3a3a3a; color:#62b265; }
  .kebab{ background:#2c2c2c; }
  .kebab span{ background:#eee; }
}
/* search pill to visually match */
.search-chip form input[name="q"]{
  border-radius:18px;
}


/* Actions icon images override */
.action .circle{display:flex;align-items:center;justify-content:center}
.action .circle img{width:22px;height:22px;display:block}



/* Remove green bg/border/shadow for action circles */
.quick-actions .circle, .action .circle{
  background: transparent !important;
  box-shadow: none !important;
}
.action .circle img{width:28px;height:28px;display:block}



/* Adjust icon size for quick actions */
.action .circle img{width:32px;height:32px;display:block}



/* Fine-tune vertical alignment of quick action icons */
.action .circle{
  display:flex;
  align-items:center;
  justify-content:center;
}
.action .circle img{
  width:32px;
  height:32px;
  display:block;
  margin-top:1px; /* slight adjustment for visual centering */
}



/* Test different vertical alignments for quick action icons */
.action .circle img{
  width:48px;
  height:48px;
  display:block;
}
/* Variants */
.action .circle.img-align--2 img{ margin-top:-2px; }
.action .circle.img-align-0 img{ margin-top:0; }
.action .circle.img-align-2 img{ margin-top:2px; }