:root {
  --bg: #f4f4f5;
  --surface: #ffffff;
  --fg: #1c1c1e;
  --muted: #6b6b73;
  --subtle: #8e8e93;
  --primary: #3390ec;
  --primary-fg: #ffffff;
  --star: #e8a317;
  --danger: #e53935;
  --border: color-mix(in oklab, #1c1c1e 10%, transparent);
  --card: 0 0 0 1px color-mix(in oklab, #1c1c1e 6%, transparent), 0 1px 2px color-mix(in oklab, #1c1c1e 4%, transparent);
  --app-height: 100dvh;
  --tg-safe-top: 0px;
  --tg-safe-bottom: 0px;
  font-family: "SF Pro Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}
html.dark {
  color-scheme: dark;
  --bg: #000;
  --surface: #1c1c1e;
  --fg: #f2f2f7;
  --muted: #8e8e93;
  --subtle: #636366;
  --primary: #0a84ff;
  --star: #ffd60a;
  --danger: #ff453a;
  --border: color-mix(in oklab, #fff 12%, transparent);
  --card: 0 0 0 1px color-mix(in oklab, #fff 10%, transparent);
}
* { box-sizing: border-box; }
html, body {
  height: var(--app-height);
  max-height: var(--app-height);
  margin: 0;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  overscroll-behavior-x: none;
  background: var(--surface);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  position: fixed;
  inset: 0;
  width: 100%;
}
img { max-width: 100%; display: block; outline: 1px solid color-mix(in oklab, var(--fg) 10%, transparent); outline-offset: -1px; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; font-size: 16px; }
.app-shell {
  height: var(--app-height);
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  padding-top: var(--tg-safe-top);
  padding-bottom: var(--tg-safe-bottom);
  overflow: hidden;
}
.app-header {
  height: 3rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 .25rem;
  flex-shrink: 0;
}
.app-header h1 {
  flex: 1;
  margin: 0;
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.icon-btn { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; color: var(--primary); }
.app-main { flex: 1; min-height: 0; overflow: auto; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.app-nav {
  display: flex;
  min-height: 3.5rem;
  height: auto;
  padding-bottom: max(4px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  z-index: 8;
  transform: none;
  transition: none;
}
.app-nav a {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 3.25rem;
  padding: 0 1px;
  font-size: 9px;
  font-weight: 500;
  color: var(--subtle);
  transition: color .15s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-nav a.active { color: var(--primary); }
.hero { position: relative; height: 13rem; }
.hero img { width: 100%; height: 13rem; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.3), rgba(0,0,0,.1)); }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; color: #fff; }
.hero-text h2 { margin: .25rem 0; font-size: 1.5rem; }
.hero-text h2.brand {
  font-family: "Unbounded", "SF Pro Display", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 1.55rem;
}
.hero-text p { margin: .25rem 0 0; max-width: 20rem; font-size: .875rem; opacity: .9; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 1rem 1rem 0; }
.shortcuts-3 { grid-template-columns: 1fr 1fr 1fr; }
.shortcuts-3 strong { font-size: 12px; }
.shortcuts a { background: var(--bg); border-radius: .75rem; padding: 1rem; box-shadow: var(--card); }
.shortcuts strong { display: block; margin-top: .75rem; font-size: 15px; }
.shortcuts small { color: var(--muted); font-size: 12px; }
.today-card {
  display: block;
  margin: .75rem 1rem 0;
  padding: .7rem .85rem .75rem;
  background: #eaf3fc;
  border: 1px solid rgba(51, 144, 236, .22);
  border-radius: .85rem;
  position: relative;
  z-index: 2;
}
html.dark .today-card {
  background: #243044;
  border: 1px solid rgba(10, 132, 255, .35);
}
.today-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.today-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.today-react {
  flex-shrink: 0;
  height: 1.4rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--card);
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.today-text {
  margin: .35rem 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--fg);
}
.tile-icon { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: .5rem; background: var(--surface); color: var(--primary); }
.chips { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1rem; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chips::-webkit-scrollbar { display: none; }
.chips a, .chip-opt {
  flex-shrink: 0;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  padding: 0 .9rem;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
}
.chips a.chip-on,
.chip-on,
.chip-opt:has(input:checked) {
  background: var(--primary) !important;
  color: var(--primary-fg) !important;
}
.chip-opt input { display: none; }
.section { padding: 1.5rem 1rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.section-head a, .section h3 { font-size: 1rem; }
.section-head a { color: var(--primary); font-weight: 500; font-size: 14px; }
.section h3 { margin: 0 0 .75rem; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .75rem;
  padding: .5rem;
  border-radius: .75rem;
  background: var(--surface);
  box-shadow: var(--card);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:active { transform: scale(.985); }
.card-img { width: 88px; height: 88px; border-radius: .5rem; overflow: hidden; background: var(--bg); flex-shrink: 0; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-body { min-width: 0; flex: 1; }
.card-own { position: relative; }
.card-own .card { padding-right: 6.8rem; }
.stack .card-own {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: .75rem;
  box-shadow: var(--card);
  overflow: hidden;
}
.stack .card-own .card {
  padding-right: .55rem;
  box-shadow: none;
  border-radius: 0;
}
.stack .card-actions {
  position: static;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 0 .5rem .5rem;
}
.card-actions {
  position: absolute;
  top: .45rem;
  right: .4rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .35rem;
}
.card-edit {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--primary);
}
.card-actions .card-edit { position: static; }
.card-actions .card-del { position: static; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.title-row .detail-title { margin: .35rem 0; flex: 1; }
.title-row .card-edit { position: static; flex-shrink: 0; }
.card-title { margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-sub { margin: .2rem 0 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-meta { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; font-size: 12px; color: var(--muted); }
.card-price { margin: .35rem 0 0; font-size: 14px; font-weight: 500; }
.card-del { position: absolute; top: .5rem; right: .5rem; z-index: 2; margin: 0; }
.card-del button {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  width: auto !important;
  padding: 0 10px !important;
  margin: 0;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(229, 57, 53, .16) !important;
  color: #e53935 !important;
  font: 600 11px/1 "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
  cursor: pointer;
}
.stars { display: inline-flex; color: var(--star); gap: 1px; }
.place-btn { flex-shrink: 0; }
.pad { padding: 1rem; }
.pad-top { padding: 1rem 1rem 0; }
.muted { color: var(--muted); font-size: 14px; }
.tiny { font-size: 12px; }
.btn {
  display: flex; align-items: center; justify-content: center;
  height: 3rem; width: 100%; border: 0; border-radius: .75rem;
  background: var(--primary); color: var(--primary-fg); font-weight: 500;
}
.empty { background: var(--bg); border-radius: .75rem; padding: 1.5rem 1rem; color: var(--muted); font-size: 14px; }
.carousel-main { position: relative; }
.carousel-track { display: flex; aspect-ratio: 4/3; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; scroll-snap-align: center; }
.carousel-count { position: absolute; right: .75rem; bottom: .75rem; margin: 0; background: color-mix(in oklab, var(--fg) 70%, transparent); color: var(--bg); border-radius: 999px; padding: .15rem .5rem; font-size: 11px; font-variant-numeric: tabular-nums; }
.carousel-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .75rem 1rem .25rem; scrollbar-width: none; }
.carousel-thumbs::-webkit-scrollbar { display: none; }
.carousel-thumbs button { width: 5rem; height: 4rem; padding: 0; border: 0; border-radius: .5rem; overflow: hidden; opacity: .55; background: var(--bg); flex-shrink: 0; }
.carousel-thumbs button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--primary); }
.carousel-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail-title { margin: .35rem 0; font-size: 1.25rem; }
.price { font-weight: 600; }
.lead, .review p { white-space: pre-wrap; font-size: 15px; line-height: 1.5; }
.review p { font-size: 14px; line-height: 1.45; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  margin: 0;
  background: rgba(0,0,0,.92);
  display: grid;
  place-items: center;
  padding: 1rem;
}
.photo-edit { display: flex; gap: .6rem; overflow-x: auto; padding: .25rem 0 .75rem; }
.photo-edit-item { flex-shrink: 0; width: 7.5rem; }
.photo-edit-item img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: contain;
  background: var(--bg);
  border-radius: .5rem;
}
.photo-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.photo-tools form { margin: 0; min-width: 0; }
.photo-btn {
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--bg);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.photo-btn.danger { color: var(--danger); }
.photo-btn input { display: none; }
.photo-tools button:disabled { opacity: .35; }
.review { display: block; background: var(--bg); border-radius: .75rem; padding: .75rem; }
.review-own { position: relative; }
.review-own .review { margin: 0; padding-right: 5.4rem; }
.review-own .card-del {
  position: absolute;
  top: 50%;
  right: .65rem;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
}
.review-gone { opacity: .65; pointer-events: none; }
.review-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: 14px; font-weight: 500; }
.review-author { display: flex; align-items: center; gap: .45rem; margin: 0; min-width: 0; }
.review-author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--surface); }
.btn-raise {
  margin-top: .9rem;
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: .85rem;
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
}
.btn-raise.slim {
  width: auto;
  height: 28px;
  margin: 0;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
}
.review p { margin: .4rem 0 0; font-size: 14px; line-height: 1.45; }
.review-photo { margin-top: .5rem; height: 9rem; width: 100%; object-fit: cover; border-radius: .5rem; }
.review-form { margin-top: 1rem; background: var(--bg); border-radius: .75rem; padding: 1rem; }
.review-form .photo-field { margin: 1.1rem 0 1.35rem; }
.review-form .btn { margin-top: .25rem; }
.review-form .btn[hidden] { display: none !important; }
.rate { display: flex; gap: .15rem; color: var(--star); }
.rate input { display: none; }
.rate label { font-size: 28px; opacity: .35; padding: .35rem .4rem; min-width: 2.5rem; text-align: center; }
.label { display: block; margin: .9rem 0 .35rem; font-size: 12px; font-weight: 500; color: var(--muted); }
.review-form textarea, .add-form input, .add-form textarea {
  width: 100%; border: 0; border-radius: .5rem; padding: .65rem .75rem; background: var(--surface); box-shadow: var(--card);
}
.rate { display: flex; gap: .5rem; color: var(--star); }
.rate input { display: none; }
.rate label { font-size: 22px; opacity: .35; }
.rate label:has(input:checked), .rate label:has(input:checked) ~ label { opacity: .35; }
.rate label:has(input:checked), .rate label:has(input:checked) { opacity: 1; }
.profile-head { display: flex; gap: 1rem; align-items: center; }
.avatar { width: 5rem; height: 5rem; border-radius: .75rem; object-fit: cover; background: var(--fg); }
.profile-name { margin: 0; font-size: 1.125rem; font-weight: 600; }
.username { margin: .15rem 0; color: var(--primary); font-weight: 500; font-size: 14px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: 0 1rem; }
.stats div { background: var(--bg); border-radius: .75rem; padding: .75rem 1rem; }
.stats strong { display: block; font-size: 1.5rem; }
.stats span { font-size: 12px; color: var(--muted); }
.settings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--bg);
  border-radius: .7rem;
  padding: .55rem .75rem;
  min-height: 0;
  border: 0;
  width: 100%;
}
.settings + .settings { margin-top: .4rem; }
.settings p { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.2; }
.settings small { display: block; margin-top: .12rem; font-size: 11px; line-height: 1.25; }
.switch {
  flex-shrink: 0;
  width: 2.5rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 0;
  background: #d1d1d6;
  position: relative;
}
.switch::after {
  content: "";
  position: absolute;
  top: .12rem;
  left: .12rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.switch.on { background: var(--primary); }
.switch.on::after { transform: translateX(1.05rem); }
html.dark .switch { background: #3a3a3c; }
.seg { display: flex; background: var(--bg); border-radius: .75rem; padding: .25rem; }
.seg label { flex: 1; height: 2.75rem; display: grid; place-items: center; border-radius: .5rem; font-size: 14px; font-weight: 500; color: var(--muted); }
.seg label.on { background: var(--surface); color: var(--fg); box-shadow: var(--card); }
.seg input { display: none; }
.add-form .btn { margin-top: 1.25rem; }
.error { color: var(--danger); font-size: 14px; }
button, .btn, .btn-contact, .btn-share, .btn-sold, .app-nav a {
  touch-action: manipulation;
  cursor: pointer;
}
.contact-row {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
  align-items: stretch;
  position: relative;
  z-index: 6;
}
.btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 3rem;
  flex: 7 1 0;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: .75rem;
  background: #229ed9;
  color: #fff;
  font-weight: 600;
}
.btn-share {
  flex: 3 1 0;
  min-width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 0;
  appearance: none;
  border-radius: .75rem;
  background: color-mix(in oklab, var(--primary) 16%, transparent);
  color: var(--primary);
}
.btn-share.wide { flex: 1; }
.contact-hint { margin: .45rem 0 0; }
.fold { display: flex; flex-direction: column; gap: .75rem; }
.fold[hidden] { display: none !important; }
.fold-toggle {
  width: 100%;
  height: 2.5rem;
  border: 0;
  border-radius: .75rem;
  background: var(--bg);
  color: var(--primary);
  font-weight: 600;
  font-size: 14px;
  transition: background .15s ease, transform .15s ease;
}
.fold-toggle:active { transform: scale(.98); }
.addr { margin: .5rem 0 0; font-size: 14px; color: var(--muted); }
.map-card {
  margin-top: 1rem;
  border-radius: .75rem;
  overflow: hidden;
  box-shadow: var(--card);
  background: var(--bg);
}
.map-preview, .map-picker { height: 11rem; width: 100%; background: var(--bg); border: 0; display: block; }
.map-picker { border-radius: .75rem; overflow: hidden; margin-top: .75rem; }
.addr-wrap { position: relative; z-index: 5; overflow: visible; }
.suggest {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border-radius: .75rem;
  box-shadow: var(--card);
  max-height: 12rem;
  overflow: auto;
}
.suggest li { padding: .7rem .85rem; font-size: 14px; border-bottom: 1px solid var(--border); }
.suggest li:last-child { border-bottom: 0; }
.map-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.75rem;
  background: var(--primary);
  color: var(--primary-fg);
  font-size: 14px;
  font-weight: 600;
}
.rate label { opacity: .35; cursor: pointer; }
.rate label:has(~ label input:checked) { opacity: 1; }
.rate label:has(input:checked) { opacity: 1; }
.rate label:has(input:checked) ~ label { opacity: .35; }
.btn-support {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.4rem;
  width: 100%;
  border-radius: .75rem;
  background: var(--bg);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
}
.btn-admin-del {
  margin-top: .6rem;
  border: 0;
  background: transparent;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}
.btn-sold {
  margin-top: .9rem;
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: .85rem;
  background: rgba(229, 57, 53, .12);
  color: #e53935;
  font-weight: 600;
  font-size: 15px;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 6;
}
.confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;
  padding: 1.25rem;
}
.confirm-box {
  width: 100%;
  max-width: 20rem;
  background: var(--surface);
  color: var(--fg);
  border-radius: 1rem;
  padding: 1.1rem 1rem 1rem;
  box-shadow: var(--card);
}
.confirm-box p { margin: 0 0 1rem; font-size: 15px; line-height: 1.4; }
.confirm-actions { display: flex; gap: .5rem; }
.confirm-actions button {
  flex: 1;
  height: 2.6rem;
  border: 0;
  border-radius: .75rem;
  font-weight: 600;
}
.confirm-actions [data-no] { background: var(--bg); color: var(--fg); }
.confirm-actions [data-yes] { background: #e53935; color: #fff; }
.place-btn { padding-bottom: 0; }
.chips-stick {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--surface);
}
.chips a:active, .chip-opt:active { transform: scale(.96); }
.btn { transition: transform .15s ease, opacity .15s ease; }
.btn:active { transform: scale(.98); }
.lightbox {
  animation: fadeIn .18s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.market-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  padding: .2rem 1rem 1.25rem;
}
.market-grid > .market-card,
.market-grid > .grid-item {
  min-width: 0;
  width: 100%;
}
.market-grid > .card-own > .card-edit,
.rail-item > .card-edit,
.grid-item > .card-edit {
  z-index: 5;
  width: 30px;
  height: 30px;
  background: color-mix(in oklab, #fff 84%, var(--primary));
  color: var(--primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
html.dark .market-grid > .card-own > .card-edit,
html.dark .rail-item > .card-edit,
html.dark .grid-item > .card-edit {
  background: color-mix(in oklab, #1c1c1e 72%, var(--primary));
}
.was-price {
  display: block;
  margin-top: .15rem;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: line-through;
}
.sold-badge {
  position: absolute;
  top: .55rem;
  left: .55rem;
  z-index: 3;
  padding: .28rem .5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.market-card.is-sold { opacity: .78; }
.sold-line {
  margin: .2rem 0 .4rem;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.search-dock {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 9;
}
.search-dock .search { padding: .45rem .75rem .5rem; }
html.kb-open .search-dock { z-index: 30; }
html.kb-open .app-nav { visibility: hidden; }
.search {
  padding: .2rem 1rem .65rem;
}
.search label {
  display: flex;
  align-items: center;
  gap: .45rem;
  height: 2.6rem;
  padding: 0 .9rem;
  border-radius: 999px;
  background: var(--bg);
}
.search svg { flex-shrink: 0; color: var(--muted); }
.search input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--fg);
  font-size: 15px;
}
.search input:focus { outline: none; }
.search label:focus-within {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary) 40%, transparent);
}
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-results-button { display: none; }
.btn-report, .btn-pause {
  margin-top: .85rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 0;
}
.btn-pause.slim {
  margin: 0;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: 11px;
}
.paused-note {
  margin: .7rem 0;
  padding: .75rem .85rem;
  border-radius: .8rem;
  background: color-mix(in oklab, var(--primary) 12%, var(--bg));
  font-size: 14px;
}
.restore-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .75rem .85rem;
  border-radius: .8rem;
  background: var(--surface);
  box-shadow: var(--card);
}
.restore-row p { margin: 0; font-weight: 600; }
.card-own > form { margin: .45rem 0 0; }
.market-grid > .empty { grid-column: 1 / -1; }
.market-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--card);
  min-width: 0;
  transition: transform .16s ease;
}
.market-card:active { transform: scale(.98); }
.market-card-img {
  aspect-ratio: 1;
  background: var(--bg);
  overflow: hidden;
}
.market-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: 0;
}
.card-photo-box {
  position: relative;
  aspect-ratio: 1;
  background: var(--bg);
  overflow: hidden;
}
.card-photos {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.card-photos::-webkit-scrollbar { display: none; }
.card-photos img {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  pointer-events: none;
}
.card-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .4rem;
  display: flex;
  justify-content: center;
  gap: .28rem;
  pointer-events: none;
}
.card-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.card-dots i.on { background: #fff; }
.market-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: .65rem .7rem .7rem;
  min-height: 6.4rem;
}
.market-card-body h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  min-height: 2.5em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.market-card-body p {
  margin: .3rem 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.market-price {
  margin: 0;
  padding: 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  white-space: normal;
}
.tile-foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  margin-top: auto;
  padding-top: .35rem;
}
.cat-rails {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: .2rem 0 1.4rem;
}
.cat-rail > h3,
.cat-rail-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0 0 .55rem;
  padding: 0 1rem;
  font-size: 17px;
  font-weight: 700;
  color: inherit;
}
.cat-rail-title small {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  flex-shrink: 0;
}
.grid-item { position: relative; min-width: 0; }
.rail-item .market-card,
.grid-item .market-card,
.market-grid > .market-card { height: 100%; }
.tile-rate {
  display: flex;
  align-items: center;
  gap: .28rem;
  margin-top: 0;
  min-height: 14px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}
