@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/golos-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/golos-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/golos-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #f3f4f1;
  --ink: #15171a;
  --muted: #5a6067;
  --line: #d5d8d2;
  --card: #ffffff;
  --accent: #ffd43b;
  --accent-edge: #e3b62a;
  --mint: #bdefd0;
  --ok: #1b6e46;
  --ok-deep: #17603c;
  --ok-bg: #d7f5e3;
  --ok-soft: #e5f3ea;
  --warn: #8a4b00;
  --warn-bg: #fff1d6;
  --pause: #3e444a;
  --pause-bg: #eaebe6;
  --danger: #a23b12;
  --shell: 390px;
  --shadow: 0 14px 32px rgba(21, 23, 26, 0.14);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-fast: 180ms;
  --motion-ui: 320ms;
  --motion-view: 420ms;
  --motion-list: 420ms;
  --motion-sheet: 480ms;
  --motion-photo: 520ms;
  --motion-hero: 640ms;
  --motion-fade: 220ms;
  --motion-reduced: 160ms;
  color: var(--ink);
  background: var(--bg);
  font-family: "Golos Text", system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }

html, body { margin: 0; }
::selection { background: var(--accent); color: var(--ink); }
input::placeholder { color: var(--muted); opacity: 1; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: 0.55; }

body {
  accent-color: var(--accent);
  caret-color: var(--ink);
  min-height: 100dvh;
  color: var(--ink);
  background: var(--bg);
}

.phone {
  width: min(100%, var(--shell));
  max-width: var(--shell);
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow-x: clip;
  background: var(--bg);
  color: var(--ink);
}

main {
  padding: 12px 16px calc(96px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

section[data-section] { display: flex; flex-direction: column; gap: 16px; }
section[data-section][hidden] { display: none; }

#find.view-home, #home-extra { display: flex; flex-direction: column; gap: 24px; }
#find.view-results { gap: 14px; }
#home-extra:empty, #notice:empty, #results:empty { display: none; }
#profile { gap: 14px; }

h1 {
  margin: 0;
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: 8px;
  z-index: 6;
  transform: translateY(-140%);
  background: var(--card);
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 12px;
}

.skip:focus { transform: none; }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px;
  border-radius: 28px;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blob, .ring { position: absolute; z-index: -1; pointer-events: none; }
.blob { top: -46px; right: -38px; width: 150px; height: 150px; border-radius: 75px; background: var(--mint); }
.ring { top: 28px; right: 86px; width: 44px; height: 44px; border-radius: 22px; border: 2px solid rgba(255, 255, 255, 0.9); }

.city { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }

.hero h1 { font-size: 36px; line-height: 38px; }

.home-header { display: flex; flex-direction: column; gap: 12px; padding: 16px 12px 14px; border-radius: 28px; background: var(--card); }
.home-header .city { gap: 7px; font-size: 12px; font-weight: 600; color: var(--muted); }
.home-header .city > svg { color: var(--ink); }
.home-header h1 { font-size: 28px; line-height: 33px; letter-spacing: -.04em; }
.home-header .searchbar { gap: 8px; height: 54px; padding-left: 8px; border: 1px solid #e2e5df; border-radius: 18px; background: var(--bg); }
.home-header .searchbar > svg { flex: none; box-sizing: content-box; width: 20px; height: 20px; padding: 6px; border-radius: 11px; background: var(--accent); }
.home-header .searchbar input { font-size: 16px; }
.recent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.recent-row[hidden] { display: none; }
.home-header .recent-row { padding-top: 8px; border-top: 1px dashed var(--line); }
.home-header .recent { align-self: auto; gap: 6px; max-width: 100%; min-height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; color: var(--ink); cursor: pointer; }
.home-header .recent svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.home-header .recent-caption { flex: none; color: var(--muted); font-size: 12px; font-weight: 400; }
.home-header .recent span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; }

.home-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  overflow: visible;
  min-height: 214px;
  margin-bottom: 12px;
  padding: 22px 20px;
  border-radius: 28px;
  color: var(--ink);
  text-decoration: none;
}
.home-feature-background { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; background: var(--accent); }
.home-feature-background::before { content: ""; position: absolute; top: -30px; right: -30px; width: 190px; height: 190px; border-radius: 50%; background: var(--mint); }
.home-feature-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; width: 55%; }
.home-feature h2 { margin: 0; font-size: 24px; line-height: 27px; font-weight: 800; letter-spacing: -.035em; }
.home-feature p { margin: 10px 0 16px; font-size: 12px; line-height: 17px; }
.home-feature-action { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; margin-top: auto; padding: 0 14px; border-radius: 20px; background: var(--card); font-size: 12px; font-weight: 700; }
.home-feature-art { position: absolute; z-index: 0; right: -8px; bottom: -14px; width: 54%; height: auto; filter: drop-shadow(0 7px 6px rgba(21, 23, 26, .14)); pointer-events: none; }
.home-intro-pending .home-feature-art, .home-intro-pending .home-feature-price-tag { opacity: 0; }
.home-feature-price-tag { position: absolute; z-index: 2; right: 18px; bottom: -6px; display: flex; align-items: stretch; overflow: hidden; border: 1px solid #dce6dc; border-radius: 12px; background: var(--card); box-shadow: 0 3px 8px rgba(21, 23, 26, .1); transform: rotate(-6deg); pointer-events: none; }
.home-feature-ruble { display: grid; place-items: center; width: 44px; min-height: 42px; }
.home-feature-bell { display: grid; place-items: center; width: 32px; border-left: 1px dashed rgba(27, 110, 70, .28); background: var(--mint); color: var(--ok-deep); }
.home-feature-bell svg { width: 18px; height: 18px; }
:root[data-input="pointer"] .home-feature-action,
:root[data-input="pointer"] .cat { transition: transform var(--motion-fast) var(--ease-out); }
:root[data-input="pointer"] .home-feature:active .home-feature-action,
:root[data-input="pointer"] .cat:active { transform: scale(.97); }
:root[data-input="pointer"] :is(.action, .quiet, .back, .tile-btn, .setup-tile, .mode-card, .quantity-option, .profile-gear, .mini-profile-service-card, .messenger, .tracking-add, .ticket-watch) { transition: transform var(--motion-fast) var(--ease-out); }
:root[data-input="pointer"] :is(.action, .quiet, .back, .tile-btn, .setup-tile, .mode-card, .quantity-option, .profile-gear, .mini-profile-service-card, .messenger, .tracking-add, .ticket-watch):active { transform: scale(.97); }
:root[data-input="pointer"] :is(.product-open, .tracking-product, .past-row, .product-hero .photo, .swipe-row) { transition: scale var(--motion-fast) var(--ease-out); }
:root[data-input="pointer"] :is(.product-open, .tracking-product, .past-row, .product-hero .photo):active,
:root[data-input="pointer"] .swipe-row:has(.tracking-ticket:active) { scale: .985; }

.searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  margin: 0;
  padding: 0 8px 0 16px;
  border-radius: 18px;
  background: var(--card);
}
:root[data-input="pointer"] .searchbar { transition: box-shadow var(--motion-fast) ease; }

.searchbar:focus-within { box-shadow: 0 0 0 2px var(--ok), 0 0 0 6px rgba(189, 239, 208, 0.65); }
.searchbar input:focus-visible { outline: none; }

.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 17px;
  color: var(--ink);
}

.searchbar input::-webkit-search-cancel-button { display: none; }

