:root{
  --bg: var(--tg-theme-bg-color, #eef7f1);
  --surface: var(--tg-theme-secondary-bg-color, #ffffff);
  --surface-muted: var(--tg-theme-section-bg-color, #e4efe7);
  --text: var(--tg-theme-text-color, #173629);
  --hint: var(--tg-theme-hint-color, #6f8578);
  --accent: var(--tg-theme-button-color, #3f8f62);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --line: rgba(23, 54, 41, 0.10);
  --line-strong: rgba(23, 54, 41, 0.16);
  --shadow-soft: 0 10px 24px rgba(33, 84, 55, 0.06);
  --shadow-card: 0 16px 34px rgba(33, 84, 55, 0.08);
}
*{box-sizing:border-box}
html{
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}
body{
  margin:0;
  min-width:320px;
  overflow-x:hidden;
  background:
    radial-gradient(circle at top left, rgba(63,143,98,.08), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 26%),
    var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
body.sheet-open{overflow:hidden}
button,input{font:inherit}
button{
  border:0;
  padding:0;
  color:inherit;
  cursor:pointer;
  appearance:none;
  background:none;
  -webkit-tap-highlight-color:transparent;
}
button:focus{outline:none}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input{border:0;background:none}
input::placeholder{color:var(--hint)}
svg{display:block;overflow:hidden;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app{
  min-height:100dvh;
  padding-bottom:calc(80px + env(safe-area-inset-bottom));
  background:transparent;
}
.view{display:none}
.view.active{display:block}
.page{
  width:min(100%, 720px);
  margin:0 auto;
  padding:calc(18px + env(safe-area-inset-top)) 16px 28px;
}
.appbar,.simple-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:14px;
  background:var(--accent);
  color:var(--accent-text);
  box-shadow:0 10px 20px rgba(63,143,98,.22);
}
.brand-mark svg{width:20px;height:20px}
.brand b,.brand small,.section-head small,.simple-header small{display:block}
.brand b{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.03em;
}
.brand small,
.section-head small,
.simple-header small{
  margin-top:4px;
  color:var(--hint);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
}
.header-action{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.82);
  color:var(--hint);
  box-shadow:var(--shadow-soft);
  transition:transform .16s, color .16s, border-color .16s;
}
.header-action:active{transform:scale(.92)}
.header-action.loading svg{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.72)),
    linear-gradient(120deg, rgba(63,143,98,.08), rgba(63,143,98,.03));
  box-shadow:var(--shadow-card);
  backdrop-filter:blur(14px);
}
.hero-copy small{
  display:block;
  color:var(--accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
}
.hero-copy h1{
  margin:8px 0 0;
  font-size:24px;
  line-height:1.14;
  letter-spacing:-.05em;
}
.hero-copy p{
  max-width:260px;
  margin:10px 0 0;
  color:var(--hint);
  font-size:12px;
  line-height:1.55;
}
.hero-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.hero-badges span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border:1px solid rgba(63,143,98,.12);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--accent);
  font-size:11px;
  font-weight:650;
}
.search-panel,
.category-section,
.product-section,
.order-overview,
.status-nav,
.orders,
.account-card,
.settings-list{
  margin-top:16px;
}
.search-panel{
  padding:14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}
.search-box{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:15px;
  background:var(--surface);
  color:var(--hint);
}
.search-box svg{width:16px;height:16px}
.search-box input{width:100%;min-width:0;color:var(--text);font-size:13px}
.clear-search{
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  background:var(--surface-muted);
  color:var(--hint);
}
.clear-search[hidden]{display:none}
.clear-search svg{width:12px;height:12px}
.search-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(63,143,98,.08);
  color:var(--accent);
  font-size:11px;
  font-weight:650;
}
.meta-count{
  color:var(--hint);
  font-size:11px;
  font-weight:650;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}
.section-head h2,.simple-header h1{
  margin:5px 0 0;
  font-size:20px;
  line-height:1.1;
  letter-spacing:-.04em;
}
.section-head>span{
  color:var(--hint);
  font-size:11px;
}
.category-nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  margin-top:14px;
  padding:1px 2px 2px;
  scrollbar-width:none;
}
.category-nav::-webkit-scrollbar,.status-nav::-webkit-scrollbar{display:none}
.category{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:68px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  color:var(--hint);
  box-shadow:var(--shadow-soft);
  transition:transform .16s, border-color .16s, background .16s, color .16s;
}
.category:active{transform:scale(.96)}
.category.active{
  border-color:rgba(63,143,98,.18);
  background:var(--surface);
  color:var(--accent);
}
.category-icon{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  border-radius:10px;
  background:var(--surface-muted);
}
.category.active .category-icon{background:rgba(63,143,98,.12)}
.category-icon svg{width:16px;height:16px}
.category b{font-size:11px;font-weight:650}
.products{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.stock-note{
  display:flex;
  align-items:center;
  gap:6px;
}
.stock-note i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4f9b70;
  box-shadow:0 0 0 4px rgba(79,155,112,.12);
}
.product{
  display:flex;
  gap:14px;
  min-width:0;
  padding:14px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.product:active{transform:scale(.985)}
.product:hover,.product:focus-within{border-color:var(--line-strong)}
.product-icon{
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  flex:0 0 76px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(63,143,98,.12), rgba(63,143,98,.06));
  color:var(--accent);
}
.product-icon svg{width:34px;height:34px;stroke-width:1.55}
.product-body{min-width:0;flex:1}
.product-body h3{
  margin:0;
  font-size:14px;
  line-height:1.45;
  letter-spacing:-.02em;
}
.product-body p{
  margin:7px 0 0;
  color:var(--hint);
  font-size:12px;
  line-height:1.55;
}
.product-meta{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
}
.price{
  color:var(--accent);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.04em;
}
.product-action{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.stock{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  background:var(--surface-muted);
  color:var(--hint);
  font-size:10px;
  font-weight:650;
}
.buy-button{
  min-width:72px;
  height:34px;
  padding:0 14px;
  border-radius:12px;
  background:var(--accent);
  color:var(--accent-text);
  font-size:11px;
  font-weight:700;
  box-shadow:0 10px 20px rgba(63,143,98,.18);
  transition:transform .16s, opacity .16s;
}
.buy-button:active,.primary-button:active,.recharge-button:active{transform:scale(.96)}
.buy-button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}
.product.sold-out{opacity:.76}
.loading-state,.empty-state{
  display:flex;
  min-height:180px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:16px 0 8px;
}
.loading-state{color:var(--hint)}
.loading-spinner{
  width:24px;
  height:24px;
  border:2px solid var(--line);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
.loading-state p,.empty-state p{
  margin:12px 0 0;
  color:var(--hint);
  font-size:12px;
}
.empty-symbol{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  border-radius:20px;
  background:var(--surface-muted);
  color:var(--hint);
}
.empty-symbol svg,.text-button svg,.order-overview svg,.settings-list svg,.bottom-nav svg,.sheet svg{display:block;overflow:hidden;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty-symbol svg{width:24px;height:24px}
.empty-state strong{margin-top:10px;font-size:15px}
.text-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:34px;
  margin:18px auto 0;
  padding:0 4px;
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}
.text-button svg{width:14px;height:14px}
.inner-page{padding-top:calc(20px + env(safe-area-inset-top))}
.order-overview{
  padding:16px 16px 18px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:24px;
  background:rgba(255,255,255,.78);
  box-shadow:var(--shadow-soft);
  backdrop-filter:blur(14px);
}
.order-overview small,.order-overview strong,.order-overview p{display:block}
.order-overview small{color:var(--hint);font-size:10px;font-weight:700;letter-spacing:.12em}
.order-overview strong{margin-top:9px;font-size:16px;letter-spacing:-.02em}
.order-overview p{margin:7px 0 0;color:var(--hint);font-size:12px;line-height:1.55}
.status-nav{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.status-tab{
  height:34px;
  padding:0 14px;
  border:1px solid transparent;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--hint);
  font-size:11px;
  font-weight:650;
  box-shadow:var(--shadow-soft);
}
.status-tab.active{
  border-color:rgba(63,143,98,.18);
  background:var(--accent);
  color:var(--accent-text);
}
.order-empty{min-height:420px}
.account-card{
  padding:18px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(63,143,98,.95), rgba(42,109,73,.95));
  color:var(--accent-text);
  box-shadow:0 18px 38px rgba(33,84,55,.16);
}
.account-top{display:flex;align-items:center;gap:14px}
.avatar{
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  flex:0 0 58px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  border-radius:20px;
  background:rgba(255,255,255,.14);
  font-size:20px;
  font-weight:750;
}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar img[hidden],.avatar span[hidden]{display:none}
.profile-name{min-width:0;flex:1}
.profile-name strong,.profile-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-name strong{font-size:17px}
.profile-name span{margin-top:5px;font-size:11px;opacity:.76}
.account-data{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.18);
}
.account-data small,.account-data strong,.balance-row small,.balance-row strong{display:block}
.account-data small,.balance-row small{font-size:10px;opacity:.68}
.account-data strong{margin-top:5px;font-size:12px}
.balance-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.18);
}
.balance-row strong{margin-top:4px;font-size:24px;letter-spacing:-.03em}
.recharge-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 16px;
  border-radius:999px;
  background:rgba(255,255,255,.96);
  color:var(--accent);
  font-size:12px;
  font-weight:700;
}
.recharge-button svg{width:14px;height:14px}
.menu-label{
  margin:26px 2px 10px;
  color:var(--hint);
  font-size:11px;
  font-weight:700;
}
.settings-list{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.55);
  border-radius:22px;
  background:rgba(255,255,255,.82);
  box-shadow:var(--shadow-soft);
}
.settings-list button{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  min-height:68px;
  padding:12px 14px;
  text-align:left;
  background:transparent;
}
.settings-list button+button{border-top:1px solid var(--line)}
.settings-list button:active{background:rgba(255,255,255,.55)}
.setting-icon{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:12px;
  background:rgba(63,143,98,.12);
  color:var(--accent);
}
.setting-icon svg{width:16px;height:16px}
.settings-list button>span:nth-child(2){min-width:0;flex:1}
.settings-list strong,.settings-list small{display:block}
.settings-list strong{font-size:13px}
.settings-list small{margin-top:4px;color:var(--hint);font-size:10px}
.settings-list .chevron{width:16px;height:16px;color:var(--hint)}
.bottom-nav{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:10;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  height:66px;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  border-top:1px solid var(--line);
  background:rgba(242,247,241,.88);
  backdrop-filter:blur(20px);
}
.nav{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:var(--hint);
  font-size:10px;
  font-weight:700;
  transition:transform .16s, color .16s;
}
.nav:active{transform:scale(.94)}
.nav.active{color:var(--accent)}
.nav svg{width:19px;height:19px}
.backdrop{
  position:fixed;
  inset:0;
  z-index:20;
  background:rgba(23,54,41,.34);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s;
}
.backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;
  right:0;
  bottom:0;
  left:0;
  z-index:21;
  width:min(100%,720px);
  margin:0 auto;
  padding:22px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius:24px 24px 0 0;
  background:rgba(255,255,255,.98);
  box-shadow:0 -18px 36px rgba(23,54,41,.12);
  transform:translateY(105%);
  transition:transform .24s;
}
.sheet[aria-hidden="true"]{visibility:hidden}
.sheet.open{transform:translateY(0)}
.sheet-close{
  position:absolute;
  top:14px;
  right:14px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--surface-muted);
  color:var(--hint);
}
.sheet-close svg{width:14px;height:14px}
.sheet>small{display:block;color:var(--hint);font-size:9px;font-weight:700;letter-spacing:.14em}
.sheet h2{margin:10px 44px 0 0;font-size:22px;line-height:1.18}
.sheet>p{margin:8px 0 0;color:var(--hint);font-size:12px;line-height:1.55}
.sheet-meta{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin-top:22px;
  padding:14px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.sheet-meta small,.sheet-meta strong{display:block}
.sheet-meta small{color:var(--hint);font-size:10px}
.sheet-meta span strong{margin-top:5px;font-size:14px}
.sheet-price{color:var(--accent);font-size:26px;font-weight:800;letter-spacing:-.04em}
.primary-button{
  height:44px;
  border-radius:14px;
  background:var(--accent);
  color:var(--accent-text);
  font-size:13px;
  font-weight:700;
}
.full-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:18px;
}
.full-button span{margin-left:auto}
.amounts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:20px;
}
.amounts button{
  height:40px;
  border-radius:12px;
  background:var(--surface-muted);
  color:var(--text);
  font-size:12px;
  font-weight:650;
}
.amounts button.active{
  background:var(--accent);
  color:var(--accent-text);
}
.amount-empty{
  grid-column:1 / -1;
  margin:8px 0;
  color:var(--hint);
  font-size:12px;
  text-align:center;
}
.amount-input{
  width:100%;
  height:42px;
  margin-top:10px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--bg);
  color:var(--text);
  font-size:12px;
}
.toast{
  position:fixed;
  right:18px;
  bottom:calc(80px + env(safe-area-inset-bottom));
  left:18px;
  z-index:40;
  width:max-content;
  max-width:calc(100% - 36px);
  margin:auto;
  padding:10px 14px;
  border-radius:12px;
  background:var(--text);
  color:var(--bg);
  font-size:12px;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s, transform .2s;
}
.toast.show{opacity:1;transform:translateY(0)}
.svg-sprite{position:fixed;left:0;top:0;width:0!important;height:0!important;opacity:0;pointer-events:none;overflow:hidden}
:root[data-tg-theme="dark"]{
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.14);
  --shadow-soft: 0 10px 24px rgba(0,0,0,.18);
  --shadow-card: 0 16px 34px rgba(0,0,0,.22);
}
:root[data-tg-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(63,143,98,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 20%),
    var(--bg);
}
:root[data-tg-theme="dark"] .hero-panel,
:root[data-tg-theme="dark"] .search-panel,
:root[data-tg-theme="dark"] .product,
:root[data-tg-theme="dark"] .order-overview,
:root[data-tg-theme="dark"] .settings-list,
:root[data-tg-theme="dark"] .category,
:root[data-tg-theme="dark"] .sheet,
:root[data-tg-theme="dark"] .header-action{
  background:rgba(255,255,255,.04);
}
:root[data-tg-theme="dark"] .bottom-nav{background:rgba(19,29,24,.82)}
:root[data-tg-theme="dark"] .amount-input,
:root[data-tg-theme="dark"] .search-box input{color-scheme:dark}
@media (min-width:640px){
  .page{padding-left:0;padding-right:0}
  .bottom-nav{width:720px;left:50%;right:auto;transform:translateX(-50%)}
}
@media (max-width:420px){
  .hero-copy h1{font-size:24px}
  .product{gap:12px;padding:13px}
  .product-icon{width:68px;height:68px;flex-basis:68px}
  .product-action{gap:7px}
  .amounts{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:360px){
  .page{padding-left:13px;padding-right:13px}
  .category{min-width:70px}
  .product{flex-direction:column}
  .product-icon{width:100%;height:96px;flex-basis:auto}
  .product-meta{align-items:flex-start;flex-direction:column}
  .product-action{align-items:stretch;width:100%}
  .buy-button{width:100%}
}