/* 2026-11-11: presentation-only home tabs and inline catalog forms.
   Existing transfer tier detection, favorite management, records and order API logic
   intentionally remain in portal.js. Do not style/alter their inner controls here. */

/* Keep the shop header compact; both original controls and the reference theme switch remain usable. */
.app-header .header-actions{gap:6px}
.app-header .header-favorites,
.app-header .header-stats-toggle{
  width:36px;height:36px;min-width:36px;border-radius:50%;
  display:grid;place-items:center;border:1px solid #bbd8fa;
  background:linear-gradient(145deg,#fff,#e4f1ff);color:#1456a6;
  box-shadow:0 4px 12px rgba(25,105,203,.12);
}
.app-header .header-favorites svg,.app-header .header-stats-toggle svg{
  height:19px;width:19px;fill:none;stroke:currentColor;stroke-width:1.8;
}
.app-header .header-theme-toggle{
  display:grid;place-items:center;flex:none;width:38px;height:36px;min-width:0;
  border-radius:18px;padding:0;background:linear-gradient(145deg,#fff,#e4f1ff);
  border:1px solid #bbd8fa;box-shadow:0 4px 12px rgba(25,105,203,.1);
}
.app-header .header-theme-toggle .theme-toggle-icon{width:29px;height:29px;border-radius:50%;background:transparent}
.app-header .header-theme-toggle .theme-toggle-icon svg{width:18px;height:18px}
.app-header .user-avatar{height:39px;width:39px;flex:none;border-radius:50%;overflow:hidden}
.app-header .user-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.app-header .user-avatar img[hidden]{display:none!important}
.app-header .profile-copy strong{font-size:12px;max-width:110px}
.app-header .profile-copy span{font-size:9px}
.app-header .menu-trigger{height:36px;width:36px;flex:none;border-radius:13px}
@media(max-width:370px){
  .app-header{padding-inline:9px}
  .app-header .header-actions{gap:4px}
  .app-header .header-favorites,.app-header .header-stats-toggle{width:31px;min-width:31px;height:31px}
  .app-header .header-theme-toggle{width:32px;height:32px}
  .app-header .menu-trigger{width:31px;height:31px}
  .app-header .profile-copy strong{max-width:67px;font-size:11px}
  .app-header .user-avatar{width:33px;height:33px}
}

/* All four existing data-backed totals are presented in the original top summary slot. */
#homeScreen #dashboardStatsShell{margin:2px 0 14px;padding:0}
#homeScreen #statsCarousel{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;direction:rtl;
  width:100%;padding:8px 4px;overflow:visible;scroll-snap-type:none;
  border:1px solid #c4ddfc;border-radius:23px;
  background:linear-gradient(160deg,#fafdff,#e8f3ff);box-shadow:0 8px 26px rgba(33,95,171,.11);
}
#homeScreen #statsCarousel .summary-card{
  display:flex;flex-direction:column;align-items:center;min-width:0;width:auto;min-height:108px;
  padding:7px 4px;margin:0;flex:none;border:0;border-radius:0;background:transparent;box-shadow:none;
}
#homeScreen #statsCarousel .summary-card + .summary-card{border-right:1px solid #cbdff7}
#homeScreen #statsCarousel .summary-card::before,
#homeScreen #statsCarousel .summary-card::after,
#homeScreen #statsCarousel .summary-card .count-orb{display:none}
#homeScreen #statsCarousel .summary-card-head{
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;min-height:62px;
  width:100%;justify-content:flex-start;
}
#homeScreen #statsCarousel .summary-card-head .summary-icon{
  display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:11px;
  color:#086fe1;background:#d8ecff;border:0;
}
#homeScreen #statsCarousel .summary-card-head .summary-icon svg{width:20px;height:20px}
#homeScreen #statsCarousel .summary-card-head b{
  display:block;font-size:clamp(8px,2.2vw,10px);line-height:1.3;white-space:normal;letter-spacing:-.12px;color:#173767;
}
#homeScreen #statsCarousel .summary-card-head small{display:none}
#homeScreen #statsCarousel .summary-value{
  margin:auto 0 0;display:flex;flex-direction:column;align-items:center;gap:2px;
  justify-content:center;text-align:center;width:100%;min-width:0;
}
#homeScreen #statsCarousel .summary-value strong,
#homeScreen #statsCarousel .today-total-card .summary-value strong{
  font-size:clamp(12px,3.1vw,18px);font-weight:950;color:#0757d9;
  line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}
