:root {
  color-scheme: dark;
  --bg: #111310;
  --surface: #1b1e19;
  --surface-2: #242821;
  --line: #343930;
  --text: #f5f6f0;
  --muted: #a8aea2;
  --green: #72dd75;
  --green-dark: #183c20;
  --gold: #f1c45b;
  --coral: #ff7d62;
  --radius: 8px;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding: env(safe-area-inset-top) 0 calc(28px + env(safe-area-inset-bottom));
  letter-spacing: 0;
}

button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 68px;
  padding: 12px 16px;
  background: rgba(17, 19, 16, .96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand { color: var(--green); font-size: 12px; font-weight: 800; }
.welcome { margin-top: 3px; font-size: 15px; font-weight: 650; }
.balance { border: 1px solid #436c42; background: var(--green-dark); padding: 9px 12px; border-radius: var(--radius); font-weight: 750; }

main { width: min(100%, 760px); margin: 0 auto; padding: 14px 14px 0; }

.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px;
  background: var(--surface);
}

.tab { min-height: 38px; padding: 6px 4px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; }
.tab.active { background: var(--text); color: #151713; }

.reviews-view { margin-top: 18px; }
.reviews-head { padding: 10px 2px 18px; }
.reviews-head .eyebrow { color: var(--green); }
.reviews-head h1 { font-size: 23px; }
.review-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.review-stat { display: grid; align-content: center; min-width: 0; min-height: 88px; padding: 10px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.review-stat span { min-height: 28px; color: var(--muted); font-size: 11px; line-height: 1.25; font-weight: 700; }
.review-stat strong { margin-top: 7px; font-size: 20px; }
.review-stat small { margin-top: -20px; justify-self: end; font-size: 12px; font-weight: 800; }
.review-stat.positive strong, .review-stat.positive small { color: var(--green); }
.review-stat.negative strong, .review-stat.negative small { color: var(--coral); }
.review-stat.active { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.reviews-list { display: grid; gap: 12px; margin-top: 18px; }
.review-card { padding: 15px; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--surface); }
.review-card.positive { border-left-color: var(--green); }
.review-card.negative { border-left-color: var(--coral); }
.review-card-head { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.review-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); font-size: 20px; }
.review-card-head strong { min-width: 0; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; text-transform: uppercase; }
.review-badge { padding: 5px 7px; border-radius: 5px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.positive .review-badge { color: var(--green); background: var(--green-dark); }
.negative .review-badge { color: var(--coral); background: #3b1e1b; }
.review-text { margin: 18px 0; font-size: 16px; line-height: 1.45; font-weight: 650; overflow-wrap: anywhere; }
.review-card footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 11px; font-weight: 650; }
.review-skeleton { height: 170px; }

.rent-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.rent-type { min-width: 0; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 5px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 750; }
.rent-type.active { background: var(--gold); color: #17150f; }

.search { display: flex; align-items: center; gap: 8px; margin: 12px 0 18px; padding: 0 12px; height: 44px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); }
.search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); }
.search input::placeholder { color: #777d73; }

.market-filters { display: grid; gap: 10px; margin: -8px 0 20px; }
.filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.filter-card { position: relative; display: grid; align-content: center; min-width: 0; min-height: 72px; padding: 10px 34px 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.filter-card span { color: var(--muted); font-size: 11px; font-weight: 650; }
.filter-card strong { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.filter-card i { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); font-style: normal; font-size: 20px; }
.filter-card.full { grid-column: 1 / -1; }
.sort-card { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; min-height: 58px; padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: left; }
.sort-card > span { grid-row: 1 / 3; color: var(--gold); font-size: 21px; }
.sort-card strong { font-size: 15px; }
.sort-card small { color: var(--muted); font-size: 11px; }
.number-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.number-filters label { display: grid; gap: 5px; min-width: 0; color: var(--muted); font-size: 11px; }
.number-filters input { width: 100%; height: 40px; min-width: 0; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); outline: 0; background: var(--surface); color: var(--text); font-size: 13px; }
.number-filters input:focus { border-color: var(--green); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
h1, h2 { margin: 0; font-size: 17px; line-height: 1.25; }
.text-button { border: 0; background: transparent; color: var(--green); padding: 4px; font-size: 13px; }
.muted { color: var(--muted); font-size: 12px; }

.collections { display: grid; grid-auto-flow: column; grid-auto-columns: 104px; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.collections::-webkit-scrollbar { display: none; }
.collection { width: 104px; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); text-align: left; }
.collection.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.collection-media { position: relative; width: 100%; aspect-ratio: 1; background: var(--surface-2); }
.collection img { display: block; width: 100%; height: 100%; object-fit: cover; }
.collection-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold); font-size: 22px; font-weight: 850; }
.collection span { display: block; min-height: 42px; padding: 7px; font-size: 11px; line-height: 1.25; font-weight: 650; overflow-wrap: anywhere; }

.catalog-section { margin-top: 18px; }
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product { min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); text-align: left; }
.product-media { position: relative; aspect-ratio: 1; background: var(--surface-2); }
.product-media img { width: 100%; height: 100%; display: block; object-fit: cover; }
.asset-mark { display: grid; place-items: center; width: 100%; height: 100%; color: var(--gold); font-weight: 850; font-size: clamp(25px, 8vw, 44px); overflow-wrap: anywhere; padding: 14px; text-align: center; }
.asset-mark.username-mark { padding: 12px; font-size: 18px; line-height: 1.2; word-break: break-word; }
.product-body { min-height: 82px; padding: 10px; }
.product-name { display: block; min-height: 34px; font-size: 13px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.product-price { display: block; margin-top: 7px; color: var(--green); font-size: 14px; font-weight: 800; }
.product-price small { color: var(--muted); font-weight: 500; }

.skeleton { height: 250px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); animation: pulse 1.2s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .45; } to { opacity: .9; } }

