/* Customer phone shell, measured against the user's Telegram recording. */
html:not(.desktop):not(.admin-portal) {
  --mobile-safe-top:env(safe-area-inset-top,0px);
  --mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --mobile-safe-left:env(safe-area-inset-left,0px);
  --mobile-safe-right:env(safe-area-inset-right,0px);
  --mobile-gutter:16px;
}
html:not(.desktop):not(.admin-portal) .app {
  padding:0 max(0px,var(--mobile-safe-right)) calc(96px + var(--mobile-safe-bottom)) max(0px,var(--mobile-safe-left));
  overflow:clip;
}
html.native-shell:not(.desktop):not(.admin-portal) .app {max-width:none;width:100%}
html:not(.desktop):not(.admin-portal) .top,
html:not(.desktop):not(.admin-portal) .app.is-scrolled .top {
  position:sticky;
  top:0;
  min-height:calc(56px + var(--mobile-safe-top));
  padding:calc(6px + var(--mobile-safe-top)) 12px 6px;
  gap:4px;
  background:var(--card);
  border-bottom-color:transparent;
  box-shadow:none;
}
html:not(.desktop):not(.admin-portal) .app.is-scrolled .top {border-bottom-color:var(--line)}
html:not(.desktop):not(.admin-portal) .top .brand {font-size:17px;gap:8px;min-width:0}
html:not(.desktop):not(.admin-portal) .brand img,
html:not(.desktop):not(.admin-portal) .app.is-scrolled .brand img {width:32px;height:32px;flex:0 0 32px}
html:not(.desktop):not(.admin-portal) .mobile-brand-copy {display:block;transition:opacity .16s,transform .16s;white-space:nowrap}
html:not(.desktop):not(.admin-portal) .mobile-brand-copy strong {font-size:17px;font-weight:600;line-height:1.3}
html:not(.desktop):not(.admin-portal) .brand small {font-size:10px!important;line-height:1.3}
html:not(.desktop):not(.admin-portal) .top .demo {display:none}
html:not(.desktop):not(.admin-portal) .top .icon-button {width:38px;height:40px;flex-basis:38px}
html:not(.desktop):not(.admin-portal) .top .icon-button svg {width:22px;height:22px}
html:not(.desktop):not(.admin-portal) .profile-button {background:transparent;color:var(--muted)}
html:not(.desktop):not(.admin-portal) .mobile-back {display:none}
html:not(.desktop):not(.admin-portal) .mobile-toolbar-title {
  position:absolute;
  left:52px;
  right:132px;
  bottom:15px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--ink);
  font-size:18px;
  font-weight:600;
  line-height:26px;
  pointer-events:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .16s,transform .16s;
}
html.mobile-title-collapsed:not(.desktop) .mobile-brand-copy {opacity:0;transform:translateY(-6px)}
html.mobile-title-collapsed:not(.desktop) .mobile-toolbar-title,
html.mobile-subpage:not(.desktop) .mobile-toolbar-title {opacity:1;transform:none}
html.mobile-subpage:not(.desktop) .top .brand {visibility:hidden;max-width:0;overflow:hidden}
html.mobile-subpage:not(.desktop) .top .mobile-back {display:grid}
html:not(.desktop):not(.admin-portal) .content {padding:16px var(--mobile-gutter) 24px}
html:not(.desktop):not(.admin-portal) .view {animation:none}
html:not(.desktop):not(.admin-portal) .biz-heading {margin-bottom:18px;gap:10px}
html:not(.desktop):not(.admin-portal) .biz-heading h1 {font-size:23px;line-height:1.35}
html:not(.desktop):not(.admin-portal) .biz-heading .biz-eyebrow {display:none}
html:not(.desktop):not(.admin-portal) .biz-page .biz-heading p {font-size:13px!important;margin-top:5px;line-height:1.5}
html:not(.desktop):not(.admin-portal) .biz-home-page .biz-heading {margin-bottom:16px}
html:not(.desktop):not(.admin-portal) .biz-home-launcher {margin-inline:calc(-1*var(--mobile-gutter));border:0;border-radius:0}
html:not(.desktop):not(.admin-portal) .biz-home-entry {
  min-height:68px;
  padding:12px var(--mobile-gutter);
  gap:12px;
  border:0;
  background:var(--card);
}
html:not(.desktop):not(.admin-portal) .biz-home-entry:not(:last-child)::after {
  content:'';position:absolute;left:72px;right:0;bottom:0;height:1px;background:var(--line);
}
html:not(.desktop):not(.admin-portal) .biz-home-entry-icon {width:44px;height:44px;flex-basis:44px}
html:not(.desktop):not(.admin-portal) .biz-home-entry-icon svg {width:23px;height:23px}
html:not(.desktop):not(.admin-portal) .biz-home-entry-copy {gap:3px}
html:not(.desktop):not(.admin-portal) .biz-page .biz-home-entry-copy strong {font-size:16px!important;font-weight:500!important;line-height:1.4}
html:not(.desktop):not(.admin-portal) .biz-page .biz-home-entry-copy small {font-size:13px!important;line-height:1.4}
html:not(.desktop):not(.admin-portal) .biz-section {margin-top:20px}
html:not(.desktop):not(.admin-portal) .biz-section-head {margin-bottom:10px}
html:not(.desktop):not(.admin-portal) .biz-section-head h2 {font-size:17px}
html:not(.desktop):not(.admin-portal) .biz-page .biz-section-head p {font-size:12px!important;line-height:1.45}
html:not(.desktop):not(.admin-portal) .biz-intro {padding:20px}
html:not(.desktop):not(.admin-portal) .biz-intro h2 {font-size:23px}
html:not(.desktop):not(.admin-portal) .biz-tool-card {
  display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:5px 12px;padding:18px 16px;
}
html:not(.desktop):not(.admin-portal) .biz-tool-card .biz-resource-symbol {grid-column:1;grid-row:1/3;align-self:start;margin:0}
html:not(.desktop):not(.admin-portal) .biz-tool-card strong {grid-column:2;grid-row:1;font-size:17px}
html:not(.desktop):not(.admin-portal) .biz-tool-card .biz-link {grid-column:3;grid-row:1;margin:0;align-self:center}
html:not(.desktop):not(.admin-portal) .biz-tool-card p {grid-column:2/4;grid-row:2;width:auto;margin:0;font-size:13px!important;line-height:1.5}
html:not(.desktop):not(.admin-portal) .biz-grid {gap:12px}
html:not(.desktop):not(.admin-portal) .biz-tool-links {gap:8px}
html:not(.desktop):not(.admin-portal) .biz-tool-link {min-height:52px;padding:12px;font-size:13px!important}
html:not(.desktop):not(.admin-portal) .biz-mine-head {margin-inline:calc(-1*var(--mobile-gutter));padding:24px var(--mobile-gutter) 20px;border:0}
html:not(.desktop):not(.admin-portal) .biz-mine-head {flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:20px}
html:not(.desktop):not(.admin-portal) .biz-user-avatar {width:72px;height:72px;flex-basis:72px}
html:not(.desktop):not(.admin-portal) .biz-user-avatar svg {width:34px;height:34px}
html:not(.desktop):not(.admin-portal) .biz-mine-head h2 {font-size:19px}
html:not(.desktop):not(.admin-portal) .biz-mine-head p {font-size:13px!important}
html:not(.desktop):not(.admin-portal) .biz-mine-head .biz-badges {justify-content:center}
html:not(.desktop):not(.admin-portal) .biz-menu-item {min-height:62px;padding:12px 14px;gap:12px}
html:not(.desktop):not(.admin-portal) .biz-menu-item strong {font-size:15px}
html:not(.desktop):not(.admin-portal) .biz-menu-item small {font-size:12px!important}
html:not(.desktop):not(.admin-portal) .bottom {
  left:calc(50% + (var(--mobile-safe-left) - var(--mobile-safe-right))/2);
  bottom:calc(10px + var(--mobile-safe-bottom));
  width:calc(100% - 24px - var(--mobile-safe-left) - var(--mobile-safe-right));
  max-width:496px;
  min-height:64px;
  padding:4px 6px;
  border:1px solid color-mix(in srgb,var(--line) 70%,transparent);
  border-radius:24px;
  background:color-mix(in srgb,var(--card) 94%,transparent);
  box-shadow:0 4px 24px #1b3e5c0e;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  --nav-on:var(--brand);
  --nav-off:var(--ink);
  --nav-highlight:var(--brand-soft);
}
html:not(.desktop):not(.admin-portal) .app .nav {min-height:54px;border-radius:20px;gap:2px;padding:3px 0;font-size:11px!important;font-weight:500}
html:not(.desktop):not(.admin-portal) .navicon {width:44px;height:26px}
html:not(.desktop):not(.admin-portal) .navicon svg {width:23px;height:23px}
html:not(.desktop):not(.admin-portal) .nav-indicator {top:4px;left:6px;bottom:4px;height:auto;width:calc((100% - 12px)/var(--nav-count));border-radius:21px}
html:not(.desktop):not(.admin-portal) .toast {bottom:calc(88px + var(--mobile-safe-bottom));left:calc(50% + (var(--mobile-safe-left) - var(--mobile-safe-right))/2);max-width:calc(100% - 32px - var(--mobile-safe-left) - var(--mobile-safe-right))}
html:not(.desktop):not(.admin-portal) .connection-banner {top:calc(8px + var(--mobile-safe-top));left:calc(12px + var(--mobile-safe-left));right:calc(12px + var(--mobile-safe-right))}
html:not(.desktop):not(.admin-portal) .modalback {padding:calc(18px + var(--mobile-safe-top)) calc(18px + var(--mobile-safe-right)) calc(18px + var(--mobile-safe-bottom)) calc(18px + var(--mobile-safe-left))}
html:not(.desktop):not(.admin-portal) .modal {max-height:calc(100dvh - 36px - var(--mobile-safe-top) - var(--mobile-safe-bottom))}
html:not(.desktop):not(.admin-portal) .os-auth-page {padding-top:8px}
html:not(.desktop):not(.admin-portal) .os-auth-mobile-brand {margin-bottom:24px}
html:not(.desktop):not(.admin-portal) .os-auth-form {gap:18px}
html.mobile-keyboard-open:not(.desktop) .bottom {display:none!important}
@media (max-width:360px) {
  html:not(.desktop):not(.admin-portal) .top {padding-inline:10px}
  html:not(.desktop):not(.admin-portal) .top .icon-button {width:34px;flex-basis:34px}
  html:not(.desktop):not(.admin-portal) .mobile-toolbar-title {left:50px;right:118px}
}
@media (prefers-reduced-motion:reduce) {
  html:not(.desktop):not(.admin-portal) .mobile-brand-copy,
  html:not(.desktop):not(.admin-portal) .mobile-toolbar-title {transition:none;transform:none}
}