#homeScreen #statsCarousel .summary-value span{font-size:9px;color:#2463b4;font-weight:850}
#homeScreen #statsCarousel .dues-currency-carousel{
  margin:auto 0 0;width:100%;height:35px;min-height:35px;border:0;border-radius:0;
  overflow-y:auto;scroll-snap-type:y mandatory;background:transparent;
}
#homeScreen #statsCarousel .currency-pane{
  height:35px;min-height:35px;display:flex;justify-content:center;align-items:center;
  border:0;border-radius:0;padding:0;background:transparent;
}
#homeScreen #statsCarousel .currency-badge,
#homeScreen #statsCarousel .currency-copy small{display:none}
#homeScreen #statsCarousel .currency-copy{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:0;gap:1px;text-align:center;width:100%;
}
#homeScreen #statsCarousel .currency-copy strong{
  font-size:clamp(12px,3.1vw,18px);line-height:1.2;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;color:#0757d9;
}
#homeScreen #statsCarousel .currency-copy em{font-size:9px;color:#2463b4;font-style:normal}
#homeScreen #statsCarousel .currency-pane[data-state] .currency-copy strong{color:#0757d9}
#homeScreen #statsDots{display:none}

/* Three main choices. No wholesale/retail selection outside the unchanged transfer form. */
.home-service-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 15px}
.home-service-tab{
  border:1px solid #c5ddfc;background:linear-gradient(145deg,#fafdff,#eaf4ff);
  border-radius:20px;min-width:0;min-height:92px;padding:13px 5px 10px;
  color:#15325f;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;box-shadow:0 8px 20px rgba(27,91,179,.09);
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.home-service-tab svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;flex:none}
.home-service-tab b{font-size:clamp(10px,3vw,14px);line-height:1.4;white-space:normal;text-align:center;font-weight:950}
.home-service-tab.active,.home-bill-kind.active{
  color:#fff;background:linear-gradient(130deg,#08b6ff 0%,#0679f8 55%,#064adf 100%);
  border-color:#7fdfff;box-shadow:0 9px 22px rgba(0,109,240,.27),inset 0 1px 0 rgba(255,255,255,.3);
}
.home-service-tab:focus-visible,.home-bill-kind:focus-visible{outline:3px solid #6bc5ff;outline-offset:3px}
@media(max-width:360px){.home-service-nav{gap:5px}.home-service-tab{min-height:78px;border-radius:15px}.home-service-tab svg{width:25px;height:25px}}

/* In-home fields replace the previous stacked modal navigation for these two services. */
.home-inline-services{margin-top:1px}
.home-bill-kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:13px}
.home-bill-kind{
  min-width:0;min-height:50px;padding:7px 4px;border-radius:15px;
  border:1px solid #c4ddfc;background:linear-gradient(145deg,#fff,#e8f3ff);
  color:#193966;font-weight:950;font-size:clamp(10px,2.6vw,13px);text-align:center;
  box-shadow:0 6px 16px rgba(33,94,165,.08);
}
.home-service-content{
  padding:20px 17px 23px;border-radius:27px;border:1px solid #bbd8fd;
  background:linear-gradient(155deg,rgba(251,254,255,.96),rgba(226,240,255,.97));
  box-shadow:0 13px 35px rgba(24,87,163,.1);color:#142d56;
}
.inline-service-heading{
  display:flex;align-items:center;gap:11px;min-width:0;margin-bottom:21px;
}
.inline-service-icon{
  display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:16px;
  border:1px solid #b3d8ff;color:#036fe3;background:linear-gradient(140deg,#f9fcff,#cfe8ff);
}
.inline-service-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8}
.inline-service-heading h2{margin:0 0 4px;font-size:22px;line-height:1.3;color:#0b3476}
.inline-service-heading p{margin:0;font-size:11px;line-height:1.65;color:#7388a9}
.inline-service-form{gap:14px}
.home-service-content .inline-service-form label{
  display:grid;gap:7px;color:#163763;font-size:13px;font-weight:900;
}
.home-service-content .inline-service-form input:not([type="hidden"]),
.home-service-content .inline-service-form select{
  display:block;width:100%;height:55px;min-height:55px;min-width:0;
  padding:0 15px;border:1px solid #b1d1fb;border-radius:16px;
  background:linear-gradient(140deg,#fff,#f1f8ff);color:#142e55;
  font-family:inherit;font-size:14px;text-align:right;outline:0;box-shadow:inset 0 1px 3px rgba(12,80,166,.025);
}
.home-service-content .inline-service-form input:focus,
.home-service-content .inline-service-form select:focus{
  border-color:#078aff;box-shadow:0 0 0 3px rgba(7,138,255,.12);
}
.home-service-content .inline-service-form input::placeholder{color:#8498b4}
.home-service-content .inline-service-form input[type="hidden"]{display:none}
.home-service-content .inline-service-form .service-price-card{
  min-height:55px;border-radius:16px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(130deg,#e5f8f0,#edf9ff);border:1px solid #b8e2d4;
  color:#163f75;font-size:13px;font-weight:950;
}
.home-service-content .inline-service-form .service-price-card strong{font-size:20px;color:#0065d7}
.home-service-content .inline-service-form .service-price-card strong small{font-size:11px}
.home-service-content .inline-service-form .modal-submit{
  display:flex;align-items:center;justify-content:center;min-height:59px;width:100%;
  border:1px solid #5fe0ff;border-radius:19px;margin-top:3px;
  background:linear-gradient(125deg,#06b4ff,#0875f5 56%,#0647de);color:#fff;
  font-size:17px;font-weight:950;box-shadow:0 9px 20px rgba(5,94,225,.22);
}
.inline-service-loading{padding:30px 12px;text-align:center;font-weight:800;font-size:12px;color:#6a86a6}
.home-service-content .quick-error:empty{display:none}

/* Bottom navigation is the same existing four actions, without the blank middle circle. */
.bottom-nav{grid-template-columns:repeat(4,minmax(0,1fr));padding:7px 9px calc(7px + env(safe-area-inset-bottom));
  background:linear-gradient(145deg,rgba(252,254,255,.99),rgba(224,240,255,.98));border-top:1px solid #bfd8f9;
  border-radius:25px 25px 0 0;box-shadow:0 -5px 22px rgba(13,64,134,.08)}
.bottom-nav #voiceNavButton{display:none!important}
.bottom-nav .nav-item{border-radius:15px;color:#334e75}
.bottom-nav .nav-item.active{background:linear-gradient(135deg,#cfe8ff,#e0f0ff);color:#0358cd}
.bottom-nav .nav-item b{font-size:11px}
.bottom-nav .nav-item svg{width:25px;height:25px}

html[data-theme="dark"] .app-header .header-favorites,
html[data-theme="dark"] .app-header .header-stats-toggle,
html[data-theme="dark"] .app-header .header-theme-toggle{
  background:linear-gradient(145deg,#0d2b55,#123e76);color:#deeeff;border-color:#3279c1;
}
html[data-theme="dark"] .app-header .header-theme-toggle .theme-toggle-icon{background:transparent;color:#d9eeff}
html[data-theme="dark"] #homeScreen #statsCarousel{
  background:linear-gradient(135deg,#0d315e,#061e42);border-color:#2476cc;
  box-shadow:0 10px 32px rgba(0,0,0,.23);
}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-card{
  background:transparent!important;border-radius:0;border-top:0;border-bottom:0;
  border-left:0;box-shadow:none!important;
}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-card+.summary-card{border-right:1px solid #285181}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-card-head b{color:#e8f5ff}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-icon{background:#103c70;color:#8bd4ff}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-value strong,
html[data-theme="dark"] #homeScreen #statsCarousel .today-total-card .summary-value strong,
html[data-theme="dark"] #homeScreen #statsCarousel .currency-pane[data-state] .currency-copy strong{color:#76e0ff}
html[data-theme="dark"] #homeScreen #statsCarousel .summary-value span,
html[data-theme="dark"] #homeScreen #statsCarousel .currency-copy em{color:#b6e4ff}
html[data-theme="dark"] .home-service-tab,
html[data-theme="dark"] .home-bill-kind{background:linear-gradient(150deg,#122f57,#071a39);border-color:#315f9d;color:#d7e9ff;box-shadow:none}
html[data-theme="dark"] .home-service-tab.active,
html[data-theme="dark"] .home-bill-kind.active{
  color:#fff;background:linear-gradient(130deg,#04aaff,#0578fa 60%,#0746d6);
  border-color:#49dcff;box-shadow:0 7px 20px rgba(0,121,237,.26);
}
html[data-theme="dark"] .home-service-content{
  border-color:#285b97;background:linear-gradient(145deg,#0e2d56,#061a39);
  color:#e8f2ff;box-shadow:0 14px 34px rgba(0,0,0,.25);
}
html[data-theme="dark"] .inline-service-icon{background:#123c70;color:#8addff;border-color:#2d70b9}
html[data-theme="dark"] .inline-service-heading h2{color:#eff8ff}
html[data-theme="dark"] .inline-service-heading p{color:#aac6e9}
html[data-theme="dark"] .home-service-content .inline-service-form label{color:#e8f2ff}
html[data-theme="dark"] .home-service-content .inline-service-form input:not([type="hidden"]),
html[data-theme="dark"] .home-service-content .inline-service-form select{
  color:#eef8ff;border-color:#3a6fac;background:linear-gradient(135deg,#153a6d,#0a254a);
}
html[data-theme="dark"] .home-service-content .inline-service-form input::placeholder{color:#a3bbd7}
html[data-theme="dark"] .home-service-content .inline-service-form .service-price-card{
  background:linear-gradient(135deg,#113b5c,#0d2a4f);border-color:#2d6a9b;color:#d5ebff;
}
html[data-theme="dark"] .home-service-content .inline-service-form .service-price-card strong{color:#82e5ff}
html[data-theme="dark"] .bottom-nav{
  background:linear-gradient(145deg,#0b284f,#04162f);border-top:1px solid #326ba5;
}
html[data-theme="dark"] .bottom-nav .nav-item{color:#c7def8}
html[data-theme="dark"] .bottom-nav .nav-item.active{
  background:linear-gradient(135deg,#108bee,#064ec6);border:1px solid #33c8fc;color:#fff;
}
@media(prefers-reduced-motion:reduce){.home-service-tab{transition:none}}

/* Reference-accurate 2026-11-11 visual refinement.
   Only home-screen presentation is changed. Financial order validation, MTN/Syriatel
   detection, tier matching, favorites and records remain owned by portal.js. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.portal-view,.app-shell{
  background:radial-gradient(ellipse 94% 29% at 75% -4%,#75bfffaa,transparent 77%),
             radial-gradient(ellipse 115% 65% at 20% 50%,#e0f0ff,#f4faff 86%);
}
.app-header{
  height:102px;min-height:102px;position:sticky;top:0;z-index:40;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:0;padding:14px 14px 8px;
  background:linear-gradient(146deg,rgba(234,246,255,.93),rgba(191,225,255,.95) 41%,rgba(247,251,255,.95) 77%);
  border:0;box-shadow:none;isolation:isolate;
}
.app-header::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:0 0 -10px;border-radius:0 0 35% 20%;
  background:radial-gradient(ellipse 55% 115% at 44% -40%,rgba(7,129,252,.38),transparent 84%);
}
.app-header .header-right{grid-column:1;display:flex;align-items:center;justify-self:start;gap:8px;direction:rtl;min-width:0}
.app-header .header-brand{grid-column:2;display:flex;align-items:center;justify-content:center;min-width:0}
.app-header .header-brand img{width:clamp(104px,34vw,163px);height:auto;max-height:68px;object-fit:contain;display:block;filter:drop-shadow(0 2px 2px rgba(4,71,140,.08))}
.app-header .header-left{grid-column:3;display:flex;align-items:center;justify-self:end;gap:9px;direction:ltr;min-width:0}
.app-header #sideMenuOpen{display:none!important}
.app-header .header-shop-shortcut{
  display:grid;place-items:center;width:54px;height:54px;padding:3px;
  border:1.5px solid #40a1ff;border-radius:50%;background:#eaf6ff;
  box-shadow:0 3px 12px #0069cf30,0 0 0 3px #ffffffb2;
}
.app-header .header-shop-shortcut .user-avatar{width:100%;height:100%;min-width:0;border-radius:50%;border:0;overflow:hidden}
.app-header .header-shop-shortcut .user-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.app-header .header-shop-shortcut .user-avatar img[hidden]{display:none!important}
.app-header .header-theme-toggle{
  width:38px;height:38px;min-width:38px;display:grid;place-items:center;
  border:1px solid #b7d5fb;border-radius:50%;
  background:linear-gradient(145deg,#ffffff,#e3f0ff);box-shadow:0 6px 16px #1264c11c;
}
.app-header .header-theme-toggle .theme-toggle-icon{width:100%;height:100%;background:transparent!important;color:#0c53b6}
.app-header .header-theme-toggle .theme-toggle-icon svg{width:20px;height:20px}
.app-header .header-favorites,.app-header .header-stats-toggle{
  display:grid;place-items:center;min-width:42px;width:42px;height:42px;
  background:linear-gradient(145deg,#ffffff,#e9f4ff);color:#0f3878;
  border:1px solid #bad8fa;border-radius:50%;
  box-shadow:0 4px 12px #1c67af2a,inset 0 1px #ffffff;
}
.app-header .header-favorites svg,.app-header .header-stats-toggle svg{width:24px;height:24px}

/* Top summary is kept ABOVE the service selection and uses the original server values. */
#homeScreen{padding-top:7px;padding-inline:13px}
#homeScreen #dashboardStatsShell{margin:4px 0 17px;padding:0}
#homeScreen #statsCarousel{
  padding:12px 5px;border-radius:21px;background:linear-gradient(140deg,#fcfdff,#e6f2ff);
  border:1px solid #ffffff;box-shadow:0 8px 25px #2472c724,0 0 0 1px #b5d4f8;
}
#homeScreen #statsCarousel .summary-card{min-height:115px;justify-content:space-between;padding:7px 3px}
#homeScreen #statsCarousel .summary-card-head{min-height:73px;gap:5px}
#homeScreen #statsCarousel .summary-card-head .summary-icon{width:34px;height:34px}
#homeScreen #statsCarousel .summary-card-head b{font-size:clamp(9px,2.3vw,12px);line-height:1.35}
#homeScreen #statsCarousel .summary-value strong,
#homeScreen #statsCarousel .today-total-card .summary-value strong,
#homeScreen #statsCarousel .currency-copy strong{font-size:clamp(13px,3.3vw,21px)}
.home-service-nav{gap:8px;margin:0 1px 18px}
.home-service-tab{min-height:105px;border-radius:19px;padding:10px 5px;border-color:#c3ddff;background:linear-gradient(146deg,#fcfdff,#e5f2ff);box-shadow:0 8px 19px #3372b11c}
.home-service-tab svg{width:33px;height:33px}
.home-service-tab b{font-size:clamp(11px,3.25vw,16px)}
.home-service-tab.active{background:linear-gradient(137deg,#16b7ff,#0879f9 58%,#054de1);border-color:#6edfff;box-shadow:0 9px 18px #057efa46,inset 0 1px #ffffff4d}

/* The original transfer box; only visual position and density change. */
.hero-transfer{
  padding:17px 14px 18px!important;border-radius:28px;
  border:1px solid #ffffff;background:linear-gradient(135deg,#f9fcff,#eaf4ff);
  box-shadow:0 10px 26px #3576b127,0 0 0 1px #c1ddff;
}
.hero-transfer .trade-switch{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;width:100%;
  margin:1px auto 18px;padding:5px;gap:4px;min-height:64px;border-radius:999px;
  border:1px solid #b5d3f9;background:linear-gradient(145deg,#e9f4ff,#f8fbff);
  box-shadow:inset 0 2px 6px #18579f15;
}
.hero-transfer .trade-option{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:8px 4px;
  border-radius:999px;color:#183e7b;gap:4px;
}
.hero-transfer .trade-option span{font-size:clamp(15px,4.15vw,21px);font-weight:950}
.hero-transfer .trade-option small{display:none!important}
.hero-transfer .trade-option.active{background:linear-gradient(130deg,#08bfff,#087afa 60%,#0648d7);border:1px solid #64e4ff;color:#fff;box-shadow:0 7px 17px #1176db55}
/* Selection type is never shown on the Games / Bills tabs; those tabs hide #homeScaleArea. */
.hero-transfer .target-block{margin-bottom:13px}
.hero-transfer #retailTargetBlock .field-label-row{min-height:0;margin:0;position:relative}
.hero-transfer #retailTargetBlock .field-label-row label{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}
.hero-transfer #retailTargetBlock .network-indicator{position:absolute;top:-4px;left:7px;z-index:2;font-size:10px;border-radius:7px;opacity:.86}
.hero-transfer #retailTargetBlock .network-indicator.neutral{display:none}
.hero-transfer .phone-entry,
.hero-transfer #wholesaleTargetCard .input-shell{
  position:relative;min-height:61px;height:61px;padding:0 13px;
  border:1px solid #98bbed;background:linear-gradient(135deg,#ffffff,#edf5ff);
  border-radius:17px;box-shadow:inset 0 1px 2px #1a5c9f09;
}
.hero-transfer .phone-icon{background:transparent;color:#6e83aa;width:28px;height:33px;border-radius:5px}
.hero-transfer .phone-icon svg{width:22px;height:22px}
.hero-transfer .phone-entry input{font-size:clamp(15px,4.3vw,19px);color:#193b71;letter-spacing:0}
.hero-transfer .phone-entry input::placeholder{color:#788bac}
.hero-transfer .phone-entry .last-transfer-button{order:3;width:40px;height:43px;border:0;border-radius:0;border-right:1px solid #b1cbe6;background:transparent;color:#0062c6;padding:4px 3px}
.hero-transfer .phone-entry .last-transfer-button svg{height:26px;width:26px}
/* Favorite chooser is reached by the header star, not by a duplicated bottom row. */
.hero-transfer #pickFavorite,.hero-transfer #pickWholesaleFavorite{display:none!important}
.hero-transfer .wholesale-target-card{margin:0 0 14px;padding:0;border:0;background:transparent;box-shadow:none}
.hero-transfer .wholesale-target-head{margin-bottom:6px}
.hero-transfer .wholesale-target-head label{display:none}
.hero-transfer .wholesale-target-card .field{margin:0}
.hero-transfer .wholesale-target-card .input-shell{background:linear-gradient(135deg,#fff,#edf5ff)}
.hero-transfer .wholesale-target-card .input-shell input::placeholder{color:#8293ad}
/* Tier picker and entered price are side-by-side ABOVE the operation buttons. */
.hero-transfer #quickAmountBlock{margin:13px 0 10px}
.hero-transfer #quickAmountBlock>.field-label-row{display:none}
.hero-transfer .retail-tier-row,.hero-transfer .retail-tier-row.with-price{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end
}
.hero-transfer #tierPickerEntry,.hero-transfer .retail-pay-entry{min-width:0;margin:0}
.hero-transfer .retail-pay-entry>label{display:none}
.hero-transfer .tier-picker-button,
.hero-transfer .retail-pay-input,
.hero-transfer #amountEntry{
  width:100%;height:58px;min-height:58px;margin:0;
  background:linear-gradient(135deg,#fff,#eef6ff);border:1px solid #a2c4f2;
  border-radius:17px;padding:0 10px;box-shadow:0 2px 5px #0b69b30b;
}
.hero-transfer .tier-picker-copy small{display:none}
.hero-transfer .tier-picker-copy strong{font-size:clamp(12px,3.8vw,16px);color:#63789b}
.hero-transfer .tier-picker-button .amount-icon{order:-1;width:26px;height:26px;background:transparent;color:#7389aa}
.hero-transfer .tier-picker-button em{transform:rotate(-90deg);color:#0b4eab;font-size:23px}
.hero-transfer .retail-pay-input input,.hero-transfer #amountEntry input{font-size:16px!important}
.hero-transfer .retail-pay-input input::placeholder{color:#7387a6}
.hero-transfer #retailPriceFeedback{font-size:11px;margin:7px 0;color:#175d9c}
.hero-transfer #tierHint{
  position:relative;border-radius:999px;padding:9px 35px 9px 9px;
  background:#dcecff;color:#29436e;font-size:clamp(9px,2.2vw,11px);
  text-align:center;line-height:1.7;margin:12px 0 13px;
}
.hero-transfer #tierHint:before{
  content:"ⓘ";position:absolute;right:11px;top:50%;transform:translateY(-50%);
  color:#0665d6;font-size:20px;font-weight:800;line-height:1;
}
.hero-transfer .section-mini-title{display:none}
.hero-transfer .operation-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 14px}
.hero-transfer .operation-btn{
  display:flex;flex-direction:row;align-items:center;justify-content:center;gap:7px;
  min-height:58px;height:58px;border:1px solid #b9d5f6;border-radius:17px;
  background:linear-gradient(130deg,#fff,#edf5ff);color:#1a3567;
  box-shadow:0 5px 12px #2466b420;padding:8px 4px;
}
.hero-transfer .operation-btn b{font-size:clamp(13px,4.1vw,18px);color:inherit;white-space:nowrap;font-weight:950}
.hero-transfer .operation-btn small{display:none!important}
.hero-transfer .operation-btn .op-icon{order:-1;display:grid;place-items:center;width:26px;height:26px;background:transparent;color:#637eaa;box-shadow:none;border-radius:0}
.hero-transfer .operation-btn .op-icon svg{width:24px;height:24px}
.hero-transfer .operation-btn.active{
  background:linear-gradient(130deg,#12bcff,#047af7 60%,#0450e1);border-color:#47dfff;
  box-shadow:0 5px 16px #057de14f;color:#fff;
}
.hero-transfer .operation-btn.active b,.hero-transfer .operation-btn.active .op-icon{color:#fff}
/* Existing customer-credit switch remains functional without interrupting reference controls. */
.hero-transfer .debt-option{margin:5px 0 12px;padding-top:6px;border-top:0}
.hero-transfer .debt-switch{gap:7px}
.hero-transfer .debt-switch .switch-copy b{font-size:11px}
.hero-transfer .debt-switch .switch-copy small{display:none}
.hero-transfer .cta-btn{
  width:100%;min-height:65px;height:65px;display:flex;align-items:center;justify-content:center;
  border-radius:20px;border:1px solid #70e7ff;
  background:linear-gradient(110deg,#0dbdff,#097df9 54%,#084be0);
  box-shadow:0 10px 23px #0975e130;font-size:clamp(19px,5vw,24px);font-weight:950;
}
.hero-transfer .cta-btn svg{width:29px;height:29px}
/* Bottom navigation: exactly the existing available destinations, NO empty circular slot. */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);min-height:87px;height:auto;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
  padding:8px 11px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(135deg,#f9fcff,#e1f0ff);border:1px solid #c4dfff;border-bottom:0;
  border-radius:29px 29px 0 0;box-shadow:0 -7px 28px #176bb71c;
}
.bottom-nav .nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px 3px;min-height:65px;border-radius:19px;color:#273c68}
.bottom-nav .nav-item svg{height:24px;width:24px}
.bottom-nav .nav-item b{font-size:clamp(10px,2.65vw,13px);line-height:1.25;text-align:center}
.bottom-nav .nav-item.active{background:linear-gradient(145deg,#d3e8ff,#c5e1ff);color:#0062df;box-shadow:0 6px 14px #045ebf21}
.bottom-nav .nav-item.active::after{display:none}
.bottom-nav #voiceNavButton,.voice-button-storage{display:none!important}

/* Dark mode uses identical geometry to light, including accessible header controls. */
html[data-theme="dark"] .portal-view,html[data-theme="dark"] .app-shell{
  background:radial-gradient(ellipse 90% 35% at 28% -11%,#07539c78,transparent 87%),
             linear-gradient(180deg,#06182f,#020e23 67%);
}
html[data-theme="dark"] .app-header{
  background:linear-gradient(145deg,rgba(3,19,43,.98),rgba(5,42,92,.98) 52%,rgba(2,18,42,.98));border:0;
}
html[data-theme="dark"] .app-header::before{background:radial-gradient(ellipse 55% 114% at 35% -42%,#036fff99,transparent 83%)}
html[data-theme="dark"] .app-header .header-favorites,
html[data-theme="dark"] .app-header .header-stats-toggle,
html[data-theme="dark"] .app-header .header-theme-toggle{
  background:linear-gradient(140deg,#0e3668,#061831);color:#e3f2ff;border:1px solid #438dd7;
  box-shadow:0 5px 16px #0009;
}
html[data-theme="dark"] .app-header .header-shop-shortcut{background:#051e3d;border-color:#09caff;box-shadow:0 0 0 3px #0b4773,0 2px 17px #04b5fa50}
html[data-theme="dark"] #homeScreen #statsCarousel{
  background:linear-gradient(145deg,#0d315f,#061a39);border-color:#2873b5;
  box-shadow:0 11px 26px #0007,0 0 0 1px #035099;
}
html[data-theme="dark"] .home-service-tab{
  color:#dceaff;background:linear-gradient(145deg,#112e55,#061830);border-color:#386ca5;
}
html[data-theme="dark"] .home-service-tab.active{
  color:#fff;background:linear-gradient(130deg,#0cb5ff,#066ce9 60%,#0445df);border-color:#05deff;box-shadow:0 6px 16px #006fdb80;
}
html[data-theme="dark"] .hero-transfer{
  background:linear-gradient(145deg,#0c2a52,#05162e);border:1px solid #24558a;
  box-shadow:0 11px 25px #0007;
}
html[data-theme="dark"] .hero-transfer .trade-switch{
  border:1px solid #3474ba;background:linear-gradient(150deg,#0b2b56,#05172f);
}
html[data-theme="dark"] .hero-transfer .trade-option{color:#e4efff;background:transparent}
html[data-theme="dark"] .hero-transfer .trade-option.active{
  background:linear-gradient(125deg,#07b2ff,#076af0 60%,#0646da);border-color:#08dcff;color:#fff;
}
html[data-theme="dark"] .hero-transfer .phone-entry,
html[data-theme="dark"] .hero-transfer #wholesaleTargetCard .input-shell,
html[data-theme="dark"] .hero-transfer .tier-picker-button,
html[data-theme="dark"] .hero-transfer .retail-pay-input,
html[data-theme="dark"] .hero-transfer #amountEntry{
  background:linear-gradient(145deg,#163c6b,#0b2649);border-color:#4b8bcb;color:#e1f2ff;
}
html[data-theme="dark"] .hero-transfer .phone-entry input,
html[data-theme="dark"] .hero-transfer .retail-pay-input input,
html[data-theme="dark"] .hero-transfer #amountEntry input{color:#e5f1ff;background:transparent}
html[data-theme="dark"] .hero-transfer .phone-entry input::placeholder{color:#afc8e8}
html[data-theme="dark"] .hero-transfer .phone-icon,
html[data-theme="dark"] .hero-transfer .tier-picker-button .amount-icon{color:#cbdef7}
html[data-theme="dark"] .hero-transfer .tier-picker-copy strong{color:#c0d7f7}
html[data-theme="dark"] .hero-transfer .tier-picker-button em{color:#c4e8ff}
html[data-theme="dark"] .hero-transfer .phone-entry .last-transfer-button{background:transparent;border-color:#4b719c;color:#e6f6ff}
html[data-theme="dark"] .hero-transfer #tierHint{background:#0e315b;color:#d9e7fc}
html[data-theme="dark"] .hero-transfer .operation-btn{
  color:#ecf5ff;background:linear-gradient(140deg,#163e6d,#0a2446);border-color:#427fc1;box-shadow:none;
}
html[data-theme="dark"] .hero-transfer .operation-btn b{color:inherit}
html[data-theme="dark"] .hero-transfer .operation-btn .op-icon{color:#dceaff;background:transparent}
html[data-theme="dark"] .hero-transfer .operation-btn.active{
  background:linear-gradient(125deg,#0cbcff,#067afa 56%,#0649dc);border-color:#08dcff;box-shadow:0 3px 19px #0089ff66;color:#fff;
}
html[data-theme="dark"] .hero-transfer .operation-btn.active b,
html[data-theme="dark"] .hero-transfer .operation-btn.active .op-icon{color:#fff}
html[data-theme="dark"] .hero-transfer .cta-btn{background:linear-gradient(115deg,#09c4ff,#087df7 60%,#0848d9);border-color:#01e5ff}
html[data-theme="dark"] .bottom-nav{
  background:linear-gradient(145deg,#0d2d56,#04162f);border-color:#2e70af;
  box-shadow:0 -8px 25px #000a;
}
html[data-theme="dark"] .bottom-nav .nav-item{color:#e8f3ff}
html[data-theme="dark"] .bottom-nav .nav-item.active{
  color:#fff;background:linear-gradient(130deg,#0ab5ff,#065de2 80%);border:1px solid #17d2fa;box-shadow:0 5px 21px #0090ef63;
}
@media(max-width:390px){
  .app-header{height:90px;min-height:90px;padding:10px 10px 5px}
  .app-header .header-brand img{width:clamp(98px,30vw,132px)}
  .app-header .header-shop-shortcut{width:46px;height:46px}
  .app-header .header-right,.app-header .header-left{gap:5px}
  .app-header .header-favorites,.app-header .header-stats-toggle{min-width:35px;width:35px;height:35px}
  .app-header .header-favorites svg,.app-header .header-stats-toggle svg{width:20px;height:20px}
  .app-header .header-theme-toggle{min-width:33px;width:33px;height:33px}
  #homeScreen{padding-inline:10px}
  .home-service-tab{min-height:89px}
  .hero-transfer .operation-btn{gap:4px;padding:6px 2px}
  .hero-transfer .operation-btn b{font-size:13px}
  .hero-transfer .operation-btn .op-icon,.hero-transfer .operation-btn .op-icon svg{width:22px;height:22px}
}
/* Reference's stacked layers/coins glyphs; visible regardless of trade mode. */
.hero-transfer .trade-option .trade-glyph{width:25px;height:25px;flex:none;fill:none;stroke:currentColor;stroke-width:1.85}
.hero-transfer .trade-option.active .trade-glyph{color:#fff}
.hero-transfer .operation-btn .op-icon.blue{color:inherit}
.hero-transfer .operation-btn.active .op-icon.blue{color:#fff}
@media(max-width:390px){.hero-transfer .trade-option .trade-glyph{width:21px;height:21px}}

/* 2026-11-11 — Signed shop liabilities and daily profit colors.
   Positive balance = the shop owes the company; zero or negative = no debt.
   Scoped to the existing cards. No balance calculation or service behavior changed. */
#homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="due"] .currency-copy strong{color:#db263e!important}
#homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="credit"] .currency-copy strong,
#homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="settled"] .currency-copy strong{color:#10834c!important}
#homeScreen #statsCarousel .profit-summary-card #statTodayProfit{color:#10834c!important}
html[data-theme="dark"] #homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="due"] .currency-copy strong{color:#ff768b!important}
html[data-theme="dark"] #homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="credit"] .currency-copy strong,
html[data-theme="dark"] #homeScreen #statsCarousel .dues-summary-card .currency-pane[data-state="settled"] .currency-copy strong{color:#75e2ab!important}
html[data-theme="dark"] #homeScreen #statsCarousel .profit-summary-card #statTodayProfit{color:#75e2ab!important}
/* Status colors also remain accurate in the details dialog. */
.dues-modal-grid .dues-modal-card.settled>strong{color:#10834c!important}
html[data-theme="dark"] .dues-modal-grid .dues-modal-card.settled>strong{color:#75e2ab!important}