:root {
  color-scheme: light dark;
  --bg: var(--tg-theme-bg-color, #f5f5f7);
  --text: var(--tg-theme-text-color, #101113);
  --hint: var(--tg-theme-hint-color, #6e6e73);
  --button: var(--tg-theme-button-color, #111111);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --card: var(--tg-theme-secondary-bg-color, rgba(255,255,255,.92));
  --line: rgba(60, 60, 67, .12);
  --line-strong: rgba(60, 60, 67, .18);
  --soft: rgba(0, 122, 255, .08);
  --good: #22a559;
  --warn: #b8871b;
  --bad: #d84b47;
  --shadow: 0 16px 40px rgba(15, 23, 42, .08);
  --radius: 28px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.75), transparent 30%),
    radial-gradient(circle at top right, rgba(0,122,255,.10), transparent 25%),
    linear-gradient(180deg, #f7f7f9 0%, #eef1f6 100%);
  color: var(--text);
}
button, input, textarea { font: inherit; }
button {
  border: 0;
  background: var(--button);
  color: var(--button-text);
  border-radius: 18px;
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease, box-shadow .16s ease;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
button:hover { transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
button.ghost, .row-action .ghost { background: rgba(255,255,255,.74); color: var(--text); box-shadow: none; border: 1px solid var(--line); }
.icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 19px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: none;
}
.hidden { display: none !important; }
.app-shell { max-width: 1180px; margin: 0 auto; padding: 16px 16px calc(110px + env(safe-area-inset-bottom)); }
.hero-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 34px;
  color: #fff;
  background:
    radial-gradient(circle at 15% 18%, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(circle at 85% 15%, rgba(255,255,255,.20), transparent 26%),
    linear-gradient(135deg, #0f1114 0%, #22252d 40%, #4b5563 100%);
  box-shadow: 0 20px 60px rgba(17,24,39,.24);
}
.hero-glow {
  position: absolute; inset: auto -40px -40px auto;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(255,255,255,.09); filter: blur(8px);
}
.hero-header, .section-head, .split-head, .admin-tools, .actions, .product-main, .product-header, .gift-top, .gift-bottom, .order-top, .order-bottom, .card-code-wrap, .admin-card-head, .admin-card-foot, .row-actions { display: flex; }
.hero-header { justify-content: space-between; gap: 14px; align-items: flex-start; position: relative; z-index: 1; }
.eyebrow { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero-card h1 { margin: 0; font-size: clamp(28px, 4vw, 38px); letter-spacing: -.04em; }
.hero-sub { margin: 6px 0 0; color: rgba(255,255,255,.72); max-width: 560px; }
.wallet-strip {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 12px;
  position: relative; z-index: 1;
}
.wallet-item {
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(20px);
}
.wallet-item span { display: block; font-size: 12px; color: rgba(255,255,255,.65); }
.wallet-item b { display: block; margin-top: 6px; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.main-user b { font-size: 18px; }
.segmented {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 30;
  max-width: 560px;
  margin: 0 auto;
  padding: 7px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  border-radius: 26px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 18px 50px rgba(15,23,42,.16);
  backdrop-filter: blur(26px) saturate(1.3);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
}
.segmented button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-width: 0;
  background: transparent;
  color: var(--hint);
  box-shadow: none;
  border-radius: 20px;
  padding: 8px 6px 7px;
  font-size: 12px;
  line-height: 1.1;
}
.segmented button .tab-icon {
  width: 24px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}
.segmented button.active {
  background: #121212;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.content-stack { display: grid; gap: 18px; }
.panel { display: none; animation: fade .18s ease; }
.panel.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.section-head { justify-content: space-between; align-items: end; gap: 12px; margin-bottom: 12px; }
.section-head h2, .subhead, .hero-card h1, h3 { letter-spacing: -.03em; }
.section-head h2 { margin: 0; font-size: 24px; }
.section-head p, p { margin: 4px 0 0; color: var(--hint); line-height: 1.45; }
.split-head { justify-content: space-between; align-items: center; }
.card-stack, .list-stack { display: grid; gap: 14px; }
.gift-card, .order-card, .pass-card, .glass-card, .metric, .notice {
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(251,251,253,.90) 100%);
  border: 1px solid rgba(255,255,255,.88);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gift-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 22px;
}
.gift-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,255,255,.55), transparent 18%),
    radial-gradient(circle at 85% 25%, rgba(255,255,255,.35), transparent 18%),
    linear-gradient(135deg, rgba(255,255,255,.70), rgba(255,255,255,.18));
  pointer-events: none;
}
.gift-card::after {
  content: "";
  position: absolute; right: -36px; top: -32px;
  width: 170px; height: 170px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,0));
}
.product-shell { position: relative; z-index: 1; display: grid; gap: 18px; }
.product-header { justify-content: space-between; align-items: start; gap: 14px; }
.product-kicker { color: rgba(0,0,0,.40); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.product-header h3 { margin: 8px 0 0; font-size: clamp(24px, 4vw, 32px); }
.product-copy { max-width: 620px; }
.product-brand-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}
.product-brand-copy {
  min-width: 0;
}
.product-brand-copy h3,
.product-hero-copy h2 {
  margin: 0;
}
.product-brand-copy p,
.product-hero-copy p {
  margin-top: 6px;
}
.product-logo-card,
.product-logo-hero,
.admin-product-logo,
.product-logo-preview-media,
.product-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.84);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.product-logo-card {
  width: 82px;
  height: 58px;
  padding: 10px;
  border-radius: 22px;
  flex: 0 0 auto;
}
.admin-product-logo {
  width: 64px;
  height: 44px;
  padding: 8px;
  flex: 0 0 auto;
}
.product-logo-hero {
  width: 96px;
  height: 72px;
  padding: 12px;
  border-radius: 24px;
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.2);
  flex: 0 0 auto;
}
.product-logo-card img,
.product-logo-hero img,
.admin-product-logo img,
.product-logo-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.product-logo-fallback {
  color: #4f4f52;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}
.stars-chip {
  min-width: 96px;
  padding: 14px 16px;
  border-radius: 24px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.72);
  text-align: right;
  color: #101113;
}
.stars-chip strong { display: block; font-size: 28px; line-height: 1; }
.stars-chip .stars-text-label { display: none; }
.gift-bottom { justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 8px 12px;
  background: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.72);
  color: #4f4f52; font-size: 12px; font-weight: 600;
}
.primary-wide { min-width: 132px; }
.order-card, .pass-card, .glass-card { padding: 18px; }
.order-card { display: grid; gap: 14px; }
.order-top, .order-bottom, .admin-card-head, .admin-card-foot { justify-content: space-between; gap: 12px; align-items: center; }
.title-block strong { display: block; font-size: 18px; margin-bottom: 4px; }
.order-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.order-title-row strong {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}
.order-amount {
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: 18px;
  line-height: 1.1;
}
.title-block small, small.meta-text { display: block; color: var(--hint); line-height: 1.45; word-break: break-word; }
.order-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.order-tag {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(120,120,128,.08);
  border: 1px solid var(--line);
  color: var(--hint);
  font-size: 12px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.order-tag.warn {
  color: #9a6700;
  background: rgba(255, 204, 0, .12);
  border-color: rgba(255, 204, 0, .18);
}
.status {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 72px; border-radius: 999px; padding: 7px 12px;
  font-size: 12px; font-weight: 700; border: 1px solid var(--line);
  background: rgba(60,60,67,.04);
}
.status.paid, .status.used { color: var(--good); background: rgba(34,165,89,.08); border-color: rgba(34,165,89,.16); }
.status.unused { color: #216c98; background: rgba(33,108,152,.08); border-color: rgba(33,108,152,.16); }
.status.pending, .status.refund_requested { color: var(--warn); background: rgba(184,135,27,.10); border-color: rgba(184,135,27,.16); }
.status.failed, .status.refunded, .status.cancelled { color: var(--bad); background: rgba(216,75,71,.08); border-color: rgba(216,75,71,.16); }
.order-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.summary-pill {
  padding: 12px 14px; border-radius: 18px; background: rgba(120,120,128,.06); border: 1px solid var(--line);
}
.summary-pill span { display: block; font-size: 11px; color: var(--hint); }
.summary-pill b { display: block; margin-top: 6px; font-size: 16px; }
.row-actions, .actions { flex-wrap: wrap; gap: 8px; }
.row-actions { justify-content: flex-end; }
.pass-card {
  position: relative; overflow: hidden; min-height: 204px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.85), transparent 22%),
    linear-gradient(135deg, #fbfbfd 0%, #eef2f7 100%);
}
.pass-card::before {
  content: "";
  position: absolute; inset: auto -28px -28px auto;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(0,122,255,.08);
}
.pass-inner { position: relative; z-index: 1; display: grid; gap: 16px; }
.pass-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--hint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dot-mark { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, #0a84ff, #5e5ce6); box-shadow: 0 0 0 5px rgba(10,132,255,.12); }
.pass-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pass-title h3 { margin: 0; font-size: 24px; }
.pass-title p { margin: 4px 0 0; }
.card-code-wrap {
  justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 22px; background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.92);
}
.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; font-weight: 700; letter-spacing: .05em; user-select: all; word-break: break-all;
}
.copy-hint { font-size: 12px; color: var(--hint); }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric { padding: 16px 18px; }
.metric span { display: block; font-size: 12px; color: var(--hint); }
.metric b { display: block; margin-top: 8px; font-size: 24px; letter-spacing: -.03em; }
.notice { padding: 16px 18px; color: var(--bad); margin-bottom: 12px; border: 1px solid rgba(216,75,71,.16); background: rgba(255,255,255,.92); }
.admin-tools { display: grid; gap: 12px; margin-bottom: 16px; }
.admin-columns { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
.admin-mini-card {
  padding: 16px 18px; border-radius: 24px; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.88); box-shadow: var(--shadow);
}
.admin-mini-card h4 { margin: 0 0 4px; font-size: 17px; }
.admin-mini-card p { margin: 0; }
.admin-card-head { margin-bottom: 12px; }
.admin-card-foot { margin-top: 12px; }
.log {
  margin: 0; padding: 12px 14px; max-height: 220px; overflow: auto;
  border-radius: 18px; background: rgba(17,17,17,.94); color: #f4f4f5; font-size: 12px;
}
.form-card label { display: grid; gap: 8px; margin-bottom: 12px; color: var(--hint); font-size: 13px; }
input, textarea {
  width: 100%; border-radius: 18px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.92); color: var(--text); padding: 12px 14px;
}
textarea { min-height: 96px; resize: vertical; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.check { display: flex !important; align-items: center; gap: 10px; }
.check input { width: auto; }
.form-hint-inline {
  display: flex;
  align-items: center;
  min-height: 48px;
  color: var(--hint);
  font-size: 12px;
  line-height: 1.45;
}
.product-logo-row {
  align-items: stretch;
}
.product-logo-editor,
.product-logo-tools {
  display: grid;
  gap: 10px;
}
.product-logo-preview-shell {
  min-height: 132px;
}
.product-logo-preview {
  width: 100%;
  min-height: 132px;
  border-radius: 24px;
  border: 1px dashed rgba(60,60,67,.16);
  background: rgba(247,248,251,.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-logo-preview-media {
  width: min(180px, calc(100% - 24px));
  height: 84px;
  padding: 12px;
  border-radius: 24px;
}
.product-logo-preview-empty {
  color: #7d7d82;
  font-size: 13px;
}
.modal {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(17,17,17,.36); backdrop-filter: blur(12px); z-index: 40; padding: 18px;
}
.modal-card {
  width: min(760px, 100%); max-height: min(86vh, 820px); overflow: auto;
  background: rgba(255,255,255,.96); border-radius: 28px; padding: 22px; position: relative; box-shadow: 0 24px 80px rgba(15,23,42,.22);
}
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%;
  padding: 0; background: rgba(120,120,128,.12); color: var(--text); box-shadow: none;
}
.detail-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 16px; }
.detail { padding: 14px 16px; border-radius: 18px; background: rgba(120,120,128,.06); border: 1px solid var(--line); }
.detail span { display: block; font-size: 12px; color: var(--hint); }
.detail b { display: block; margin-top: 6px; word-break: break-word; }
.toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  max-width: min(80vw, 520px); padding: 12px 16px; border-radius: 999px; background: rgba(17,17,17,.92); color: #fff; box-shadow: 0 14px 34px rgba(17,17,17,.2);
}
.empty-card { padding: 22px; text-align: center; color: var(--hint); }
@media (max-width: 860px) {
  .wallet-strip { grid-template-columns: 1fr; }
  .admin-columns { grid-template-columns: 1fr; }
  .order-summary { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-shell { padding: 12px 12px 28px; }
  .hero-card { padding: 20px; border-radius: 28px; }
  .hero-header { flex-direction: row; }
  .segmented { grid-template-columns: repeat(4, 1fr); overflow: auto; }
  .segmented button { min-width: 80px; }
  .product-header, .gift-bottom, .order-top, .order-bottom, .pass-title, .card-code-wrap, .admin-card-head, .admin-card-foot { flex-direction: column; align-items: flex-start; }
  .stars-chip { min-width: 100%; text-align: left; }
  .row-actions { justify-content: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .section-head h2 { font-size: 22px; }
}


/* v5 responsive bottom navigation and adaptive layout */
@media (min-width: 720px) {
  .card-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  #cards-list.card-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gift-card, .pass-card {
    min-height: 236px;
  }
}

@media (min-width: 1080px) {
  .app-shell {
    max-width: 1280px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .hero-card {
    min-height: 230px;
    display: grid;
    align-content: space-between;
  }
  .card-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #cards-list.card-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .content-stack {
    gap: 22px;
  }
  .bottom-nav {
    max-width: 620px;
    bottom: 18px;
  }
}

@media (max-width: 640px) {
  body {
    background: linear-gradient(180deg, #f8f8fa 0%, #eef1f6 100%);
  }
  .app-shell {
    padding: 12px 12px calc(104px + env(safe-area-inset-bottom));
  }
  .hero-card {
    padding: 18px;
    border-radius: 28px;
    min-height: 188px;
  }
  .hero-sub {
    font-size: 13px;
  }
  .wallet-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .wallet-item {
    padding: 11px 10px;
    border-radius: 18px;
  }
  .wallet-item span {
    font-size: 10px;
  }
  .wallet-item b, .main-user b {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .hero-card h1 {
    font-size: 28px;
  }
  .section-head {
    align-items: flex-start;
    margin-top: 2px;
  }
  .section-head p {
    font-size: 13px;
  }
  .gift-card {
    min-height: 204px;
    padding: 18px;
    border-radius: 26px;
  }
  .product-header h3, .pass-title h3 {
    font-size: 24px;
  }
  .stars-chip {
    min-width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: end;
  }
  .primary-wide, .gift-bottom button {
    width: 100%;
  }
  .order-card, .pass-card, .glass-card, .admin-mini-card {
    border-radius: 24px;
  }
  .order-summary {
    grid-template-columns: 1fr 1fr;
  }
  .summary-pill:last-child {
    grid-column: 1 / -1;
  }
  .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    max-width: none;
    border-radius: 25px;
  }
}

@media (max-width: 390px) {
  .app-shell {
    padding-left: 10px;
    padding-right: 10px;
  }
  .hero-card {
    padding: 16px;
  }
  .wallet-strip {
    grid-template-columns: 1fr;
  }
  .wallet-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .wallet-item b {
    margin-top: 0;
  }
  .order-summary {
    grid-template-columns: 1fr;
  }
  .bottom-nav {
    left: 8px;
    right: 8px;
    padding: 6px;
  }
  .segmented button {
    padding: 8px 4px 6px;
    font-size: 11px;
  }
}


/* v6: clean storefront, wallet-like bottom nav, filters and product detail */
.app-shell { padding-top: 12px; }
.compact-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 14px; }
.compact-top h1 { margin: 0; font-size: clamp(28px, 6vw, 42px); letter-spacing: -.05em; }
.compact-top p { margin: 2px 0 0; font-size: 13px; color: var(--hint); }
.compact-top .icon-btn { background: rgba(255,255,255,.8); color: var(--text); border: 1px solid rgba(60,60,67,.12); }
#store .card-stack { margin-top: 4px; }
.segmented { grid-template-columns: repeat(3, 1fr); }
.segmented.has-admin { grid-template-columns: repeat(4, 1fr); }
.segmented button { font-weight: 650; }
.segmented button .tab-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.gift-card { cursor: pointer; }
.gift-card:active { transform: scale(.995); }
.filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.78); color: var(--text); border: 1px solid var(--line); box-shadow: none; }
.filter-chip span { min-width: 20px; height: 20px; border-radius: 999px; display: inline-grid; place-items: center; background: rgba(120,120,128,.12); color: var(--hint); font-size: 12px; }
.filter-chip.active { background: #111; color: #fff; border-color: #111; }
.filter-chip.active span { background: rgba(255,255,255,.18); color: #fff; }
.product-detail { display: grid; gap: 16px; }
.detail-hero { border-radius: 26px; padding: 22px; background: linear-gradient(135deg, #111 0%, #3b3f46 100%); color: #fff; overflow: hidden; position: relative; }
.detail-hero:after { content: ""; position: absolute; right: -42px; top: -42px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.12); }
.detail-hero h2 { margin: 8px 0 0; font-size: 30px; letter-spacing: -.04em; }
.detail-hero p { color: rgba(255,255,255,.72); }
.product-hero-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}
.product-hero-copy {
  min-width: 0;
}
.detail-price { margin-top: 18px; display: inline-flex; align-items: end; gap: 8px; padding: 12px 14px; border-radius: 20px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.18); }
.detail-price strong { font-size: 34px; line-height: .9; }
.detail-price span { color: rgba(255,255,255,.72); font-size: 12px; }
.purchase-note { display: grid; gap: 8px; color: var(--hint); font-size: 13px; }
.purchase-note textarea { min-height: 104px; }
.modal-actions { justify-content: flex-end; }
.order-card { gap: 12px; }
.order-summary { grid-template-columns: repeat(2, 1fr); }
.order-summary .summary-pill:nth-child(3) { grid-column: 1 / -1; }
@media (min-width: 720px) {
  #products.card-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  #products.card-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .app-shell { padding-top: 10px; }
  .compact-top { margin-bottom: 12px; padding: 0 2px; }
  .compact-head { margin-bottom: 10px; }
  .segmented { grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .segmented.has-admin { grid-template-columns: repeat(4, 1fr); }
  .segmented button { min-width: 0; }
  .order-summary { grid-template-columns: 1fr 1fr; }
}

/* v7: independent product page, mobile order filters and stable mobile typography/colors */
:root {
  color-scheme: light;
  --bg: #f5f5f7;
  --text: #101113;
  --hint: #6e6e73;
  --button: #111111;
  --button-text: #ffffff;
  --card: rgba(255,255,255,.94);
}
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #f7f7f9;
}
body {
  color: #101113;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body, button, input, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
.compact-top p, #user-label { display: none; }
.product-kicker { display: none; }
.product-page { display: grid; gap: 14px; }
.product-page-panel.active { display: block; }
.back-button {
  width: fit-content;
  background: rgba(255,255,255,.78);
  color: #101113;
  border: 1px solid rgba(60,60,67,.14);
  box-shadow: none;
  padding: 10px 13px;
}
.product-page-hero { margin-top: 2px; }
.product-detail-grid { margin-top: 0; }
.detail-buy-bar {
  position: sticky;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 12;
  padding: 10px;
  margin: 2px -4px 0;
  border-radius: 24px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.detail-buy-bar button { width: 100%; }
.page-note {
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(60,60,67,.10);
}
.gift-card h3, .order-card strong, .pass-title h3, .detail h2, .detail b, .summary-pill b, .code {
  color: #101113;
}
.gift-card p, .section-head p, .pass-title p, .meta-text, .summary-pill span, .detail span, .copy-hint {
  color: #6e6e73;
}
.pass-brand { display: none; }
input, textarea {
  color: #101113 !important;
  background: #ffffff !important;
  -webkit-text-fill-color: #101113;
}
button {
  color: #ffffff;
  background: #111111;
}
button.ghost, .filter-chip, .back-button, .compact-top .icon-btn {
  color: #101113;
  background: rgba(255,255,255,.82);
}
@media (max-width: 640px) {
  .compact-top h1 { font-size: 30px; }
  .filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 12px;
  }
  .filter-chip {
    width: 100%;
    justify-content: center;
    padding: 9px 8px;
    font-size: 12px;
  }
  .filter-chip span {
    min-width: 18px;
    height: 18px;
    font-size: 11px;
  }
  .order-card {
    padding: 15px;
    gap: 12px;
  }
  .order-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
  }
  .order-bottom {
    align-items: stretch;
  }
  .order-bottom .row-actions, .row-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    justify-content: stretch;
  }
  .order-bottom .row-actions button, .row-actions button {
    width: 100%;
  }
  .order-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .summary-pill:last-child, .order-summary .summary-pill:nth-child(3) {
    grid-column: auto;
  }
  .status {
    min-width: auto;
    padding: 6px 10px;
  }
  .product-page-hero {
    padding: 20px;
    border-radius: 26px;
  }
  .detail-grid.product-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .detail {
    padding: 12px;
    border-radius: 16px;
  }
  .detail-buy-bar {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 390px) {
  .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-grid.product-detail-grid { grid-template-columns: 1fr; }
}
/* v7: remove the public title/user header on the storefront */
.compact-top { display: none !important; }
#store .card-stack { margin-top: 0; }

/* v8: mobile-first admin modules */
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.admin-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.admin-mobile-head h2 {
  margin: 0;
  font-size: clamp(26px, 6vw, 40px);
  letter-spacing: -.05em;
  color: #101113;
}
.admin-mobile-head p {
  margin: 3px 0 0;
  font-size: 13px;
  color: #6e6e73;
}
.admin-head-action {
  flex: 0 0 auto;
  min-width: 68px;
  padding: 10px 14px;
  border-radius: 999px;
}
.admin-module-tabs {
  position: sticky;
  top: 8px;
  z-index: 18;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
  padding: 6px;
  border-radius: 22px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.admin-module-tabs button {
  min-width: 0;
  padding: 10px 4px;
  border-radius: 16px;
  background: transparent;
  color: #6e6e73;
  box-shadow: none;
  font-size: 12px;
  font-weight: 750;
}
.admin-module-tabs button.active {
  background: #111;
  color: #fff;
}
.admin-module { display: none; }
.admin-module.active { display: block; animation: fade .18s ease; }
.admin-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.admin-metrics .metric {
  min-height: 88px;
  padding: 15px;
  border-radius: 24px;
}
.admin-metrics .primary-metric {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #111 0%, #42464f 100%);
  color: #fff;
}
.admin-metrics .primary-metric span { color: rgba(255,255,255,.66); }
.admin-metrics .primary-metric b { color: #fff; font-size: 32px; }
.admin-dashboard-grid {
  display: grid;
  gap: 12px;
}
.admin-summary-card { padding: 16px; }
.admin-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.admin-summary-head h3, .admin-section-head h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.035em;
  color: #101113;
}
.admin-summary-head p, .admin-section-head p {
  margin: 4px 0 0;
  color: #6e6e73;
  font-size: 13px;
}
.compact-action {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
}
.mini-list {
  display: grid;
  gap: 8px;
}
.mini-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(120,120,128,.07);
  color: #101113;
  border: 1px solid rgba(60,60,67,.08);
  box-shadow: none;
  text-align: left;
}
.mini-row span {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.mini-row b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.mini-row small {
  color: #6e6e73;
  font-size: 12px;
}
.mini-row .status {
  font-style: normal;
  flex: 0 0 auto;
  min-width: 64px;
}
.mini-empty {
  padding: 16px;
  color: #6e6e73;
  text-align: center;
  border-radius: 18px;
  background: rgba(120,120,128,.06);
}
.admin-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 12px;
}
.admin-filter-row {
  margin-bottom: 4px;
}
.admin-list {
  gap: 10px;
}
.admin-mini-card {
  padding: 15px;
  border-radius: 24px;
}
.admin-mini-card p {
  color: #6e6e73;
  line-height: 1.42;
  word-break: break-word;
}
.admin-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.admin-info-grid > div {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(120,120,128,.06);
  border: 1px solid rgba(60,60,67,.08);
}
.admin-info-grid span {
  display: block;
  font-size: 11px;
  color: #6e6e73;
  margin-bottom: 5px;
}
.admin-info-grid b {
  display: block;
  color: #101113;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}
.refund-card.needs-action {
  border-color: rgba(184,135,27,.22);
  box-shadow: 0 16px 40px rgba(184,135,27,.09);
}
.admin-bot-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}
.bot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sticky-form-actions {
  position: sticky;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 14;
  padding: 10px;
  margin: 12px -4px -4px;
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.sticky-form-actions button { flex: 1; }
#admin-products-module .form-card {
  margin-bottom: 12px;
}
@media (min-width: 760px) {
  .admin-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .admin-metrics .primary-metric { grid-column: auto; }
  .admin-info-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #admin-orders.admin-list, #admin-refunds.admin-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1120px) {
  #admin-orders.admin-list, #admin-products.admin-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .admin-mobile-head { margin-bottom: 10px; }
  .admin-module-tabs {
    top: 6px;
    gap: 5px;
    padding: 5px;
    border-radius: 20px;
    overflow: auto;
    scrollbar-width: none;
  }
  .admin-module-tabs::-webkit-scrollbar { display: none; }
  .admin-module-tabs button {
    min-width: 56px;
    padding: 9px 4px;
    font-size: 11px;
  }
  .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .admin-metrics .metric b { font-size: 22px; }
  .admin-metrics .primary-metric b { font-size: 30px; }
  .admin-section-head {
    display: grid;
    gap: 8px;
  }
  .admin-filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .admin-card-head, .admin-card-foot {
    display: grid;
    align-items: stretch;
  }
  .admin-card-head .status {
    width: fit-content;
  }
  .admin-mini-card .row-actions {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  }
  .admin-mini-card .row-actions button {
    width: 100%;
  }
  .bot-actions {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 16px;
  }
  .form-card label {
    margin-bottom: 10px;
  }
  .sticky-form-actions {
    bottom: calc(88px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 390px) {
  .admin-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-module-tabs button { min-width: 52px; }
}

/* v9: product naming, refined wallet cards, admin search and compact cards */
.elegant-pass {
  min-height: 178px;
  padding: 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.92), transparent 26%),
    radial-gradient(circle at 90% 0%, rgba(10,132,255,.13), transparent 30%),
    linear-gradient(145deg, #ffffff 0%, #f4f6fb 62%, #edf1f7 100%);
  border: 1px solid rgba(255,255,255,.92);
}
.elegant-pass::before {
  width: 116px;
  height: 116px;
  background: linear-gradient(135deg, rgba(10,132,255,.12), rgba(94,92,230,.08));
}
.pass-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6e6e73;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
}
.pass-topline .status {
  margin-left: auto;
  letter-spacing: 0;
}
.pass-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0a84ff, #5e5ce6);
  box-shadow: 0 0 0 5px rgba(10,132,255,.10);
}
.pass-main h3 {
  margin: 4px 0 0;
  font-size: 22px;
  letter-spacing: -.035em;
}
.pass-main p {
  margin-top: 5px;
  font-size: 13px;
}
.refined-code {
  margin-top: 2px;
  padding: 13px 14px;
  background: rgba(255,255,255,.76);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.56);
}
.refined-code .code {
  font-size: 13px;
  letter-spacing: .045em;
}
.copy-btn {
  padding: 9px 12px;
  border-radius: 14px;
}
.pass-foot {
  color: #8a8a8e;
  font-size: 12px;
}
.admin-search-wrap {
  margin: 0 0 12px;
}
.admin-search {
  height: 44px;
  border-radius: 18px;
  padding: 0 14px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(60,60,67,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 14px;
}
.admin-order-card-v9,
.admin-product-card-v9 {
  display: grid;
  gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,252,.92));
}
.compact-admin-head h4,
.admin-product-top h4 {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.compact-admin-head p,
.admin-product-top p {
  margin-top: 3px;
  font-size: 12px;
}
.admin-order-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 15px;
  background: rgba(120,120,128,.055);
  border: 1px solid rgba(60,60,67,.075);
}
.admin-order-line span,
.admin-product-stats span {
  color: #7d7d82;
  font-size: 11px;
}
.admin-order-line b {
  text-align: right;
  color: #111113;
  font-size: 13px;
  word-break: break-word;
}
.admin-order-note {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 204, 0, .10);
  border: 1px solid rgba(255, 204, 0, .15);
  color: #5d4a00;
  font-size: 13px;
  line-height: 1.4;
}
.admin-order-charge {
  color: #8a8a8e;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  word-break: break-all;
}
.admin-product-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}
.admin-product-brand {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.admin-product-brand > div {
  min-width: 0;
}
.admin-product-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.admin-product-stats > div {
  padding: 10px 9px;
  border-radius: 15px;
  background: rgba(120,120,128,.055);
  border: 1px solid rgba(60,60,67,.075);
}
.admin-product-stats b {
  display: block;
  margin-top: 4px;
  color: #111113;
  font-size: 14px;
  white-space: nowrap;
}
.admin-product-meta {
  color: #7d7d82;
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 640px) {
  .compact-top h1 { font-size: 25px; }
  .pass-card.elegant-pass { border-radius: 24px; }
  .pass-main h3 { font-size: 20px; }
  .refined-code { align-items: stretch; }
  .refined-code .copy-btn { width: 100%; }
  .admin-search { height: 42px; font-size: 13px; }
  .product-brand-line,
  .admin-product-brand {
    gap: 10px;
  }
  .product-logo-card {
    width: 72px;
    height: 50px;
    padding: 8px;
    border-radius: 20px;
  }
  .admin-product-logo {
    width: 56px;
    height: 40px;
    border-radius: 18px;
  }
  .product-logo-hero {
    width: 82px;
    height: 62px;
    padding: 10px;
    border-radius: 22px;
  }
  .product-logo-preview {
    min-height: 120px;
  }
  .product-logo-preview-media {
    width: min(160px, calc(100% - 22px));
    height: 74px;
  }
  .admin-product-top,
  .compact-admin-head { display: grid; gap: 8px; }
  .admin-product-top .status,
  .compact-admin-head .status { width: fit-content; }
  .admin-product-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-order-line { align-items: flex-start; }
  .admin-order-line b { max-width: 66%; }
}
@media (max-width: 380px) {
  .admin-product-stats { grid-template-columns: 1fr; }
}

/* v10: unified card-pack theme and full-size Telegram Mini App responsive audit fixes */
:root {
  --surface: rgba(255,255,255,.94);
  --surface-strong: #ffffff;
  --surface-soft: rgba(120,120,128,.055);
  --text-strong: #101113;
  --text-soft: #6e6e73;
  --hairline: rgba(60,60,67,.105);
  --shadow-soft: 0 12px 32px rgba(15,23,42,.07);
}
body {
  overflow-x: hidden;
  background: linear-gradient(180deg, #f8f8fa 0%, #eff2f7 100%) fixed;
}
.app-shell {
  width: 100%;
  max-width: 1260px;
  min-width: 0;
}
.panel, .card-stack, .list-stack, .admin-list { min-width: 0; }
.gift-card, .order-card, .pass-card, .glass-card, .admin-mini-card, .metric {
  border: 1px solid rgba(255,255,255,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,252,.94));
  box-shadow: var(--shadow-soft);
}
/* Card pack: make it match product/order/admin white glass style instead of a separate blue pass style */
.pass-card.unified-pass {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,248,251,.95));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 34px rgba(15,23,42,.075);
}
.pass-card.unified-pass::before,
.pass-card.unified-pass::after { display: none; }
.unified-pass-inner {
  display: grid;
  gap: 13px;
  padding: 16px;
  position: relative;
  z-index: 1;
}
.unified-pass-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.unified-pass-title { min-width: 0; }
.mini-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  color: #6e6e73;
  background: rgba(120,120,128,.075);
  border: 1px solid rgba(60,60,67,.075);
  font-size: 11px;
  font-weight: 750;
}
.unified-pass-title h3 {
  margin: 8px 0 0;
  color: var(--text-strong);
  font-size: 18px;
  line-height: 1.24;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.unified-pass-code {
  padding: 13px 14px;
  border-radius: 18px;
  background: rgba(120,120,128,.055);
  border: 1px solid rgba(60,60,67,.075);
}
.unified-pass-code .copy-hint {
  margin-bottom: 6px;
  color: #7d7d82;
  font-size: 11px;
}
.unified-pass-code .code {
  color: #101113;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .035em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.unified-pass-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.unified-pass-meta > div {
  min-width: 0;
  padding: 10px 11px;
  border-radius: 16px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(60,60,67,.07);
}
.unified-pass-meta span {
  display: block;
  color: #7d7d82;
  font-size: 11px;
  line-height: 1.2;
}
.unified-pass-meta b {
  display: block;
  margin-top: 4px;
  color: #111113;
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unified-copy {
  width: 100%;
  min-height: 42px;
  border-radius: 16px;
}
.order-entry-card.pass-card.unified-pass {
  min-height: 0;
}
.order-entry-inner {
  gap: 12px;
  padding: 16px;
}
.order-entry-head {
  align-items: flex-start;
  gap: 12px;
}
.order-entry-brand {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.order-entry-logo {
  flex: 0 0 auto;
}
.order-entry-title {
  min-width: 0;
}
.order-entry-title h3 {
  margin-top: 6px;
  color: var(--text-strong);
  font-size: 18px;
  line-height: 1.22;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}
.order-entry-id {
  margin-top: 6px;
  color: #7d7d82;
  font-size: 12px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-entry-side {
  display: grid;
  justify-items: end;
  gap: 10px;
  align-self: stretch;
}
.order-entry-price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #101113;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  white-space: nowrap;
}
.order-stars-mark {
  font-size: 16px;
}
.order-entry-meta {
  gap: 8px;
}
.order-entry-meta .pill {
  background: rgba(120,120,128,.055);
  border-color: rgba(60,60,67,.075);
}
.order-entry-glance {
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,249,252,.94));
}
.order-entry-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}
.order-entry-summary {
  min-width: 0;
  color: #1f2127;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 650;
  white-space: normal;
  overflow: visible;
}
.order-entry-link {
  flex: 0 0 auto;
  color: #5f6572;
  font-size: 12px;
  font-weight: 700;
}
.order-entry-arrow {
  color: #8f95a3;
  font-size: 18px;
  line-height: 1;
}
#orders-list.list-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
}
.order-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.order-detail-head h2 {
  margin: 10px 0 0;
}
.order-detail-head p {
  margin-top: 6px;
  color: rgba(255,255,255,.74);
}
.order-detail-section {
  display: grid;
  gap: 12px;
}
.order-related-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.order-note-block {
  display: grid;
  gap: 6px;
}
.order-note-block span {
  color: #6e6e73;
  font-size: 12px;
}
.order-note-block b {
  color: #101113;
  line-height: 1.45;
  word-break: break-word;
}
.order-note-block.warn {
  background: rgba(255, 204, 0, .10);
  border-color: rgba(255, 204, 0, .18);
}
.order-detail-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.order-detail-bar button {
  width: 100%;
}
/* Universal responsive cleanup: avoid cramped mini-app layouts */
.filter-row, .admin-module-tabs, .row-actions, .actions { min-width: 0; }
.filter-chip, .admin-module-tabs button, .segmented button { -webkit-tap-highlight-color: transparent; }
.section-head.compact-head { align-items: center; }
.order-card, .admin-mini-card, .admin-order-card-v9, .admin-product-card-v9 { min-width: 0; }
.title-block, .compact-admin-head, .admin-product-top, .admin-order-line, .admin-product-meta { min-width: 0; }
.title-block strong, .admin-mini-card h4, .admin-product-top h4 { overflow-wrap: anywhere; }
.admin-order-line b, .admin-product-meta, .admin-order-charge, .code { overflow-wrap: anywhere; }
.modal-card { width: min(760px, calc(100vw - 24px)); }
.product-page .detail-grid, .detail-grid { min-width: 0; }
input, textarea, button { max-width: 100%; }
textarea { line-height: 1.45; }
@media (min-width: 720px) {
  #cards-list.card-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pass-card.unified-pass { min-height: 238px; }
  .unified-pass-inner { height: 100%; align-content: space-between; }
}
@media (min-width: 1080px) {
  #cards-list.card-stack { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-list { gap: 14px; }
}
@media (max-width: 720px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .gift-card, .order-card, .pass-card.unified-pass, .glass-card, .admin-mini-card {
    border-radius: 22px;
  }
  .section-head.compact-head {
    display: grid;
    gap: 2px;
    margin-bottom: 10px;
  }
  .section-head.compact-head h2 { font-size: 23px; }
  .section-head.compact-head p { font-size: 12px; line-height: 1.35; }
  .filter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .filter-chip {
    min-width: 0;
    white-space: normal;
    line-height: 1.15;
  }
  .order-top {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .summary-pill { padding: 11px 12px; }
  .summary-pill b { font-size: 14px; }
  .admin-mobile-head {
    align-items: flex-start;
  }
  .admin-mobile-head h2 { font-size: 25px; }
  .admin-mobile-head p { font-size: 12px; }
  .admin-module-tabs {
    top: 6px;
    margin-left: -2px;
    margin-right: -2px;
    overflow-x: auto;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(58px, 1fr);
    scrollbar-width: none;
  }
  .admin-module-tabs::-webkit-scrollbar { display: none; }
  .admin-module-tabs button { min-width: 58px; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics .metric { min-height: 78px; padding: 13px; }
  .admin-metrics .metric b { font-size: 20px; }
  .admin-search { height: 42px; border-radius: 16px; }
  .admin-info-grid, .admin-product-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-mini-card .row-actions, .order-bottom .row-actions, .row-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .admin-mini-card .row-actions button, .order-bottom .row-actions button, .row-actions button { min-height: 42px; }
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: 10px; align-items: end; }
  .modal-card {
    width: 100%;
    max-height: calc(92vh - env(safe-area-inset-bottom));
    border-radius: 26px 26px 0 0;
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 430px) {
  .app-shell { padding-left: 10px; padding-right: 10px; }
  #store .card-stack, #cards-list.card-stack, .list-stack { gap: 12px; }
  .gift-card { padding: 16px; }
  .product-header h3 { font-size: 22px; }
  .product-brand-line {
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
  }
  .product-logo-card {
    width: 68px;
    height: 48px;
    padding: 7px;
  }
  .product-hero-brand {
    gap: 12px;
  }
  .product-logo-hero {
    width: 72px;
    height: 56px;
    padding: 9px;
  }
  .admin-product-brand {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: flex-start;
  }
  .admin-product-logo {
    width: 52px;
    height: 38px;
    padding: 7px;
  }
  .stars-chip strong { font-size: 24px; }
  .pass-card.unified-pass { border-radius: 22px; }
  .unified-pass-inner { padding: 14px; gap: 11px; }
  .unified-pass-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .unified-pass-title h3 { font-size: 17px; }
  .unified-pass-code { padding: 12px; border-radius: 16px; }
  .unified-pass-code .code { font-size: 12px; letter-spacing: .025em; }
  .unified-pass-meta { grid-template-columns: 1fr 1fr; gap: 7px; }
  .unified-pass-meta > div { padding: 9px 10px; border-radius: 14px; }
  .unified-copy { min-height: 40px; }
  .filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-top { grid-template-columns: 1fr; }
  .order-top .status { width: fit-content; }
  .admin-filter-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-section-head { display: grid; gap: 10px; }
  .admin-section-head .ghost { width: 100%; }
  .admin-product-top, .compact-admin-head { grid-template-columns: 1fr; }
  .admin-product-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-order-line { display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: start; }
  .admin-order-line b { max-width: none; text-align: right; }
  .bottom-nav {
    left: 8px;
    right: 8px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 24px;
  }
  .segmented button { font-size: 11px; padding: 8px 2px 6px; }
  .segmented button .tab-icon svg { width: 21px; height: 21px; }
}
@media (max-width: 360px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .admin-metrics, .admin-info-grid, .admin-product-stats, .unified-pass-meta { grid-template-columns: 1fr; }
  .admin-mini-card .row-actions, .order-bottom .row-actions, .row-actions { grid-template-columns: 1fr; }
  .admin-order-line { grid-template-columns: 1fr; }
  .admin-order-line b { text-align: left; }
  .filter-row, .admin-filter-row { grid-template-columns: 1fr 1fr; }
}

/* v11: environment-aware responsive cleanup for Telegram Mini App and web */
:root {
  --app-height: 100dvh;
  --shell-gutter: clamp(10px, 2vw, 24px);
}
html, body {
  min-height: 100%;
}
body {
  min-height: var(--app-height);
}
.app-shell {
  width: 100%;
  max-width: 1380px;
  padding-left: var(--shell-gutter);
  padding-right: var(--shell-gutter);
}
.content-stack,
.product-shell,
.product-copy,
.product-page,
.product-detail-grid {
  min-width: 0;
}

.env-web .compact-top {
  display: flex !important;
  margin: 4px 0 18px;
  padding: 0 2px;
}
.env-telegram .compact-top {
  display: none !important;
}

.env-web .app-shell {
  padding-top: 18px;
  padding-bottom: calc(118px + env(safe-area-inset-bottom));
}
.env-telegram .app-shell {
  padding-top: 10px;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

#products.card-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  align-items: stretch;
}
#cards-list.card-stack {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: stretch;
}

.gift-card {
  min-height: clamp(196px, 22vw, 236px);
}
.product-shell {
  min-height: 100%;
  grid-template-rows: minmax(0, 1fr) auto;
}
.product-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}
.product-header h3 {
  font-size: clamp(22px, 2.8vw, 30px);
  line-height: 1.08;
}
.product-header p {
  max-width: 42ch;
}
.stars-chip {
  align-self: start;
  min-width: 92px;
}
.gift-bottom {
  margin-top: auto;
}