.tile-rate .stars { display: inline-flex; gap: 1px; color: #f5a623; flex-shrink: 0; }
.tile-rate .stars svg { display: block; }
.rail {
  display: flex;
  gap: .7rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 4px 1rem 10px;
  scroll-padding-inline: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-item {
  position: relative;
  flex: 0 0 46%;
  min-width: 156px;
  max-width: 210px;
  scroll-snap-align: start;
  scroll-margin-left: 1rem;
}
.rail-item .market-card { height: 100%; }
.cat-rails .empty { margin: 0 1rem; }
.is-accent .market-card { position: relative; }
.is-accent .market-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  border: 2px solid var(--accent, var(--primary));
  pointer-events: none;
}
.accent-gold { --accent: #e8a317; }
.accent-blue { --accent: #3390ec; }
.accent-green { --accent: #34c759; }
.accent-pink { --accent: #ff375f; }
.is-accent .market-card-img { position: relative; }
.accent-crown {
  position: absolute;
  z-index: 2;
  top: .4rem;
  left: .4rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--accent, #e8a317);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
html.dark .accent-crown { background: #1c1c1e; }
.accent-form { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.accent-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.accent-pick {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  background: var(--bg);
  font-size: 13px;
  box-shadow: inset 0 0 0 1px transparent;
}
.accent-pick input { accent-color: var(--accent, var(--primary)); }
.accent-pick.on, .accent-pick:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent, var(--primary)); }
.accent-date {
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: .7rem;
  padding: 0 .8rem;
  background: var(--bg);
  color: var(--fg);
}
.accent-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.accent-actions .btn { flex: 1; margin: 0; }
.btn.ghost { background: var(--bg); color: var(--fg); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.rail-item, .grid-item, .market-grid > .market-card, .review, .today-card, .shortcuts a, .card {
  animation: fadeUp .34s ease both;
}
.rail-item:nth-child(2), .grid-item:nth-child(2) { animation-delay: .04s; }
.rail-item:nth-child(3), .grid-item:nth-child(3) { animation-delay: .08s; }
.market-card, .card, .shortcuts a, .today-card, .review, .btn, .chips a {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.market-card:active, .card:active, .shortcuts a:active { transform: scale(.975); }
.app-nav a { transition: color .18s ease; }
.app-nav a:active { transform: none; }
.seg-3 label { font-size: 12px; padding: 0 .2rem; }
.cat-page { padding-bottom: .25rem; }
.cat-lead { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.cat-block h3 { margin-bottom: .75rem; }
.cat-list { display: flex; flex-direction: column; gap: .65rem; }
.cat-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: .65rem;
  padding: .85rem;
  background: var(--bg);
  border-radius: .85rem;
}
.cat-move {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex-shrink: 0;
  margin: 0;
}
.cat-move button {
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem;
  flex: 1;
  min-height: 2.35rem;
  border: 0;
  border-radius: .65rem;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--border);
  display: grid;
  place-items: center;
}
.cat-move button:disabled { opacity: .28; }
.cat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.cat-rename, .cat-add {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin: 0;
}
.cat-field { display: flex; flex-direction: column; gap: .3rem; }
.cat-field span {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.cat-field input {
  width: 100%;
  height: 2.75rem;
  border: 0;
  border-radius: .65rem;
  padding: 0 .85rem;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--border);
  font-size: 16px;
  color: var(--fg);
}
.cat-item .cat-rename { flex: 1; }
.cat-remove { margin: 0; }
.cat-btn {
  appearance: none;
  -webkit-appearance: none;
  height: 2.6rem;
  border: 0;
  border-radius: .7rem;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.cat-btn.save { background: var(--primary); color: #fff; }
.cat-btn.add { background: var(--primary); color: #fff; }
.cat-btn.del {
  width: 100%;
  background: rgba(229, 57, 53, .14);
  color: #e53935;
}
.hl-preview { margin: .75rem 0 0; }
.hl-refresh { margin-top: .75rem; }
.hl-status { margin: .6rem 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); }