:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #151412;
  --surface-2: #1b1a17;
  --surface-3: #23211d;
  --border: #2e2c27;
  --border-strong: #403d35;
  --text: #f0ede6;
  --text-muted: #a8a294;
  --text-subtle: #7a7568;
  --accent: #d9a13c;
  --accent-hover: #e5b45b;
  --accent-contrast: #1a1206;
  --accent-weak: rgba(217, 161, 60, 0.14);
  --accent-weak-border: rgba(217, 161, 60, 0.40);
  --accent-on-light: #8a6414;
  --danger: #e97a6b;
  --danger-weak: rgba(233, 122, 107, 0.16);
  --danger-border: rgba(233, 122, 107, 0.40);
  --warn: #dda54a;
  --warn-weak: rgba(221, 165, 74, 0.16);
  --warn-border: rgba(221, 165, 74, 0.36);
  --success: #4cd964;
  --ring: rgba(217, 161, 60, 0.42);
  --glow-strong: color-mix(in srgb, var(--accent) 15%, transparent);
  --glow-soft: color-mix(in srgb, var(--accent) 8%, transparent);
  --sk-base: var(--surface-3);
  --sk-shine: color-mix(in srgb, var(--surface-3) 78%, var(--text-muted));
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.65);
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --pill: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
:root[data-theme=gilded] {
  --bg: #0a0703;
  --surface: #1e1509;
  --surface-2: #261b0d;
  --surface-3: #302312;
  --border: #453317;
  --border-strong: #5c451f;
  --text: #f7f1e1;
  --text-muted: #b3a480;
  --text-subtle: #857a5c;
  --accent: #f2c14e;
  --accent-hover: #f7cf6b;
  --accent-contrast: #241503;
  --accent-weak: rgba(242, 193, 78, 0.16);
  --accent-weak-border: rgba(242, 193, 78, 0.45);
  --accent-on-light: #96700f;
  --ring: rgba(242, 193, 78, 0.45)
}
:root[data-theme=felt] {
  --bg: #04120b;
  --surface: #123626;
  --surface-2: #16412e;
  --surface-3: #1c4f38;
  --border: #2a5c44;
  --border-strong: #3a7256;
  --text: #eef5ef;
  --text-muted: #a3c2b1;
  --text-subtle: #6f9483;
  --accent: #d9a13c;
  --accent-hover: #e5b45b;
  --accent-contrast: #071c12;
  --accent-weak: rgba(217, 161, 60, 0.16);
  --accent-weak-border: rgba(217, 161, 60, 0.42);
  --accent-on-light: #8a6414;
  --ring: rgba(217, 161, 60, 0.42)
}
:root[data-theme=neon] {
  --bg: #020610;
  --surface: #0a1322;
  --surface-2: #0e1a2e;
  --surface-3: #14233c;
  --border: #1e3350;
  --border-strong: #2c4a70;
  --text: #e6f1ff;
  --text-muted: #8aa3c2;
  --text-subtle: #5f7594;
  --accent: #22d3ee;
  --accent-hover: #4ae0f8;
  --accent-contrast: #032029;
  --accent-weak: rgba(34, 211, 238, 0.15);
  --accent-weak-border: rgba(34, 211, 238, 0.45);
  --accent-on-light: #0e7490;
  --ring: rgba(34, 211, 238, 0.50)
}
:root[data-theme=emerald] {
  --bg: #0c1311;
  --surface: #141d1a;
  --surface-2: #19231f;
  --surface-3: #202b27;
  --border: #27332e;
  --border-strong: #37453f;
  --text: #e9f0ed;
  --text-muted: #9db0a9;
  --text-subtle: #6f817b;
  --accent: #1cba90;
  --accent-hover: #29d2a4;
  --accent-contrast: #04130e;
  --accent-weak: rgba(31, 196, 152, 0.15);
  --accent-weak-border: rgba(31, 196, 152, 0.38);
  --accent-on-light: #0f8a6e;
  --ring: rgba(31, 196, 152, 0.42)
}
:root[data-theme=platinum] {
  --bg: #000000;
  --surface: #141416;
  --surface-2: #1a1a1d;
  --surface-3: #222226;
  --border: #2d2d33;
  --border-strong: #3f3f47;
  --text: #f2f2f4;
  --text-muted: #a6a6ad;
  --text-subtle: #77777e;
  --accent: #c9ccd4;
  --accent-hover: #dcdfe6;
  --accent-contrast: #101013;
  --accent-weak: rgba(201, 204, 212, 0.13);
  --accent-weak-border: rgba(201, 204, 212, 0.36);
  --accent-on-light: #565a64;
  --ring: rgba(201, 204, 212, 0.40)
}
:root[data-theme=sapphire] {
  --bg: #020308;
  --surface: #12151c;
  --surface-2: #171b23;
  --surface-3: #1f242e;
  --border: #2a303c;
  --border-strong: #3a4150;
  --text: #e9edf3;
  --text-muted: #9aa5b5;
  --text-subtle: #6e7889;
  --accent: #4f8fe0;
  --accent-hover: #6aa4ec;
  --accent-contrast: #061020;
  --accent-weak: rgba(79, 143, 224, 0.15);
  --accent-weak-border: rgba(79, 143, 224, 0.40);
  --accent-on-light: #2563a8;
  --ring: rgba(79, 143, 224, 0.42)
}
:root[data-theme=ruby] {
  --bg: #060203;
  --surface: #191114;
  --surface-2: #20161a;
  --surface-3: #291d21;
  --border: #362a2e;
  --border-strong: #48383d;
  --text: #f2eaec;
  --text-muted: #ab9aa0;
  --text-subtle: #7d6f74;
  --accent: #d34e6a;
  --accent-hover: #e0637d;
  --accent-contrast: #1c060c;
  --accent-weak: rgba(211, 78, 106, 0.15);
  --accent-weak-border: rgba(211, 78, 106, 0.40);
  --accent-on-light: #a83248;
  --ring: rgba(211, 78, 106, 0.42)
}
:root[data-theme=amethyst] {
  --bg: #040207;
  --surface: #16121c;
  --surface-2: #1c1723;
  --surface-3: #251e2e;
  --border: #322a3c;
  --border-strong: #443a50;
  --text: #eee9f3;
  --text-muted: #a49bb2;
  --text-subtle: #766e85;
  --accent: #9b6fe0;
  --accent-hover: #ad85ea;
  --accent-contrast: #150a24;
  --accent-weak: rgba(155, 111, 224, 0.16);
  --accent-weak-border: rgba(155, 111, 224, 0.40);
  --accent-on-light: #6d46b3;
  --ring: rgba(155, 111, 224, 0.42)
}
* {
  box-sizing: border-box
}
body,
html {
  overflow-wrap: anywhere;
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  overscroll-behavior: none
}
html {
  background: radial-gradient(720px 460px at 88% -12%,var(--glow-strong),transparent 62%),radial-gradient(640px 520px at -18% 108%,var(--glow-soft),transparent 60%),var(--bg)
}
body {
  background: 0 0
}
:root {
  --suits: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath transform='translate(8 10) scale(1.0833)' d='M12 2.2C12 2.2 4.6 8.6 4.6 13.2a4 4 0 0 0 6.4 3.2c-.2 2.3-1.2 4.1-2.6 5.4h7.2c-1.4-1.3-2.4-3.1-2.6-5.4a4 4 0 0 0 6.4-3.2C19.4 8.6 12 2.2 12 2.2Z'/%3E%3Cpath transform='translate(92 38)' d='M12 21.2S2.8 15 2.8 9.4A4.6 4.6 0 0 1 12 6.9a4.6 4.6 0 0 1 9.2 2.5c0 5.6-9.2 11.8-9.2 11.8Z'/%3E%3Cpath transform='translate(34 92) scale(1.0417)' d='M12 2.4a3.7 3.7 0 0 1 3 5.9 3.7 3.7 0 1 1 1.7 6.9 3.7 3.7 0 0 1-3.5-2.4c.1 2.7 1.1 4.8 2.5 6.4H8.3c1.4-1.6 2.4-3.7 2.5-6.4a3.7 3.7 0 0 1-3.5 2.4A3.7 3.7 0 1 1 9 8.3a3.7 3.7 0 0 1 3-5.9Z'/%3E%3Cpath transform='translate(116 116) scale(.9167)' d='M12 2.2 19.4 12 12 21.8 4.6 12Z'/%3E%3C/svg%3E")
}
#statusPanel.boot-cover::after,
#statusPanel.boot-cover::before,
body::after,
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  -webkit-mask-image: var(--suits);
  mask-image: var(--suits);
  -webkit-mask-size: 160px 160px;
  mask-size: 160px 160px;
  pointer-events: none
}
#statusPanel.boot-cover::before,
body::before {
  opacity: .066
}
#statusPanel.boot-cover::after,
body::after {
  -webkit-mask-size: 232px 232px;
  mask-size: 232px 232px;
  -webkit-mask-position: 41px 67px;
  mask-position: 41px 67px;
  opacity: .036
}
body {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  -webkit-tap-highlight-color: transparent
}
button,
input {
  font: inherit;
  color: inherit
}
h1,
h2,
h3,
p {
  margin: 0
}
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 640px;
  margin: 0 auto
}
.appbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) 12px calc(var(--safe-left) + 16px);
  background: 0 0;
  border-bottom: 1px solid var(--border);
  -webkit-user-select: none;
  user-select: none
}
.appbar-title {
  flex: 1;
  min-width: 0
}
.eyebrow {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em
}
.appbar h1 {
  font-size: 20px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.appbar-profile {
  display: block;
  max-width: 100%;
  min-height: 40px;
  padding: 4px 0;
  border: 0;
  border-radius: 6px;
  background: 0 0;
  color: inherit;
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer
}
.appbar-profile:disabled {
  cursor: default
}
.appbar-profile:enabled:hover {
  color: var(--accent-hover)
}
.appbar-profile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px
}
.appbar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px
}
.appbar-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap
}
.appbar-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.icon-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .12s ease,background .12s ease
}
.icon-button svg {
  width: 18px;
  height: 18px
}
.icon-button:active {
  transform: scale(.9);
  background: var(--surface-3)
}
.icon-button.spinning svg {
  animation: spin .8s linear infinite
}
.icon-button.active {
  border-color: var(--accent);
  background: var(--accent-weak);
  color: var(--accent-hover)
}
.icon-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding: 16px calc(var(--safe-right) + 16px) 24px calc(var(--safe-left) + 16px)
}
.pull-refresh {
  position: relative;
  z-index: 6;
  height: 0;
  pointer-events: none
}
.pull-refresh-chip {
  position: absolute;
  top: -58px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 1px solid var(--border-strong);
  border-radius: var(--pill);
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: var(--shadow-md);
  opacity: var(--pull-alpha, 0);
  transform: translateY(var(--pull,0));
  transition: transform .18s cubic-bezier(.2, .7, .2, 1),opacity .18s cubic-bezier(.2, .7, .2, 1),color .12s ease,border-color .12s ease
}
.pull-refresh[data-state=armed] .pull-refresh-chip,
.pull-refresh[data-state=pulling] .pull-refresh-chip {
  transition: color .12s ease,border-color .12s ease
}
.pull-refresh-chip svg {
  width: 18px;
  height: 18px;
  transform: rotate(var(--pull-turn,0deg))
}
.pull-refresh[data-state=armed] .pull-refresh-chip,
.pull-refresh[data-state=refreshing] .pull-refresh-chip {
  border-color: var(--accent-weak-border);
  color: var(--accent)
}
.pull-refresh[data-state=refreshing] .pull-refresh-chip svg {
  animation: spin .8s linear infinite
}
@media (prefers-reduced-motion:reduce) {
  .pull-refresh-chip {
    transition: none
  }
  .pull-refresh[data-state=refreshing] .pull-refresh-chip svg {
    animation: none
  }
}
.back-peek {
  position: fixed;
  z-index: -1;
  overflow: hidden;
  pointer-events: none
}
.back-peek > .scroll {
  height: 100%;
  overflow: hidden
}
.back-peek-dim {
  position: absolute;
  inset: 0;
  background: #000
}
.back-peek-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 18px;
  background: linear-gradient(to right,transparent,rgba(0,0,0,.28))
}
.view {
  display: grid;
  gap: 14px;
  align-content: start
}
.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px
}
.view-head h2 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-muted)
}
.subview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 2px
}
.subview-head h2 {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 800
}
.back-button {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -6px;
  border: 0;
  padding: 0;
  border-radius: var(--pill);
  background: 0 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: transform .12s ease,background .12s ease
}
.back-button svg {
  width: 22px;
  height: 22px
}
.back-button:active {
  transform: scale(.9);
  background: var(--surface-2)
}
.stack {
  display: grid;
  gap: 12px
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  clip-path: inset(50%);
  white-space: nowrap
}
.hidden {
  display: none!important
}
.tabbar {
  flex: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  background: 0 0;
  border-top: 1px solid var(--border);
  padding: 6px calc(var(--safe-right) + 6px) calc(var(--safe-bottom) + 6px) calc(var(--safe-left) + 6px);
  -webkit-user-select: none;
  user-select: none
}
.tab {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 50px;
  padding: 7px 0 5px;
  border: 0;
  border-radius: var(--radius-sm);
  background: 0 0;
  color: var(--text-subtle);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: color .12s ease,transform .12s ease
}
.banner-carousel {
  position: relative
}
.banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md)
}
.banner-track::-webkit-scrollbar {
  display: none
}
.banner-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 2/1;
  background: var(--surface-2)
}
.banner-slide.linked {
  cursor: pointer
}
.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none
}
.banner-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none
}
.banner-dots:empty {
  display: none
}
.banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  box-shadow: 0 0 4px rgba(0,0,0,.35);
  transition: background .15s ease,transform .15s ease
}
.banner-dot.on {
  background: #fff;
  transform: scale(1.25)
}
.store-body {
  display: block
}
.store-map-wrap {
  position: sticky;
  top: -16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: clamp(180px,34vh,280px);
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-md)
}
.store-map {
  flex: 1;
  min-height: 0;
  width: 100%
}
.store-map-wrap.collapsed {
  height: auto
}
.store-map-wrap.collapsed .map-fab,
.store-map-wrap.collapsed .store-map {
  display: none
}
.map-toggle {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: none;
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer
}
.store-map-wrap.collapsed .map-toggle {
  border-top: none
}
.map-toggle:active {
  background: var(--surface-3)
}
.map-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform .18s ease
}
.store-map-wrap.collapsed .map-toggle-icon {
  transform: rotate(180deg)
}
.map-fab {
  position: absolute;
  right: 10px;
  bottom: 44px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow-md)
}
.map-fab svg {
  width: 19px;
  height: 19px
}
.map-fab:active {
  background: var(--surface-3)
}
.map-fab.locating {
  color: var(--accent)
}
.map-fab[disabled] {
  opacity: .6
}
.store-no {
  display: none
}
.map-on .store-no {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 12px;
  font-weight: 700;
  vertical-align: 2px
}
.store-card {
  transition: border-color .12s ease,box-shadow .12s ease
}
.map-on .store-card {
  cursor: pointer
}
.store-card.active {
  border-color: var(--accent-weak-border);
  box-shadow: 0 0 0 1px var(--accent-weak-border),var(--shadow-sm)
}
.store-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px
}
.store-actions .button {
  flex: 1;
  display: inline-grid;
  place-items: center;
  text-decoration: none
}
.notification-card p {
  white-space: pre-wrap;
  word-break: break-word
}
.notification-card.unread {
  border-left: 3px solid var(--accent)
}
.notification-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px
}
.notification-kind {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted)
}
.notification-kind svg {
  width: 14px;
  height: 14px
}
.notification-card .notification-store {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent)
}
.chip-row.notification-filters {
  gap: 5px;
  margin: 12px 0
}
.chip.notification-chip {
  position: relative;
  padding: 7px 9px;
  font-size: 13px
}
.notification-chip-dot {
  position: absolute;
  top: 3px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent)
}
.notification-more {
  margin-top: 12px
}
.notification-mute {
  display: block;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--text-subtle);
  font: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: underline;
  cursor: pointer
}
.notification-mute:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px
}
.ledger-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none
}
.ledger-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border)
}
.ledger-row:first-child {
  border-top: 0
}
.ledger-main {
  display: grid;
  gap: 2px;
  min-width: 0
}
.ledger-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 600
}
.ledger-detail {
  color: var(--text-muted);
  font-size: 12px;
  overflow-wrap: anywhere
}
.ledger-after,
.ledger-time {
  color: var(--text-subtle);
  font-size: 11px
}
.ledger-side {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 2px;
  text-align: right;
  font-variant-numeric: tabular-nums
}
.ledger-amount {
  color: var(--success);
  font-size: 15px;
  font-weight: 700
}
.ledger-amount.minus {
  color: var(--text)
}
.ledger-empty {
  padding: 12px 0;
  color: var(--text-muted);
  font-size: 13px
}
.ledger-more {
  margin-top: 8px
}
.notify-switches {
  display: grid
}
.notify-switch + .notify-switch {
  border-top: 1px solid var(--border)
}
.notify-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 8px
}
.notify-switch-label svg {
  width: 18px;
  height: 18px;
  color: var(--text-muted)
}
.notify-settings-hint {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  background: var(--warn-weak);
  font-size: 13px
}
.notify-settings-hint p {
  margin: 0
}
.notify-settings-note {
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 12px
}
.notify-muted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0
}
.notify-muted-row span {
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere
}
.notify-muted-row .button {
  flex: none;
  min-height: 36px
}
.notification-card .meta {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-subtle)
}
.notification-go {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  min-height: 36px;
  padding: 0 12px 0 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}
