/* =========================================================
 * apps/wxthememall.css — 微信主题商城
 * 所有选择器均限定在 .wtm-* 商城命名空间内。
 * ========================================================= */
.wtm-root,
.wtm-root *,
.wtm-root *::before,
.wtm-root *::after { box-sizing: border-box; }
.wtm-root {
  --wtm-paper: #fbfaf4;
  --wtm-paper-deep: #f2eee4;
  --wtm-ink: #19382f;
  --wtm-muted: #72877b;
  --wtm-sage: #9db9a8;
  --wtm-mint: #dbece1;
  --wtm-mint-deep: #4e8069;
  --wtm-orange: #d9824c;
  --wtm-line: rgba(25,56,47,.14);
  --wtm-card: rgba(255,255,252,.88);
  --wtm-shadow: 0 14px 34px rgba(51,76,61,.10);
  --text: var(--wtm-ink);
  --text2: var(--wtm-muted);
  --text3: var(--wtm-muted);
  --blue: var(--wtm-mint-deep);
  min-width: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: var(--wtm-ink);
  background:
    radial-gradient(circle at 8% 0%, rgba(219,236,225,.55), transparent 29%),
    linear-gradient(180deg, var(--wtm-paper), #f7f5ee 72%, #f3f0e8);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  isolation: isolate;
}
.wtm-root button,
.wtm-root input,
.wtm-root select { font: inherit; }
.wtm-root button { cursor: pointer; }
.wtm-root button:focus-visible,
.wtm-root input:focus-visible,
.wtm-root select:focus-visible,
.wtm-root [tabindex]:focus-visible { outline: 3px solid rgba(78,128,105,.42); outline-offset: 2px; }
.wtm-scroll {
  height: 100%;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}
.wtm-scroll::-webkit-scrollbar { width: 0; height: 0; }
.wtm-eyebrow {
  display: inline-block;
  color: var(--wtm-mint-deep);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.2;
}
.wtm-header { padding: 62px 20px 12px; }
.wtm-header h1,
.wtm-subheader h1 {
  margin: 8px 0 5px;
  color: var(--wtm-ink);
  font-family: Georgia, "Songti SC", serif;
  font-size: clamp(29px, 7vw, 39px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.wtm-header p,
.wtm-subheader p { margin: 0; color: var(--wtm-muted); font-size: 14px; line-height: 1.55; }
.wtm-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.wtm-count-badge {
  display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center;
  width: 57px; height: 57px; margin-top: 10px;
  border: 1px solid var(--wtm-line); border-radius: 50%; color: var(--wtm-mint-deep); background: rgba(219,236,225,.72);
}
.wtm-count-badge strong { font-family: Georgia, serif; font-size: 20px; line-height: 1; }
.wtm-count-badge small { margin-top: 3px; font-size: 10px; }
.wtm-search {
  display: flex; align-items: center; gap: 8px; height: 48px; margin-top: 23px; padding: 0 13px;
  border: 1px solid rgba(25,56,47,.11); border-radius: 15px; background: rgba(255,255,252,.8); box-shadow: 0 6px 16px rgba(63,86,68,.06);
}
.wtm-search > span { display: flex; color: var(--wtm-muted); }
.wtm-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--wtm-ink); background: transparent; font-size: 15px; }
.wtm-search input::placeholder { color: #9aaa9f; }
.wtm-search button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--wtm-muted); border: 0; background: transparent; }
.wtm-network {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 32px; margin: 0 20px 16px; padding: 0 2px;
  color: var(--wtm-muted); font-size: 11px;
}
.wtm-network-text { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.wtm-net-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #aab8ad; }
.wtm-net-dot.loading { background: var(--wtm-orange); animation: wtm-pulse 1.2s ease-in-out infinite; }
.wtm-net-dot.online { background: #6cae83; }
.wtm-net-dot.partial { background: var(--wtm-orange); }
.wtm-net-dot.offline { background: #bd7261; }
.wtm-retry { min-height: 32px; padding: 0 10px; border: 1px solid var(--wtm-line); border-radius: 999px; color: var(--wtm-mint-deep); background: transparent; font-size: 11px; }
.wtm-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(138px, 43%); gap: 13px; min-height: 232px; margin: 0 20px 28px; padding: 22px 16px 16px 20px;
  overflow: hidden; border: 1px solid rgba(25,56,47,.1); border-radius: 24px; background: linear-gradient(132deg, #e4f0e5, #f9f3e4 76%); box-shadow: var(--wtm-shadow);
}
.wtm-hero-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; }
.wtm-hero-kicker { color: var(--wtm-orange); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.wtm-hero h2 { margin: 12px 0 7px; font-family: Georgia, "Songti SC", serif; font-size: clamp(23px, 6vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.wtm-hero p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--wtm-muted); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.wtm-hero-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; color: var(--wtm-mint-deep); font-size: 10px; }
.wtm-hero-meta > span:not(.wtm-current)::after { content: ' ·'; margin-left: 5px; color: var(--wtm-sage); }
.wtm-hero-meta > span:last-child::after { display: none; }
.wtm-current { display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px; border-radius: 999px; color: #fff; background: var(--wtm-mint-deep); font-size: 10px; font-weight: 700; white-space: nowrap; }
.wtm-hero-button { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin-top: auto; padding: 0 13px; border: 0; border-radius: 12px; color: #fff; background: var(--wtm-ink); font-size: 12px; }
.wtm-hero-button span { display: flex; }
.wtm-hero-art { position: relative; min-width: 0; align-self: center; }
.wtm-hero-note { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 999px; color: rgba(25,56,47,.68); background: rgba(255,255,252,.72); font-size: 9px; }
.wtm-preview-box { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(25,56,47,.12); border-radius: 16px; background: #edf2eb; }
.wtm-preview-scale { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; pointer-events: none; }
.wtm-preview-scale > .wx-theme-sample { width: 410px !important; min-width: 410px; transform: scale(.42); transform-origin: top center; }
.wtm-preview-card { height: 170px; }
.wtm-preview-card .wtm-preview-scale > .wx-theme-sample { transform: scale(.4); }
.wtm-preview-hero { height: 212px; border: 0; border-radius: 18px; background: rgba(255,255,252,.52); }
.wtm-preview-hero .wtm-preview-scale > .wx-theme-sample { transform: scale(.43); }
.wtm-preview-family { width: 79px; height: 88px; border: 0; border-radius: 10px; }
.wtm-preview-family .wtm-preview-scale > .wx-theme-sample { transform: scale(.2); transform-origin: top center; }
.wtm-preview-missing { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--wtm-muted); font-size: 11px; }
.wtm-catalog-section { padding: 0 20px; }
.wtm-section-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.wtm-section-intro h2,
.wtm-category-block h2,
.wtm-mine-section h2 { margin: 6px 0 0; font-family: Georgia, "Songti SC", serif; font-size: 24px; font-weight: 600; letter-spacing: -.025em; }
.wtm-structure-count { color: var(--wtm-muted); font-size: 11px; }
.wtm-chip-row { display: flex; gap: 7px; margin: 0 -20px 14px; padding: 0 20px 4px; overflow-x: auto; scrollbar-width: none; }
.wtm-chip-row::-webkit-scrollbar { display: none; }
.wtm-chip { flex: none; min-height: 36px; padding: 0 13px; border: 1px solid var(--wtm-line); border-radius: 999px; color: var(--wtm-muted); background: rgba(255,255,252,.6); font-size: 12px; white-space: nowrap; }
.wtm-chip.active { border-color: var(--wtm-mint-deep); color: #fff; background: var(--wtm-mint-deep); }
.wtm-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-bottom: 22px; }
.wtm-filter-field,
.wtm-sort { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: var(--wtm-muted); font-size: 10px; }
.wtm-filter-field select,
.wtm-sort select { width: 100%; min-width: 0; height: 38px; padding: 0 8px; border: 1px solid var(--wtm-line); border-radius: 10px; outline: 0; color: var(--wtm-ink); background: rgba(255,255,252,.72); font-size: 11px; }
.wtm-result-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wtm-result-count { color: var(--wtm-ink); font-size: 13px; font-weight: 700; }
.wtm-result-total { margin-left: 7px; color: var(--wtm-muted); font-size: 10px; }
.wtm-sort { flex-direction: row; align-items: center; gap: 6px; }
.wtm-sort select { width: auto; min-width: 82px; height: 34px; }
.wtm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.wtm-card { min-width: 0; overflow: hidden; border: 1px solid rgba(25,56,47,.1); border-radius: 17px; background: var(--wtm-card); box-shadow: 0 7px 18px rgba(51,76,61,.07); transition: transform 180ms ease, box-shadow 180ms ease; }
.wtm-card:active { transform: scale(.985); }
.wtm-card-preview { position: relative; padding: 8px; background: linear-gradient(145deg, #f2f5ed, #eee8dd); }
.wtm-mode { position: absolute; top: 13px; left: 13px; padding: 3px 6px; border-radius: 999px; color: var(--wtm-mint-deep); background: rgba(255,255,252,.78); font-size: 9px; }
.wtm-card-body { min-width: 0; padding: 11px 11px 10px; }
.wtm-card-title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wtm-card h3 { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: Georgia, "Songti SC", serif; font-size: 16px; font-weight: 600; }
.wtm-card-title-row .wtm-current { margin-left: auto; }
.wtm-card-family { margin: 4px 0 9px; overflow: hidden; color: var(--wtm-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.wtm-card-stats { display: flex; align-items: center; min-width: 0; gap: 3px; color: var(--wtm-muted); font-size: 9px; white-space: nowrap; }
.wtm-card-stats > span:not(.wtm-stars) { overflow: hidden; text-overflow: ellipsis; }
.wtm-stars { display: inline-flex; flex: none; gap: 1px; color: #c9d1c5; }
.wtm-star { display: flex; }
.wtm-star.on { color: var(--wtm-orange); }
.wtm-star svg { width: 12px; height: 12px; }
.wtm-rating-number { color: var(--wtm-ink); font-weight: 700; }
.wtm-stat-sep { color: #b2beb2; }
.wtm-card-actions { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin-top: 5px; gap: 4px; }
.wtm-quick-apply { min-height: 44px; padding: 0 8px; border: 1px solid var(--wtm-mint-deep); border-radius: 10px; color: var(--wtm-mint-deep); background: transparent; font-size: 10px; }
.wtm-small-action { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; color: var(--wtm-mint-deep); background: transparent; }
.wtm-card-arrow { display: inline-flex; align-items: center; gap: 2px; color: var(--wtm-mint-deep); font-size: 10px; }
.wtm-card-arrow svg { display: flex; }
.wtm-empty { padding: 52px 10px 70px; text-align: center; }
.wtm-empty-small { padding: 38px 10px; }
.wtm-empty-mark { display: flex; justify-content: center; margin-bottom: 10px; color: var(--wtm-sage); }
.wtm-empty h2,
.wtm-empty h3 { margin: 0 0 7px; font-family: Georgia, "Songti SC", serif; font-size: 21px; }
.wtm-empty p { margin: 0 auto 18px; color: var(--wtm-muted); font-size: 12px; line-height: 1.5; }
.wtm-outline-button { min-height: 44px; padding: 0 16px; border: 1px solid var(--wtm-mint-deep); border-radius: 12px; color: var(--wtm-mint-deep); background: transparent; font-size: 12px; }
.wtm-more { display: block; width: 100%; min-height: 48px; margin: 18px 0 12px; border: 1px solid var(--wtm-line); border-radius: 13px; color: var(--wtm-mint-deep); background: rgba(255,255,252,.62); font-size: 12px; }
.wtm-more span { margin-left: 4px; color: var(--wtm-muted); font-size: 10px; }
.wtm-bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 8; display: flex; padding: 6px 20px calc(7px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(25,56,47,.1); background: rgba(251,250,244,.93); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.wtm-bottom-nav button { display: flex; min-width: 44px; min-height: 54px; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; color: var(--wtm-muted); background: transparent; font-size: 10px; }
.wtm-bottom-nav button.active { color: var(--wtm-mint-deep); font-weight: 700; }
.wtm-bottom-nav button svg { display: flex; }
.wtm-subheader { padding: 62px 20px 24px; }
.wtm-category-block,
.wtm-mine-section { padding: 0 20px 25px; }
.wtm-family-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wtm-family-card { display: flex; align-items: center; min-width: 0; gap: 7px; padding: 8px; border: 1px solid var(--wtm-line); border-radius: 15px; text-align: left; color: var(--wtm-ink); background: rgba(255,255,252,.7); }
.wtm-family-sample { display: flex; flex: none; width: 79px; }
.wtm-family-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.wtm-family-info strong { overflow: hidden; font-family: Georgia, serif; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.wtm-family-info small { display: -webkit-box; overflow: hidden; color: var(--wtm-muted); font-size: 9px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wtm-family-card > span:last-child { display: flex; flex: none; color: var(--wtm-mint-deep); }
.wtm-scene-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.wtm-scene-tag { min-height: 40px; padding: 0 13px; border: 1px solid var(--wtm-line); border-radius: 999px; color: var(--wtm-mint-deep); background: rgba(219,236,225,.5); font-size: 12px; }
.wtm-segment { display: flex; gap: 3px; margin: 0 20px 24px; padding: 3px; border-radius: 12px; background: rgba(157,185,168,.18); }
.wtm-segment button { min-height: 40px; flex: 1; border: 0; border-radius: 9px; color: var(--wtm-muted); background: transparent; font-size: 12px; }
.wtm-segment button.active { color: var(--wtm-ink); background: var(--wtm-paper); box-shadow: 0 2px 7px rgba(51,76,61,.1); font-weight: 700; }
.wtm-segment span { margin-left: 3px; color: var(--wtm-mint-deep); }
.wtm-muted { color: var(--wtm-muted); font-size: 12px; line-height: 1.5; }
.wtm-legacy-section { padding-top: 2px; }
.wtm-detail-top { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 62px 16px 0; }
.wtm-back,
.wtm-favorite-top { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; color: var(--wtm-mint-deep); background: transparent; }
.wtm-back { gap: 2px; padding: 0 8px 0 0; font-size: 13px; }
.wtm-favorite-top { width: 44px; }
.wtm-detail-head { padding: 23px 20px 18px; }
.wtm-detail-title-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wtm-detail h1,
.wtm-preview-route-head h1 { margin: 0; font-family: Georgia, "Songti SC", serif; font-size: clamp(29px, 7vw, 40px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.wtm-detail-head p { margin: 11px 0 0; color: var(--wtm-muted); font-size: 13px; line-height: 1.65; }
.wtm-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
.wtm-detail-tags span { padding: 5px 9px; border-radius: 999px; color: var(--wtm-mint-deep); background: var(--wtm-mint); font-size: 10px; }
.wtm-detail-tabs,
.wtm-preview-route-tabs { display: flex; gap: 20px; padding: 0 20px; border-bottom: 1px solid var(--wtm-line); }
.wtm-detail-tabs button,
.wtm-preview-route-tabs button { position: relative; min-height: 44px; padding: 0 1px; border: 0; color: var(--wtm-muted); background: transparent; font-size: 12px; }
.wtm-detail-tabs button.active,
.wtm-preview-route-tabs button.active { color: var(--wtm-ink); font-weight: 700; }
.wtm-detail-tabs button.active::after,
.wtm-preview-route-tabs button.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background: var(--wtm-orange); content: ''; }
.wtm-detail-preview { height: clamp(360px, 96vw, 440px); margin: 15px 20px 0; overflow: hidden; border: 1px solid var(--wtm-line); border-radius: 20px; background: #edf2eb; }
.wtm-detail-preview > .wx-theme-sample { min-height: 100%; }
.wtm-preview-caption { margin: 10px 20px 0; color: var(--wtm-muted); font-size: 11px; line-height: 1.5; text-align: center; }
.wtm-full-preview { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; margin: 9px auto 27px; padding: 0 13px; border: 0; color: var(--wtm-mint-deep); background: transparent; font-size: 12px; }
.wtm-full-preview svg { display: flex; }
.wtm-detail-section { margin: 0 20px 26px; padding-top: 22px; border-top: 1px solid var(--wtm-line); }
.wtm-detail-section h2 { margin: 7px 0 15px; font-family: Georgia, serif; font-size: 22px; font-weight: 600; }
.wtm-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wtm-feature { min-height: 90px; padding: 11px 9px; border-radius: 13px; background: rgba(219,236,225,.58); }
.wtm-feature span { display: block; margin-bottom: 16px; color: var(--wtm-orange); font-family: Georgia, serif; font-size: 13px; }
.wtm-feature strong { display: block; font-size: 11px; line-height: 1.4; }
.wtm-stat-overview { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wtm-stat-overview > div { display: flex; flex-direction: column; gap: 3px; }
.wtm-stat-overview strong { font-family: Georgia, serif; font-size: 37px; font-weight: 600; letter-spacing: -.05em; }
.wtm-stat-overview span { display: flex; align-items: center; gap: 5px; }
.wtm-stat-overview small { color: var(--wtm-muted); font-size: 10px; }
.wtm-stat-overview dl { margin: 0; padding-left: 18px; border-left: 1px solid var(--wtm-line); }
.wtm-stat-overview dt { color: var(--wtm-muted); font-size: 10px; }
.wtm-stat-overview dd { margin: 5px 0 0; font-family: Georgia, serif; font-size: 20px; }
.wtm-distribution { margin-top: 20px; }
.wtm-distribution h3,
.wtm-rate-head h3 { margin: 0 0 11px; font-size: 13px; }
.wtm-hist-row { display: grid; grid-template-columns: 10px 14px minmax(0, 1fr) 24px; align-items: center; gap: 4px; height: 20px; color: var(--wtm-muted); font-size: 10px; }
.wtm-hist-row > svg { color: var(--wtm-orange); }
.wtm-hist-row i { display: block; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(157,185,168,.23); }
.wtm-hist-row b { display: block; height: 100%; border-radius: inherit; background: var(--wtm-sage); }
.wtm-hist-row em { font-style: normal; text-align: right; }
.wtm-anonymous-note { margin: 15px 0 0; color: var(--wtm-muted); font-size: 10px; line-height: 1.55; }
.wtm-rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wtm-rate-head p { margin: 3px 0 0; color: var(--wtm-muted); font-size: 11px; }
.wtm-feedback { color: var(--wtm-orange); font-size: 11px; }
.wtm-rate-stars { display: flex; gap: 5px; }
.wtm-rate-stars button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; color: #ccd6cc; background: transparent; }
.wtm-rate-stars button.selected { color: var(--wtm-orange); }
.wtm-rate-stars button:disabled { opacity: .55; }
.wtm-detail-actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 7px; margin-top: 28px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wtm-line); background: rgba(251,250,244,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.wtm-action-secondary { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; gap: 3px; padding: 0 8px; border: 1px solid var(--wtm-line); border-radius: 11px; color: var(--wtm-mint-deep); background: rgba(255,255,252,.7); font-size: 10px; }
.wtm-action-secondary svg { display: flex; }
.wtm-apply { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; flex: 1; padding: 0 13px; border: 0; border-radius: 11px; color: #fff; background: var(--wtm-ink); font-size: 12px; font-weight: 700; }
.wtm-apply:disabled { color: var(--wtm-mint-deep); background: var(--wtm-mint); }
.wtm-preview-route-head { padding: 25px 20px 18px; }
.wtm-preview-route-head h1 { margin-top: 8px; font-size: 32px; }
.wtm-preview-route-head p { margin: 9px 0 0; color: var(--wtm-muted); font-size: 12px; }
.wtm-full-preview-stage { height: clamp(360px, 104vw, 480px); margin: 15px 20px 0; overflow: hidden; border: 1px solid var(--wtm-line); border-radius: 20px; background: #edf2eb; }
.wtm-full-preview-stage > .wx-theme-sample { min-height: 100%; }
.wtm-preview-route-note { margin: 12px 20px 30px; color: var(--wtm-muted); font-size: 11px; line-height: 1.6; text-align: center; }
.wtm-preview-bottom { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--wtm-line); background: rgba(251,250,244,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.wtm-preview-bottom .wtm-action-secondary { flex: 1; }
.wtm-root { position: relative; }
.wtm-header,
.wtm-subheader { padding-top: 62px; }
.wtm-detail-top { padding-top: 62px; }
.wtm-top-back { justify-content: flex-start; width: max-content; min-height: 44px; margin-bottom: 8px; }
.wtm-scroll { padding-bottom: calc(142px + env(safe-area-inset-bottom, 0px)); }
.wtm-bottom-nav { position: absolute; right: 0; bottom: 0; left: 0; z-index: 8; }
.wtm-detail-actionbar,
.wtm-preview-bottom { position: absolute; right: 0; bottom: 0; left: 0; z-index: 9; }
.wtm-detail-actionbar { margin-top: 0; }
.wtm-preview-bottom { margin: 0; }
.wtm-chip,
.wtm-search button,
.wtm-small-action,
.wtm-retry,
.wtm-segment button,
.wtm-filter-field select,
.wtm-sort select { min-height: 44px; }
.wtm-search button { width: 44px; }
.wtm-chip { display: inline-flex; align-items: center; }
.wtm-family-grid { grid-template-columns: minmax(0, 1fr); }
.wtm-family-card { min-height: 104px; }
.wtm-family-sample { width: 96px; height: 92px; }
.wtm-preview-family { width: 96px; height: 92px; }
.wtm-family-card .wtm-family-info strong { font-size: 15px; }
.wtm-card-preview { min-width: 0; }
.wtm-preview-card { height: clamp(170px, 38vw, 205px); }
.wtm-preview-card .wtm-preview-scale > .wx-theme-sample { width: 400px !important; min-width: 400px; transform: scale(.42); }
.wtm-preview-hero .wtm-preview-scale > .wx-theme-sample { width: 400px !important; min-width: 400px; }
@keyframes wtm-pulse { 50% { opacity: .35; } }
@media (min-width: 560px) {
  .wtm-header, .wtm-subheader { padding-right: 28px; padding-left: 28px; }
  .wtm-network, .wtm-hero, .wtm-catalog-section, .wtm-category-block, .wtm-mine-section, .wtm-detail-head, .wtm-detail-preview, .wtm-preview-caption, .wtm-detail-section, .wtm-full-preview-stage { margin-right: 28px; margin-left: 28px; }
  .wtm-hero { grid-template-columns: minmax(0, 1fr) 220px; }
  .wtm-card-preview { padding: 10px; }
  .wtm-preview-card { height: 205px; }
  .wtm-preview-card .wtm-preview-scale > .wx-theme-sample { transform: scale(.47); }
  .wtm-grid { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .wtm-root *, .wtm-root *::before, .wtm-root *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}