.order-top,
.order-bottom {
  align-items: flex-start;
}
.order-title-row {
  align-items: center;
}
.order-amount {
  font-size: 17px;
}
.order-tags {
  gap: 6px;
}

.env-web .bottom-nav {
  max-width: min(640px, calc(100vw - 32px));
  bottom: 18px;
}
.env-telegram .bottom-nav {
  max-width: min(560px, calc(100vw - 20px));
}

.detail-buy-bar {
  width: min(100%, 560px);
  margin-left: auto;
  margin-right: auto;
}
.env-web .detail-buy-bar,
.env-web .sticky-form-actions {
  bottom: 18px;
}
.env-telegram .detail-buy-bar,
.env-telegram .sticky-form-actions {
  bottom: calc(88px + env(safe-area-inset-bottom));
}

@media (min-width: 1180px) {
  #products.card-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .env-web #products.card-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
  .gift-card,
  .order-card,
  .pass-card.unified-pass,
  .glass-card,
  .admin-mini-card {
    border-radius: 22px;
  }
  .product-header {
    grid-template-columns: 1fr;
  }
  .stars-chip {
    min-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    text-align: left;
  }
  .primary-wide,
  .gift-bottom button {
    width: 100%;
  }
  .filter-row,
  .admin-filter-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }
  .filter-chip {
    min-width: 0;
    width: 100%;
    justify-content: center;
    white-space: normal;
    line-height: 1.15;
  }
  .order-top {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }
  .order-bottom .row-actions,
  .admin-mini-card .row-actions,
  .row-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .order-bottom .row-actions button,
  .admin-mini-card .row-actions button,
  .row-actions button {
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 430px) {
  .app-shell {
    padding-left: 10px;
    padding-right: 10px;
  }
  #store .card-stack,
  #cards-list.card-stack,
  .list-stack {
    gap: 12px;
  }
  .gift-card {
    min-height: 0;
    padding: 16px;
  }
  .product-header h3 {
    font-size: 22px;
  }
  .stars-chip strong {
    font-size: 24px;
  }
  .filter-row,
  .admin-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-top {
    grid-template-columns: 1fr;
  }
  .order-top .status {
    width: fit-content;
  }
  .order-title-row {
    align-items: flex-start;
  }
  .order-entry-head {
    display: grid;
    gap: 10px;
  }
  .order-entry-brand {
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: flex-start;
    gap: 9px;
  }
  .order-entry-logo {
    width: 52px;
    height: 38px;
    padding: 7px;
  }
  .order-entry-side {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .order-entry-price {
    font-size: 22px;
  }
  .order-entry-meta {
    gap: 6px;
  }
  .order-entry-meta .pill {
    padding-left: 10px;
    padding-right: 10px;
  }
  .order-entry-summary {
    font-size: 12px;
  }
  .order-entry-bottom {
    padding-top: 0;
  }
  .order-entry-link {
    font-size: 11px;
  }
  .order-entry-arrow {
    font-size: 17px;
  }
  .order-detail-head {
    display: grid;
  }
  .order-detail-head .status {
    width: fit-content;
  }
  .order-related-cards {
    grid-template-columns: 1fr;
  }
  .detail-buy-bar,
  .sticky-form-actions {
    width: 100%;
  }
  .bottom-nav {
    left: 8px;
    right: 8px;
    bottom: calc(7px + env(safe-area-inset-bottom));
    padding: 6px;
    border-radius: 24px;
  }
  .order-entry-link {
    font-size: 11px;
  }
}

@media (max-width: 360px) {
  .app-shell {
    padding-left: 8px;
    padding-right: 8px;
  }
  .filter-row,
  .admin-filter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .order-bottom .row-actions,
  .admin-mini-card .row-actions,
  .row-actions {
    grid-template-columns: 1fr;
  }
  .segmented button {
    font-size: 10px;
  }
  .order-entry-bottom {
    justify-content: flex-start;
  }
}

/* v12: stars icon pricing and standalone admin product editor page */
.stars-chip strong,
.detail-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.stars-chip strong {
  justify-content: flex-end;
}
.stars-value {
  display: inline-block;
  line-height: 1;
}
.stars-mark,
.detail-stars-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f4b400;
  filter: drop-shadow(0 3px 8px rgba(244, 180, 0, .25));
  line-height: 1;
  transform: translateY(-1px);
}
.stars-mark { font-size: 16px; }
.detail-stars-mark { font-size: 20px; }
.product-stars-mark {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
}
.admin-product-editor-page {
  gap: 16px;
}
.admin-product-hero h2 {
  margin: 10px 0 0;
}
.admin-product-hero p {
  margin-top: 6px;
  color: rgba(255,255,255,.74);
}
.admin-product-form-page {
  padding: 18px;
}
.admin-product-form-page .sticky-form-actions {
  margin-top: 18px;
}

@media (max-width: 430px) {
  .stars-chip strong {
    justify-content: flex-start;
  }
  .product-stars-mark {
    font-size: 16px;
  }
  .detail-price {
    gap: 10px;
  }
  .detail-stars-mark { font-size: 18px; }
  .admin-product-form-page {
    padding: 16px;
  }
}

/* v13: standalone admin order detail page */
.admin-order-page {
  gap: 16px;
}
.admin-order-hero p {
  color: rgba(255,255,255,.74);
}
.admin-order-code-block {
  gap: 8px;
}
.admin-order-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.admin-order-related-list,
.admin-audit-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.admin-related-card,
.admin-audit-item {
  display: grid;
  gap: 12px;
}
.admin-audit-meta {
  color: #7d7d82;
  font-size: 12px;
}
.admin-order-detail-bar button {
  width: 100%;
}

@media (max-width: 430px) {
  .admin-order-related-list,
  .admin-audit-list {
    grid-template-columns: 1fr;
  }
}