.empty { grid-column: 1 / -1; padding: 42px 18px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); text-align: center; }
.more { width: 100%; height: 44px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 700; }

.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .62); }
.sheet { position: fixed; z-index: 21; left: 50%; bottom: 0; width: min(100%, 620px); transform: translateX(-50%); padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #1a1d18; }
.sheet-handle { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 2px; background: #555c51; }
.close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 24px; line-height: 1; }
.sheet-product { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 12px; padding-right: 34px; }
.sheet-product img { width: 82px; height: 82px; border-radius: 6px; object-fit: cover; background: var(--surface-2); }
.eyebrow { margin: 0 0 4px; color: var(--gold); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.sheet-product h2 { overflow-wrap: anywhere; }
.sheet-product p:last-child { margin: 6px 0 0; line-height: 1.35; }
.duration-box { margin-top: 18px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.duration-row, .range-labels, .total-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.duration-row { font-size: 14px; }
.duration-box input { width: 100%; margin: 15px 0 6px; accent-color: var(--green); }
.range-labels { color: var(--muted); font-size: 11px; }
.total-row { margin: 20px 0 12px; }
.total-row strong { color: var(--green); font-size: 22px; }
.primary { width: 100%; min-height: 50px; border: 0; border-radius: var(--radius); background: var(--green); color: #112013; font-weight: 850; }
.primary:disabled { opacity: .55; }
.order-hint { min-height: 16px; margin: 8px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(calc(100% - 28px), 480px); padding: 12px 14px; border-radius: var(--radius); background: var(--text); color: #151713; font-size: 13px; font-weight: 700; text-align: center; }
.filter-sheet { position: fixed; z-index: 24; left: 50%; bottom: 0; width: min(100%, 620px); max-height: min(78vh, 720px); transform: translateX(-50%); overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; background: #171a16; }
.filter-sheet-head { display: flex; align-items: center; justify-content: space-between; min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.close-filter { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 25px; line-height: 1; }
.filter-options { display: grid; gap: 6px; max-height: calc(min(78vh, 720px) - 64px); overflow-y: auto; padding: 12px 14px calc(16px + env(safe-area-inset-bottom)); }
.option-button { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; min-height: 54px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius); background: var(--surface); text-align: left; font-weight: 750; }
.option-button::before { content: ""; width: 18px; height: 18px; border: 3px solid #5d635a; border-radius: 50%; }
.option-button.active { border-color: var(--green); background: var(--green-dark); }
.option-button.active::before { border: 5px solid var(--green); background: #112013; }
.option-button.has-color { grid-template-columns: 28px 24px minmax(0, 1fr); }
.color-swatch { width: 18px; height: 18px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; }

[hidden] { display: none !important; }

@media (min-width: 560px) {
  .catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-body { min-height: 88px; }
}