.notification-go svg {
  width: 15px;
  height: 15px
}
.notification-go:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px
}
.invite-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius-sm);
  background: var(--accent-weak);
  color: var(--text);
  font-size: 14px;
  font-weight: 700
}
.invite-banner svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent)
}
.invite-phrases {
  display: grid;
  gap: 8px
}
.invite-phrase {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 15px;
  cursor: pointer
}
.invite-phrase:has(input:checked) {
  border-color: var(--accent-weak-border);
  background: var(--accent-weak)
}
.invite-phrase input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent)
}
.invite-phrase input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px
}
.invite-preview {
  display: grid;
  gap: 6px
}
.invite-preview-label {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700
}
.invite-preview-chat {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2)
}
.invite-preview-text {
  max-width: 85%;
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px 16px 16px 16px;
  background: #fff;
  color: #111;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}
.invite-preview-url {
  color: #2563eb;
  text-decoration: underline
}
.link-preview {
  width: min(260px,100%);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: #111
}
.link-preview-image {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f1f1f1;
  object-fit: contain
}
.link-preview-body {
  display: grid;
  gap: 4px;
  padding: 12px 14px 14px
}
.link-preview-title {
  font-size: 15px;
  line-height: 1.4;
  overflow-wrap: anywhere
}
.link-preview-desc {
  color: #4b5563;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere
}
.link-preview-host {
  color: #6b7280;
  font-size: 12px
}
.flex-preview {
  width: min(300px,100%);
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  color: #111;
  text-align: left
}
.flex-preview-kilo {
  width: min(260px,100%)
}
.flex-preview-body {
  padding: 20px
}
.flex-preview-footer {
  padding: 10px
}
.flex-preview-box {
  display: flex;
  flex-direction: column;
  min-width: 0
}
.flex-preview-box.is-horizontal {
  flex-direction: row
}
.flex-preview-box.is-baseline {
  flex-direction: row;
  align-items: baseline
}
.flex-preview-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis
}
.flex-preview-text.is-wrap {
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}
.flex-preview-separator {
  flex: none;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #e3e3e3
}
.flex-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.flex-preview-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700
}
.flex-preview-button.is-primary {
  background: #06c755;
  color: #fff
}
.flex-preview-button.is-secondary {
  background: #e7e9ee;
  color: #111
}
.flex-preview-button.is-link {
  color: #42659a
}
.invite-note {
  margin: 0;
  padding: 8px 10px;
  border: 1px dashed var(--accent-weak-border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 12px
}
.tab svg {
  width: 22px;
  height: 22px
}
.tab:active {
  transform: scale(.94)
}
.tab.active {
  color: var(--accent-hover)
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow-sm)
}
.hero {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md)
}
.hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.hero-no {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em
}
.hero-name {
  margin-top: 3px;
  font-size: 21px;
  line-height: 1.2
}
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent-hover);
  font-size: 17px;
  font-weight: 800
}
.badge {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent-hover);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  justify-self: start
}
.badge.warn {
  background: var(--warn-weak);
  color: var(--warn)
}
.badge.muted {
  background: var(--surface-3);
  color: var(--text-muted)
}
.notice {
  border: 1px solid var(--warn-border);
  background: var(--warn-weak);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--warn);
  font-size: 13px;
  line-height: 1.55
}
.notice.danger {
  border-color: var(--danger-border);
  background: var(--danger-weak);
  color: var(--danger)
}
.notice.sp-suspended {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1.5px solid var(--danger);
  background: var(--danger-weak);
  color: var(--text)
}
.sp-suspended svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--danger)
}
.sp-suspended b {
  display: block;
  margin-bottom: 2px;
  color: var(--danger);
  font-size: 14px
}
.meta {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5
}
.empty {
  padding: 28px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-subtle);
  font-size: 14px;
  text-align: center
}
.empty-retry {
  margin-top: 14px
}
#statusPanel {
  min-height: 100%;
  place-items: center;
  align-content: stretch;
  padding-bottom: calc(var(--safe-top) + 41px)
}
#statusPanel.boot-cover {
  position: fixed;
  inset: 0;
  z-index: 85;
  min-height: 0;
  padding: 0;
  background: radial-gradient(720px 460px at 88% -12%,var(--glow-strong),transparent 62%),radial-gradient(640px 520px at -18% 108%,var(--glow-soft),transparent 60%),var(--bg);
  transition: opacity .22s cubic-bezier(.2, .7, .2, 1)
}
#statusPanel.boot-cover-out {
  opacity: 0;
  pointer-events: none
}
body:has(#statusPanel.boot-cover) .appbar,
body:has(#statusPanel.boot-cover) .orb-dock {
  visibility: hidden;
  opacity: 0
}
body:has(#statusPanel.boot-cover-out) .appbar,
body:has(#statusPanel.boot-cover-out) .orb-dock {
  visibility: visible;
  opacity: 1;
  transition: opacity .22s cubic-bezier(.2, .7, .2, 1)
}
.tour {
  position: fixed;
  inset: 0;
  z-index: 80
}
.tour.hidden {
  display: none
}
.tour-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: rgba(0,0,0,0.78)
}
.tour-ring {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-weak);
  pointer-events: none
}
.tour-ring.hidden {
  display: none
}
.tour-card {
  position: absolute;
  left: calc(var(--safe-left) + 16px);
  right: calc(var(--safe-right) + 16px);
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 18px 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 18px;
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-md)
}
.tour-mark {
  display: none
}
.tour-step {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums
}
.tour-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.35
}
.tour-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-muted)
}
.tour-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px
}
.tour-actions .button {
  min-width: 92px
}
.tour-skip {
  margin-right: auto;
  padding: 8px 4px;
  border: 0;
  background: 0 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer
}
.tour-actions .hidden {
  display: none
}
.tour.is-welcome .tour-shade {
  fill: var(--bg)
}
.tour.is-welcome .tour-card {
  top: 50%;
  transform: translateY(-50%);
  justify-items: center;
  gap: 10px;
  padding: 28px 22px 20px;
  text-align: center;
  border: 0;
  background: 0 0;
  box-shadow: none
}
.tour.is-welcome .tour-mark {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 6px
}
.tour.is-welcome .tour-title {
  font-size: 24px
}
.tour.is-welcome .tour-text {
  max-width: 22em
}
.tour.is-welcome .tour-actions {
  width: 100%;
  flex-direction: column-reverse;
  align-items: stretch;
  margin-top: 14px
}
.tour.is-welcome .tour-skip {
  margin: 0 auto
}
@media (prefers-reduced-motion:no-preference) {
  .tour-ring {
    transition: left .18s cubic-bezier(.2, .7, .2, 1),top .18s cubic-bezier(.2, .7, .2, 1),width .18s cubic-bezier(.2, .7, .2, 1),height .18s cubic-bezier(.2, .7, .2, 1)
  }
}
.entry-ad {
  position: fixed;
  inset: 0;
  z-index: 66;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px) calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);
  background: rgba(0,0,0,.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .24s cubic-bezier(.2, .7, .2, 1)
}
.entry-ad.is-in {
  opacity: 1
}
.entry-ad-body {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(420px,100%);
  transform: translateY(14px) scale(.98);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1)
}
.entry-ad.is-in .entry-ad-body {
  transform: none
}
.entry-ad-card {
  display: block;
  width: min(100%,calc((100vh - var(--safe-top) - var(--safe-bottom) - 120px) * .8));
  width: min(100%,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 120px) * .8));
  aspect-ratio: 4/5;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.9);
  cursor: pointer
}
.entry-ad-card:disabled {
  cursor: default
}
.entry-ad-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain
}
.sp-popup-card {
  width: min(100%,calc((100vh - var(--safe-top) - var(--safe-bottom) - 140px) * .8));
  width: min(100%,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 140px) * .8));
  cursor: default
}
.sp-popup-track {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none
}
.sp-popup-track::-webkit-scrollbar {
  display: none
}
.sp-popup-slide {
  flex: 0 0 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: 0 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  cursor: pointer
}
.sp-popup-slide:disabled {
  cursor: default
}
.sp-popup-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none
}
.sp-popup-slide:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px
}
.sp-popup-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: -4px
}
.sp-popup-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--pill);
  background: rgba(255,255,255,.35);
  transition: width .18s cubic-bezier(.2, .7, .2, 1),background-color .18s cubic-bezier(.2, .7, .2, 1)
}
.sp-popup-dot.on {
  width: 18px;
  background: var(--accent)
}
.entry-ad-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%
}
.entry-ad-snooze {
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: 0 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
.entry-ad-close {
  min-width: 128px;
  min-height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--pill);
  background: var(--text);
  color: var(--bg);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer
}
.entry-ad-card:focus-visible,
.entry-ad-close:focus-visible,
.entry-ad-snooze:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}
@media (prefers-reduced-motion:reduce) {
  #statusPanel.boot-cover,
  .entry-ad,
  .entry-ad-body {
    transition: none
  }
  body:has(#statusPanel.boot-cover-out) .appbar,
  body:has(#statusPanel.boot-cover-out) .orb-dock {
    transition: none
  }
}
.status-block {
  position: relative;
  display: grid;
  justify-items: center
}
.status-body {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  display: grid;
  gap: 14px;
  justify-items: center;
  width: min(320px,100vw - 48px);
  text-align: center;
  transform: translateX(-50%)
}
.status-text {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.6
}
.brand-chip {
  --brand-mark: url("data:image/png;base64,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");
  --coin-face: 34px;
  --coin-edge: 8px;
  position: relative;
  width: 88px;
  height: 88px
}
.brand-chip-flat {
  position: absolute;
  inset: 0;
  background: var(--brand-mark) center/100% 100% no-repeat
}
.brand-chip-stack {
  position: absolute;
  inset: 0;
  display: none
}
.brand-chip-coin {
  position: absolute;
  left: 2px;
  width: 84px;
  height: calc(var(--coin-face) + var(--coin-edge));
  opacity: 0
}
.brand-chip-coin::before {
  content: "";
  position: absolute;
  inset: 1px 0.5px 0;
  border-radius: 50%/calc(var(--coin-face)/ 2);
  background: linear-gradient(90deg,transparent 5%,#17140f 5% 9%,transparent 9% 46%,#17140f 46% 54%,transparent 54% 91%,#17140f 91% 95%,transparent 95%),linear-gradient(90deg,#6a4810,#c48f30 14%,#e8bd69 40%,#d9a13b 62%,#a87422 86%,#5e400e);
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,.6)
}
.brand-chip-coin::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--coin-face);
  background: var(--brand-mark) center/100% 100% no-repeat
}
.brand-chip-coin:first-child {
  top: 36px
}
.brand-chip-coin:nth-child(2) {
  top: 28px
}
.brand-chip-coin:nth-child(3) {
  top: 20px
}
.brand-chip-coin:nth-child(4) {
  top: 12px
}
.is-busy .brand-chip-flat {
  display: none
}
.is-busy .brand-chip-stack {
  display: block;
  animation: brandChipFadeOut 2.4s linear infinite
}
.is-busy .brand-chip-coin:first-child {
  animation: brandChipDrop1 2.4s linear infinite
}
.is-busy .brand-chip-coin:nth-child(2) {
  animation: brandChipDrop2 2.4s linear infinite
}
.is-busy .brand-chip-coin:nth-child(3) {
  animation: brandChipDrop3 2.4s linear infinite
}
.is-busy .brand-chip-coin:nth-child(4) {
  animation: brandChipDrop4 2.4s linear infinite
}
@keyframes brandChipFadeOut {
  0%,
  80% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4,0,0.8,0.6)
  }
  100%,
  92% {
    opacity: 0
  }
}
@keyframes brandChipDrop1 {
  0%,
  4% {
    opacity: 0;
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.55,0,0.9,0.5)
  }
  7% {
    opacity: 1
  }
  11.5% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2,0.7,0.2,1)
  }
  14% {
    transform: translateY(-3px);
    animation-timing-function: cubic-bezier(0.5,0,0.8,0.5)
  }
  100%,
  16.5% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes brandChipDrop2 {
  0%,
  19% {
    opacity: 0;
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.55,0,0.9,0.5)
  }
  22% {
    opacity: 1
  }
  26.5% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2,0.7,0.2,1)
  }
  29% {
    transform: translateY(-3px);
    animation-timing-function: cubic-bezier(0.5,0,0.8,0.5)
  }
  100%,
  31.5% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes brandChipDrop3 {
  0%,
  34% {
    opacity: 0;
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.55,0,0.9,0.5)
  }
  37% {
    opacity: 1
  }
  41.5% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2,0.7,0.2,1)
  }
  44% {
    transform: translateY(-3px);
    animation-timing-function: cubic-bezier(0.5,0,0.8,0.5)
  }
  100%,
  46.5% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes brandChipDrop4 {
  0%,
  49% {
    opacity: 0;
    transform: translateY(-30px);
    animation-timing-function: cubic-bezier(0.55,0,0.9,0.5)
  }
  52% {
    opacity: 1
  }
  56.5% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.2,0.7,0.2,1)
  }
  59% {
    transform: translateY(-3px);
    animation-timing-function: cubic-bezier(0.5,0,0.8,0.5)
  }
  100%,
  61.5% {
    opacity: 1;
    transform: translateY(0)
  }
}
@media (prefers-reduced-motion:reduce) {
  .is-busy .brand-chip-flat {
    display: block
  }
  .is-busy .brand-chip-stack {
    display: none
  }
}
.t-card {
  display: grid;
  gap: 10px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm)
}
.t-card.mine {
  border-color: var(--accent-weak-border)
}
.t-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.t-tag.promo {
  background: var(--warn-weak);
  color: var(--warn);
  font-weight: 800
}
.t-promo-note {
  display: block;
  margin-top: 2px;
  color: var(--warn);
  font-size: 12px;
  font-weight: 700
}
.t-tag {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0 9px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap
}
.t-tag.on {
  background: var(--accent-weak);
  color: var(--accent-hover)
}
.t-tag.open {
  background: var(--accent-weak);
  color: var(--accent-hover)
}
.t-tag.closed::before,
.t-tag.open::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor
}
.t-tag.closed {
  background: var(--surface-3);
  color: var(--text-subtle)
}
.t-tag.live {
  background: rgba(53,199,89,.16);
  color: #4cd964
}
.t-detail.t-hours-note {
  color: var(--warn)
}
.store-desc {
  margin: 6px 0 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-line;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}