.clear, .back {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.clear { width: 38px; height: 38px; color: var(--muted); }

.recent {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.store, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.store[aria-pressed="true"], .chip[aria-pressed="true"] {
  border-color: var(--accent-edge);
  background: var(--accent);
  font-weight: 700;
}

#stores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#stores .store { flex-direction: column; gap: 0; min-width: 0; height: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); font-size: 12px; line-height: 16px; }
:root[data-input="pointer"] #stores .store { transition: transform var(--motion-fast) var(--ease-out); }
:root[data-input="pointer"] #stores .store:active { transform: scale(.97); }
.store-orbit { display: grid; place-items: center; width: 100%; height: 54px; }
.store-coin { display: flex; align-items: center; justify-content: center; width: 42px; height: 36px; }
.store-coin > svg { width: 22px; height: 22px; }
.store-label { display: flex; align-items: center; justify-content: center; align-self: stretch; min-height: 32px; padding: 0 3px; border-top: 1px dashed var(--line); color: var(--muted); font-weight: 600; white-space: nowrap; }
#stores .store[aria-pressed="true"] { border-color: var(--accent-edge); }
#stores .store[aria-pressed="true"] .store-label { border-top-color: var(--accent-edge); background: var(--accent); color: var(--ink); font-weight: 800; }

.block { display: flex; flex-direction: column; gap: 10px; }

.section-title { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.text-link {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.cats {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.cats::-webkit-scrollbar { display: none; }

.cat {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 78px;
  padding: 2px 0;
  border-radius: 18px;
  color: var(--ink);
  text-decoration: none;
}

.cat-green .cat-ico { background: var(--ok-bg); }
.cat-accent .cat-ico { background: #fff0ae; }
.cat-paper .cat-ico { background: var(--card); }

.cat-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 22px;
}

.cat-copy { font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.cat:active .cat-ico { box-shadow: inset 0 0 0 2px var(--accent-edge); }

.mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #edeeea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}

#browse-bar { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px; border-radius: 28px; background: var(--accent); }
#browse-bar[hidden] { display: none; }
#browse-bar .blob { top: -42px; right: -20px; width: 130px; height: 130px; }
#browse-bar .ring { top: auto; right: 74px; bottom: -24px; width: 48px; height: 48px; border-radius: 50%; }
#browse-bar > .back { background: var(--card); }
#store-head { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
#store-head h1 { font-size: 26px; line-height: 30px; letter-spacing: -.03em; }
.browse-caption { margin: 0; font-size: 13px; line-height: 18px; }
#browse-slot { grid-column: 1 / -1; min-width: 0; margin-top: 4px; }
#browse-slot .searchbar { height: 52px; padding: 0 8px 0 14px; border-radius: 18px; }
#browse-slot .searchbar input { font-size: 16px; font-weight: 400; }
#browse-slot .searchbar > svg { flex: none; width: 20px; height: 20px; }

.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: var(--accent);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.note {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 1.5px var(--accent-edge); }
.dot.ok { margin-top: 0; background: #1f9d5c; box-shadow: none; }

#browse-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.search-loader { display: flex; flex-direction: column; align-items: center; padding: 28px 20px 32px; border-radius: 28px; background: var(--card); text-align: center; }
.search-loader-art, .search-empty-art { width: 200px; max-width: 100%; margin-bottom: 14px; }
.search-loader-art svg, .search-empty-art svg { display: block; width: 100%; height: auto; }
.search-loader-lens { transform-box: fill-box; transform-origin: center; animation: search-scan 2.8s ease-in-out infinite; }
.search-loader-title { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -.025em; }
.search-loader-description { max-width: 260px; margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 19px; text-wrap: balance; }
.loading-copy { display: flex; flex-direction: column; align-items: center; }
.search-loader.is-compact { flex-direction: row; gap: 14px; padding: 18px; text-align: left; }
.search-loader.is-compact .search-loader-art { flex: none; width: 88px; margin: 0; }
.search-loader.is-compact .loading-copy { align-items: flex-start; }
.search-loader.is-compact .search-loader-title { font-size: 16px; line-height: 21px; }
.button-spinner { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -3px; animation: loading-spin .8s linear infinite; }
button[aria-busy="true"] > svg { display: none; }
@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes search-scan {
  0%, 100% { transform: translate(-22px, 2px) rotate(-8deg); }
  50% { transform: translate(14px, -9px) rotate(4deg); }
}
.catalog-more { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 48px; padding: 8px 0; color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; }
.catalog-more .quiet { min-height: 44px; font-size: 12px; }
.source-unavailable-art { position: relative; display: grid; place-items: center; width: 140px; height: 112px; margin-bottom: 18px; }
.source-unavailable-art::before { content: ""; position: absolute; inset: 8px 20px; border-radius: 50%; background: var(--bg); }
.source-unavailable-store { position: relative; display: grid; place-items: center; width: 88px; height: 72px; border-radius: 22px; background: var(--mint); transform: rotate(-8deg); }
.source-unavailable-store > .brand-mark { width: 56px; height: 56px; border: 0; background: transparent; }
.source-unavailable-badge { position: absolute; right: 10px; bottom: 8px; display: grid; place-items: center; width: 40px; height: 40px; border: 4px solid var(--card); border-radius: 50%; background: var(--accent); }
.source-unavailable .search-empty-actions { display: flex; flex-direction: column; gap: 8px; }
.source-unavailable .quiet { min-height: 44px; }
.tracking-filter-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 28px 20px 20px; border-radius: 28px; background: var(--card); text-align: center; }
.tracking-filter-empty-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; border-radius: 22px; background: var(--ok-soft); color: var(--ok); }
.tracking-filter-empty h2 { margin: 0; font-size: 21px; line-height: 26px; letter-spacing: -.02em; }
.tracking-filter-empty p { max-width: 270px; margin: 0; color: var(--muted); font-size: 13px; line-height: 19px; }
.tracking-filter-empty .quiet { align-self: stretch; min-height: 44px; }

/* A ticket has a flexible copy area and a perforated coupon rail. */
.ticket {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 104px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.ticket-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 14px; }
.thumb { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--bg); color: #8a9096; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb svg { stroke-width: 1.5; }
.ticket-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ticket-name { font-size: 15px; line-height: 19px; font-weight: 800; }
.ticket-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.pack { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--bg); color: var(--ink); font-weight: 800; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: #1f9d5c; }
.dots i.off { background: transparent; border: 1.5px solid #8a9096; }
.cover { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ticket-cut { position: relative; z-index: 1; flex: none; width: 0; border-left: 2px dashed rgba(21, 23, 26, 0.14); }
.ticket-cut::before, .ticket-cut::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 11px; background: var(--bg); }
.ticket-cut::before { top: -11px; }
.ticket-cut::after { bottom: -11px; }
.ticket-side { flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px; border-radius: 0 24px 24px 0; text-align: center; }
.ticket-side strong { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ticket-side strong.long-price { font-size: 18px; line-height: 22px; }
.ticket-side .eyebrow { font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ticket-side.promo { background: var(--accent); }
.ticket-side.ok { background: var(--ok-bg); color: var(--ok-deep); }
.ticket-side.stale { background: #ffe9c7; color: var(--warn); }
.ticket-side.paused { background: var(--pause-bg); color: var(--pause); }
.ticket-side small { font-size: 11px; line-height: 14px; font-weight: 700; }
.ticket-side .from { font-size: 13px; font-weight: 700; }
.promo-pill, .ticket-side .promo-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.ticket-side.stale > span:not(.eyebrow):not(.was) { font-size: 13px; line-height: 16px; font-weight: 800; }
.thumb-orbit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: inherit; background: var(--card); }
.thumb-orbit .thumb { width: 100%; height: 100%; border-radius: inherit; background: var(--card); }
.ticket-thumb { position: relative; display: block; flex: none; width: 132px; height: 148px; border-radius: 18px; }
.thumb-status { position: absolute; right: 4px; bottom: 4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 2px solid var(--card); border-radius: 50%; background: var(--bg); color: var(--ink); }
.thumb-status svg { width: 16px; height: 16px; stroke-width: 2.4; }
.match .thumb-status { background: var(--mint); color: var(--ok); }
.stale .thumb-status { background: #ffe0ae; color: var(--warn); }

/* Product photos lead the catalog; the perforated price strip keeps the coupon motif. */
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.product-ticket { display: block; min-height: 0; background: var(--card); transform-origin: 50% 100%; }
.product-open { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.product-ticket .ticket-thumb { align-self: center; width: calc(100% - 20px); height: auto; aspect-ratio: 1; margin: 10px 10px 0; border-radius: 18px; }
.product-ticket .thumb svg { width: 48px; height: 48px; color: #a4aaa2; }
.product-ticket .ticket-main { display: block; width: 100%; padding: 12px 14px 14px; }
.product-ticket .ticket-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.product-ticket .ticket-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-ticket .pack { display: inline; height: auto; padding: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 600; }
.product-ticket .pack::after { content: " · "; }
.product-ticket .cover { font-size: 11px; }
.product-ticket .ticket-cut, .tracking-ticket .ticket-cut { width: 100%; height: 0; border-left: 0; border-top: 2px dashed rgba(21, 23, 26, 0.14); }
.product-ticket .ticket-cut::before, .product-ticket .ticket-cut::after, .tracking-ticket .ticket-cut::before, .tracking-ticket .ticket-cut::after { top: -10px; width: 18px; height: 18px; border-radius: 9px; }
.product-ticket .ticket-cut::before, .tracking-ticket .ticket-cut::before { left: -9px; }
.product-ticket .ticket-cut::after, .tracking-ticket .ticket-cut::after { left: auto; right: -9px; }
.product-ticket .ticket-side { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; width: 100%; min-height: 48px; gap: 6px; margin-top: auto; padding: 10px 14px; border-radius: 0 0 24px 24px; background: var(--ok-bg); text-align: left; }
.product-ticket .ticket-side.promo { background: var(--accent); }
.product-ticket .ticket-side.stale { background: #ffe9c7; }
.product-ticket .ticket-side strong { font-size: 20px; line-height: 24px; }
.product-ticket .ticket-side strong.long-price { font-size: 18px; }
.product-ticket .ticket-side .eyebrow { width: 100%; text-transform: none; letter-spacing: 0; }
.ticket-watch { position: absolute; z-index: 2; right: 8px; top: 8px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .96); color: var(--ink); cursor: pointer; }
.ticket-watch svg { width: 19px; height: 19px; stroke-width: 2.2; }

.stack:not(.product-grid) { display: flex; flex-direction: column; gap: 10px; }

.stub {
  padding: 28px 20px 20px;
  border-radius: 28px;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.stub .round-ico, .stub .bell { width: 64px; height: 64px; border-radius: 32px; }
.stub strong { font-size: 22px; line-height: 28px; }
.stub span { font-size: 15px; line-height: 21px; color: var(--muted); }
.stub .action { align-self: stretch; height: 52px; margin-top: 6px; font-size: 16px; box-shadow: none; }
.stub strong { font-weight: 800; }

.action, button.action, a.action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  border: 0;
  border-radius: 18px;
  background: var(--accent);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(21, 23, 26, 0.12);
  cursor: pointer;
}

.action.green { background: var(--ok-bg); color: var(--ok-deep); box-shadow: none; }
.quiet { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 16px; font-weight: 600; min-height: 48px; cursor: pointer; }

.price-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px;
  border-radius: 28px;
  background: var(--accent);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-hero .blob { width: 130px; height: 130px; top: -36px; right: -36px; }
.price-hero .ring { width: 56px; height: 56px; border-radius: 28px; bottom: -18px; top: auto; right: 64px; }
.price-hero .kicker { margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.price-hero .sum { display: block; font-size: 54px; line-height: 60px; font-weight: 800; letter-spacing: -0.03em; background: transparent; padding: 0; }
.price-hero .sum.empty { font-size: 28px; line-height: 34px; }
.price-hero.stale { background: #e6e8e3; color: var(--pause); }
.price-hero.stale .blob, .price-hero.stale .ring { display: none; }
.price-hero.stale .sum { color: var(--muted); }
.nets { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.net-dots { display: inline-flex; gap: 3px; }
.net-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--ink); }
.net-dots i.off { background: transparent; box-sizing: border-box; border: 1.5px solid rgba(21, 23, 26, 0.45); }
.pick[aria-pressed="true"]::before {
  content: "";
  width: 5px;
  height: 9px;
  border-right: 2.4px solid currentColor;
  border-bottom: 2.4px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
}
#track-detail .pair button {
  height: 52px;
  border: 0;
  border-radius: 18px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
#track-detail .pair .danger { background: transparent; color: var(--danger); }
.when { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.perforation { position: relative; height: 0; margin: 10px -18px 8px; border-top: 2px dashed rgba(21, 23, 26, 0.22); }
.perforation::before, .perforation::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 22px;
  height: 22px;
  border-radius: 11px;
  background: var(--bg);
}
.perforation::before { left: -11px; }
.perforation::after { right: -11px; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; }

.photo { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--card); color: #8a9096; }
.photo img { width: 100%; height: 100%; object-fit: contain; }
button.photo { border: 0; font: inherit; color: inherit; cursor: pointer; }
button.photo:disabled { cursor: default; }
button.photo:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.photo-view { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--shell)); z-index: 12; display: flex; align-items: center; justify-content: center; padding: 72px 16px 24px; background: rgba(21, 23, 26, 0.88); }
.photo-view[hidden] { display: none; }
.photo-view img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; background: #fff; box-shadow: 0 18px 36px rgba(21, 23, 26, 0.28); }
.photo-view .back { position: absolute; top: 12px; right: 16px; background: var(--card); box-shadow: 0 6px 16px rgba(21, 23, 26, 0.18); }
.photo-view .back:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.past-trackings { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.past-trackings h2 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 800; }
.past-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 12px 14px; border: 0; border-radius: 18px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.past-row .ticket-name { font-weight: 700; }
.past-label { flex: none; color: var(--muted); font-size: 13px; font-weight: 700; }
.photo > svg { stroke-width: 1.5; }
.brand { font-size: 14px; font-weight: 600; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--card); font-size: 13px; font-weight: 700; }
#card, #setup, #created { display: flex; flex-direction: column; gap: 16px; }
#card { gap: 18px; --product-price: #ffe9c7; }
#card[data-price-tone="ok"] { --product-price: var(--ok-bg); }
#card[data-price-tone="promo"] { --product-price: var(--accent); }
.product-hero { display: flex; flex: none; flex-direction: column; gap: 14px; }
.product-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; }
.product-toolbar .brand { overflow: hidden; font-size: 12px; font-weight: 600; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.product-toolbar .back, .product-hero-watch { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 15px; background: var(--card); color: var(--ink); cursor: pointer; }
.product-hero-watch { background: var(--accent); }
.product-showcase { position: relative; padding-bottom: 16px; }
.product-stage { padding: 10px 12px 0; border-bottom: 5px solid var(--product-price); border-radius: 26px; background: var(--card); }
.product-hero .photo { width: 100%; height: 250px; padding: 8px; border-radius: 18px; }
.product-hero .photo:has(> svg) { color: #a4aaa2; }
.product-body { display: flex; flex-direction: column; gap: 18px; }
.product-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.product-stage .product-heading { margin: 10px 4px 14px; }
.product-heading h1 { font-size: 21px; line-height: 26px; font-weight: 700; letter-spacing: -.025em; overflow-wrap: anywhere; text-wrap: pretty; }
.product-heading .pills { gap: 6px 14px; }
.product-heading .pill { gap: 5px; height: auto; padding: 0; border-radius: 0; background: transparent; color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 500; }
.product-heading .pill > svg { flex: none; width: 15px; height: 15px; }
.product-price-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.product-best-source { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 2px 12px; overflow-wrap: anywhere; }
.product-best-store { font-size: 12px; line-height: 17px; font-weight: 700; }
.product-best-terms { color: var(--muted); font-size: 11px; line-height: 16px; }
.product-best-checked { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10px; line-height: 14px; }
.product-best-checked svg { flex: none; }
.product-price-tag { justify-self: end; min-width: 144px; margin: 0 -4px -16px 0; padding: 10px 12px; border-radius: 15px; background: var(--accent); box-shadow: 0 4px 12px rgba(21, 23, 26, .07); }
.product-price-tag h2 { margin: 0 0 3px; font-size: 11px; line-height: 16px; font-weight: 600; }
.product-price-value { display: block; font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -.035em; white-space: nowrap; }
.product-price-tag.long .product-price-value { font-size: clamp(22px, 7.2vw, 28px); }
.product-price-tag.stale { background: #ffe9c7; }
.product-price-tag.stale .product-price-value { color: var(--warn); font-size: 16px; line-height: 24px; letter-spacing: normal; white-space: normal; }
#card .product-offers { gap: 12px; }
.product-offers-empty { margin: 0; padding: 18px; border-radius: 22px; background: var(--card); color: var(--muted); font-size: 13px; line-height: 20px; }
#card .availability { color: var(--muted); font-size: 11px; line-height: 16px; }
.offer-head { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.offer { position: relative; }
.offer .ticket { min-height: 0; border-radius: 22px; overflow: hidden; cursor: default; }
.offer .ticket-side { border-radius: 0 22px 22px 0; }
.offer .ticket-main { flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; padding: 14px 12px 14px 16px; }
.offer .offer-head { align-items: center; }
.offer .mark { flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--bg); font-size: 14px; }
.offer .ticket-copy { flex: 1; gap: 4px; }
.offer .ticket-name { font-size: 16px; line-height: 20px; font-weight: 800; }
.offer-method { align-self: flex-start; padding: 3px 8px; border-radius: 8px; background: var(--bg); color: var(--ink); font-size: 12px; line-height: 17px; font-weight: 600; }
.offer .badge-line { align-self: flex-start; }
.offer .ticket-side .eyebrow { letter-spacing: 0.06em; color: var(--muted); }
.offer .ticket-side.promo .eyebrow { color: var(--ink); }
.offer .ticket-side .was { text-align: center; }
#card .offer .ticket { flex-direction: column; }
#card .offer .ticket-main { gap: 10px; padding: 12px 14px; }
#card .offer .mark { width: 36px; height: 36px; background: transparent; }
#card .offer .info { width: 40px; height: 40px; border-radius: 13px; }
#card .offer .ticket-cut { width: 100%; height: 0; border-left: 0; border-top: 1px dashed rgba(21, 23, 26, .15); }
#card .offer .ticket-cut::before, #card .offer .ticket-cut::after { content: none; }
#card .offer .ticket-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 0 0 22px 22px; background: var(--card); text-align: left; }
#card .offer .ticket-side.promo, #card .offer .ticket-side.stale { background: var(--card); }
.offer-terms { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.offer-purchase { color: var(--ink); font-size: 12px; line-height: 17px; font-weight: 600; }
.offer-online { color: var(--muted); font-size: 11px; line-height: 16px; }
.offer-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding: 6px 10px; border-radius: 12px; background: var(--ok-bg); }
#card .ticket-side.promo .offer-amount { background: var(--accent); }
#card .ticket-side.stale .offer-amount { background: #ffe9c7; }
#card .offer-amount strong { font-size: 22px; line-height: 28px; }
#card .offer-amount strong.long-price { font-size: clamp(18px, 5.5vw, 22px); }
#card .offer-amount .was { color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 500; }
.offer-unavailable { color: var(--warn); font-size: 24px; line-height: 28px; font-weight: 700; }
#card .offer .availability { display: block; font-weight: 400; }
#card .offer-tip::before { right: 30px; }
.availability { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--warn); }
.availability svg { flex: none; }
.badge-line { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.badge-line.ok { background: var(--ok-soft); color: var(--ok); }
.badge-line.warn { background: var(--warn-bg); color: var(--warn); }
.badge-line.mute { background: #edeeea; color: var(--pause); }
.info {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 20px;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.info[aria-expanded="true"] { background: var(--accent); }
.info > svg { stroke-width: 2.4; }
.back > svg { stroke-width: 2; }
.card-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 18px;
  background: var(--ok-bg);
  color: var(--ok-deep);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.offer-tip {
  position: absolute;
  z-index: 4;
  top: 62px;
  left: 12px;
  right: 12px;
  padding: 12px 14px 14px 16px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid #e2e4df;
  box-shadow: 0 18px 40px rgba(21, 23, 26, 0.18);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-tip ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 19px; }
.offer-tip::before { content: ""; position: absolute; top: -7px; right: 92px; width: 12px; height: 12px; background: var(--card); border-left: 1px solid #e2e4df; border-top: 1px solid #e2e4df; transform: rotate(45deg); }
.offer-tip li { display: flex; align-items: center; gap: 10px; }
.offer-tip li svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
.offer-tip li span { min-width: 0; }
.offer-tip a { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--ink); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.tip-head .back { width: 36px; height: 36px; border-radius: 18px; background: var(--bg); color: var(--muted); }
.tip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 800; }
.was { color: var(--muted); font-size: 12px; line-height: 16px; }
.pending { border: 1.5px dashed #c9ccc5; }

.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 18px; background: #e6e8e3; }
.seg button { min-height: 44px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 2px 8px rgba(21, 23, 26, 0.12); }
.stepper { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 22px; background: var(--card); }
.stepper button { flex: none; width: 52px; height: 52px; border: 0; border-radius: 16px; background: var(--bg); color: var(--ink); font: inherit; font-size: 26px; font-weight: 700; cursor: pointer; }
.stepper-value { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
.stepper input { width: 100px; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; text-align: right; color: var(--ink); }
.stepper .rub { font-size: 36px; font-weight: 800; }
.live { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 14px; background: var(--card); font-size: 14px; font-weight: 700; }
.live::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 4px; background: currentColor; }
.live.ok { background: var(--ok-soft); color: var(--ok); }
.live.warn { background: var(--warn-bg); color: var(--warn); }
.field { display: flex; flex-direction: column; gap: 8px; }
.field h2 { margin: 0; font-size: 13px; line-height: 18px; font-weight: 700; color: var(--muted); }
.detail-head { display: flex; align-items: center; gap: 8px; }
#setup { gap: 22px; padding-bottom: 88px; }
#setup > .field { gap: 10px; }
#setup .field h2 { color: var(--ink); font-size: 14px; line-height: 20px; }
#setup .setup-actions .action { width: 100%; font-size: 14px; }
.setup-field-error { margin: 0; color: var(--warn); font-size: 12px; line-height: 18px; }
.setup-head { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 16px; padding: 14px 16px 18px; border-radius: 26px; background: var(--accent); overflow: hidden; }
.setup-head::before, .setup-head::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.setup-head::before { top: -54px; right: -42px; width: 132px; height: 132px; border-radius: 44% 56% 48% 52%; background: var(--mint); transform: rotate(-18deg); }
.setup-head::after { right: -12px; bottom: -28px; width: 72px; height: 72px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; }
.setup-toolbar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(21, 23, 26, .14); }
.setup-toolbar > .back { width: 36px; height: 36px; border-radius: 12px; background: var(--card); }
.setup-toolbar h1 { font-size: 18px; line-height: 23px; font-weight: 700; letter-spacing: -.02em; }
.setup-product { display: flex; align-items: center; gap: 14px; }
.setup-product > .thumb { width: 88px; height: 108px; padding: 6px; border-radius: 16px; background: var(--card); }
.setup-product-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.setup-product-copy h2 { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin: 0; font-size: 16px; line-height: 21px; font-weight: 700; letter-spacing: -.015em; }
.setup-product-copy .sub { color: rgba(21, 23, 26, .7); font-size: 12px; line-height: 17px; }
.mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mode-card { display: flex; align-items: center; gap: 8px; min-height: 66px; padding: 10px; border: 1px solid var(--line); border-radius: 17px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mode-card[aria-checked="true"] { border-color: var(--ink); background: var(--card); box-shadow: inset 0 0 0 1px var(--ink); }
.mode-icon { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.mode-card[aria-checked="true"] .mode-icon { background: var(--accent); }
.mode-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mode-copy strong { font-size: 13px; line-height: 18px; font-weight: 700; }
.mode-copy > span { color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 400; }
.price-control { border-radius: 24px; background: var(--card); overflow: hidden; }
.threshold-control { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; }
.stepper-caption { color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 500; }
#setup .stepper { padding: 0; border-radius: 0; background: transparent; }
#setup .stepper button { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); font-size: 22px; }
#setup .stepper input { padding: 0; font-size: 32px; letter-spacing: -.02em; }
#setup .stepper .rub { font-size: 28px; font-weight: 600; }
.price-scale { position: relative; height: calc(62px + var(--label-rows, 0) * 18px); margin: 0 14px; }
.scale-markers { position: absolute; inset: 0; }
.scale-track { position: absolute; left: 0; right: 0; top: 31px; height: 6px; border-radius: 3px; background: #edeeea; }
.scale-fill { position: absolute; left: 0; top: 0; height: 6px; border-radius: 3px; background: var(--accent); }
#setup .scale-track { background: var(--bg); }
#setup .scale-fill { background: var(--accent); }
.scale-range { position: absolute; z-index: 2; top: 12px; left: -10px; width: calc(100% + 20px); height: 44px; margin: 0; padding: 0; border: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: ew-resize; touch-action: pan-y; }
.scale-range::-webkit-slider-runnable-track { height: 6px; border: 0; background: transparent; }
.scale-range::-moz-range-track { height: 6px; border: 0; background: transparent; }
.scale-range::-moz-range-progress { background: transparent; }
.scale-range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; border: 3px solid var(--card); border-radius: 50%; background: var(--ink); box-shadow: 0 1px 5px rgba(21, 23, 26, .2); appearance: none; -webkit-appearance: none; }
.scale-range::-moz-range-thumb { width: 20px; height: 20px; border: 3px solid var(--card); border-radius: 50%; background: var(--ink); box-shadow: 0 1px 5px rgba(21, 23, 26, .2); }
.scale-range:focus-visible { outline: none; }
.scale-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mint); }
.scale-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--mint); }
.scale-point { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.scale-mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); font-size: 11px; font-weight: 800; }
.scale-point.hit .scale-mark { border-color: #1f9d5c; background: var(--ok-bg); color: var(--ok-deep); }
.scale-point.excluded .scale-mark { border-style: dashed; color: var(--muted); }
.scale-point.excluded .scale-price { color: var(--muted); }
.scale-price { margin-top: calc(var(--label-row, 0) * 18px); font-size: 11px; line-height: 14px; font-weight: 800; white-space: nowrap; }
.scale-empty { display: flex; height: 100%; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; line-height: 16px; text-align: center; }
#setup .live { min-height: 42px; padding: 10px 16px; border-radius: 0 0 24px 24px; border-top: 1px dashed var(--line); background: var(--card); color: var(--muted); font-size: 12px; line-height: 18px; font-weight: 500; }
#setup .live::before { width: 6px; height: 6px; background: var(--ink); }
#setup .live.ok::before { background: var(--ok); }
.price-control:has(.threshold-control[hidden]) .live { border-radius: 24px 24px 0 0; border-top: 0; }
.card-help { margin: 0 10px 10px; border: 1px solid #efe6bf; border-radius: 18px; background: #fff8df; overflow: hidden; }
.card-ask { display: grid; grid-template-columns: 32px minmax(0, 1fr) 18px; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; border-radius: 17px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; line-height: 18px; font-weight: 700; text-align: left; cursor: pointer; }
.card-ask:focus-visible { outline-offset: -3px; }
.card-ask-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); }
.card-ask-arrow { color: var(--muted); }
:root[data-input="pointer"] .card-ask-arrow { transition: transform var(--motion-ui) var(--ease-in-out); }
.card-ask[aria-expanded="true"] .card-ask-arrow { transform: rotate(180deg); }
.card-note { padding: 0 12px 14px 54px; color: var(--ink); font-size: 12px; line-height: 18px; font-weight: 400; }
.card-note p { margin: 0; }
.card-note p + p { margin-top: 6px; color: var(--muted); }
.card-note[hidden] { display: none; }
.setup-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.setup-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-width: 0; height: 72px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 16px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.setup-tile[aria-pressed="true"] { border-color: var(--ink); background: var(--card); color: var(--ink); }
#setup .tile-mark { width: 44px; height: 24px; background: transparent; }
.channels .setup-tile { height: 66px; }
.channels .setup-tile > svg { width: 22px; height: 22px; }
.cards .setup-tile { align-items: flex-start; height: 76px; padding: 12px; border-radius: 12px; background: var(--card); }
#setup .cards .tile-mark { width: 38px; height: 20px; }
.tile-mark { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 8px; }
.brand-mark.brand-mark { background: var(--card); }
.brand-logo { display: block; width: 76%; height: 76%; object-fit: contain; flex: none; }
.brand-logo-metro { width: 90%; height: 90%; }
.tile-check { display: none; }
.setup-tile .tile-check { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 16px; height: 16px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink); }
.setup-tile .tile-check > svg { opacity: 0; }
.setup-tile[aria-pressed="true"] .tile-check { border-color: var(--accent); background: var(--accent); }
.setup-tile[aria-pressed="true"] .tile-check > svg { opacity: 1; }
#setup .quantity-options { border: 1px solid var(--line); background: transparent; }
#setup .quantity-options button { font-size: 13px; font-weight: 600; }
#setup .quantity-options button[aria-checked="true"] { background: var(--accent); box-shadow: none; }
.quantity-options button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; }
.sub { font-size: 13px; color: var(--muted); font-weight: 500; }
.status { margin: 0; font-size: 14px; font-weight: 700; }
.card-status:empty { display: none; }
.card-actions {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(74px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(100%, var(--shell));
  padding: 12px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, rgba(243, 244, 241, 0), var(--bg) 12px);
}
.card-actions .action { flex: none; height: 54px; font-size: 16px; box-shadow: 0 6px 18px rgba(21, 23, 26, .1); }
.view-card #card { padding-bottom: 80px; }

.sheet-root { position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, var(--shell)); z-index: 8; background: rgba(21, 23, 26, 0.5); display: flex; align-items: flex-end; }
.sheet-root[hidden] { display: none; }
.confirm-root { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: rgba(21, 23, 26, .35); backdrop-filter: blur(4px); }
.sheet.confirm-sheet { align-items: stretch; gap: 18px; max-height: 100%; padding: 10px 20px 20px; border-radius: 28px; text-align: left; }
.confirm-sheet .grab { align-self: center; width: 32px; margin-bottom: 2px; }
.confirm-heading { display: flex; align-items: center; gap: 14px; }
.confirm-symbol { position: relative; isolation: isolate; display: grid; flex: none; place-items: center; overflow: hidden; width: 48px; height: 48px; border-radius: 17px; background: var(--accent); color: var(--ink); }
.confirm-symbol::before { content: ""; position: absolute; z-index: -1; top: -12px; right: -14px; width: 36px; height: 36px; border-radius: 50%; background: var(--mint); }
.confirm-sheet h2 { margin: 0; font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.025em; }
.confirm-product { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 20px; background: var(--bg); }
.confirm-product .thumb { width: 66px; height: 78px; border-radius: 12px; background: var(--card); }
.confirm-product-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.confirm-product-copy strong { font-size: 13px; line-height: 18px; font-weight: 700; overflow-wrap: anywhere; }
.confirm-product-copy > span { color: var(--muted); font-size: 12px; line-height: 16px; }
.sheet.confirm-sheet p { max-width: none; margin: 0; color: var(--muted); font-size: 13px; line-height: 19px; }
.confirm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.confirm-actions button { min-height: 50px; padding: 0 12px; border: 1px solid transparent; border-radius: 17px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.confirm-actions .confirm-cancel { border-color: var(--line); background: var(--card); color: var(--ink); }
.confirm-delete { background: #fff0e7; color: var(--danger); }
.sheet {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px calc(28px + env(safe-area-inset-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  max-height: 100dvh;
  overflow-y: auto;
}
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.sheet-close { position: absolute; top: 12px; right: 12px; color: var(--muted); }
.bell { width: 72px; height: 72px; border-radius: 36px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.saved { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--ok-soft); color: var(--ok); font-size: 13px; font-weight: 700; }
.sheet h1 { font-size: 26px; line-height: 30px; }
.sheet h1 { letter-spacing: -0.02em; }
.sheet .bell { flex: none; margin-top: 14px; }
.sheet p { margin: 0; max-width: 28ch; font-size: 16px; line-height: 22px; color: var(--muted); }
.sheet .action, .sheet .quiet { align-self: stretch; }
.sheet-actions { align-self: stretch; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.sheet .action { box-shadow: none; }

/* Saved tracking shares the product header composition. */
#created { position: relative; min-height: calc(100dvh - 108px - env(safe-area-inset-bottom)); gap: 0; }
.created-hero { position: relative; isolation: isolate; height: 202px; flex: none; margin: -12px -16px 0; background: var(--accent); }
.created-hero .blob { top: -70px; right: -60px; width: 200px; height: 200px; }
.created-hero .ring { top: 84px; left: 28px; width: 46px; height: 46px; border-radius: 50%; }
.created-hero > .back { position: absolute; top: 12px; left: 16px; background: var(--card); box-shadow: 0 6px 16px rgba(21, 23, 26, 0.1); }
.created-art { position: absolute; z-index: 2; top: 42px; left: 50%; transform: translateX(-50%); width: 164px; height: 172px; }
.created-art > .thumb { width: 164px; height: 172px; border: 7px solid var(--card); border-radius: 24px; background: var(--card); box-shadow: 0 14px 28px rgba(21, 23, 26, 0.14); }
.created-check { position: absolute; right: 2px; bottom: 6px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 3px solid var(--card); border-radius: 50%; background: #1f9d5c; color: #fff; }
.created-check svg { width: 20px; height: 20px; stroke-width: 2.8; }
.created-body { position: relative; display: flex; flex: 1; flex-direction: column; gap: 18px; margin: -28px -16px 0; padding: 76px 16px 0; border-radius: 32px 32px 0 0; background: var(--bg); }
.created-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.created-intro h1 { margin: 0; font-size: 28px; line-height: 32px; letter-spacing: -0.025em; }
.created-intro .sub { max-width: 300px; margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted); }
.created-conditions { position: relative; border-radius: 24px; background: var(--card); }
.created-condition-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; }
.created-condition-price { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.created-condition-price > span { color: var(--muted); font-size: 12px; line-height: 17px; }
.created-condition-price > strong { font-size: 30px; line-height: 36px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.created-condition-details { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 18px; border-top: 2px dashed var(--line); }
.created-condition-details::before, .created-condition-details::after { content: ""; position: absolute; top: -8px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); }
.created-condition-details::before { left: -7px; }
.created-condition-details::after { right: -7px; }
.created-condition-stores { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.created-condition-names { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.created-condition-names > span { color: var(--muted); font-size: 12px; line-height: 16px; }
.created-condition-names > strong { font-size: 12px; line-height: 17px; font-weight: 700; }
.created-condition-marks { display: flex; flex: none; padding-right: 4px; }
.created-condition-marks .brand-mark { width: 30px; height: 30px; margin-right: -4px; border: 2px solid var(--card); border-radius: 50%; background: var(--bg); }
.created-condition-terms { display: flex; flex-wrap: wrap; gap: 6px; }
.created-condition-terms > span { padding: 5px 8px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 600; }
.created-ticket { min-height: 108px; background: var(--ok-bg); cursor: default; }
.created-ticket.stale { background: #e6e8e3; }
.created-ticket .ticket-main { flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; padding: 14px 16px 16px; }
.created-offer-label { color: var(--ok); font-size: 11px; line-height: 16px; font-weight: 700; }
.created-ticket .sum { font-size: 32px; line-height: 38px; font-weight: 800; letter-spacing: -0.03em; }
.created-ticket .sum.empty { font-size: 24px; line-height: 28px; }
.created-ticket .price-copy, .created-where { font-size: 14px; line-height: 19px; font-weight: 700; }
.created-ticket .ticket-cut { border-color: rgba(21, 23, 26, 0.22); }
.created-ticket .ticket-side { width: 112px; align-items: flex-end; gap: 2px; padding: 12px 14px; text-align: right; }
.created-offer-meta, .created-price-note { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; line-height: 14px; font-weight: 600; color: rgba(21, 23, 26, 0.72); }
.created-offer-meta s, .created-price-note s { font-size: 18px; font-weight: 800; color: var(--ink); }
.created-actions { display: flex; flex-direction: column; margin-top: 2px; }
.rule-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rule-summary .edit { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: var(--ok-bg); color: var(--ok-deep); cursor: pointer; }
.created-delivery { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--ok-soft); }
.created-delivery-icon { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: var(--mint); color: var(--ok); }
.created-delivery-copy { display: flex; flex-direction: column; gap: 4px; }
.created-delivery-copy strong { font-size: 13px; line-height: 18px; font-weight: 700; }
.created-delivery-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 17px; }

.chain-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.chain-row + .chain-row { border-top: 1px solid #edeeea; }
.chain-list { border-radius: 24px; background: var(--card); display: flex; flex-direction: column; }
.chain-row .price { margin-left: auto; font-size: 20px; font-weight: 800; }
.chain-row .ticket-copy { flex: 1; gap: 2px; }
.chain-row .ticket-name { font-size: 15px; line-height: 21px; }
.chain-row .sub { font-size: 12px; font-weight: 700; }
.chain-row .price { flex: none; white-space: nowrap; }
.chain-row .price.long-price { font-size: 18px; line-height: 20px; }
.chain-row .price.empty { max-width: 92px; white-space: normal; text-align: right; font-size: 13px; line-height: 17px; color: var(--muted); }
.chain-row .mark { flex: none; }
.history { padding: 18px 16px 14px; border-radius: 24px; background: var(--card); display: flex; flex-direction: column; gap: 8px; }
.history svg { width: 100%; height: auto; }
.history-empty { display: flex; align-items: center; gap: 18px; min-height: 128px; }
.history-empty-symbol { position: relative; display: grid; flex: none; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: var(--ok-soft); color: var(--ok); }
.history-empty-symbol > svg { width: 30px; height: 30px; }
.history-empty-clock { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 30px; height: 30px; border: 3px solid var(--card); border-radius: 50%; background: var(--accent); color: var(--ink); }
.history-empty-clock svg { width: 16px; height: 16px; }
.history-empty-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.history-empty-copy h3 { margin: 0; font-size: 16px; line-height: 21px; font-weight: 800; }
.history-empty-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 19px; }
section.history { padding: 0; border-radius: 0; background: transparent; gap: 10px; }
section.history .history-empty { padding: 20px 18px; border-radius: 24px; background: var(--card); }
#card .history-empty { gap: 14px; min-height: 0; padding: 18px 16px; border: 1px dashed var(--line); border-radius: 22px; background: transparent; }
#card .history-empty-symbol { width: 48px; height: 48px; border-radius: 16px; background: #fff1b8; color: var(--ink); }
#card .history-empty-symbol > svg { width: 26px; height: 26px; }
#card .history-empty-clock { width: 26px; height: 26px; border-color: var(--bg); background: var(--card); }
#card .history-empty-copy h3 { font-size: 15px; line-height: 20px; }
#card .history-empty-copy p { font-size: 12px; line-height: 18px; }
.history-loading { margin: 0; padding: 24px 0; color: var(--muted); font-size: 13px; line-height: 20px; }
.history-error { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border-radius: 16px; background: var(--card); }
.history-error p { margin: 0; color: var(--muted); font-size: 13px; line-height: 20px; }
.history-error button { min-height: 44px; }
.price-history-chart { min-width: 0; margin: 0; padding: 16px; border-radius: 16px; background: var(--card); }
.price-history-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 18px; color: var(--muted); }
.price-history-heading strong { flex: none; color: var(--ok-deep); font-size: 20px; line-height: 26px; font-weight: 800; }
.price-history-chart > svg { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.price-history-grid { stroke: var(--line); stroke-width: 1; }
.price-history-axis-label { fill: var(--muted); font-size: 11px; }
.price-history-baseline { stroke: var(--warn); stroke-width: 1.5; stroke-dasharray: 5 5; }
.price-history-line { fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.price-history-point { fill: var(--ok); stroke: var(--card); stroke-width: 2; }
.price-history-dates { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; line-height: 18px; }
.price-history-dates.single { justify-content: center; }
.price-history-start { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; line-height: 18px; }
.price-history-start-key { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.price-history-start-key::before { content: ""; flex: none; width: 20px; border-top: 2px dashed var(--warn); }
.price-history-start strong { white-space: nowrap; font-size: 14px; }
.price-history-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.price-history-values { margin-top: 10px; }
.price-history-values summary { min-height: 44px; padding: 12px 0; color: var(--ok-deep); cursor: pointer; font-size: 13px; line-height: 20px; font-weight: 700; }
.price-history-values summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.price-history-list { display: flex; flex-direction: column; max-height: 272px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ok) var(--ok-soft); list-style: none; margin: 0; padding: 0; }
.price-history-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 19px; }
.price-history-row strong { flex: none; white-space: nowrap; }
.price-history-day { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.price-history-chain { color: var(--muted); font-size: 12px; }
section.chain-list { border-radius: 0; background: transparent; }
section.chain-list > h2 { margin-bottom: 10px; }
section.chain-list > .chain-row { background: var(--card); }
section.chain-list > .chain-row:first-of-type { border-radius: 24px 24px 0 0; }
section.chain-list > .chain-row:last-child { border-radius: 0 0 24px 24px; }
section.chain-list > .chain-row:first-of-type:last-child { border-radius: 24px; }
.chain-row .sub.ok { color: var(--ok); font-weight: 800; }
.history-caption { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
#track-home { display: flex; flex-direction: column; gap: 16px; }
.tracking-header { gap: 6px; }
.tracking-header .blob { top: -36px; right: -18px; width: 114px; height: 114px; }
.tracking-header .ring { top: auto; right: 30px; bottom: -28px; width: 52px; height: 52px; border-radius: 50%; }
.tracking-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tracking-header h1 { font-size: 26px; line-height: 32px; }
.tracking-add {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.tracking-caption { margin: 0; font-size: 13px; line-height: 18px; }
#track-filters {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--card);
}
#track-filters::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc((100% - 12px) / 3);
  border-radius: 17px;
  background: var(--accent);
  box-shadow: 0 2px 6px rgba(21, 23, 26, 0.08);
  pointer-events: none;
}
#track-filters:has([data-filter="match"][aria-pressed="true"])::before { transform: translateX(calc(100% + 2px)); }
#track-filters:has([data-filter="wait"][aria-pressed="true"])::before { transform: translateX(calc(200% + 4px)); }
:root[data-input="pointer"] #track-filters::before { transition: transform var(--motion-ui) var(--ease-in-out); }
.track-filter {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  min-height: 44px;
  padding: 0 3px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
:root[data-input="pointer"] .track-filter { transition: color var(--motion-ui) ease; }
.track-filter-label { font-size: clamp(12px, 3.33vw, 13px); line-height: 20px; font-weight: 700; }
.track-filter-count {
  color: var(--muted);
  font-size: 11px;
  line-height: 20px;
  font-weight: 600;
}
.track-filter[aria-pressed="true"] {
  color: var(--ink);
}
.track-filter[aria-pressed="true"] .track-filter-label { font-weight: 800; }
.track-filter[aria-pressed="true"] .track-filter-count { color: var(--ink); }
#track-list > .stack { gap: 16px; }
.tracking-empty, .search-empty {
  overflow: hidden;
  border-radius: 28px;
  background: var(--card);
  text-align: center;
}
.tracking-empty-content, .search-empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 26px;
}
.tracking-empty-art { display: block; width: min(100%, 260px); height: auto; margin-bottom: 8px; }
.tracking-empty-title, .search-empty-title {
  max-width: 270px;
  margin: 0;
  font-size: 27px;
  line-height: 31px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.tracking-empty-description, .search-empty-description {
  max-width: 270px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
  text-wrap: pretty;
}
.tracking-empty-actions, .search-empty-actions { position: relative; padding: 20px; border-top: 2px dashed var(--bg); }
.tracking-empty-actions::before, .tracking-empty-actions::after, .search-empty-actions::before, .search-empty-actions::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg);
}
.tracking-empty-actions::before, .search-empty-actions::before { left: -9px; }
.tracking-empty-actions::after, .search-empty-actions::after { right: -9px; }
.tracking-empty-actions .action, .search-empty-actions .action { width: 100%; height: 52px; box-shadow: none; font-size: 16px; }
.swipe-row { position: relative; border-radius: 24px; background: #f9d7c9; transform-origin: 50% 100%; }
.swipe-delete { position: absolute; left: 0; top: 0; bottom: 0; width: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 24px 0 0 24px; background: transparent; color: var(--danger); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.swipe-status:not(:empty) { padding: 8px 12px; color: var(--danger); font-size: 13px; line-height: 18px; }
.swipe-delete svg { width: 22px; height: 22px; }
#track-list .tracking-ticket { min-height: 0; flex-direction: column; touch-action: pan-y; transition: transform var(--motion-ui) var(--ease-out); }
.tracking-ticket .ticket-cut::before, .tracking-ticket .ticket-cut::after { content: none; }
.tracking-ticket .ticket-main { align-items: center; gap: 14px; padding: 12px; }
.tracking-ticket .ticket-copy { flex: 1; gap: 4px; }
.tracking-ticket .ticket-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 20px; }
.tracking-ticket .ticket-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tracking-ticket .pack { display: inline; height: auto; padding: 0; border-radius: 0; background: transparent; color: inherit; font-weight: 600; }
.tracking-ticket .pack::after { content: " · "; }
.tracking-ticket .thumb-orbit .thumb { width: 100%; height: 100%; }
.tracking-ticket .thumb svg { width: 48px; height: 48px; color: #a4aaa2; }
.ticket-current { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 6px; }
.ticket-current > strong { font-size: 24px; line-height: 28px; font-weight: 800; white-space: nowrap; }
.ticket-current > strong.long-price { font-size: 21px; }
.ticket-condition { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.ticket-state { display: inline-flex; align-items: center; min-height: 22px; font-size: 12px; line-height: 15px; font-weight: 700; color: var(--muted); }
.match .ticket-state { padding: 0 8px; border-radius: 11px; background: #1f9d5c; color: #fff; font-size: 11px; font-weight: 800; }
.stale .ticket-state { padding: 0 8px; border-radius: 11px; background: #ffe0ae; color: var(--warn); font-size: 11px; font-weight: 800; }
.pause .ticket-name { color: var(--muted); }
#track-list .ticket-side { flex-direction: row; justify-content: flex-start; width: 100%; min-height: 48px; gap: 8px; padding: 10px 16px; border-radius: 0 0 24px 24px; background: #fff6d6; color: var(--ink); transform-origin: 50% 0; }
#track-list .match .ticket-side { background: var(--ok-bg); }
#track-list .stale .ticket-side { background: #ffe9c7; }
#track-list .pause .ticket-side { background: var(--pause-bg); }
.target-label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.target-value, .target-description { margin-left: auto; font-size: 15px; line-height: 20px; font-weight: 800; text-align: right; }
#track-list .ticket-side .target-value { font-size: 15px; line-height: 20px; white-space: normal; }
#track-detail { display: flex; flex-direction: column; gap: 16px; }
.tracking-actions { display: flex; }
.tracking-delete { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 16px; border: 1px solid #efcfc2; border-radius: 20px; background: #fff4ee; color: var(--danger); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
#track-detail .pair { grid-template-columns: 1fr; gap: 8px; }
.tracking-detail-header { overflow: hidden; border-radius: 28px; background: var(--card); }
.tracking-detail-toolbar { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--accent); }
.tracking-detail-toolbar .blob { top: -70px; right: -24px; width: 150px; height: 150px; }
.tracking-detail-toolbar .back { flex: none; background: var(--card); }
.tracking-product { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tracking-product-main { display: flex; align-items: center; gap: 16px; padding: 18px; }
.tracking-product .thumb { width: 132px; height: 152px; border: 1px solid #edf0e9; border-radius: 20px; background: var(--card); }
.tracking-product .ticket-copy { flex: 1; gap: 8px; }
.tracking-product .ticket-name { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 20px; line-height: 25px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.tracking-product .sub { font-size: 12px; line-height: 17px; font-weight: 500; }
.product-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 10px 18px; border-top: 2px dashed var(--bg); color: var(--ink); font-size: 13px; font-weight: 700; }
.product-link-arrow { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); }
.thumb.is-image-loading, .photo.is-image-loading { background: #edf1eb; }
.is-image-loading > img { opacity: 0; }
.thumb img, .photo img { transition: opacity var(--motion-fade) ease; }
.tracking-status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 7px 12px; border-radius: 18px; background: var(--ok-soft); color: var(--ok); font-size: 13px; line-height: 18px; font-weight: 800; }
.tracking-status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tracking-status.wait { background: var(--card); color: var(--muted); }
.tracking-detail-toolbar .tracking-status.wait { color: var(--ink); }
.tracking-detail-toolbar .tracking-status.wait::before { background: #1f9d5c; box-shadow: 0 0 0 4px rgba(31, 157, 92, .12); animation: tracking-wait-light 2.4s ease-in-out infinite; }
@keyframes tracking-wait-light { 0%, 100% { opacity: 1; box-shadow: 0 0 0 4px rgba(31, 157, 92, .14); } 50% { opacity: .35; box-shadow: 0 0 0 1px rgba(31, 157, 92, .04); } }
.tracking-status.stale { background: var(--warn-bg); color: var(--warn); }
.tracking-status.pause, .tracking-status.paused { background: #e6e8e3; color: var(--pause); }
.tracking-events { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 18px; border-radius: 24px; background: var(--card); }
.tracking-timeline { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
.tracking-event { position: relative; display: flex; align-items: flex-start; gap: 12px; }
.tracking-event:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -16px; width: 2px; background: var(--line); }
.tracking-event-symbol { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mint); color: var(--ok); }
.tracking-event-copy { display: flex; flex-direction: column; gap: 6px; padding-top: 3px; }
.tracking-event-copy strong { font-size: 14px; line-height: 19px; font-weight: 700; }
.tracking-event-copy time { color: var(--muted); font-size: 12px; line-height: 17px; }
.tracking-events-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 19px; }

.profile-hero { gap: 6px; padding: 20px 18px 18px; }
.profile-hero .ring { top: 24px; right: 64px; }
.kicker { margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(21, 23, 26, 0.72); }
.profile-hero h1 { font-size: 32px; line-height: 36px; }
.messenger {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 10px 6px 6px;
  border: 0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.marks { display: flex; gap: 4px; }
.marks { flex: none; }
.marks .mark { width: 44px; height: 44px; border-radius: 14px; background: #fff; font-size: 12px; }
.marks .mark.dashed { background: transparent; border: 1.5px dashed rgba(21, 23, 26, 0.5); font-size: 11px; }
.messenger-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.messenger .sub { line-height: 17px; font-weight: 400; color: rgba(21, 23, 26, 0.72); }
.profile-cards { margin: 0; padding: 16px 18px 4px; border: 0; min-width: 0; border-radius: 24px; background: var(--card); }
.settings-block { display: flex; flex-direction: column; gap: 10px; }
.settings-card { border-radius: 22px; background: var(--card); overflow: hidden; }
.settings-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 8px 14px; border: 0; border-top: 1px solid #edeeea; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; text-align: left; }
.settings-card > :first-child { border-top: 0; }
.settings-row .round-ico { flex: none; width: 36px; height: 36px; background: var(--bg); }
.settings-row > span:nth-child(2) { flex: 1; min-width: 0; }
.settings-row small { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.settings-row > svg { flex: none; color: #8a9096; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile-btn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  min-height: 120px;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.tile-btn > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.tile-btn strong { display: block; font-size: 16px; line-height: 20px; font-weight: 800; }
.tile-btn small { color: var(--muted); font-size: 13px; }
.round-ico { width: 40px; height: 40px; border-radius: 20px; background: var(--bg); display: flex; align-items: center; justify-content: center; }

.tabs {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(calc(100% - 24px), calc(var(--shell) - 24px));
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  border-radius: 24px;
  border: 1px solid #daddd6;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
}

.tabs button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tabs::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: calc((100% - 16px) / 3);
  border-radius: 20px;
  background: var(--accent);
  box-shadow: 0 8px 18px rgba(21, 23, 26, 0.12);
  pointer-events: none;
}
.tabs:has(button[data-tab="track"][aria-current="page"])::before { transform: translateX(calc(100% + 4px)); }
.tabs:has(button[data-tab="profile"][aria-current="page"])::before { transform: translateX(calc(200% + 8px)); }
:root[data-input="pointer"] .tabs::before { transition: transform var(--motion-ui) var(--ease-in-out); }

.phone.is-admin > main,
.phone.is-admin > .tabs,
.phone.is-admin > .sheet-root { display: none !important; }

#admin-root { min-height: 100dvh; }
.admin-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 16px calc(96px + env(safe-area-inset-bottom));
}
.admin-shell .hero { gap: 8px; }
#admin-title:focus { outline: none; }
.admin-lead { margin: 0; max-width: 28ch; font-size: 16px; line-height: 22px; color: rgba(21, 23, 26, 0.72); }
.admin-back {
  align-self: flex-start;
  min-height: 44px;
  margin-top: 4px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
#open-admin .messenger-text > span:first-child { font-size: 15px; line-height: 19px; font-weight: 700; }
.admin-block { display: flex; flex-direction: column; gap: 10px; }
.pulse-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pulse-date { margin: 0; font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pulse-live { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 28px; padding: 0 10px; border-radius: 999px; background: var(--card); font-size: 12px; line-height: 16px; }
.pulse-live i { width: 8px; height: 8px; border-radius: 50%; background: #1f9d5c; }
.pulse-live.is-quiet i { background: #c4503a; }
.pulse-live b { font-weight: 800; }
.pulse-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pulse-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 12px 12px; border-radius: 18px; background: var(--card); }
.pulse-tile.is-hot { background: #fff6d8; }
.pulse-receipts { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--card); }
.pulse-receipts > strong { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.04em; }
.admin-field { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
.admin-row .quiet { align-self: flex-start; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.pulse-tile-label { font-size: 12px; line-height: 16px; font-weight: 800; color: var(--muted); }
.pulse-tile > strong { font-size: 32px; line-height: 36px; font-weight: 800; letter-spacing: -0.04em; }
.pulse-tile-detail { font-size: 13px; line-height: 17px; font-weight: 700; }
.pulse-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 8px; }
.pulse-col { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pulse-col b { font-size: 10px; line-height: 12px; font-weight: 800; }
.pulse-track { display: flex; align-items: flex-end; width: 100%; height: 36px; }
.pulse-track i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--ink); }
.pulse-col.is-zero .pulse-track i { background: #edeeea; }
.pulse-col.is-last .pulse-track i { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-edge); }
.pulse-col small { font-size: 10px; line-height: 12px; font-weight: 700; color: var(--muted); }
.pulse-share { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.pulse-legend, .pulse-figs { display: flex; gap: 6px 14px; margin: 0; font-size: 11.5px; line-height: 16px; font-weight: 700; }
.pulse-legend { flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px dashed var(--line); color: var(--muted); }
.pulse-legend > span, .pulse-figs > span { display: inline-flex; align-items: center; gap: 6px; }
.pulse-figs { gap: 18px; color: var(--muted); }
.pulse-figs b { color: var(--ink); font-weight: 800; }
.pulse-key { flex: none; width: 14px; height: 8px; border: 1px solid var(--ink); border-radius: 2px; }
.pulse-key.is-tg, .pulse-share-seg.is-tg { background: var(--ink); }
.pulse-key.is-max, .pulse-share-seg.is-max { background: var(--card); }
.pulse-key.is-both, .pulse-share-seg.is-both { background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, var(--accent) 2px 4px); }
.pulse-share-bar { display: flex; height: 7px; overflow: hidden; border: 1px solid var(--ink); border-radius: 3px; }
.pulse-share-bar.is-empty { height: 1px; border: 0; border-radius: 0; background: var(--line); }
.pulse-share-seg { display: block; height: 100%; border-right: 1px solid var(--ink); }
.pulse-share-seg:last-child { border-right: 0; }
.pulse-share-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.pulse-share-item { display: grid; gap: 6px; }
.pulse-share-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pulse-share-top h3 { margin: 0; font-size: 12.5px; line-height: 18px; font-weight: 700; }
.pulse-share-top strong { font-size: 18px; line-height: 22px; font-weight: 800; letter-spacing: -.035em; }
.pulse-share-item .pulse-share-note { font-size: 11.5px; line-height: 16px; }
.pulse-money { display: grid; gap: 12px; min-width: 0; padding-top: 6px; }
.pulse-money-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pulse-money-head .pulse-share-note { font-size: 12px; line-height: 17px; }
.pulse-money-periods { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.pulse-money-periods button { flex: 1 1 0; min-width: 0; min-height: 38px; padding: 8px 6px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; line-height: 18px; font-weight: 700; cursor: pointer; }
.pulse-money-periods button[aria-pressed="true"] { background: var(--accent); color: var(--ink); }
.pulse-money-periods button:not([aria-pressed="true"]):hover { background: var(--card); color: var(--ink); }
.pulse-money-periods button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pulse-money-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pulse-money-tile, .pulse-money-returns { min-width: 0; padding: 14px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.pulse-money-tile { display: flex; flex-direction: column; gap: 6px; min-height: 126px; }
.pulse-money-label { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px; margin: 0; color: var(--muted); font-size: 11.5px; line-height: 16px; font-weight: 700; }
.pulse-money-currency { font-size: 10px; font-weight: 600; }
.pulse-money-value { font-size: clamp(21px, 6vw, 26px); line-height: 1.15; font-weight: 800; letter-spacing: -.04em; overflow-wrap: anywhere; }
.pulse-money-details { display: grid; gap: 3px; margin-top: auto; color: var(--muted); font-size: 11.5px; line-height: 16px; overflow-wrap: anywhere; }
.pulse-money-details p { margin: 0; }
.pulse-money-returns { display: grid; gap: 12px; padding: 14px 16px; }
.pulse-money-returns-title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.025em; }
.pulse-money-split { display: flex; height: 8px; overflow: hidden; border-radius: 4px; background: var(--bg); }
.pulse-money-split.is-empty { height: 1px; border-radius: 0; background: var(--line); }
.pulse-money-split > span { display: block; height: 100%; }
.pulse-money-split > span + span { border-left: 2px solid var(--card); }
.pulse-money-split .is-timer, .pulse-money-legend .is-timer { background: var(--ink); }
.pulse-money-split .is-cancel, .pulse-money-legend .is-cancel { background: var(--accent); }
.pulse-money-legend { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 16px; }
.pulse-money-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.pulse-money-legend i { width: 10px; height: 10px; border-radius: 3px; }
.pulse-money-legend span { color: var(--muted); }
.pulse-money-legend b { font-weight: 800; white-space: nowrap; }
.pulse-feed { display: flex; flex-direction: column; gap: 8px; }
.receipt-brief { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--card); }
.receipt-brief strong { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.03em; }
.receipt-term { margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--bg); font-size: 13px; line-height: 18px; }
.receipt-term b { font-weight: 800; }
.receipt-term.is-late { background: #fff1ec; }
.receipt-term.is-soon { background: #fff6d8; }
.receipt-form { display: flex; flex-direction: column; gap: 8px; }
.admin-row.is-late { box-shadow: inset 0 0 0 1px #e7b2a4; }
.admin-row.is-ok { box-shadow: inset 0 0 0 1px #b7d7c4; }
.pulse-reaction { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card); }
.pulse-reaction.is-needed { background: #fff6d8; }
.pulse-reaction-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pulse-reaction-copy small { font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.pulse-reaction-copy strong { font-size: 16px; line-height: 20px; }
.pulse-reaction-copy span { font-size: 13px; line-height: 18px; color: var(--muted); }
.pulse-go { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: var(--accent); color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-row { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: var(--card); }
.admin-row.spread { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.admin-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.admin-row h2, .admin-row h3 { margin: 0; font-size: 16px; line-height: 20px; font-weight: 800; }
.admin-meta { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.admin-shell .action { align-self: stretch; box-shadow: none; }
.admin-shell nav.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 5px; border-radius: 20px; background: rgba(243, 244, 241, .96); }
.admin-shell nav.tabs::before,
.admin-shell nav.tabs button[data-admin-group]::before { content: none; display: none; }
.admin-shell nav.tabs button[data-admin-group] { display: grid; grid-template-rows: 20px auto; place-items: center; gap: 3px; min-height: 50px; padding: 5px 3px; border-radius: 15px; color: var(--muted); font-size: 10.5px; line-height: 14px; font-weight: 700; }
.admin-shell nav.tabs button[data-admin-group][aria-current="page"] { background: var(--accent); color: var(--ink); }
.admin-shell nav.tabs button[data-admin-group]:not([aria-current="page"]):hover { background: var(--card); color: var(--ink); }
.admin-shell nav.tabs button[data-admin-group]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.admin-nav-icon, .admin-nav-icon svg { display: block; width: 20px; height: 20px; }
.admin-nav-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.admin-subnav, .admin-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-subnav button, .admin-modes button {
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.admin-subnav button[aria-current="page"],
.admin-modes button[aria-pressed="true"] { background: var(--accent); }

.quota { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 18px; }
.quota-amount { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.quota-amount strong { font-size: 56px; line-height: 56px; font-weight: 800; letter-spacing: -0.04em; }
.quota-amount span { font-size: 17px; line-height: 22px; font-weight: 700; color: var(--ink); }
.quota-buy { align-self: stretch; display: flex; align-items: center; justify-content: center; height: 50px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.month-bars, .ten-bars { display: grid; gap: 4px; }
.month-bars { grid-template-columns: repeat(24, minmax(0, 1fr)); }
.ten-bars { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.month-bars i, .ten-bars i { display: block; height: 12px; border-radius: 6px; background: #EDEEEA; }
.ten-bars i { height: 8px; border-radius: 4px; }
.month-bars i.on, .ten-bars i.on { background: #1F9D5C; }
.month-bars i.bonus { background: transparent; box-sizing: border-box; border: 2px dashed #1F9D5C; }
.month-legend { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.month-now { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--bg); }
.month-now .round-ico { background: var(--accent); }
.month-now strong, .month-now small { display: block; }
.month-now strong { font-size: 15px; line-height: 19px; }
.month-now small { margin-top: 2px; font-size: 13px; line-height: 17px; color: var(--muted); }
.rules-toggle { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-align: left; }
#month-rules { margin: 0; padding: 0 0 4px 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 18px; color: #3E444A; }
.invite-banner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 0; border-radius: 24px; background: #D7F5E3; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.invite-banner:disabled { cursor: default; opacity: 0.55; }
.invite-plus { flex: none; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 22px; background: #fff; color: #17603C; font-size: 15px; font-weight: 800; }
.invite-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite-copy strong { font-size: 16px; line-height: 20px; }
.invite-copy small { font-size: 13px; line-height: 17px; color: #17603C; }
.invite-banner svg { flex: none; color: #17603C; }
.track-month { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; background: var(--card); }
.track-month .ten-bars i.on { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent-edge); }
.track-month p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 13px; }
.track-month strong { font-weight: 800; }
.track-month span { font-weight: 600; color: var(--muted); }
.package-lead { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; }
.swipe-hint { margin: 4px 0 0; color: var(--muted); font-size: 13px; line-height: 18px; text-align: center; }
#invite-open:disabled { opacity: 0.45; cursor: not-allowed; }
.invite-sheet, .package-sheet { align-items: stretch; text-align: left; }
.invite-sheet h1, .package-sheet h1, .invite-sheet .kicker, .package-sheet .kicker { text-align: left; padding-right: 36px; }
.invite-sheet p, .package-sheet p { max-width: none; text-align: left; }
.rules { border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.rules button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.rules button svg { flex: none; }
:root[data-input="pointer"] .rules button svg { transition: transform var(--motion-ui) var(--ease-in-out); }
.rules.open button svg { transform: rotate(180deg); }
.rules p { margin: 0; padding: 0 14px 12px; font-size: 13px; line-height: 18px; }
.invite-link { display: grid; gap: 4px; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; background: var(--bg); }
.invite-link small { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.invite-link b { font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.invite-empty { margin: 0; padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; line-height: 20px; text-align: center; }
.invite-person { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.invite-person i { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 999px; background: var(--accent); color: var(--ink); font-style: normal; font-weight: 800; }
.invite-person i.pending { background: var(--pause-bg); color: var(--pause); }
.invite-person b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.invite-person span { font-size: 12px; font-weight: 800; color: var(--muted); }
.invite-person span.is-missed { font-size: 11px; }
.ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.ladder button { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: calc(108px + var(--step) * 36px); padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.ladder button[aria-checked="true"] { border-color: var(--accent-edge); background: var(--accent); }
.ladder .best { margin-bottom: auto; font-size: 10px; line-height: 12px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.ladder .n { font-size: 28px; line-height: 32px; font-weight: 800; }
.ladder .noun, .ladder .per { font-size: 12px; font-weight: 700; color: var(--muted); }
.ladder button[aria-checked="true"] .noun, .ladder button[aria-checked="true"] .per { color: var(--ink); }
.ladder .price { font-size: 16px; font-weight: 800; }
.ladder .save { font-size: 12px; font-weight: 800; }
.package-note { font-size: 13px; line-height: 18px; color: var(--muted); }
#package-add:disabled { opacity: 0.55; cursor: wait; }

[hidden] { display: none !important; }
.sheet-root[data-motion-closing] { display: flex !important; z-index: 7; pointer-events: none; }
.profile-route[data-motion-closing] { display: block !important; z-index: 7; pointer-events: none; }
[data-motion-folding][hidden] { display: var(--motion-display) !important; }
.motion-disclosure { overflow: hidden; display: flow-root; flex: none; min-width: 0; }
.motion-photo { position: fixed; z-index: 6; object-fit: contain; transform-origin: 0 0; pointer-events: none; }
.motion-photo-target { opacity: 0 !important; transition: none !important; }
.motion-photo-frame { background: var(--card) !important; }
.motion-photo-settled { transition: none !important; }
.motion-success-ring { position: absolute; inset: -6px; border: 2px solid #1f9d5c; border-radius: 50%; pointer-events: none; }
:root[data-input="pointer"] .settings-row[aria-expanded] > svg:last-child,
:root[data-input="pointer"] .rules-toggle::after { transition: transform var(--motion-ui) var(--ease-in-out); }
.settings-row[aria-expanded="true"] > svg:last-child { transform: rotate(90deg); }
:root[data-input="pointer"] .setup-tile .tile-check > svg { transition: opacity var(--motion-fade) ease, transform var(--motion-fade) var(--ease-out); }
.setup-tile .tile-check > svg { transform: scale(.8); }
.setup-tile[aria-pressed="true"] .tile-check > svg { transform: scale(1); }

button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (max-width: 360px) {
  .home-header h1 { font-size: 26px; line-height: 31px; }
  .home-feature { min-height: 204px; padding: 20px 16px; }
  .home-feature h2 { font-size: 22px; line-height: 25px; }
  .home-feature p { font-size: 11px; line-height: 16px; }
  .home-feature-art { right: -6px; bottom: -10px; }
  #stores .store { font-size: 11px; }
  .product-ticket .ticket-main { padding-left: 12px; padding-right: 12px; }
  .product-ticket .ticket-side { padding-left: 12px; padding-right: 10px; gap: 4px; }
  .product-ticket .ticket-side strong { font-size: 18px; }
  .product-ticket .ticket-side .promo-pill { padding: 0 6px; font-size: 10px; }
  .tracking-ticket .ticket-main { gap: 12px; padding: 10px; }
  .tracking-ticket .ticket-thumb { width: 112px; height: 132px; }
  .tracking-ticket .ticket-name { font-size: 14px; line-height: 19px; }
  .ticket-current > strong.long-price { font-size: 19px; }
  .product-ticket .ticket-side strong.long-price { font-size: 16px; }
  .setup-head { padding: 12px 14px 16px; }
  .setup-toolbar h1 { font-size: 17px; }
  .setup-product { gap: 12px; }
  .setup-product > .thumb { width: 76px; height: 96px; }
  .setup-product-copy h2 { font-size: 15px; line-height: 20px; }
  .tracking-product-main { gap: 12px; padding: 14px; }
  .tracking-product .thumb { width: 112px; height: 136px; }
  .tracking-product .ticket-name { font-size: 18px; line-height: 23px; }
  .mode-card { padding: 8px; }
  .setup-tile { font-size: 12px; }
  .track-month p { flex-wrap: wrap; gap: 4px; }
  .offer .ticket-main { padding-left: 12px; padding-right: 10px; }
  .offer .offer-head { gap: 8px; }
  .offer .mark { width: 30px; height: 30px; border-radius: 10px; }
  .offer .info { width: 34px; height: 34px; }
  .offer .badge-line { padding: 0 6px; font-size: 10px; }
  .offer .card-add { padding: 0 8px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :root[data-input="pointer"] .cat,
  :root[data-input="pointer"] #stores .store,
  :root[data-input="pointer"] .home-feature-action { transition: opacity var(--motion-reduced) var(--ease-out) !important; }
  :root[data-input="pointer"] .cat:active,
  :root[data-input="pointer"] #stores .store:active,
  :root[data-input="pointer"] .home-feature:active .home-feature-action { transform: none; opacity: .85; }
  :root[data-input="pointer"] :is(.action, .quiet, .back, .tile-btn, .setup-tile, .mode-card, .quantity-option, .profile-gear, .mini-profile-service-card, .messenger, .tracking-add, .ticket-watch) { transition: opacity var(--motion-reduced) var(--ease-out) !important; }
  :root[data-input="pointer"] :is(.action, .quiet, .back, .tile-btn, .setup-tile, .mode-card, .quantity-option, .profile-gear, .mini-profile-service-card, .messenger, .tracking-add, .ticket-watch):active { transform: none; opacity: .85; }
  :root[data-input="pointer"] :is(.product-open, .tracking-product, .past-row, .product-hero .photo, .swipe-row) { transition: opacity var(--motion-reduced) var(--ease-out) !important; }
  :root[data-input="pointer"] :is(.product-open, .tracking-product, .past-row, .product-hero .photo):active,
  :root[data-input="pointer"] .swipe-row:has(.tracking-ticket:active) { scale: 1; opacity: .88; }
  .tabs::before, #track-filters::before { display: none; }
  .tabs button, .track-filter { isolation: isolate; }
  .tabs button::before, .track-filter::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: var(--accent); opacity: 0; pointer-events: none; }
  .tabs button[aria-current="page"]::before { opacity: 1; }
  .track-filter[aria-pressed="true"]::before { opacity: 1; }
  :root[data-input="pointer"] .tabs button::before, :root[data-input="pointer"] .track-filter::before { transition: opacity 160ms ease !important; }
}

@media (forced-colors: active) {
  .searchbar:focus-within { outline: 2px solid Highlight; outline-offset: 2px; }
}