:root{
  --brand:#005935;
  --brand-grad-start:#2bb673;
  --brand-grad-end:#0f8c45;
  --bg:#f5f6f8;
  --panel:#ffffff;
  --shadow:0 10px 24px rgba(19,28,35,.08);
  --shadow-soft:0 6px 18px rgba(19,28,35,.06);
  --pad:20px;
  --nav-h:68px;
  --muted:#96a0a6;
  --balance-gray:#3f4b53;
  --maint-w: clamp(260px, 70vw, 360px);
  --green:#0a8f5b;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:var(--bg);
  color:#222;
  max-width:480px;
  margin:0 auto;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--nav-h) + 16px);
}

.page{display:none}
.page.active{display:block}

/* ===== auth ===== */
.auth-header{padding:16px var(--pad) 8px;text-align:center}
.auth-title{font-size:24px;font-weight:500}
.auth-wrap{display:grid;grid-template-rows:1fr auto 1fr;row-gap:12px;padding:0 var(--pad);min-height:70vh}
.auth-box{align-self:center;display:flex;flex-direction:column;gap:10px}
.auth-input{width:100%;padding:14px;border:1px solid #cfd6da;border-radius:10px;font-size:16px;background:#fff;outline:none}
.auth-input:focus{border-color:#0e8150;box-shadow:0 0 0 3px rgba(14,129,80,.12)}
.auth-btn{
  display:block;width:calc(100% - 2*var(--pad));margin:12px var(--pad);
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end));
  color:#fff;border:none;padding:14px;font-size:16px;border-radius:12px;cursor:pointer
}
.auth-btn:disabled{background:#cfcfcf;cursor:not-allowed}

/* ===== header / home ===== */
.header{display:flex;justify-content:space-between;align-items:center;padding:15px var(--pad)}
.logo{
  font-size:22px;font-weight:600;
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.profile{display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad) 10px}
.profile-info{display:flex;align-items:center;gap:10px;cursor:pointer}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
/* ИЗМЕНЕНИЕ: СЕРЫЙ ЦВЕТ АВАТАРА */
#main-page .avatar {background-color: #e9edf0; color: #7c8891;}
.bonus-block{display:flex;flex-direction:column}
.bonus-label{font-size:12px;color:#777}
.bonus-amount{font-size:16px;font-weight:600}
.chat-btn{background:none;border:none;cursor:pointer;padding:6px}
.chat-btn img{width:24px;height:24px;display:block}

.cards-container{display:flex; gap:10px; overflow-x:auto; padding:10px var(--pad) 22px; scrollbar-width:none}
.cards-container::-webkit-scrollbar{display:none}
.cards-container img{width:120px;height:120px;border-radius:12px;object-fit:cover}

.search-bar{background:#eef1f4;margin:10px var(--pad);padding:12px 15px;border-radius:10px;color:#555;font-size:14px}
.menu-block{background:#fff;margin:15px var(--pad);padding:16px;border-radius:12px;box-shadow:var(--shadow-soft)}
.menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.menu-item{display:flex;flex-direction:column;align-items:center;font-size:13px;color:#333;gap:6px; cursor: pointer;}
.menu-item img{width:28px;height:28px}

/* ===== accounts ===== */
.accounts-block{background:#fff;margin:0 var(--pad) 15px;padding:16px;border-radius:12px;box-shadow:var(--shadow)}
.accounts-header{display:flex;justify-content:space-between;margin-bottom:10px;font-weight:500}
.account-card{display:flex;align-items:center;justify-content:space-between;background:#f9f9f9;padding:12px;border-radius:10px; cursor: pointer;}
.account-left{display:flex;align-items:center;gap:10px}
.account-left img{width:36px;height:24px;object-fit:contain}
.account-name{font-size:15px;font-weight:500}
.account-number{font-size:13px;color:#777}
.account-balance{font-size:16px;font-weight:600;color:#3f4b53}
.new-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:12px;box-shadow:var(--shadow-soft);padding:12px;margin-top:12px;cursor:pointer}

/* Размер иконки счета сделан таким же, как у карты */
.pending-account-icon {
  width: 36px;
  height: 24px;
  object-fit: contain;
}

/* Стиль для имитации клика на карточках */
.account-card.clicked {
  background-color: #e9edf0;
  transition: background-color 0.1s ease-out;
}
.acc-item.clicked {
  background-color: #f0f2f4;
  transition: background-color 0.1s ease-out;
}

/* ===== bottom nav ===== */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:1000;max-width:480px;margin:0 auto; display:flex;justify-content:space-around;background:#fff;padding:10px 0;border-top:1px solid #eee;box-shadow:0 -6px 18px rgba(19,28,35,.06)}
.nav-item{display:flex;flex-direction:column;align-items:center;font-size:12px;color:#777;cursor:pointer}
.nav-item img{width:22px;height:22px;margin-bottom:4px;filter:grayscale(1) brightness(.6)}
.nav-item.active{color:#0a8f5b}
.nav-item.active img{filter:none}

/* ===== transfers ===== */
.tr-header{display:flex;align-items:center;justify-content:space-between;margin:16px var(--pad) 0;}
.tr-left{display:flex;align-items:center;gap:8px;color:var(--brand);font-size:13px;font-weight:600}
.tr-title{font-size:26px;font-weight:700;margin:20px var(--pad) 24px;}
.tr-list{background:#fff;margin:0 var(--pad);border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.tr-item{display:flex;align-items:center;gap:12px;padding:12px var(--pad);cursor:pointer}
.tr-item + .tr-item{border-top:1px solid #f0f2f4}
.tr-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.tr-ico img{width:32px;height:32px;object-fit:contain;display:block;filter:drop-shadow(0 1.5px 2.5px rgba(0,0,0,.2))}
.tr-body{flex:1;display:flex;flex-direction:column}
.tr-title-sm{font-weight:600}
.tr-sub{font-size:13px;color:#96a0a6}
.tr-chevron{color:#b5bdc2;font-weight:700}
.tr-banner{
  margin:16px var(--pad) 16px;background:linear-gradient(135deg,#18b36b,#0c8a52);
  color:#fff;border-radius:14px;padding:14px;box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.tr-banner .text{font-weight:600}
.tr-banner .small{font-size:12px;opacity:.9;font-weight:400}
.tr-banner .btn{background:#fff;color:#0b7547;border:none;border-radius:10px;padding:8px 10px;font-weight:600;cursor:pointer}

/* ===== transfer by phone ===== */
.tp-wrap{margin:16px var(--pad) 0; display:flex; flex-direction:column; gap:14px;}
.tp-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft);padding:14px 14px; display:flex; align-items:center; justify-content:space-between;}
.tp-left{display:flex; align-items:center; gap:12px;}
.tp-logo{width:44px;height:28px;object-fit:contain}
.tp-title{font-weight:600}
.tp-balance{margin-top:4px;color:#1a1a1a;font-weight:600}
.tp-arrow{display:flex;justify-content:center;align-items:center}
.tp-down{width:36px;height:30px;margin:0 auto;border-radius:8px;background:#fff;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center}
.tp-down::after{content:"";border:7px solid transparent;border-top-color:#cfd6da;margin-top:6px}
.tp-input{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft);padding:14px; display:flex;align-items:center; gap:12px;}
.tp-flag{width:40px;height:40px;border-radius:12px;overflow:hidden}
.tp-flag img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.tp-input input{border:none; outline:none; font-size:20px; width:100%; background:transparent;}
.tp-contact{margin-left:auto; width:28px;height:28px;border-radius:50%;background:#e9f6ee;display:flex;align-items:center;justify-content:center}
.tp-recipient{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft)}
.tp-recipient .line{display:flex; align-items:center; gap:12px; padding:14px}
.tp-recipient .line + .line{border-top:1px solid #eef1f4}
.tp-chip{width:40px;height:40px;border-radius:12px;background:#eef7f0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#0a8f5b}
.tp-row{display:flex; flex-direction:column; gap:6px; background:#fff;border-radius:16px;box-shadow:var(--shadow-soft); padding:14px}
.tp-row .cap{font-size:14px; color:#8c95a0}
.tp-row .big{font-size:22px; font-weight:400; border:none; outline:none; background:transparent;}
.tp-msg{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft);padding:14px;display:flex;flex-direction:column;gap:10px}
.tp-msg .cap{font-size:14px;color:#8c95a0}
.tp-msg textarea{width:100%;border:none;outline:none;background:transparent;font-size:16px;resize:none;min-height:44px}
.tp-note{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#f8fbf9;border-radius:10px}
.tp-note .link{color:var(--green);font-weight:600}
.tp-commission{display:flex;justify-content:center;align-items:center; gap:10px}
.tp-commission .pill{background:#fff;border-radius:12px;padding:8px 14px;box-shadow:var(--shadow-soft);font-weight:600}
.tp-consent{background:#fff;border-radius:16px;box-shadow:var(--shadow-soft);padding:14px}
.tp-consent a{color:var(--green);text-decoration:underline}

/* ===== iOS-style switch ===== */
.switch{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  width:44px;height:26px;border-radius:13px;
  background:#d8e2e7;border:none;position:relative;
  vertical-align:middle;cursor:pointer;outline:none;
  transition:background .2s ease;
  flex:0 0 auto; display:inline-block;
}
.switch:before{
  content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);
  transition:transform .2s ease;
}
.switch:checked{background:#22a764}
.switch:checked:before{transform:translateX(18px)}
.switch:focus-visible{box-shadow:0 0 0 3px rgba(34,167,100,.25)}

.tp-submit{
  display:block; width:calc(100% - 2*var(--pad)); margin:12px var(--pad);
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end));
  color:#fff;border:none;padding:16px;font-size:20px;border-radius:16px;cursor:pointer; font-weight:700;
  opacity:.65; pointer-events:none;
}
.tp-submit.enabled{opacity:1;pointer-events:auto}

/* sheet */
.card-sheet{display:none; background:#fff; border-radius:14px; box-shadow:var(--shadow); margin:0 var(--pad); overflow:hidden}
.card-sheet.active{display:block}
.card-item{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-top:1px solid #f2f4f6}
.card-item:first-child{border-top:none}
.card-item .left{display:flex;align-items:center;gap:10px}
.card-item .logo{width:36px;height:24px;object-fit:contain}
.card-item .name{font-weight:600}
.card-item .bal{color:#0a8f5b;font-weight:700}

/* ===== profile page ===== */
.p-header{display:flex;align-items:center;gap:8px;padding:12px var(--pad)}
.p-back{width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;cursor:pointer}
.p-title{font-size:20px;font-weight:600}
.p-hero{display:flex;flex-direction:column;align-items:center;gap:10px;margin:6px var(--pad) 12px}
.p-hero .avatar{width:76px;height:76px;border-radius:18px;background:#fff;color:#9aa3aa;border:1px solid #e9edf0;font-size:26px;font-weight:700}
.p-hero .name{font-weight:700;font-size:18px;text-align:center}
.p-hero .phone{color:#7c8891;font-size:14px;text-align:center}
.p-block{background:#fff;margin:0 var(--pad) 12px;border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden}
.p-block-title{padding:12px var(--pad) 8px; color:#7d8790; font-size:13px; font-weight:600}
.p-row{display:flex;align-items:center;gap:12px;padding:14px var(--pad)}
.p-row + .p-row{border-top:1px solid #f0f2f4}
.p-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center}
.p-ico img{width:32px;height:32px;object-fit:contain}
.p-right{margin-left:auto;color:#9aa3aa}
.p-row .cap{color:#8c95a0;font-size:13px}

/* ===== ACCOUNTS PAGE ===== */
.acc-header{display:flex;align-items:center;justify-content:space-between;padding:15px var(--pad)}
.acc-title{font-size:22px;font-weight:700}
.acc-section{margin:0 var(--pad) 14px}
.acc-cap{color:#7d8790;font-size:13px;margin:0 0 8px 2px}
.acc-panel{background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.acc-item{display:flex;align-items:center;gap:12px;padding:14px; cursor: pointer;}
.acc-item + .acc-item{border-top:1px solid #f0f2f4}
.acc-logo{width:42px;height:28px;object-fit:contain}
.acc-ico{width:44px;height:44px;border-radius:8px;background:#f3f6f8;display:flex;align-items:center;justify-content:center;flex:0 0 44px}
.acc-ico img{width:22px;height:22px;object-fit:contain}
.acc-ico-img{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center}
.acc-ico-img img{width:44px;height:44px;object-fit:contain}
#accounts-page .acc-ico-img img[src$="bonus.png"]{width:28px;height:28px;object-fit:contain}
#accounts-page .acc-ico-img img[src$="halykeasy.png"]{width:54px;height:54px;object-fit:contain}
.acc-body{flex:1;display:flex;flex-direction:column}
.acc-name{font-weight:600}
.acc-sub{font-size:13px;color:#8c95a0}
.acc-right{margin-left:auto;color:#1a1a1a;font-weight:600}
.pending-account-icon-acc {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* ===== maintenance page ===== */
.maint-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;margin:32px var(--pad)}
.maint-wrap img{max-width:var(--maint-w);max-height:48vh;width:100%;height:auto;display:block;object-fit:contain}
.maint-btn{
  display:block;width:var(--maint-w);max-width:100%;
  background:linear-gradient(135deg,var(--brand-grad-start),var(--brand-grad-end));
  color:#fff;border:none;padding:14px 16px;font-size:16px;border-radius:12px;cursor:pointer;
}

/* ===== PAYMENTS PAGE ===== */
.pay-header{display:flex;justify-content:space-between;align-items:center;padding:15px var(--pad)}
.pay-title{font-size:22px;font-weight:700}
.pay-card{background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);margin:10px var(--pad);padding:12px;border:1px solid #E6EAEE}
.pay-cap{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:#7d8790;font-size:13px}
.pay-cap .city{cursor:pointer;color:#1a73e8;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.pay-cap .city::after{content:"▼";font-size:10px;margin-left:2px;transform:translateY(-1px)}
.pay-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pay-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
.pay-item[role="button"]{outline:none}
.pay-ico{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid #E6EAEE;display:flex;align-items:center;justify-content:center}
.pay-ico img{width:28px;height:28px;object-fit:contain;display:block}
.pay-name{font-size:12px;text-align:center;line-height:1.2}
.pay-item.onay .pay-ico,
.pay-item.fines .pay-ico{background:transparent;border:none}
.pay-item.onay .pay-ico img,
.pay-item.fines .pay-ico img{width:32px;height:32px}
.pay-fav{background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);margin:10px var(--pad);border:1px solid #E6EAEE;padding:16px}
.pay-fav-title{font-weight:700;margin-bottom:12px}
.pay-fav-empty{color:#8c95a0;text-align:center;padding:18px 6px;border-radius:12px;background:#F7F9FB}

.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:flex-end;z-index:2000}
.sheet.active{display:flex}
.sheet-body{background:#fff;max-height:70vh;width:100%;max-width:480px;margin:0 auto;border-top-left-radius:16px;border-top-right-radius:16px;overflow:auto;box-shadow:var(--shadow)}
.sheet-title{padding:12px var(--pad);font-weight:700;border-bottom:1px solid #f0f2f4}
.city-list{display:flex;flex-direction:column}
.city-item{padding:12px var(--pad);border-bottom:1px solid #f4f6f8;cursor:pointer}
.city-item.active{background:#f2fbf6}

/* ===== MENU PAGE ===== */
.menu-long{background:#fff;margin:10px var(--pad) 90px;border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.menu-card{background:#fff;margin:10px var(--pad);border:1px solid #e6eaee;border-radius:14px;box-shadow:var(--shadow-soft);padding:14px;display:flex;align-items:center;gap:12px}
.menu-card .badge,
.menu-ico{
  width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid #e6eaee;
  display:flex;align-items:center;justify-content:center;flex:0 0 40px;box-sizing:border-box;
}
.menu-card .badge img,
.menu-ico img{width:24px;height:24px;object-fit:contain;display:block;margin:0}
.menu-card .txt{font-weight:600;line-height:1.25}
.menu-section{margin:10px var(--pad)}
.menu-section-title{color:#7d8790;font-size:13px;margin:0 0 8px 2px;font-weight:600}
.menu-panel{background:#fff;border-radius:14px;box-shadow:var(--shadow-soft);overflow:hidden}
.menu-row{display:flex;align-items:center;gap:12px;padding:14px var(--pad);cursor:pointer}
.menu-row + .menu-row{border-top:1px solid #f0f2f4}
.menu-title{font-weight:600}
.menu-sub{font-size:12px;color:#96a0a6}
.menu-right{margin-left:auto;color:#b5bdc2;font-weight:700}

/* ===== НОВЫЕ СТИЛИ ДЛЯ НОВЫХ СТРАНИЦ ===== */
/* Общие стили для вложенных страниц */
.subpage-header{display:flex;align-items:center;gap:8px;padding:12px var(--pad);position:sticky;top:0;background:var(--bg);z-index:10;}
.subpage-back-btn{width:36px;height:36px;border-radius:10px;background:#fff;box-shadow:var(--shadow-soft);display:flex;align-items:center;justify-content:center;cursor:pointer; color:#333;}
.subpage-title{font-size:20px;font-weight:600}
.subpage-content{padding: 0 var(--pad) 20px; display:flex; flex-direction:column; gap:12px;}

/* Стили для страницы "Карты" */
.card-offer{background:var(--panel); border-radius:16px; box-shadow:var(--shadow-soft); padding:16px;}
.card-offer-img{width:100%; display:block; border-radius:10px; margin-bottom:12px;}
.card-offer-title{font-size:18px; font-weight:600; margin-bottom:4px;}
.card-offer-desc{font-size:14px; color:#555; margin-bottom:16px; line-height:1.4;}
.card-offer-actions{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.card-offer-details{font-size:14px; font-weight:500; color:var(--green); text-decoration:none;}
.card-offer-btn{background-color:#f0f2f4; color:#555; border:none; padding:10px 18px; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer;}

/* Стили для страницы "Депозиты" */
.deposit-item{background:var(--panel); border-radius:16px; box-shadow:var(--shadow-soft); display:flex; overflow:hidden; cursor:pointer; align-items: stretch;}
.deposit-item-rate{flex:0 0 90px; padding:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#333; text-align:center;}
.deposit-item-rate img{width:140px; height:140px; margin-bottom:0;}
.deposit-item-rate span, .deposit-item-rate .rate-add { display: none; }
.deposit-item-body{padding:14px; flex:1;}
.deposit-item-title{font-size:16px; font-weight:600; margin-bottom:8px;}
.deposit-item-features{list-style:none; font-size:13px; color:#444; margin-bottom:10px; display:flex; flex-direction:column; gap:5px;}
.deposit-item-features li::before{margin-right:8px;}
.deposit-item-features li.check::before{content:"✓"; color:var(--green);}
.deposit-item-features li.cross::before{content:"⊗"; color:#aaa;}
.deposit-item-currency{display:flex; gap:8px;}
.deposit-item-currency span{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#f0f2f4; font-weight:600; font-size:13px;}

/* Стили для страницы "Кредиты" */
.credit-item{background:var(--panel); border-radius:16px; box-shadow:var(--shadow-soft); display:flex; padding:16px; gap:16px; align-items:center;}
.credit-item-img{flex:0 0 100px; height:100px; display:flex; align-items:center; justify-content:center; background:#ffffff; border-radius:12px;}
.credit-item-img img{width:140px; height:px; object-fit:contain;}
.credit-item-body{flex:1;}
.credit-item-title{font-weight:600; font-size:17px; margin-bottom:8px;}
.credit-item-features{list-style:none; margin-bottom:12px; font-size:13px; color:#555;}
.credit-item-features li::before{content:"•"; margin-right:6px; color:var(--green);}
.credit-item-btn{width:100%; background:linear-gradient(135deg, var(--brand-grad-start), var(--brand-grad-end)); color:#fff; border:none; padding:12px; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;}

/* Стиль для имитации клика в профиле */
.p-row.clicked {
  background-color: #f0f2f4;
  transition: background-color 0.1s ease-out;
}

/* Стили для окна выбора языка */
.lang-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  z-index: 2000;
  display: flex;
  align-items: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.lang-sheet.active {
  opacity: 1;
  pointer-events: auto;
}
.lang-sheet-body {
  background: #fff;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 10px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.lang-sheet.active .lang-sheet-body {
  transform: translateY(0);
}
.lang-sheet-title {
  font-weight: 600;
  text-align: center;
  padding: 12px;
  font-size: 18px;
}
.lang-option {
  padding: 14px 20px;
  font-size: 16px;
  cursor: pointer;
  border-top: 1px solid #f0f2f4;
}
.lang-option:hover {
  background-color: #f5f5f5;
}