.t-name {
  font-size: 17px;
  line-height: 1.3
}
.t-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}
.t-detail {
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.55
}
.t-description {
  margin: 6px 0 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2,rgba(255,255,255,.04));
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre-line
}
.t-fill {
  display: flex;
  align-items: center;
  gap: 10px
}
.t-bar {
  flex: 1;
  height: 5px;
  border-radius: var(--pill);
  background: var(--surface-3);
  overflow: hidden
}
.t-bar > span {
  display: block;
  height: 100%;
  border-radius: var(--pill);
  background: var(--accent)
}
.t-count {
  flex: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700
}
.t-actions {
  display: grid;
  gap: 8px;
  margin-top: 2px
}
.t-roster > summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  list-style: none
}
.t-roster > summary::after {
  content: " ▾"
}
.t-roster[open] > summary::after {
  content: " ▴"
}
.t-roster > summary::-webkit-details-marker {
  display: none
}
.r-list {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none
}
.r-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px
}
.r-name {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.r-tag {
  flex: none;
  padding: 2px 8px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700
}
.r-tag.on {
  background: var(--accent-weak);
  color: var(--accent-hover)
}
.result-summary {
  display: grid;
  gap: 10px
}
.r-stats {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px
}
.r-stat {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius)
}
.r-stat-label {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 700
}
.r-stat-value {
  font-size: 18px;
  font-weight: 800
}
.r-card {
  display: grid;
  gap: 9px;
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm)
}
.r-prize {
  font-size: 15px;
  font-weight: 800;
  color: var(--accent-hover)
}
.r-prize.pending {
  color: var(--warn)
}
.coupon-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.coupon-card.available {
  border-color: var(--accent-weak-border);
  border-style: solid;
  background: var(--surface)
}
.coupon-card h3 {
  margin: 3px 0;
  font-size: 15px
}
.coupon-card p {
  color: var(--text-subtle);
  font-size: 12px
}
.coupon-limit {
  margin-top: 3px;
  font-weight: 600
}
.coupon-value {
  color: var(--text-muted);
  font-size: 19px;
  font-weight: 800
}
.coupon-card.available .coupon-value {
  color: var(--accent-hover)
}
.loyalty-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md)
}
.loyalty-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.loyalty-points {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em
}
.loyalty-card p {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5
}
.referral-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border,rgba(255,255,255,.15))
}
.referral-head {
  font-weight: 700;
  margin-bottom: 8px
}
.referral-code {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  background: var(--surface-2,rgba(255,255,255,.06));
  border: 1px solid var(--border,rgba(255,255,255,.15));
  border-radius: 10px;
  cursor: pointer
}
.loyalty-card p.referral-progress {
  margin-top: 4px;
  font-weight: 700
}
.loyalty-card p.loyalty-perk {
  margin-top: 4px;
  color: var(--accent,#35d07f);
  font-weight: 700
}
.loyalty-card p.loyalty-expiry {
  margin-top: 4px;
  color: var(--warning,#e0a03a);
  font-weight: 700
}
.qr-screen {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: calc(14px + var(--safe-top)) calc(18px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(18px + var(--safe-left));
  background: #fff;
  color: #16211e
}
.qr-screen.hidden {
  display: none
}
.qr-screen[data-swipe-close]::before {
  content: "";
  position: absolute;
  top: calc(5px + var(--safe-top));
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: #d4dcd9;
  pointer-events: none
}
.qr-screen-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px
}
.qr-screen-titles {
  min-width: 0
}
.qr-screen-head h3 {
  margin: 0;
  font-size: 17px;
  color: #16211e;
  overflow-wrap: anywhere
}
.qr-screen-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: #5c6a65;
  overflow-wrap: anywhere
}
.qr-screen-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d4dcd9;
  border-radius: 999px;
  background: 0 0;
  color: #16211e;
  cursor: pointer
}
.qr-screen-close svg {
  width: 20px;
  height: 20px
}
.qr-screen .check-in-qr {
  flex: 1 1 auto;
  align-content: center;
  border: 0;
  border-radius: 0;
  padding: 0
}
.qr-screen .check-in-qr-code {
  width: min(420px,88vw)
}
.qr-screen-actions {
  flex: none;
  display: grid;
  gap: 8px
}
.check-in-qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: #16211e;
  text-align: center
}
.check-in-qr .meta {
  color: #5c6a65
}
.check-in-qr-code {
  width: min(300px,100%)
}
.check-in-qr-code svg {
  display: block;
  width: 100%;
  height: auto
}
.check-in-qr.done {
  background: var(--accent-weak);
  border-color: var(--accent-weak-border);
  color: var(--text)
}
.check-in-qr.done .meta {
  color: var(--text-muted)
}
.check-in-done {
  color: var(--accent-on-light);
  font-size: 19px;
  font-weight: 800
}
.check-in-qr.done .check-in-done {
  color: var(--accent-hover)
}
.seatcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 4px 0 8px;
  text-align: center
}
.seatcard-store {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-width: 0
}
.seatcard-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex: none
}
.seatcard-store-name {
  display: -webkit-box;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.seatcard-tournament {
  margin: 0;
  font-size: clamp(18px, 5.5vw, 24px);
  font-weight: 700;
  color: var(--text-muted);
  max-width: 100%;
  overflow-wrap: anywhere
}
.seatcard-avatar {
  display: grid;
  place-items: center;
  width: clamp(120px,40vw,168px);
  height: clamp(120px,40vw,168px);
  border: 3px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-2);
  font-size: clamp(52px, 18vw, 76px);
  font-weight: 800;
  line-height: 1;
  color: var(--text)
}
.seatcard-avatar span {
  display: block;
  max-width: 78%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  font-size: inherit
}
.seatcard-who {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 100%;
  overflow-wrap: anywhere
}
.seatcard-seats {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  align-items: stretch;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-2);
  overflow: hidden
}
.seatcard-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 8px 18px;
  min-width: 0
}
.seatcard-slot + .seatcard-slot {
  border-left: 1px dashed var(--border)
}
.seatcard-slot-label {
  font-size: 12px;
  letter-spacing: .32em;
  text-indent: .32em;
  color: var(--text-subtle)
}
.seatcard-slot-value {
  font-size: clamp(40px, 13vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.seatcard-slot-value.long {
  font-size: clamp(20px, 6.4vw, 28px);
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip
}
.seatcard-slot.seat .seatcard-slot-value {
  color: var(--accent)
}
.seatcard-notice {
  width: 100%;
  padding: 16px 14px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted)
}
.seatcard-notice.waiting {
  border-color: var(--accent);
  color: var(--text)
}
.seatcard-facts {
  display: flex;
  width: 100%;
  margin: 0
}
.seatcard-facts > div {
  display: grid;
  flex: 1 1 0;
  align-content: start;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px 6px
}
.seatcard-facts > [data-fact=blinds] {
  flex-grow: 1.5
}
.seatcard-facts > div + div {
  border-left: 1px solid var(--border)
}
.seatcard-facts dt {
  font-size: 12px;
  color: var(--text-subtle)
}
.seatcard-facts dd {
  margin: 0;
  font-size: clamp(16px, 4.8vw, 20px);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}
.seatcard-facts small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted)
}
.seatcard-clock {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: clamp(22px, 7vw, 30px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em
}
.seatcard-live {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  animation: seatcard-pulse 2s ease-in-out infinite
}
@keyframes seatcard-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }
  50% {
    opacity: .35;
    transform: scale(.82)
  }
}
@media (prefers-reduced-motion:reduce) {
  .seatcard-live {
    animation: none
  }
}
.member-card-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.member-card-name {
  font-size: 20px;
  font-weight: 800;
  margin-top: 2px
}
.member-card-no {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease,background .12s ease,opacity .12s ease
}
.button svg {
  width: 18px;
  height: 18px
}
.button:active {
  transform: scale(.98);
  background: var(--surface-3)
}
.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
  font-weight: 800
}
.button.primary:active {
  background: var(--accent-hover)
}
.button.ghost {
  background: 0 0;
  border-color: var(--border);
  color: var(--text-muted)
}
.button:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none
}
.row-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease,background .12s ease
}
.row-link svg {
  width: 18px;
  height: 18px;
  color: var(--text-subtle)
}
button.row-link {
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer
}
.row-link.row-logout,
.row-link.row-logout svg {
  color: var(--danger)
}
.app-version {
  padding: 4px 4px 0;
  color: var(--text-subtle);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-align: center
}
.row-link:active {
  transform: scale(.99);
  background: var(--surface-2)
}
.me-list {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface)
}
.me-list > .row-link {
  border: 0;
  border-radius: 0;
  background: 0 0
}
.me-list > .row-link:not(.hidden) ~ .row-link:not(.hidden) {
  border-top: 1px solid var(--border)
}
.me-list > .row-link:active {
  transform: none;
  background: var(--surface-2)
}
.row-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}
.me-tiles {
  display: grid;
  grid-auto-columns: minmax(0,1fr);
  grid-auto-flow: column;
  gap: 10px
}
.me-tile {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 96px;
  padding: 14px 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease,background .12s ease
}
.me-tile:active {
  transform: scale(.98);
  background: var(--surface-2)
}
.me-tile-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent)
}
.me-tile-icon svg {
  width: 22px;
  height: 22px
}
.me-tile .badge {
  position: absolute;
  top: 8px;
  right: 8px;
  height: 22px;
  padding: 0 8px
}
.me-logout {
  justify-self: center;
  padding: 10px 18px;
  border: 0;
  background: 0 0;
  color: var(--danger);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer
}
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border-radius: var(--radius-sm)
}
.segment {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  background: 0 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .12s ease,color .12s ease
}
.segment.active {
  background: var(--surface-3);
  color: var(--text);
  font-weight: 800
}
.form {
  display: grid;
  gap: 12px
}
.field-block {
  display: grid;
  gap: 6px
}
.field-block > span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700
}
label {
  display: grid;
  gap: 6px
}
label span {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700
}
input {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 13px;
  background: var(--surface-2);
  font-size: 16px;
  transition: border-color .12s ease,box-shadow .12s ease
}
input::placeholder {
  color: var(--text-subtle)
}
input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring)
}
input.invalid {
  border-color: var(--danger)
}
input:disabled:not([type=checkbox]) {
  color: var(--text-muted);
  background: var(--surface-3);
  border-style: dashed;
  cursor: not-allowed
}
label.field-locked span {
  color: var(--text-subtle)
}
textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  background: var(--surface-2);
  font: inherit;
  font-size: 16px;
  color: inherit;
  line-height: 1.5;
  resize: vertical;
  transition: border-color .12s ease,box-shadow .12s ease
}
textarea::placeholder {
  color: var(--text-subtle)
}
textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring)
}
textarea.invalid {
  border-color: var(--danger)
}
.correction-row {
  display: grid;
  gap: 8px;
  justify-items: start
}
.correction-row .meta {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted)
}
.check {
  grid-template-columns: 22px minmax(0,1fr);
  align-items: start;
  gap: 10px
}
.check input {
  min-height: 20px;
  width: 20px;
  margin-top: 2px;
  accent-color: var(--accent)
}
.check span {
  color: var(--text);
  font-weight: 500
}
.field-error {
  min-height: 15px;
  color: var(--danger);
  font-size: 12px;
  visibility: hidden
}
.field-error.visible {
  visibility: visible
}
.req {
  margin-left: 3px;
  color: var(--danger);
  font-weight: 700
}
label.field-locked .req {
  display: none
}
.form-alert {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  background: var(--danger-weak);
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5
}
.id-card-block.invalid .id-card-drop {
  border-color: var(--danger)
}
.rules-agree.invalid {
  border-radius: var(--radius-sm);
  outline: 1px solid var(--danger);
  outline-offset: 6px
}
.sk {
  display: block;
  flex: none;
  max-width: 100%;
  height: 10px;
  margin: 4px 0;
  border-radius: var(--pill);
  background: linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 37%,var(--sk-base) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease infinite
}
.sk-title {
  height: 14px
}
.sk-small {
  height: 8px
}
.sk-center {
  margin-right: auto;
  margin-left: auto
}
.sk-grow {
  flex: 1
}
.sk-tag {
  width: 64px;
  height: 23px;
  margin: 0
}
.sk-button {
  width: 92px;
  height: 40px;
  margin: 0
}
.sk-logo {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 10px
}
.assoc-row .sk-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px
}
.sk-dot {
  width: 22px;
  height: 22px;
  margin: 0 auto
}
.sk-time {
  height: 26px;
  margin: 2px 0;
  border-radius: 8px
}
.sk-ring {
  width: 66px;
  height: 66px;
  margin: 0;
  border-radius: 50%
}
.sk-switch {
  width: 44px;
  height: 26px;
  margin: 0
}
.sk-stepper {
  width: 104px;
  height: 36px;
  margin: 0
}
.sk-qr {
  --sk-base: #e6e6e6;
  --sk-shine: #f5f5f5;
  width: min(300px,100%);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: var(--radius-sm)
}
.qr-box .sk-qr {
  width: min(342px,100%)
}
.sk-text {
  display: inline-block;
  height: .8em;
  margin: 0;
  vertical-align: middle
}
.sk-count {
  width: 18px;
  height: 18px;
  margin: 0
}
.sk-item {
  pointer-events: none
}
.form.is-loading input {
  border-color: transparent;
  background: linear-gradient(90deg,var(--sk-base) 25%,var(--sk-shine) 37%,var(--sk-base) 63%);
  background-size: 400% 100%;
  color: transparent;
  pointer-events: none;
  animation: shimmer 1.3s ease infinite
}
.form.is-loading input::placeholder {
  color: transparent
}
@keyframes shimmer {
  from {
    background-position: 100% 50%
  }
  to {
    background-position: 0 50%
  }
}
.toast {
  --toast-color: var(--success);
  --toast-tint: rgba(53, 199, 89, 0.24);
  --toast-line: rgba(53, 199, 89, 0.5);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  position: fixed;
  top: calc(var(--safe-top) + 10px);
  right: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: min(608px,calc(100% - var(--safe-left) - var(--safe-right) - 32px));
  min-height: 44px;
  margin: 0 auto;
  padding: 10px 16px 10px 12px;
  border: 1px solid var(--toast-line);
  border-radius: var(--radius);
  background: linear-gradient(var(--toast-tint),var(--toast-tint)) var(--surface-2);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  animation: toast-in .18s cubic-bezier(.2,.7,.2,1)
}
.toast::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: var(--toast-color);
  -webkit-mask: var(--toast-icon) center/contain no-repeat;
  mask: var(--toast-icon) center/contain no-repeat
}
.toast.warn {
  --toast-color: var(--warn);
  --toast-tint: rgba(221, 165, 74, 0.24);
  --toast-line: rgba(221, 165, 74, 0.5);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E")
}
.toast.error {
  --toast-color: var(--danger);
  --toast-tint: rgba(233, 122, 107, 0.24);
  --toast-line: rgba(233, 122, 107, 0.5);
  --toast-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E")
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px)
  }
}
@media (prefers-reduced-motion:reduce) {
  *,
  ::after,
  ::before {
    animation-duration: NaNs!important;
    animation-iteration-count: 1!important;
    transition-duration: NaNs!important
  }
}
.loyalty-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0
}
.loyalty-balances > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.12)
}
.loyalty-balances b {
  font-size: 1.15rem;
  line-height: 1.2
}
.loyalty-balance-label {
  font-size: .74rem;
  opacity: .8
}
.id-card-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 2px
}
.id-card-title {
  font-size: .86rem;
  font-weight: 600
}
.id-card-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.id-card-slot {
  display: grid;
  gap: 6px;
  justify-items: center
}
.id-card-library {
  padding: 2px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: 0 0;
  color: var(--text-subtle);
  font-size: .76rem;
  text-decoration: underline;
  cursor: pointer
}
.id-card-drop {
  position: relative;
  width: 100%;
  aspect-ratio: 1.6;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2,transparent);
  color: var(--text-subtle);
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer
}
.id-card-drop:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.id-card-drop.has-image {
  border-style: solid
}
.id-card-drop.has-image .id-card-placeholder {
  display: none
}
.id-card-preview {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.id-card-hint {
  color: var(--text-subtle);
  font-size: .76rem;
  line-height: 1.45
}
.rules-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 2px
}
.rules-block-title {
  font-size: .86rem;
  font-weight: 600
}
.rules-block-plain .rules-block-title {
  display: none
}
.rules-scroll {
  max-height: 220px;
  overflow-y: auto;
  overflow-wrap: anywhere;
  padding: 12px 14px;
  border: 1px solid var(--border,rgba(0,0,0,.15));
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: .84rem;
  -webkit-overflow-scrolling: touch
}
@media (prefers-color-scheme:dark) {
  .rules-scroll {
    background: rgba(255,255,255,.06)
  }
}
.rules-agree input:disabled + span {
  opacity: .6
}
.tpi-scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius)
}
.tpi-scope-button {
  padding: 8px 0;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: 0 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer
}
.tpi-scope-button.active {
  background: var(--accent-weak);
  color: var(--accent)
}
.tpi-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius)
}
.tpi-row.me {
  background: var(--accent-weak);
  border-color: var(--accent-weak-border)
}
.tpi-rank {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-subtle);
  text-align: center
}
.tpi-rank.top {
  color: var(--accent)
}
.tpi-player {
  display: grid;
  gap: 2px;
  min-width: 0
}
.tpi-name {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.tpi-meta {
  color: var(--text-subtle);
  font-size: 12px
}
.tpi-score {
  font-size: 16px;
  font-weight: 800
}
.coupon-card-body {
  display: grid;
  gap: 2px;
  min-width: 0
}
.coupon-card-side {
  display: grid;
  justify-items: end;
  gap: 8px
}
.coupon-redeem-button {
  padding: 7px 13px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--accent-hover);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}
