:root {
  color: #202027;
  background: #f5f5f5;
}

body { background: #f5f5f5; }
.app-page { background: #f5f5f5; }
.phone-shell {
  width: min(100%, 1280px);
  height: 100dvh;
  max-height: none;
  overflow: hidden;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}
.phone-shell .modal-backdrop { border-radius: 0; }
.app-content { padding-bottom: 64px; }
.reference-brand-header,
.plain-header.reference-page-header {
  height: 44px;
  display: grid;
  place-items: center;
  color: #22232a;
  background: #fff;
  border-bottom: 1px solid #f0f0f2;
  font-size: 16px;
  font-weight: 800;
}
.reference-brand-header b { letter-spacing: .08em; }
.scroll-view { height: calc(100dvh - 108px); max-height: none; }
.home-view.reference-home {
  height: calc(100dvh - 108px);
  max-height: none;
  padding: 0 10px 28px;
  color: #26272e;
  background: #fff;
}
.reference-slogan {
  min-height: 40px;
  margin: 0 -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 7px 46px 7px 14px;
  position: relative;
  color: #f8fffd;
  background: linear-gradient(100deg, #12aa82, #3b83ef);
  font-size: 13px;
  font-weight: 800;
}
.reference-slogan button {
  position: absolute;
  right: 11px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  padding: 0;
  color: white;
  background: rgba(255,255,255,.12);
  border-radius: 50%;
}
.home-quick-row {
  padding: 18px 4px 17px;
  background: #fff;
}
.home-quick-row .quick-link {
  gap: 7px;
  color: #45464e;
  font-size: 11px;
}
.home-quick-row .quick-link small { display: none; }
.home-quick-row .quick-icon {
  position: relative;
  width: 54px;
  height: 54px;
  color: #effff9;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(145deg, #17211f, #2c4b43);
  border: 2px solid #eef4f2;
  box-shadow: 0 5px 13px rgba(25, 54, 47, .17);
}
.home-quick-row .quick-icon i {
  position: absolute;
  right: -2px;
  bottom: -1px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: white;
  background: #16c891;
  border: 2px solid white;
  border-radius: 50%;
}
.reference-home .hero-carousel {
  min-height: 170px;
  border-radius: 12px;
  box-shadow: none;
}
.reference-home .hero-track { height: 170px; }
.reference-home .photo-slide { background-position: center; }
.reference-home .hero-photo-caption { display: none; }
.reference-home .carousel-dots { bottom: 8px; }
.reference-zone-switch {
  min-height: 50px;
  display: grid;
  grid-template-columns: 1fr 38px 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 7px 6px;
}
.reference-zone-switch button {
  justify-self: center;
  min-width: 118px;
  padding: 8px 17px;
  color: #73737c;
  background: #f7f7f8;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
}
.reference-zone-switch button.selected {
  color: white;
  background: linear-gradient(100deg, #12ae7e, #4d7ff1);
  box-shadow: 0 5px 12px rgba(40, 145, 154, .18);
}
.reference-zone-switch i {
  width: 27px;
  height: 27px;
  justify-self: center;
  background: linear-gradient(145deg, #21ceaa, #407cf1);
  border-radius: 50%;
}
.reference-ticker {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  margin: 2px 0 8px;
  padding: 7px 11px;
  color: #4e5553;
  background: #f8fbfa;
  border: 1px solid #ecf2f0;
  border-radius: 8px;
  font-size: 10px;
}
.reference-ticker > span { color: #14af7d; }
.reference-ticker p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-ticker b { margin-right: 6px; color: #0a9469; }
.reference-ticker em { color: #f3b52d; font-style: normal; letter-spacing: .08em; }
.reference-store-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 2px 5px 12px;
}
.reference-store-tabs button {
  padding: 10px 8px;
  color: #7b7b83;
  background: #fafafa;
  border-radius: 8px;
  font-size: 13px;
}
.reference-store-tabs button.selected {
  color: #155f50;
  background: #ecfaf6;
  font-weight: 800;
}
.reference-products { display: grid; gap: 19px; }
.reference-product-section { display: grid; gap: 9px; }
.reference-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}
.reference-section-head > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.reference-section-head b { color: #2b2d33; font-size: 15px; }
.reference-section-head span { color: #8d8e95; font-size: 10px; }
.reference-section-head button {
  flex: 0 0 auto;
  padding: 0;
  color: #18a778;
  background: transparent;
  font-size: 10px;
}
.home-product-grid,
.reference-catalog .catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.product-card {
  overflow: hidden;
  color: #25262d;
  background: #fff;
  border: 1px solid #e9e9ec;
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(27, 35, 33, .06);
}
.product-card .product-art {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background-color: #132623;
  background-repeat: no-repeat;
  border-top: 5px solid #16d895;
}
.product-card .product-badge,
.product-card .product-hot {
  position: absolute;
  top: 4px;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 99px;
  font-size: 9px;
  line-height: 1;
}
.product-card .product-badge { left: 5px; color: white; background: #ec7a25; }
.product-card .product-hot { right: 5px; color: #d26f4b; background: rgba(255,255,255,.94); }
.product-card .product-copy { padding: 9px 9px 8px; }
.product-card .product-title-line strong {
  overflow: hidden;
  color: #22242a;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card .product-arrow { display: none; }
.product-card .product-copy > p {
  height: 33px;
  margin: 5px 0 7px;
  color: #75777f;
  font-size: 10px;
  line-height: 1.55;
}
.product-card .price-row { color: #ef4d45; }
.product-card .price-row > span { display: flex; align-items: baseline; gap: 5px; }
.product-card .price-row b { font-size: 18px; }
.product-card .price-row del { color: #a8a8ad; font-size: 9px; }
.product-card .price-row em {
  padding: 3px 5px;
  color: white;
  background: #ee7042;
  border-radius: 3px;
  font-size: 8px;
  font-style: normal;
}
.product-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  margin-top: 6px;
  color: #a4a5aa;
  font-size: 8px;
}
.product-card footer span { color: #9a8161; }
.product-card footer small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalog-empty {
  grid-column: 1 / -1;
  min-height: 160px;
  display: grid;
  place-items: center;
  padding: 30px;
  color: #98999f;
  background: #fafafa;
  border: 1px dashed #dedfe2;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
}

.reference-catalog {
  height: calc(100dvh - 108px);
  max-height: none;
  display: grid;
  grid-template-columns: 82px 1fr;
  grid-template-rows: auto auto 1fr;
  overflow: hidden;
  color: #292a31;
  background: #fff;
}
.reference-search {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 43px;
  margin: 7px 14px;
  padding: 4px 4px 4px 10px;
  color: #a4a5ab;
  background: white;
  border: 1px solid #dfdfe3;
  border-radius: 99px;
  font-size: 11px;
}
.reference-search button {
  align-self: stretch;
  min-width: 58px;
  color: white;
  background: linear-gradient(100deg, #f05a32, #ff3f37);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}
.reference-merchant {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 3px 15px 9px;
  border-bottom: 1px solid #eeeef0;
}
.reference-merchant b { font-size: 13px; }
.reference-merchant span {
  padding: 5px 10px;
  color: white;
  background: linear-gradient(100deg, #ff8c20, #f45f36);
  border-radius: 99px;
  font-size: 9px;
}
.reference-catalog .catalog-side {
  grid-column: 1;
  grid-row: 3;
  overflow-y: auto;
  padding: 0;
  background: #f7f7f8;
}
.reference-catalog .catalog-side button {
  min-height: 54px;
  color: #85858d;
  font-size: 11px;
}
.reference-catalog .catalog-side button.selected {
  color: #6d39b7;
  background: white;
  font-weight: 800;
}
.reference-catalog .catalog-side button.selected::before { background: #15c991; }
.reference-catalog .catalog-content {
  grid-column: 2;
  grid-row: 3;
  overflow-y: auto;
  padding: 9px 10px 22px;
  color: #292a31;
  background: #fff;
}
.reference-category-chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.reference-category-chips::-webkit-scrollbar { display: none; }
.reference-category-chips button {
  flex: 0 0 auto;
  padding: 6px 10px;
  color: #887ba0;
  background: #faf9fc;
  border: 1px solid #ece8f2;
  border-radius: 99px;
  font-size: 9px;
}
.reference-category-chips button.selected { color: white; background: #9a4bdb; border-color: #9a4bdb; }
.reference-catalog .catalog-grid .product-card { display: block; }
.reference-catalog .catalog-grid .product-art { height: auto; }

.reference-bottom-nav {
  height: 64px;
  color: #9b9ca2;
  background: rgba(255,255,255,.98);
  border-top: 1px solid #e8e8eb;
  box-shadow: 0 -3px 12px rgba(20, 25, 24, .04);
}
.reference-bottom-nav button { color: #999aa0; font-size: 10px; }
.reference-bottom-nav button.active { color: #22242a; }
.reference-bottom-nav button.active svg { fill: #22242a; stroke: #22242a; }

.order-view,
.service-view,
.profile-view { background: #f6f6f7; }
.plain-header { color: #25262d; background: #fff; border-bottom-color: #eeeef0; }
.order-tabs,
.service-tabs { background: #fff; }
.order-tabs button.selected,
.service-tabs button.selected { color: white; background: linear-gradient(100deg, #16ac80, #3c83e9); }
.support-panel,
.empty-state { color: #8d8e95; }
.support-panel h2,
.empty-state b { color: #303139; }
.profile-top.profile-hero {
  min-height: 180px;
  color: #fff;
  background: linear-gradient(135deg, #109e78, #327de4);
}
.profile-view { color: #292a31; }
.membership-card,
.profile-summary,
.profile-function-grid { background: #fff; border-color: #eeeef0; }
.profile-view h2,
.profile-function em { color: #3b3c43; }
.profile-function-icon { color: #158e6e; background: #eaf8f4; border-color: #d9f0e9; }

.modal-backdrop { background: rgba(17, 18, 22, .72); backdrop-filter: blur(3px); }
.reference-notice {
  width: min(100%, 320px);
  padding: 22px 20px 19px;
  color: #22242a;
  background: #fff;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.reference-notice::after { display: none; }
.reference-notice > .close { display: none; }
.reference-notice h2 { margin: 0 0 5px; font-size: 14px; font-weight: 500; }
.reference-notice .notice-dots { margin-bottom: 18px; }
.reference-notice h1 { margin: 0; color: #191a20; font-size: 21px; line-height: 1.35; }
.reference-notice .notice-highlight { margin: 6px 0; color: #ee3238; font-size: 14px; line-height: 1.5; }
.reference-notice ol { margin: 8px 0 17px; color: #3e3f46; font-size: 12px; line-height: 1.65; }
.reference-notice .notice-cta {
  padding: 11px;
  background: linear-gradient(100deg, #10bf8b, #3d87e9 58%, #f2ae1b);
  box-shadow: none;
}

@media (min-width: 600px) {
  .phone-shell { height: 100dvh; border-radius: 0; }
  .scroll-view,
  .home-view.reference-home,
  .reference-catalog { height: calc(100dvh - 108px); }
  .home-view.reference-home { padding-inline: 10px; }
  .reference-home .hero-carousel,
  .reference-home .hero-track { height: 150px; min-height: 150px; }
  .home-quick-row { padding-inline: 8%; }
  .home-quick-row .quick-icon { width: 58px; height: 58px; }
  .reference-zone-switch { padding-inline: 18%; }
}

@media (max-width: 599px) {
  .reference-slogan { font-size: 11px; }
  .home-quick-row .quick-link { font-size: 10px; }
  .home-quick-row .quick-icon { width: 50px; height: 50px; }
  .reference-home .hero-carousel,
  .reference-home .hero-track { height: 165px; min-height: 165px; }
  .reference-zone-switch button { min-width: 104px; padding-inline: 12px; }
  .product-card .product-title-line strong { font-size: 12px; }
  .product-card .product-copy > p { font-size: 9px; }
  .product-card .price-row b { font-size: 17px; }
}

@media (max-width: 359px) {
  .home-view.reference-home { padding-inline: 7px; }
  .home-quick-row .quick-icon { width: 44px; height: 44px; }
  .reference-zone-switch { grid-template-columns: 1fr 26px 1fr; }
  .reference-zone-switch button { min-width: 92px; }
  .home-product-grid,
  .reference-catalog .catalog-grid { gap: 7px; }
}