.coupon-redeem-button:disabled {
  opacity: .6;
  cursor: default
}
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center
}
.sheet.hidden {
  display: none
}
#redeemCodePanel {
  z-index: 61
}
#reserveSheet {
  z-index: 59
}
.reserve-body {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px
}
.reserve-body .t-name {
  margin: 0;
  overflow-wrap: anywhere
}
.reserve-body .row-link span {
  min-width: 0;
  overflow-wrap: anywhere
}
.reserve-body .t-actions {
  margin-top: 4px
}
body.sheet-open .tabbar {
  visibility: hidden
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55)
}
.sheet-panel {
  position: relative;
  width: min(460px,100%);
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 12px;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border-strong);
  background: var(--surface);
  max-height: 84vh;
  max-height: 84dvh;
  overflow-y: auto
}
.sheet[data-swipe-close] .sheet-panel::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 2px;
  background: var(--border-strong);
  pointer-events: none
}
#reserveSheet .sheet-panel,
.sheet-panel.tall {
  height: calc(92vh - var(--safe-top));
  height: calc(92dvh - var(--safe-top));
  max-height: calc(92vh - var(--safe-top));
  max-height: calc(92dvh - var(--safe-top))
}
.sheet-panel.tall {
  align-content: start
}
.sheet.keyboard-fit {
  top: var(--fit-top,0);
  bottom: auto;
  height: var(--fit-height,100%)
}
.sheet.keyboard-fit .sheet-panel {
  max-height: calc(var(--fit-height,100%) - 8px)
}
.sheet.keyboard-fit .sheet-panel.tall {
  height: calc(var(--fit-height,100%) - 8px)
}
a.button {
  text-decoration: none
}
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.sheet-panel h3 {
  font-size: 17px
}
.sheet-sub {
  color: var(--text-muted);
  font-size: 13px
}
.sheet-field {
  display: grid;
  gap: 6px
}
.sheet-field span {
  color: var(--text-muted);
  font-size: 13px
}
.sheet-field input {
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 22px;
  letter-spacing: .4em;
  text-align: center
}
.sheet-error {
  min-height: 18px;
  color: #ff8f8f;
  font-size: 13px
}
.device-login-number {
  color: var(--text);
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3em;
  text-align: center
}
.sheet-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.sheet-note {
  color: var(--text-subtle);
  font-size: 12px;
  text-align: center
}
.wallet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.wallet-balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.wallet-balances.single {
  grid-template-columns: 1fr
}
.wallet-balances > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.wallet-balances b {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em
}
.wallet-label {
  color: var(--text-muted);
  font-size: 12px
}
.wallet-note {
  color: var(--warn);
  font-size: 12px;
  font-weight: 700
}
.wallet-coupons-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700
}
.wallet-count {
  color: var(--text-muted);
  font-weight: 600
}
.wallet-coupons {
  display: grid;
  gap: 8px
}
.wallet-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.wallet-coupon-main {
  display: grid;
  gap: 3px;
  min-width: 0
}
.wallet-coupon-main b {
  font-size: 14px
}
.wallet-coupon-main > span {
  color: var(--text-muted);
  font-size: 12px
}
.wallet-coupon-tag {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap
}
.wallet-coupon-value {
  flex: none;
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap
}
.wallet-coupons .empty {
  padding: 18px 16px
}
.card,
.hero,
.loyalty-card,
.t-card {
  background: linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 46%),var(--surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),var(--shadow-sm)
}
.t-card.mine {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06),0 0 26px -12px var(--ring),var(--shadow-sm)
}
.button.primary {
  background: var(--accent);
  background: linear-gradient(180deg,var(--accent-hover),var(--accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 10px 22px -12px var(--ring)
}
.button.primary:active {
  background: var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 4px 12px -8px var(--ring)
}
.t-bar > span {
  background: linear-gradient(90deg,var(--accent),var(--accent-hover));
  box-shadow: 0 0 10px var(--accent-weak-border)
}
.tab.active svg {
  filter: drop-shadow(0 0 7px var(--accent-weak-border))
}
.storepage-controls {
  position: sticky;
  top: -16px;
  z-index: 5;
  display: grid;
  gap: 8px;
  margin: -8px calc(-1 * (var(--safe-right) + 16px)) 0 calc(-1 * (var(--safe-left) + 16px));
  padding: 8px calc(var(--safe-right) + 16px) 8px calc(var(--safe-left) + 16px);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  overflow-x: clip
}
.chip-row {
  display: flex;
  gap: 8px;
  align-items: center
}
.chip-row.scroll-x {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch
}
.chip-row.scroll-x::-webkit-scrollbar {
  display: none
}
.chip-row[inert] {
  opacity: .5
}
.chip {
  flex: none;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer
}
.chip.on {
  border-color: var(--accent-weak-border);
  background: var(--accent-weak);
  color: var(--accent)
}
.chip:active {
  transform: scale(.97)
}
.map-view-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer
}
.map-view-toggle svg {
  width: 18px;
  height: 18px
}
.map-view-toggle .icon-list {
  display: none
}
.map-view-toggle:active {
  transform: scale(.95)
}
.map-view-toggle.on {
  border-color: var(--accent-weak-border);
  background: var(--accent-weak);
  color: var(--accent)
}
.map-view-toggle.on .icon-map {
  display: none
}
.map-view-toggle.on .icon-list {
  display: block
}
.feed-search {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2)
}
.feed-search:focus-within {
  border-color: var(--accent)
}
.feed-search input:focus {
  border: 0;
  box-shadow: none
}
.feed-search > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-muted)
}
.feed-search input {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: 0 0;
  padding: 0;
  height: 100%;
  min-height: 0;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  outline: 0
}
.feed-search input::placeholder {
  color: var(--text-muted)
}
.bind-pick-search {
  flex: none;
  margin: 0 0 12px
}
.bind-pick-list {
  display: grid;
  gap: 8px;
  max-height: min(52vh,440px);
  overflow-y: auto;
  overscroll-behavior: contain
}
.bind-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.bind-pick-row:focus-visible,
.bind-pick-row:hover {
  border-color: var(--accent-weak-border)
}
.bind-pick-row:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px
}
.bind-pick-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px
}
.bind-pick-row > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-subtle)
}
.bind-pick-name {
  font-weight: 600;
  overflow-wrap: anywhere
}
.bind-pick-meta {
  font-size: 12px;
  color: var(--text-muted);
  overflow-wrap: anywhere
}
.feed-search input::-webkit-search-cancel-button {
  display: none
}
.feed-search-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--border-strong);
  color: var(--text-muted);
  cursor: pointer
}
.feed-search-clear svg {
  width: 14px;
  height: 14px
}
.feed-map-block {
  display: grid;
  gap: 10px
}
.feed-map-wrap {
  position: relative;
  height: clamp(240px,42vh,420px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-md)
}
.feed-map {
  width: 100%;
  height: 100%
}
.feed-map-wrap .map-fab {
  bottom: 10px
}
.feed-map-sheet {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.map-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px
}
.map-sheet-store {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: 0 0;
  padding: 0;
  text-align: left;
  color: var(--text);
  cursor: pointer
}
.map-sheet-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  box-shadow: 0 0 0 1px var(--border);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted)
}
.map-sheet-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover
}
.map-sheet-name {
  display: grid;
  gap: 2px;
  min-width: 0
}
.map-sheet-name strong {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.map-sheet-name .meta {
  margin: 0
}
.map-sheet-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  cursor: pointer
}
.map-sheet-btn svg {
  width: 18px;
  height: 18px
}
.map-sheet-btn:active {
  background: var(--surface-3)
}
.map-session-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch
}
.map-session-row::-webkit-scrollbar {
  display: none
}
.map-session {
  flex: none;
  min-width: 132px;
  max-width: 200px;
  display: grid;
  gap: 2px;
  justify-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer
}
.map-session:active {
  transform: scale(.97)
}
.map-session-time {
  font-size: 15px;
  font-weight: 700
}
.map-session-meta,
.map-session-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.map-session-name {
  font-size: 12px;
  color: var(--text-muted)
}
.map-session-meta {
  font-size: 11.5px;
  color: var(--text-subtle)
}
.date-arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  cursor: pointer
}
.date-arrow svg {
  width: 18px;
  height: 18px
}
.date-arrow:active {
  transform: scale(.95)
}
.cal-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}
.cal-month-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text)
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  margin-bottom: 4px
}
.cal-weekdays span {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  padding: 4px 0
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 4px
}
.cal-day {
  appearance: none;
  border: 1px solid transparent;
  background: 0 0;
  border-radius: 12px;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 0;
  font-family: inherit;
  cursor: pointer
}
.cal-day.blank {
  cursor: default
}
.cal-day-no {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted)
}
.cal-day.has-events .cal-day-no {
  color: var(--text)
}
.cal-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent-weak);
  border: 1px solid var(--accent-weak-border);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center
}
.cal-count.none {
  visibility: hidden;
  background: 0 0;
  border-color: transparent
}
.cal-day.today .cal-day-no {
  color: var(--accent)
}
.cal-day.selected {
  border-color: var(--accent);
  background: var(--accent-weak)
}
.cal-day:active {
  transform: scale(.96)
}
.feed-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  width: 100%;
  margin: 0;
  text-align: left;
  white-space: normal;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none
}
.feed-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
#tournamentList .feed-card {
  cursor: pointer
}
#tournamentList .feed-card:active {
  transform: scale(.995)
}
.feed-actions {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.feed-actions .button {
  flex: 1 1 auto
}
.feed-actions .meta {
  margin: 0;
  flex: 1 1 100%
}
.feed-card > .check-in-qr {
  flex: 0 0 100%
}
.feed-card.mine {
  border-color: var(--accent-weak-border);
  box-shadow: inset 3px 0 0 var(--accent)
}
.feed-card.closed .feed-main,
.feed-card.closed .seat-ring {
  opacity: .6
}
.feed-card.flash {
  animation: feedCardFlash 1.4s ease 2
}
@keyframes feedCardFlash {
  0%,
  100% {
    box-shadow: none
  }
  40% {
    box-shadow: 0 0 0 2px var(--accent)
  }
}
.feed-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px
}
.feed-time {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  color: var(--text)
}
.feed-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px
}
.feed-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text)
}
.feed-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap
}
.feed-meta b {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--text)
}
.feed-sep {
  color: var(--text-subtle)
}
.feed-store {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.feed-store svg {
  flex: none;
  width: 13px;
  height: 13px
}
.card-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap
}
.card-chip svg {
  width: 12px;
  height: 12px
}
.card-chip.me {
  background: var(--accent);
  color: var(--accent-contrast)
}
.card-chip.wait {
  border: 1px solid var(--warn-border);
  color: var(--warn)
}
.card-chip.off {
  background: var(--surface-3);
  color: var(--text-subtle)
}
.card-chip.settling {
  background: rgba(94,154,214,.16);
  color: #7fb3e0
}
.feed-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #4cd964
}
.feed-live i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cd964;
  box-shadow: 0 0 0 3px rgba(76,217,100,.18)
}
.feed-promo {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px dashed var(--warn-border);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--warn)
}
.feed-promo svg {
  flex: none;
  width: 12px;
  height: 12px
}
.feed-closed-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  background: 0 0;
  font: inherit;
  font-size: 14px;
  color: var(--text-muted);
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none
}
.feed-closed-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.feed-closed-action {
  flex: none;
  color: var(--text-subtle)
}
.tag {
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--text-subtle)
}
.tag.on {
  background: var(--accent-weak);
  color: var(--accent)
}
.tag.muted {
  background: var(--danger-weak);
  color: var(--danger)
}
.seat-ring {
  --seat-pct: 0;
  --seat-fill: var(--accent);
  flex: none;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  line-height: 1.1;
  background: radial-gradient(closest-side,var(--surface) calc(100% - 5px),transparent calc(100% - 4px)),conic-gradient(var(--seat-fill) calc(var(--seat-pct) * 1%),var(--border-strong) 0);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums
}
.seat-ring.is-closed,
.seat-ring.is-open {
  --seat-fill: var(--text-subtle)
}
.seat-ring.is-open {
  background: radial-gradient(closest-side,var(--surface) calc(100% - 2px),transparent calc(100% - 1px)),var(--border-strong)
}
.seat-ring.is-full {
  --seat-fill: var(--danger)
}
.seat-main {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap
}
.seat-ring.is-full .seat-now {
  color: var(--danger)
}
.seat-ring.is-long .seat-main {
  font-size: 15px
}
.seat-cap {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-subtle)
}
.seat-sub {
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap
}
.row-right {
  display: flex;
  align-items: center;
  gap: 8px
}
.row-state {
  color: var(--text-subtle);
  font-size: 13px;
  font-weight: 600
}
.row-state.on {
  color: var(--accent-hover)
}
.push-sheet-lead {
  margin: 0;
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6
}
.push-sheet-text {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7
}
.push-sheet-actions {
  display: grid;
  gap: 10px
}
.seat-links {
  display: grid;
  gap: 12px
}
.seat-link {
  align-items: center;
  min-height: 60px;
  padding: 10px 16px;
  border-color: var(--accent-weak-border);
  background: var(--accent-weak)
}
.seat-link-main {
  display: grid;
  gap: 2px;
  min-width: 0
}
.seat-link-title {
  color: var(--text);
  font-size: 15px;
  font-weight: 800
}
.seat-link-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.seat-link-seat {
  flex: none;
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.seat-link-seat.waiting {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600
}
.storepage-hero {
  position: relative;
  height: calc(var(--safe-top) + 136px);
  margin: -16px -16px 0;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  background: var(--surface)
}
.storepage-backdrop {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) saturate(1.4);
  transform: scale(1.3);
  opacity: .38
}
.storepage-backdrop.is-text {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--safe-top) 12px 0 0;
  overflow: hidden;
  color: var(--text);
  font-size: 72px;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
  opacity: .06;
  filter: none;
  transform: none
}
.storepage-hero.has-cover {
  height: auto;
  padding-top: var(--safe-top)
}
.storepage-hero.has-cover .storepage-backdrop {
  display: none
}
.storepage-cover .banner-track {
  border-radius: 0;
  box-shadow: none
}
.storepage-back {
  position: absolute;
  top: calc(var(--safe-top) + 8px);
  left: 12px;
  z-index: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%
}
.storepage-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%,-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.2, .7, .2, 1)
}
#tabStorepage.is-loading .storepage-loading {
  opacity: 1;
  animation: storepageLoaderIn .22s cubic-bezier(.2,.7,.2,1) .3s both
}
@keyframes storepageLoaderIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
#tabStorepage.is-loading > :not(.storepage-loading) {
  visibility: hidden
}
#tabStorepage.is-loading .storepage-back {
  visibility: visible
}
#tabStorepage.is-revealed .storepage-hero > :not(.storepage-back),
#tabStorepage.is-revealed > :not(.storepage-loading):not(.storepage-hero) {
  animation: storepageReveal .22s cubic-bezier(.2,.7,.2,1) both
}
@keyframes storepageReveal {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@media (prefers-reduced-motion:reduce) {
  .storepage-loading {
    transition: none
  }
  #tabStorepage.is-loading .storepage-loading {
    animation: none
  }
  #tabStorepage.is-revealed .storepage-hero > :not(.storepage-back),
  #tabStorepage.is-revealed > :not(.storepage-loading):not(.storepage-hero) {
    animation: none
  }
}
.storepage-identity {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: -54px
}
.storepage-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 80px;
  height: 80px;
  overflow: hidden;
  border: 3px solid var(--bg);
  border-radius: 22px;
  background: var(--surface-2)
}
.storepage-avatar:empty {
  visibility: hidden
}
.storepage-avatar-logo {
  width: 100%;
  height: 100%;
  padding: 6px;
  object-fit: contain
}
.storepage-avatar-initial {
  color: var(--accent-hover);
  font-size: 36px;
  font-weight: 800;
  line-height: 1
}
.storepage-title {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
  padding-top: 46px
}
.storepage-name {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 24px;
  line-height: 1.25;
  overflow-wrap: anywhere
}
.sp-hours {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  color: var(--text-muted)
}
.sp-hours i,
.sp-hours-now i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-subtle)
}
.sp-hours-now.is-open i,
.sp-hours.is-open i {
  background: var(--success)
}
.sp-quick {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px
}
.sp-quick.is-single {
  grid-template-columns: minmax(0,1fr)
}
.sp-quick-button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.sp-quick-button.is-dining {
  border-color: var(--accent-weak-border);
  background: var(--accent-weak)
}
.sp-quick-button > svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent)
}
.sp-quick-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.25
}
.sp-quick-text b {
  font-size: 15px
}
.sp-quick-text small {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap
}
.sp-face:active,
.sp-quick-button:active,
.sp-ticket:active {
  transform: scale(.985)
}
.sp-face:focus-visible,
.sp-info-action:focus-visible,
.sp-quick-button:focus-visible,
.sp-row:focus-visible,
.sp-social-button:focus-visible,
.sp-ticket:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.sp-ticket:focus-visible {
  outline-offset: -3px
}
.sp-bar-row {
  display: flex;
  align-items: center;
  gap: 8px
}
.sp-bar-back {
  display: none;
  width: 44px;
  height: 44px;
  margin: 0;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text)
}
.storepage-controls.is-stuck .sp-bar-back {
  display: inline-grid
}
.sp-tabs {
  flex: 1;
  min-width: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0,1fr)
}
.sp-days .schedule-day {
  min-height: 48px
}
.storepage-controls .chip-row.is-off {
  display: none
}
.sp-panes {
  margin: 0 calc(-1 * (var(--safe-right) + 16px)) 0 calc(-1 * (var(--safe-left) + 16px));
  padding: 0 calc(var(--safe-right) + 16px) 0 calc(var(--safe-left) + 16px);
  overflow-x: clip
}
.sp-pane {
  display: grid;
  gap: 12px;
  align-content: start
}
.sp-ticket {
  --stub: 92px;
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 92px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-mask: radial-gradient(circle at calc(100% - var(--stub) - 0.25px) 0,transparent 9.5px,#000 10px) 0 0/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub) - 0.25px) 100%,transparent 9.5px,#000 10px) 0 100%/100% 51% no-repeat;
  mask: radial-gradient(circle at calc(100% - var(--stub) - 0.25px) 0,transparent 9.5px,#000 10px) 0 0/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub) - 0.25px) 100%,transparent 9.5px,#000 10px) 0 100%/100% 51% no-repeat
}
.sp-ticket::after,
.sp-ticket::before {
  content: "";
  position: absolute;
  right: calc(var(--stub) - 11.75px);
  width: 20px;
  height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  pointer-events: none
}
.sp-ticket::before {
  top: -12px
}
.sp-ticket::after {
  bottom: -12px
}
.sp-ticket-main {
  flex: 1;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px 12px 16px
}
.sp-ticket-when {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap
}
.sp-ticket-when b {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums
}
.sp-ticket-sub.live,
.sp-ticket-when.live,
.sp-ticket-when.live b {
  color: var(--success)
}
.sp-ticket-promo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800
}
.sp-ticket-promo svg {
  flex: none;
  width: 12px;
  height: 12px
}
.sp-ticket-promo > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.sp-ticket-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3
}
.sp-ticket-sub {
  overflow: hidden;
  font-size: 12.5px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap
}
.sp-ticket-stub {
  flex: none;
  width: var(--stub);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 5px;
  padding: 10px 6px;
  border-left: 1.5px dashed var(--border-strong);
  background: var(--surface)
}
.sp-ticket-price {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.sp-ticket-bar {
  width: 56px;
  height: 5px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--surface-3)
}
.sp-ticket-bar::before {
  content: "";
  display: block;
  width: var(--fill,0%);
  height: 100%;
  border-radius: inherit;
  background: var(--text-muted)
}
.sp-ticket-bar.full::before {
  background: var(--danger)
}
.sp-ticket-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.sp-ticket-state {
  font-size: 12px;
  font-weight: 800
}
.sp-ticket.mine {
  border-color: var(--accent-weak-border);
  background: color-mix(in srgb,var(--accent) 9%,var(--surface-2))
}
.sp-ticket.mine::after,
.sp-ticket.mine::before,
.sp-ticket.wait::after,
.sp-ticket.wait::before {
  border-color: var(--accent-weak-border)
}
.sp-ticket.mine .sp-ticket-when b {
  color: var(--accent)
}
.sp-ticket.mine .sp-ticket-stub {
  border-left-color: var(--accent-weak-border);
  background: var(--accent);
  color: var(--accent-contrast)
}
.sp-ticket.mine .sp-ticket-count {
  color: var(--accent-contrast);
  font-weight: 700
}
.sp-ticket.wait {
  border-color: var(--accent-weak-border)
}
.sp-ticket.wait .sp-ticket-stub {
  border-left-color: var(--accent-weak-border);
  background: var(--accent-weak)
}
.sp-ticket.wait .sp-ticket-state {
  color: var(--accent)
}
.sp-ticket.closed {
  opacity: .6
}
.sp-ticket.flash {
  outline: 2px solid transparent;
  outline-offset: -3px;
  animation: spTicketFlash 1.4s ease 2
}
@keyframes spTicketFlash {
  40% {
    outline-color: var(--accent)
  }
}
.sp-face {
  display: grid;
  gap: 18px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.sp-face-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0
}
.sp-face-store {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.sp-face-tier {
  flex: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .08em
}
.sp-face-cells {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px
}
.sp-face-cell {
  display: grid;
  gap: 2px;
  min-width: 0
}
.sp-face-cell.is-end {
  justify-items: end;
  text-align: right
}
.sp-face-cell small {
  color: var(--text-subtle);
  font-size: 12px
}
.sp-face-cell b {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}
.sp-face-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700
}
.sp-face[data-tier-face] .sp-face-cta {
  color: var(--text)
}
.sp-face-cta svg {
  width: 16px;
  height: 16px
}
.sp-rows {
  display: grid;
  gap: 10px
}
.sp-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 14px 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.sp-row > svg:first-child {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--accent)
}
.sp-row > svg:last-child {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--text-subtle)
}
.sp-row b {
  flex: 1;
  min-width: 0;
  font-size: 15px
}
.sp-row-value {
  min-width: 0;
  max-width: 45%;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap
}
.sp-row:active {
  background: var(--surface-2)
}
.sp-info-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface)
}
.sp-info-card > svg {
  flex: none;
  align-self: flex-start;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--accent)
}
.sp-info-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
  line-height: 1.45;
  overflow-wrap: anywhere
}
.sp-info-number {
  font-variant-numeric: tabular-nums
}
.sp-info-action {
  flex: none;
  display: inline-grid;
  place-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 12px;
  background: var(--accent-weak);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer
}
.sp-info-action.is-ghost {
  border-color: var(--border-strong);
  background: var(--surface-2);
  color: var(--text)
}
.sp-hours-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700
}
.sp-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-muted);
  font-size: 13px
}
.sp-hours-row > span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums
}
.sp-hours-note {
  color: var(--warn);
  font-size: 12.5px
}
.sp-info-group {
  display: grid;
  gap: 8px
}
.sp-info-label {
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em
}
.sp-social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.sp-social-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer
}
.sp-social-button svg {
  flex: none;
  width: 32px;
  height: 32px
}
.sp-info-card.is-about {
  display: grid;
  gap: 8px
}
.sp-info-about {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}
.storepage-member {
  display: grid;
  gap: 8px
}
.button.full {
  width: 100%
}
.me-head {
  display: flex;
  align-items: center;
  gap: 14px
}
.me-avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-3)
}
.me-initial {
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-subtle)
}
.me-name {
  font-size: 20px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.qr-box svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 342px;
  margin: 0 auto
}
.sp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(88px,1fr));
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border)
}
.sp-stats > div {
  display: grid;
  gap: 3px;
  min-width: 0
}
.sp-stats b {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.sp-stat-label {
  font-size: 12px;
  color: var(--text-subtle)
}
.sp-sheet-head {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-muted);
  padding-top: 2px
}
.sp-card-id {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border)
}
.sp-card-store {
  font-size: 12px;
  color: var(--text-subtle)
}
.sp-card-name {
  font-size: 18px;
  font-weight: 700
}
.sp-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted)
}
.qr-box {
  border-radius: 14px;
  overflow: hidden
}
.sp-points-note {
  display: grid;
  gap: 4px;
  color: var(--text-muted);
  font-size: 13px
}
.sp-join-fields {
  display: grid;
  gap: 1px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--border)
}
.sp-join-field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface-2);
  font-size: 14px
}
.sp-join-field.off .sp-join-value {
  color: var(--text-subtle)
}
.sp-join-label {
  color: var(--text-muted);
  flex: none
}
.sp-join-value {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere
}
.sp-join-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 13px;
  line-height: 1.6;
  cursor: pointer
}
.sp-join-consent input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent)
}
.sp-profile-locked {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2)
}
.sp-profile-locked-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted)
}
.sp-profile-locked-row b {
  color: var(--text)
}
.sp-profile-locked .sheet-note {
  text-align: left;
  margin: 0
}
#bindClaimBody {
  display: grid;
  gap: 12px;
  justify-items: start
}
.bind-claim-member {
  font-size: 17px;
  font-weight: 700
}
.bind-claim-last4 {
  display: grid;
  gap: 6px
}
.bind-claim-last4 input {
  max-width: 160px
}
#reserveSheet .sheet-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 20px 0 0;
  overflow: hidden
}
#reserveSheet .sheet-head {
  flex: none;
  padding: 0 18px 14px
}
#reserveSheet .sheet-head h3 {
  min-width: 0;
  overflow-wrap: anywhere
}
.sheet-tabs {
  flex: none;
  display: flex;
  gap: 0;
  padding: 0 18px;
  border-bottom: 1px solid var(--border)
}
.sheet-tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 4px 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: 0 0;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: color .12s ease,border-color .12s ease
}
.sheet-tab.active {
  color: var(--accent-hover);
  border-bottom-color: var(--accent)
}
#reserveBody {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 16px 18px 20px
}
.detail-pane {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 14px;
  align-content: start
}
.detail-pane > .t-fill {
  padding: 0 2px
}
.reserve-actions {
  flex: none;
  display: grid;
  gap: 8px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface)
}
.reserve-actions:empty {
  display: none
}
.t-when {
  display: grid;
  gap: 2px;
  justify-items: end;
  text-align: right
}
.t-when-old {
  color: var(--text-subtle);
  font-size: 12px;
  text-decoration: line-through
}
.t-when-planned {
  color: var(--text-subtle);
  font-size: 12px
}
.t-start-original {
  margin-left: 6px;
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap
}
.detail-live {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 14px;
  background: var(--accent-weak)
}
.detail-live-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}
.detail-live-level {
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 800
}
.detail-live-clock {
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.detail-live-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px 12px
}
.detail-live-grid div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted)
}
.detail-live-grid b {
  color: var(--text);
  font-variant-numeric: tabular-nums
}
.detail-empty {
  display: grid;
  gap: 6px;
  padding: 26px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center
}
.detail-empty strong {
  font-size: 15px
}
.detail-empty span {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6
}
.detail-mine {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--surface-2)
}
.detail-mine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}
.detail-mine-head span {
  color: var(--text-muted);
  font-size: 13px
}
.detail-mine .detail-live-grid {
  grid-template-columns: minmax(0,1fr);
  padding-top: 12px;
  border-top: 1px solid var(--border)
}
.detail-table {
  display: grid;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden
}
.detail-row {
  display: grid;
  grid-template-columns: minmax(84px,34%) minmax(0,1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border)
}
.detail-row:last-child {
  border-bottom: 0
}
.detail-row > dt {
  color: var(--text-muted);
  font-size: 13px
}
.detail-row > dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  overflow-wrap: anywhere
}
.detail-row .detail-sub {
  display: block;
  margin-top: 2px;
  color: var(--text-subtle);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5
}
.detail-row .detail-money {
  color: var(--accent-hover)
}
.detail-row .detail-at {
  display: block;
  margin-top: 3px;
  color: var(--accent-hover);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.4
}
.detail-notice {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--warn-border);
  border-radius: 14px;
  background: var(--warn-weak)
}
.detail-notice-title {
  color: var(--warn);
  font-size: 13px;
  font-weight: 800
}
.detail-notice p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere
}
.detail-notice p.muted {
  color: var(--text-subtle);
  text-align: center
}
.blind-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px
}
.blind-table td,
.blind-table th {
  padding: 9px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap
}
.blind-table th {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700
}
.blind-table td:first-child,
.blind-table th:first-child {
  text-align: left
}
.blind-table td {
  color: var(--text);
  font-variant-numeric: tabular-nums
}
.blind-table tr.is-break td {
  color: var(--text-subtle);
  font-size: 12px
}
.blind-table tr.is-current td {
  background: var(--accent-weak);
  color: var(--text);
  font-weight: 700
}
.blind-table tr.is-current td:first-child {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 10px
}
.blind-now {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: 1px
}
.blind-scroll {
  overflow-x: auto
}
.roster-group {
  display: grid;
  gap: 8px;
  margin-top: 14px
}
.roster-group:first-child {
  margin-top: 0
}
.roster-title {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700
}
.roster-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none
}
.roster-list > li {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
  font-size: 14px
}
.roster-list > li:last-child {
  border-bottom: 0
}
.roster-list > li.mine {
  color: var(--accent-hover);
  font-weight: 800
}
.roster-pos {
  color: var(--text-subtle);
  font-size: 12px;
  font-variant-numeric: tabular-nums
}
.roster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.participation {
  display: grid;
  gap: 10px
}
.participation-summary {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700
}
.participation-chips .chip {
  padding: 6px 12px;
  font-size: 13px
}
.participation-chips .chip-count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  opacity: .75
}
.participation-list .roster-list > li {
  grid-template-columns: 42px minmax(0,1fr) auto
}
.participation-list .roster-pos {
  white-space: nowrap
}
.roster-list > li.is-out {
  color: var(--text-subtle)
}
.join-button {
  min-width: 0;
  max-width: 100%
}
.join-label {
  display: inline-flex;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  vertical-align: bottom
}
.join-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.sheet-head > h3 {
  min-width: 0
}
.info-note {
  color: var(--text-subtle);
  font-size: 12px;
  line-height: 1.7
}
.detail-store {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--accent-hover);
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  cursor: pointer
}
.detail-store span {
  min-width: 0;
  overflow-wrap: anywhere
}
.detail-store svg {
  flex: none;
  width: 15px;
  height: 15px
}
.clock-board {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 14px;
  background: var(--accent-weak)
}
.clock-board-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}
.clock-phase {
  color: var(--accent-hover);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em
}
.clock-time {
  color: var(--text);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums
}
.clock-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px 18px
}
.clock-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0
}
.clock-grid span {
  flex: none;
  color: var(--text-muted);
  font-size: 12px
}
.clock-grid b {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: right
}
.clock-stats {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--accent-weak-border)
}
.clock-stats > div {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 0
}
.clock-stats b {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center
}
.clock-stats span {
  color: var(--text-subtle);
  font-size: 11px
}
.clock-announce {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--accent-weak-border)
}
.clock-prizes {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--accent-weak-border)
}
.clock-prizes-note {
  margin: 0;
  color: var(--text-subtle);
  font-size: 11px
}
.clock-prizes-list {
  display: grid;
  gap: 2px;
  max-height: 220px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none
}
.clock-prizes-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px;
  border-bottom: 1px dashed var(--accent-weak-border);
  font-size: 13px
}
.clock-prizes-list li:last-child {
  border-bottom: 0
}
.clock-prizes-list span {
  color: var(--text-subtle)
}
.clock-prizes-list b {
  color: var(--text);
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.clock-note-label {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-weak-border);
  color: var(--accent-hover);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em
}
.clock-announce-pages {
  display: grid;
  gap: 4px
}
.clock-announce-pages p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere
}
.clock-marquee {
  padding-top: 10px;
  border-top: 1px solid var(--accent-weak-border);
  overflow: hidden
}
.clock-marquee-track {
  display: flex;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)
}
.clock-marquee-track span {
  flex: none;
  padding-left: 100%;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
  white-space: nowrap;
  animation: clock-marquee-scroll 20s linear infinite
}
@keyframes clock-marquee-scroll {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-100%)
  }
}
@media (prefers-reduced-motion:reduce) {
  .clock-marquee-track {
    mask-image: none;
    -webkit-mask-image: none
  }
  .clock-marquee-track span {
    padding-left: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    animation: none
  }
}
.my-seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 14px;
  background: var(--surface-2)
}
.my-seat.waiting {
  border-color: var(--border-strong)
}
.my-seat-main {
  display: flex;
  align-items: stretch;
  gap: 28px;
  min-width: 0
}
.my-seat-cell {
  display: grid;
  gap: 4px;
  min-width: 0
}
.my-seat-cell span {
  color: var(--text-subtle);
  font-size: 12px
}
.my-seat-cell b {
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere
}
.my-seat-cell .my-seat-table {
  color: var(--accent-hover)
}
.my-seat-note {
  flex: none;
  color: var(--text-subtle);
  font-size: 12px
}
.my-seat-wait {
  min-width: 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6
}
@keyframes np-track {
  0% {
    transform: translateX(-100%) scaleX(.35)
  }
  55% {
    transform: translateX(58%) scaleX(.62)
  }
  100% {
    transform: translateX(220%) scaleX(.35)
  }
}
.spinner {
  display: inline-block;
  flex: none;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite
}
.spinner.lg {
  width: 24px;
  height: 24px;
  border-width: 2.5px
}
.spinner.accent {
  color: var(--accent)
}
.button.is-busy {
  cursor: progress
}
.button.is-busy:disabled {
  opacity: .82
}
.load-inline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--text-muted)
}
.load-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px;
  color: var(--text-muted);
  font-size: 13.5px
}
.load-block .spinner,
.load-inline .spinner {
  color: var(--accent)
}
.top-progress {
  position: fixed;
  top: var(--safe-top);
  right: 0;
  left: 0;
  z-index: 90;
  height: 2px;
  overflow: hidden;
  background: var(--accent-weak);
  pointer-events: none
}
.top-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--accent);
  animation: np-track 1.15s ease-in-out infinite
}
@media (prefers-reduced-motion:reduce) {
  .spinner {
    animation-duration: 1.7s
  }
  .top-progress::after {
    animation: none;
    transform: none;
    opacity: .55
  }
}
.line-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(var(--safe-right) + 14px) 8px calc(var(--safe-left) + 14px);
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius-sm);
  background: var(--accent-weak)
}
.line-bar.hidden {
  display: none
}
.line-bar-open {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none
}
.line-bar-open svg {
  flex: none;
  width: 19px;
  height: 19px
}
.line-bar-dismiss {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--pill);
  background: 0 0;
  color: var(--text-subtle);
  cursor: pointer
}
.line-bar-dismiss svg {
  width: 15px;
  height: 15px
}
.line-rail {
  display: none
}
@media (min-width:1024px) {
  body.line-rail-on {
    display: grid;
    grid-template-columns: 640px 258px;
    grid-template-rows: minmax(0,1fr);
    justify-content: center;
    gap: 26px
  }
  body.line-rail-on .app {
    max-width: none;
    margin: 0
  }
  body.line-rail-on .line-bar {
    display: none
  }
  body.line-rail-on .line-rail {
    display: block;
    align-self: start;
    margin-top: 68px;
    padding: 18px 16px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center
  }
  .line-rail h2 {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 15px;
    font-weight: 700
  }
  .line-rail-qr {
    aspect-ratio: 1;
    padding: 10px;
    border-radius: var(--radius-sm);
    background: #fff
  }
  .line-rail-qr svg {
    display: block;
    width: 100%;
    height: auto
  }
  .line-rail-note {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: left
  }
  .line-rail-friend {
    display: block;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    text-decoration: none
  }
  .line-rail-friend:hover {
    color: var(--accent)
  }
  .line-rail-friend.hidden {
    display: none
  }
}
.identity-summary {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.identity-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0
}
.identity-facts dt {
  color: var(--text-muted,#9db0a9);
  font-size: 13px
}
.identity-facts dd {
  margin: 0;
  font-size: 14px;
  word-break: break-all
}
.identity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}
.button.ghost.danger {
  color: #ff8080
}
.identity-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}
.identity-card {
  flex: 1 1 140px;
  min-width: 0;
  margin: 0
}
.identity-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line,rgba(255,255,255,.12));
  background: #000
}
.identity-card figcaption {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted,#9db0a9);
  text-align: center
}
.assoc-empty {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 20px;
  border-radius: 12px;
  background: var(--surface-2,rgba(255,255,255,.04))
}
.assoc-empty-head {
  text-align: center;
  padding-bottom: 6px
}
.assoc-empty-head svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted,#6f7c78)
}
.assoc-empty-title {
  margin: 12px 0 6px;
  font-size: 16px;
  font-weight: 500
}
.assoc-empty-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-muted,#9db0a9)
}
.assoc-empty-hint {
  margin: -2px 0 2px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted,#9db0a9)
}
.assoc-empty-ready {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(22,192,142,.12);
  font-size: 13px;
  line-height: 1.6;
  color: #2adfa6
}
.assoc-empty-ready svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px
}
.link-button {
  padding: 0;
  border: 0;
  background: 0 0;
  font: inherit;
  color: var(--brand,#16c08e);
  text-decoration: underline;
  cursor: pointer
}
.unbound-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.unbound-head h2 {
  margin: 0
}
.dining-entry-wrap {
  margin-bottom: 14px
}
.dining-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 10px 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius);
  background: var(--accent-weak);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.dining-entry-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  flex: none
}
.dining-entry-icon svg {
  width: 20px;
  height: 20px
}
.dining-entry-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0
}
.dining-entry-text b {
  font-size: 16px
}
.dining-entry-text small {
  color: var(--text-muted);
  font-size: 12.5px
}
.dining-entry-arrow {
  width: 18px;
  height: 18px;
  color: var(--text-subtle);
  flex: none
}
.dining-panel {
  padding-bottom: 0;
  align-content: start
}
.dining-head {
  position: sticky;
  top: -20px;
  z-index: 2;
  margin: -20px -18px 0;
  padding: 16px 12px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border)
}
.dining-head h3 {
  flex: 1;
  min-width: 0
}
.dining-orders-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px
}
.dining-body {
  display: grid;
  gap: 14px;
  padding-bottom: 8px
}
.dining-group h4,
.dining-section h4 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800
}
.dining-section h4 small {
  font-weight: 600
}
.dining-items {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--border)
}
.dining-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 8px 10px 8px 14px;
  background: var(--surface)
}
.dining-item.sold-out .dining-item-text {
  opacity: .55
}
.dining-item-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0
}
.dining-item-text b {
  font-size: 16px
}
.dining-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0
}
.dining-item-title b {
  min-width: 0;
  overflow-wrap: anywhere
}
.dining-combo-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px
}
.dining-item-text .dining-combo-price b {
  color: var(--accent-hover);
  font-size: 15px
}
.dining-combo-price s {
  color: var(--text-muted)
}
.dining-combo-add {
  flex: none;
  min-height: 40px;
  padding-inline: 16px
}
.dining-combo-row small {
  display: block;
  color: var(--text-muted);
  font-size: 12px
}
.dining-hot {
  flex: none;
  padding: 3px 7px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent-hover);
  font-size: 11.5px;
  font-style: normal;
  font-weight: 800;
  line-height: 1
}
.dining-item-text span {
  color: var(--text-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums
}
.dining-stepper {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none
}
.dining-step {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer
}
.dining-step.plus {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast)
}
.dining-step:disabled {
  opacity: .35;
  cursor: default
}
.dining-qty {
  min-width: 30px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.dining-section {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface)
}
.dining-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 15px;
  font-variant-numeric: tabular-nums
}
.dining-row.total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-weight: 800
}
.dining-coupon {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer
}
.dining-coupon:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-weak)
}
.dining-coupon.is-blocked {
  opacity: .55;
  cursor: default
}
.dining-coupon input[type=radio] {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--accent)
}
.dining-coupon .dining-coupon-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700
}
.dining-coupon .dining-coupon-text small {
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600
}
.dining-coupon .dining-coupon-amount {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.dining-link {
  padding: 4px 0;
  border: 0;
  background: 0 0;
  color: var(--accent-hover);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}
.dining-balance {
  display: grid;
  gap: 6px;
  margin-top: 10px
}
.dining-exchange {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px
}
.dining-exchange-text {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0
}
.dining-exchange-text b {
  font-size: 15px;
  overflow-wrap: anywhere
}
.dining-exchange-hint,
.dining-exchange-text small {
  color: var(--text-muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums
}
.dining-exchange-hint {
  display: block;
  margin-top: 8px
}
.dining-balance-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px
}
.dining-balance-head label {
  display: inline;
  color: var(--text);
  font-size: 15px;
  font-weight: 700
}
.dining-balance > small,
.dining-balance-head small {
  color: var(--text-muted);
  font-size: 12.5px
}
.dining-balance-controls {
  display: flex;
  align-items: center;
  gap: 6px
}
.dining-adjust {
  min-width: 52px;
  height: 44px;
  padding: 0 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  flex: none
}
.dining-adjust.strong {
  border-color: var(--accent-weak-border);
  color: var(--accent-hover);
  font-weight: 800
}
.dining-adjust:disabled {
  opacity: .35;
  cursor: default
}
.dining-amount {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2)
}
.dining-amount:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring)
}
.dining-amount input {
  min-height: 0;
  height: 40px;
  padding: 0;
  border: 0;
  background: 0 0;
  font-size: 17px;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums
}
.dining-amount input:focus {
  box-shadow: none
}
.dining-amount span {
  color: var(--text-muted);
  font-size: 14px
}
.dining-summary {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--radius);
  background: var(--accent-weak)
}
.dining-summary .dining-row {
  color: var(--text-muted);
  font-size: 14px
}
.dining-row.due {
  align-items: baseline;
  margin-top: 2px;
  color: var(--text);
  font-size: 16px;
  font-weight: 800
}
.dining-summary .dining-row.due span:last-child {
  font-size: 24px
}
.dining-summary small {
  color: var(--text-muted);
  font-size: 12.5px
}
.dining-field {
  margin-top: 10px
}
.dining-section .dining-field:first-of-type {
  margin-top: 0
}
.dining-fineprint {
  margin: 0 2px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6
}
.dining-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 0 -18px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface)
}
.sheet.keyboard-fit .dining-footer {
  padding-bottom: 12px
}
.dining-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  font-size: 16px
}
.dining-cta span:first-child {
  margin-right: auto
}
.dining-cta span:last-child {
  margin-left: auto
}
.dining-order {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface)
}
.dining-order.is-done {
  opacity: .75
}
.dining-order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 18px
}
.dining-order p {
  margin: 0
}
.dining-order-meta,
.dining-order-note {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5
}
.dining-order-lines {
  font-size: 15px
}
.dining-order-pay {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2)
}
.dining-order-pay .dining-row {
  font-size: 14px
}
.badge.dining-status.Accepted {
  background: rgba(96,165,250,.16);
  color: #93c5fd
}
.badge.dining-status.Completed {
  background: rgba(76,217,100,.16);
  color: var(--success)
}
.badge.dining-status.Pending {
  background: var(--warn-weak);
  color: var(--warn)
}
.badge.dining-status.Cancelled,
.badge.dining-status.Voided {
  background: var(--surface-3);
  color: var(--text-muted)
}
.button.danger-outline {
  border-color: var(--danger-border);
  color: var(--danger)
}
.appbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--text);
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer
}
.appbar-brand img {
  width: 28px;
  height: 28px;
  border-radius: 50%
}
.appbar-avatar:focus-visible,
.appbar-brand:focus-visible,
.appbar-sign-in:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px
}
.appbar-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  cursor: pointer
}
.appbar-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.appbar-sign-in {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer
}
body.platform-mode .app {
  padding-bottom: var(--safe-bottom)
}
body.platform-mode .scroll {
  padding-bottom: 104px
}
.home {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 20px;
  min-width: 0
}
.home-block {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  min-width: 0
}
.home-tabs-block {
  gap: 14px
}
.home-panes {
  margin: 0 calc(-1 * (var(--safe-right) + 16px)) 0 calc(-1 * (var(--safe-left) + 16px));
  padding: 0 calc(var(--safe-right) + 16px) 0 calc(var(--safe-left) + 16px);
  overflow-x: clip
}
.home-pane {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 10px;
  min-width: 0
}
#homeStoresList.is-empty {
  border-top: 0
}
.home-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
.home-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-muted)
}
.home-head-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--accent)
}
.home-head-icon svg {
  width: 16px;
  height: 16px
}
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer
}
.home-link svg {
  width: 15px;
  height: 15px
}
.home-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px
}
.home-head-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px
}
.home-icon-link {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: 0 0;
  color: var(--text-muted);
  cursor: pointer
}
.home-icon-link svg {
  width: 16px;
  height: 16px
}
.home-icon-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.home-deck {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  column-gap: 12px;
  margin: 0 calc(-1 * (var(--safe-right) + 16px)) 0 calc(-1 * (var(--safe-left) + 16px));
  padding: 2px calc(var(--safe-right) + 16px) 4px calc(var(--safe-left) + 16px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 calc(var(--safe-left) + 16px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch
}
.home-deck::-webkit-scrollbar {
  display: none
}
.home-deck.is-deck {
  grid-auto-columns: min(84%,340px)
}
.home-pager {
  font-size: 12px;
  color: var(--text-subtle)
}
.pass {
  position: relative;
  min-width: 0;
  min-height: 176px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  text-align: left
}
.pass-top {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 4px;
  width: 100%;
  padding: 14px 16px 12px;
  border: 0;
  background: 0 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer
}
.pass-add:focus-visible,
.pass-top:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: var(--radius-lg)
}
.pass-eyebrow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--text-muted)
}
.pass-eyebrow > span {
  white-space: nowrap
}
.pass-eyebrow > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.pass-ticket .pass-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere
}
.pass-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25
}
.pass-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted)
}
.pass-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted)
}
.pass-text.small {
  font-size: 12px;
  color: var(--text-subtle)
}
.pass-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 800
}
.pass-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.pass-ticket {
  border-color: var(--accent-weak-border);
  background: color-mix(in srgb,var(--accent) 9%,var(--surface-2))
}
.pass-ticket .pass-eyebrow {
  color: var(--accent)
}
.pass-stub {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 10px 16px;
  border-top: 1.5px dashed var(--accent-weak-border)
}
.pass-stub::after,
.pass-stub::before {
  content: "";
  position: absolute;
  top: -11.75px;
  width: 10px;
  height: 20px;
  border: 1px solid var(--accent-weak-border);
  background: var(--bg)
}
.pass-stub::before {
  left: -1px;
  border-left: 0;
  border-radius: 0 11px 11px 0
}
.pass-stub::after {
  right: -1px;
  border-right: 0;
  border-radius: 11px 0 0 11px
}
.pass-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted)
}
.pass-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-contrast);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer
}
.pass-action svg {
  width: 18px;
  height: 18px
}
.pass-action.ghost {
  border: 1px solid var(--border-strong);
  background: 0 0;
  color: var(--text)
}
.pass-action.light {
  background: var(--text);
  color: var(--bg)
}
.pass-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.pass-seat-cells {
  display: flex;
  align-items: flex-end;
  gap: 18px
}
.pass-seat-cells > span {
  display: grid;
  gap: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--text-muted)
}
.pass-seat-cells b {
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--text);
  font-variant-numeric: tabular-nums
}
.pass-seat-cells b.gold {
  color: var(--accent)
}
.pass-seat-cells.muted b {
  color: var(--text-subtle)
}
.pass-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success)
}
.pass-wait {
  border-color: var(--border-strong);
  background: var(--surface-2)
}
.pass-wait .pass-eyebrow {
  color: var(--text-muted)
}
.pass-wait .pass-stub {
  border-top-color: var(--border-strong)
}
.pass-wait .pass-stub::after,
.pass-wait .pass-stub::before {
  border-color: var(--border-strong)
}
.pass-member {
  background: var(--surface-3)
}
.pass-member,
.pass-muted,
.pass-pending {
  min-height: 128px
}
.pass-member .pass-top,
.pass-muted .pass-top,
.pass-pending .pass-top {
  gap: 2px;
  padding: 11px 16px 10px
}
.pass-member .pass-eyebrow,
.pass-member .pass-title,
.pass-pending .pass-eyebrow,
.pass-pending .pass-title {
  margin-right: 68px
}
.pass-muted .pass-eyebrow,
.pass-muted .pass-title {
  margin-right: 92px
}
.pass-member .pass-title,
.pass-muted .pass-title,
.pass-pending .pass-title {
  height: 42px
}
.pass-member .pass-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.pass-pending .pass-eyebrow > span:first-child {
  flex: none
}
.pass-pending .pass-eyebrow > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.pass-muted .pass-sub,
.pass-pending .pass-sub {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.pass-action.pass-corner {
  position: absolute;
  top: 12px;
  right: 16px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 13px
}
.pass-name {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.2;
  overflow-wrap: anywhere
}
.pass-qr {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--text);
  color: var(--bg);
  cursor: pointer
}
.pass-qr.ghost {
  border: 1px solid var(--border-strong);
  background: 0 0;
  color: var(--text)
}
.pass-qr svg {
  width: 28px;
  height: 28px
}
.pass-qr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
[data-tier-face] {
  --text: #fff;
  --text-muted: rgba(255, 255, 255, 0.8);
  --text-subtle: rgba(255, 255, 255, 0.66);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.16);
  color: var(--text)
}
[data-tier-face]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(100deg,rgba(0,0,0,.68) 0,rgba(0,0,0,.44) 55%,rgba(0,0,0,.16) 100%),var(--tier-image,none) center/cover no-repeat;
  pointer-events: none
}
[data-tier-face=bronze] {
  background: linear-gradient(135deg,#3b2416 0,#9a6038 48%,#2e1b10 100%)
}
[data-tier-face=silver] {
  background: linear-gradient(135deg,#2a2e34 0,#7d858f 48%,#22262b 100%)
}
[data-tier-face=gold] {
  background: linear-gradient(135deg,#3d2c0c 0,#c99632 48%,#33240a 100%)
}
[data-tier-face=platinum] {
  background: linear-gradient(135deg,#3a3f47 0,#b9c0c9 48%,#30353c 100%)
}
[data-tier-face=black] {
  border-color: rgba(217,161,60,.7);
  background: linear-gradient(135deg,#050506 0,#2a2a30 48%,#050506 100%)
}
[data-tier-face] .badge {
  background: rgba(0,0,0,.35);
  color: #fff
}
.pass-muted,
.pass-pending {
  border-style: dashed;
  background: 0 0
}
.pass-muted .pass-title {
  color: var(--text-muted)
}
.pass-guide {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  border-style: dashed;
  background: var(--surface)
}
.pass-guide > .button {
  width: 100%
}
.pass-paths {
  display: grid
}
.pass-path {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--border)
}
.pass-path .button {
  flex: none;
  min-height: 40px
}
.pass-path-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px
}
.pass-path-main b {
  font-size: 15px
}
.pass-path-main small {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted)
}
.pass-buttons {
  display: grid;
  gap: 8px
}
.pass-buttons .pass-text.small {
  margin: -2px 0 4px;
  text-align: center
}
.pass-rank {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 2px
}
.pass-rank b {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--accent)
}
.pass-rank span {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums
}
.pass-balance {
  font-variant-numeric: tabular-nums
}
.pass-member .pass-balance {
  margin-right: 40px
}
.balance-eye .eye-on,
.balance-shown .balance-eye .eye-off,
.balance-shown .secret-off,
.secret-on {
  display: none
}
.balance-shown .balance-eye .eye-on,
.balance-shown .secret-on {
  display: inline
}
.secret-off {
  letter-spacing: .12em
}
.balance-eye {
  position: absolute;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: 0 0;
  color: var(--text-muted);
  cursor: pointer
}
.balance-eye svg {
  width: 20px;
  height: 20px
}
.balance-eye:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0
}
.pass-eye {
  right: 24px;
  bottom: 3px
}
.sp-face-wrap {
  position: relative
}
.sp-face-eye {
  right: 10px;
  bottom: 8px
}
.sp-face[data-tier-face] + .sp-face-eye {
  color: rgba(255,255,255,.8)
}
.pass-add {
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 16px 18px;
  border-style: dashed;
  background: 0 0;
  font: inherit;
  cursor: pointer
}
.pass-add b {
  font-size: 20px
}
.pass-add span {
  font-size: 13px;
  color: var(--text-muted)
}
.live-dot {
  flex: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success)
}
.home-live {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.home-live b {
  flex: none;
  font-size: 14px
}
.home-live span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap
}
.home-live svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-subtle)
}
.home-live:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.t-rows {
  display: grid;
  border-top: 1px solid var(--border)
}
.t-rows.is-empty {
  border-top: 0
}
.t-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 72px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: 0 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.t-row:active {
  background: var(--surface)
}
.t-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px
}
.t-row.mine {
  background: color-mix(in srgb,var(--accent) 7%,transparent)
}
.t-row.closed {
  opacity: .6
}
.t-row-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-muted);
  font-weight: 800
}
.t-row-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
[data-initial] > img {
  transition: opacity .16s cubic-bezier(.2, .7, .2, 1)
}
[data-initial] > img.img-wait {
  opacity: 0
}
@media (prefers-reduced-motion:reduce) {
  [data-initial] > img {
    transition: none
  }
}
.t-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px
}
.t-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0
}
.t-row-name b {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap
}
.t-row-sub {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap
}
.t-row-sub.live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--success)
}
.t-row-sub.live > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}
.t-row-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--pill);
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 11px;
  font-weight: 800
}
.t-row-tag.off,
.t-row-tag.wait {
  background: var(--surface-3);
  color: var(--text-muted)
}
.t-row-side {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 4px;
  width: 84px
}
.t-row-price {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.t-row-bar {
  width: 64px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-3);
  overflow: hidden
}
.t-row-bar::before {
  content: "";
  display: block;
  width: var(--fill,0%);
  height: 100%;
  border-radius: inherit;
  background: var(--text-muted)
}
.t-row-bar.full::before {
  background: var(--danger)
}
.t-row-count {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.t-rows-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: 0 0;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer
}
.t-rows-more svg {
  width: 15px;
  height: 15px
}
.t-cards {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px
}
.t-cards > .empty,
.t-cards > .home-empty,
.t-cards > .t-rows-more {
  grid-column: 1/-1
}
.t-cards > .t-rows-more {
  border: 1px solid var(--border);
  border-radius: var(--radius)
}
.t-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.t-card:active {
  background: var(--surface)
}
.t-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.t-card.mine {
  border-color: var(--accent-weak-border);
  background: color-mix(in srgb,var(--accent) 9%,var(--surface-2))
}
.t-card.closed {
  opacity: .6
}
.t-card.muted {
  opacity: .55
}
.t-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 10px;
  background: var(--surface-3)
}
.t-card-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800
}
.t-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.t-card-top .sk-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px
}
.t-card-store {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap
}
.t-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 9px 10px 10px
}
.t-card-time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums
}
.t-card-time .t-start-original {
  margin-left: 0
}
.t-card-name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere
}
.t-card-promo {
  overflow: hidden;
  color: var(--accent);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.t-card-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px
}
.t-card .t-row-bar {
  width: 100%
}
.t-rows-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px
}
.home-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 22px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 14px;
  text-align: center
}
.schedule-days {
  display: flex;
  gap: 6px
}
.schedule-day {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 4px 2px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  cursor: pointer
}
.schedule-day-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--text)
}
.schedule-day-date {
  font-size: 11px;
  font-variant-numeric: tabular-nums
}
.schedule-day.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast)
}
.schedule-day.on .schedule-day-name {
  color: var(--accent-contrast)
}
.schedule-day-cal {
  flex: 0 0 48px
}
.schedule-day-cal svg {
  width: 20px;
  height: 20px
}
.schedule-day:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.schedule-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}
.schedule-filter-summary {
  min-width: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted)
}
.schedule-filter-button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer
}
.schedule-filter-button svg {
  width: 16px;
  height: 16px
}
.schedule-filter-button.on {
  border-color: var(--accent-weak-border);
  color: var(--accent)
}
.schedule-filter-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.schedule-filter-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center
}
.schedule-list {
  display: grid;
  gap: 18px
}
.schedule-group {
  display: grid;
  gap: 6px
}
.schedule-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800
}
.schedule-group-head small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-subtle)
}
.filter-body {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px
}
.filter-section {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 8px
}
.filter-section h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 800
}
.filter-section h4 small {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-subtle)
}
.filter-stores {
  display: grid;
  grid-template-columns: minmax(0,1fr)
}
.filter-store {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}
.filter-store input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--accent)
}
.filter-store-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 800
}
.filter-store-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.filter-store-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.member-tag {
  flex: none;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800
}
.member-tag.me {
  border-color: transparent;
  background: var(--accent-weak);
  color: var(--accent)
}
.member-tag.off {
  border-color: transparent
}
.member-tag.danger {
  border-color: var(--danger-border);
  background: var(--danger-weak);
  color: var(--danger)
}
.filter-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  cursor: pointer
}
.filter-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px
}
.filter-switch-track {
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  background: var(--surface-3);
  transition: background .15s ease,border-color .15s ease
}
.filter-switch-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: transform .15s ease,background .15s ease
}
.filter-switch[aria-checked=true] .filter-switch-track {
  border-color: var(--accent);
  background: var(--accent)
}
.filter-switch[aria-checked=true] .filter-switch-track i {
  transform: translateX(18px);
  background: var(--accent-contrast)
}
.chip-row.wrap {
  flex-wrap: wrap
}
.filter-actions {
  position: sticky;
  bottom: calc(-20px - env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin: 0 -18px calc(-20px - env(safe-area-inset-bottom));
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface)
}
.text-button {
  justify-self: start;
  padding: 0;
  border: 0;
  background: 0 0;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer
}
.empty .text-button {
  margin-top: 8px
}
.assoc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-subtle)
}
.assoc-search:focus-within {
  border-color: var(--accent)
}
.assoc-search svg {
  flex: none;
  width: 18px;
  height: 18px
}
.assoc-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: 0 0;
  color: var(--text);
  font-size: 16px
}
.assoc-search input:focus {
  box-shadow: none
}
.assoc-list {
  display: grid;
  border-top: 1px solid var(--border)
}
.assoc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 68px;
  padding: 10px 2px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: 0 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.assoc-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 10px
}
.assoc-row > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-subtle)
}
.assoc-row-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-muted);
  font-weight: 800
}
.assoc-row-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.assoc-row-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 2px
}
.assoc-row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0
}
.assoc-row-name b {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.assoc-row-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted)
}
.assoc-row-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--success)
}
.assoc-row.is-muted .assoc-row-logo,
.assoc-row.is-muted .assoc-row-main {
  opacity: .55
}
.assoc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  isolation: isolate
}
.assoc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: calc(var(--radius) - 4px);
  background: 0 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer
}
.assoc-tab.on {
  color: var(--accent)
}
.assoc-tab.on::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent-weak);
  transform: translateX(var(--pill-x,0));
  transition: var(--pill-t, none)
}
.assoc-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.assoc-tab-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 20px
}
.assoc-tab.on .assoc-tab-count {
  background: var(--accent);
  color: var(--accent-contrast)
}
#tabAssocs {
  overflow-x: clip
}
.orb-dock {
  position: relative;
  z-index: 30;
  flex: none;
  height: 0
}
.orb-shade {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s cubic-bezier(.2, .7, .2, 1)
}
.orb-dock.is-open .orb-shade {
  opacity: 1;
  pointer-events: auto
}
.orb,
.orb-menu {
  position: absolute;
  right: calc(var(--safe-right) + 16px);
  bottom: 16px;
  width: 60px;
  height: 60px
}
.orb-dock[data-side=left] .orb,
.orb-dock[data-side=left] .orb-menu {
  right: auto;
  left: calc(var(--safe-left) + 16px)
}
.orb {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,var(--surface-3),var(--bg) 78%);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--bg),0 0 0 4px var(--accent-weak-border),0 14px 28px -8px rgba(0,0,0,.75);
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: bottom right;
  will-change: transform;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1),opacity .42s cubic-bezier(.22, 1, .36, 1)
}
.orb-dock[data-side=left] .orb {
  transform-origin: bottom left
}
.orb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px
}
.orb-icon {
  position: relative;
  display: grid;
  place-items: center
}
.orb-icon svg {
  width: 24px;
  height: 24px
}
.orb-dock.is-small .orb {
  transform: scale(.72);
  opacity: .7
}
.orb-dock.is-dragging .orb {
  transition: none
}
.orb-dock.has-hint .orb {
  box-shadow: 0 0 0 3px var(--bg),0 0 0 6px var(--accent),0 14px 28px -8px rgba(0,0,0,.75)
}
.orb-menu {
  pointer-events: none
}
.orb-item {
  position: absolute;
  top: 2px;
  left: 2px;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 10px 22px -8px rgba(0,0,0,.7);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transform: translate(0,0) scale(.4);
  transition: transform .2s cubic-bezier(.2, .7, .2, 1),opacity .16s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 30ms)
}
.orb-dock.is-open .orb-item {
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--tx),var(--ty)) scale(1)
}
.orb-item svg {
  width: 24px;
  height: 24px
}
.orb-item.on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-contrast)
}
.orb-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px
}
.orb-item-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 8px);
  padding: 5px 12px;
  border-radius: var(--pill);
  background: var(--surface-3);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transform: translateY(-50%)
}
.orb-dock[data-side=left] .orb-item-label {
  right: auto;
  left: calc(100% + 8px)
}
.orb-item.on .orb-item-label {
  background: var(--accent);
  color: var(--accent-contrast)
}
.orb-hint {
  position: absolute;
  right: calc(var(--safe-right) + 16px);
  bottom: 92px;
  display: grid;
  gap: 6px;
  width: min(290px,calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 16px;
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: var(--shadow-md)
}
.orb-dock[data-side=left] .orb-hint {
  right: auto;
  left: calc(var(--safe-left) + 16px)
}
.orb-hint b {
  font-size: 16px;
  color: var(--text)
}
.orb-hint .button {
  justify-self: end;
  min-height: 40px;
  margin-top: 4px
}
.live-bar {
  position: absolute;
  left: calc(var(--safe-left) + 16px);
  right: calc(var(--safe-right) + 86px);
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 14px;
  border: 1px solid var(--accent-weak-border);
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  text-align: left;
  box-shadow: 0 14px 28px -10px rgba(0,0,0,.8);
  cursor: pointer;
  transition: opacity .18s cubic-bezier(.2, .7, .2, 1)
}
.orb-dock[data-side=left] .live-bar {
  left: calc(var(--safe-left) + 86px);
  right: calc(var(--safe-right) + 16px)
}
.orb-dock.has-hint .live-bar,
.orb-dock.is-open .live-bar {
  opacity: 0;
  pointer-events: none
}
.live-bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px
}
.live-bar-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px
}
.live-bar-main b,
.live-bar-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.live-bar-main b {
  font-size: 14px;
  font-weight: 800
}
.live-bar-main span {
  font-size: 12px;
  color: var(--text-muted)
}
.live-bar-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent)
}
.live-bar-icon svg {
  width: 18px;
  height: 18px
}
.live-bar > svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--text-subtle)
}
.live-bar-seat {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-variant-numeric: tabular-nums
}
.live-bar-seat small {
  font-size: 11px;
  color: var(--text-muted)
}
.live-bar-seat b {
  font-size: 20px;
  font-weight: 800;
  line-height: 1
}
.live-bar-seat small + b + small {
  margin-left: 6px
}
.live-bar-seat b.gold {
  color: var(--accent)
}
.sheet-steps {
  display: flex;
  gap: 6px
}
.sheet-steps i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--surface-3)
}
.sheet-steps i.on {
  background: var(--accent)
}
.sheet-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 40px;
  padding: 0 6px 0 0;
  border: 0;
  background: 0 0;
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer
}
.sheet-back svg {
  width: 20px;
  height: 20px
}
.sheet-back:not(.hidden) + h3 {
  flex: 1
}
.bind-store {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2)
}
.bind-store:empty {
  display: none
}
.bind-pick-logo,
.bind-store-logo {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-3);
  color: var(--text-muted);
  font-weight: 800
}
.bind-pick-logo img,
.bind-store-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}
.bind-store-main {
  min-width: 0;
  display: grid;
  gap: 2px
}
.bind-store-main b {
  font-size: 15px;
  overflow-wrap: anywhere
}
.bind-store-main span {
  font-size: 12px;
  color: var(--text-muted)
}
.bind-carry {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6
}
.bind-fail {
  display: grid;
  gap: 12px
}
.bind-fail-text {
  padding: 12px 14px;
  border: 1px solid var(--danger-border);
  border-radius: 12px;
  background: var(--danger-weak);
  color: var(--danger);
  font-size: 13px;
  line-height: 1.6
}
.bind-help {
  display: grid;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
  list-style: none;
  counter-reset: bind-help
}
.bind-help li {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr);
  column-gap: 10px;
  row-gap: 2px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  counter-increment: bind-help
}
.bind-help li::before {
  content: counter(bind-help);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text);
  font-size: 12px;
  font-weight: 800
}
.bind-help li.warn::before {
  content: "!";
  background: var(--danger-weak);
  color: var(--danger)
}
.bind-help b {
  font-size: 14px
}
.bind-help span {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5
}
.bind-done {
  justify-items: center;
  text-align: center
}
.bind-done-mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast)
}
.bind-done-mark svg {
  width: 32px;
  height: 32px
}
.bind-done h3 {
  font-size: 22px
}
.bind-done-sub {
  margin-top: -6px;
  color: var(--text-muted);
  font-size: 14px
}
.bind-done-box {
  width: 100%;
  padding: 4px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: left
}
.bind-done-box-head {
  padding: 8px 0 4px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700
}
.bind-done-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  border-top: 1px solid var(--border);
  font-size: 15px
}
.bind-done-row span {
  color: var(--text-muted)
}
.bind-done-row b {
  font-variant-numeric: tabular-nums
}
.bind-done .button {
  width: 100%
}
.bind-done-more {
  justify-self: center
}
.new-steps {
  display: grid;
  gap: 8px
}
.new-step-label {
  color: var(--text);
  font-size: 15px;
  font-weight: 800
}
.new-step-lead {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.6
}
.pass-track {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-subtle);
  font-size: 12px;
  white-space: nowrap
}
.pass-track i {
  flex: 1;
  min-width: 8px;
  height: 1px;
  background: var(--border-strong)
}
.pass-track b {
  color: var(--text)
}
.pass-track .ok {
  color: var(--success);
  font-weight: 700
}
.pass-path-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800
}
.pass-fresh {
  padding: 1px 8px;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-contrast);
  letter-spacing: 0
}
.apply-rows {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  border-top: 1px solid var(--border)
}
.apply-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  border-bottom: 1px solid var(--border)
}
.apply-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border: 0;
  background: 0 0;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer
}
.apply-row-text {
  min-width: 0;
  display: grid;
  gap: 2px
}
.apply-row-text b,
.apply-row-text span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.apply-row-text b {
  font-size: 15px
}
.apply-row-text span {
  font-size: 13px;
  color: var(--text-muted)
}
#homeStoresList .apply-row-main > svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--text-subtle)
}
.t-row.muted {
  opacity: .55
}
.new-carrier-hint {
  color: var(--text-subtle);
  font-size: 12px
}
#newForm:not([data-step]) .new-carrier-hint {
  display: none
}
.bind-actions {
  display: flex;
  gap: 10px
}
.bind-actions .button {
  flex: 1
}
.bind-done-oa {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left
}
.bind-done-oa span {
  flex: 1
}
.assoc-bind {
  margin-top: 12px
}
.appbar-sign-in,
.filter-body .chip,
.home-icon-link,
.home-link,
.pass-action,
.schedule-filter-button,
.sheet-back,
body.platform-mode .back-button:not(.storepage-back) {
  position: relative
}
.appbar-sign-in::after,
.filter-body .chip::after,
.home-icon-link::after,
.home-link::after,
.pass-action::after,
.schedule-filter-button::after,
.sheet-back::after,
body.platform-mode .back-button::after {
  content: "";
  position: absolute;
  inset: -6px
}
#newForm[data-step="1"] #newSubmitButton,
#newForm[data-step="1"] [data-new-step="2"],
#newForm[data-step="2"] [data-new-step="1"] {
  display: none
}
@media (prefers-reduced-motion:reduce) {
  .live-bar,
  .orb,
  .orb-item,
  .orb-shade {
    transition: none
  }
}