/* =========================================================
   MARKETPLACE — FULL PRODUCTION CSS
   DARK PREMIUM THEME
========================================================= */

:root {

  --bg:
    #0d0d0d;

  --bg-secondary:
    #171717;

  --card:
    #161616;

  --border:
    #2a2a2a;

  --text:
    #ffffff;

  --muted:
    #989898;

  --accent:
    #3b82f6;

  --accent-hover:
    #2563eb;

  --danger:
    #ff4d4f;

  --success:
    #00c853;

  --radius:
    20px;

  --shadow:
    0 10px 30px rgba(
      0,
      0,
      0,
      0.35
    );

  --safe-bottom:
    env(safe-area-inset-bottom);

}

/* =========================================================
   RESET
========================================================= */

* {

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  -webkit-tap-highlight-color:
    transparent;

  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;

}

/* Input fields — allow selection and paste */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* Images — block dragging */
img {
  -webkit-user-drag: none;
  user-drag: none;
}

html,
body {

  width:
    100%;

  min-height:
    100%;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    'Inter',
    sans-serif;

  overflow-x:
    hidden;

}

/* =========================================================
   APP
========================================================= */

#app {

  width:
    100%;

  min-height:
    100vh;

  background:
    var(--bg);

}

/* =========================================================
   HIDDEN
========================================================= */

.hidden {

  display:
    none !important;

}

/* =========================================================
   BUTTONS
========================================================= */

.primary-button {

  width:
    100%;

  border:
    none;

  background:
    var(--accent);

  color:
    white;

  height:
    54px;

  border-radius:
    18px;

  font-size:
    16px;

  font-weight:
    700;

  cursor:
    pointer;

  transition:
    0.2s;

}

.primary-button:disabled {

  opacity:
    0.5;

  cursor:
    not-allowed;

  background:
    #3a3a3a;

}

.primary-button:active {

  transform:
    scale(0.98);

}

.primary-button:hover {

  background:
    var(--accent-hover);

}

.secondary-button {

  border:
    none;

  background:
    var(--bg-secondary);

  color:
    white;

  height:
    50px;

  min-width:
    50px;

  border-radius:
    16px;

  cursor:
    pointer;

  font-size:
    18px;

}

.header-icon-button {

  position: relative;

  width:
    42px;

  height:
    42px;

  border:
    none;

  border-radius:
    14px;

  background:
    var(--bg-secondary);

  color:
    white;

  cursor:
    pointer;

  font-size:
    18px;

}

/* =========================================================
   HEADER
========================================================= */

.main-header {

  position:
    sticky;

  top:
    0;

  z-index:
    100;

  background:
    rgba(
      13,
      13,
      13,
      0.95
    );

  -webkit-backdrop-filter:
    blur(20px);

  backdrop-filter:
    blur(20px);

  padding:
    14px 16px;

  border-bottom:
     none;

}

.header-top {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    14px;

}

.app-logo {

  font-size: 24px;
  letter-spacing: -0.5px;
  font-weight:
    800;

}

.header-search-row {

  display:
    flex;

  gap:
    12px;

  align-items:
    center;

}

.search-wrapper {

  flex:
    1;

}

#search-input {

  width:
    100%;

  height:
    52px;

  border:
    1px solid var(--border);

  border-radius:
    18px;

  background:
    var(--bg-secondary);

  color:
    white;

  padding:
    0 18px;

  font-size:
    15px;

}

#search-input::placeholder {

  color:
    var(--muted);

}

.sort-button {

  position:
    relative;

  width:
    52px;

  height:
    52px;

  border:
    none;

  border-radius:
    18px;

  background:
    var(--bg-secondary);

  color:
    white;

  font-size:
    20px;

  cursor:
    pointer;

}

/* =========================================================
   CATEGORIES
========================================================= */

.categories-container {

  display:
    flex;

  gap:
    10px;

  overflow-x:
    auto;

  margin-top:
    14px;

  padding-bottom:
    4px;

  scrollbar-width:
    none;

}

.categories-container::-webkit-scrollbar {

  display:
    none;

}

.category-chip {

  flex-shrink:
    0;

  padding:
    10px 16px;

  border-radius:
    999px;

  background:
    var(--bg-secondary);

  border:
    1px solid var(--border);

  color:
    white;

  font-size:
    14px;

  cursor:
    pointer;

}

.active-category {

  background:
    var(--accent);

  border-color:
    var(--accent);

}

/* =========================================================
   PAGES
========================================================= */

.page {

  padding:
    18px 16px 120px;
  
  padding-top:
  10px;  

}

.page-title {

  font-size:
    26px;

  font-weight:
    800;

  margin-bottom:
    20px;

}

/* =========================================================
   FEED GRID
========================================================= */

.feed-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;

  margin-top: 14px;

}

/* =========================================================
   LISTING CARD
========================================================= */

.listing-card {

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    20px;

  overflow:
    hidden;

  cursor:
    pointer;

  transition:
    0.2s;

  display:
  flex;

  flex-direction:
  column;

}

.listing-card:active {

  transform:
    scale(0.98);

}

.listing-card-image {

  width:
    100%;

  aspect-ratio:
    1 / 0.92;

  object-fit:
    cover;

  background:
    #222;

}

.listing-card-body {

  padding:
    16px 6px 6px;

  display:
    flex;

  flex-direction:
    column;

  flex:
    1;

}

.listing-card-title {

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1.4;

  margin-bottom:
    8px;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    4px;

}

/* The title itself — at most two lines. Only the text is truncated,
   the badges stand separately on the right and are always visible. */
.listing-card-title-text {

  flex:
    0 1 auto;

  min-width:
    0;

  display:
    -webkit-box;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;

  overflow-wrap:
    anywhere;

}

/* The verified seller badge and the “Safe deal” shield. */
.listing-card-badges {

  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  flex-shrink:
    0;

  height:
    1.4em;

}

.listing-card-price {

  font-size:
    20px;

  font-weight:
    800;

  margin-bottom:
    8px;

}

.listing-card-city {

  font-size:
    13px;

  color:
    var(--muted);

  margin-bottom:
    10px;

}

.listing-card-bottom {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  margin-top:
    auto;

}

.favorite-button {

  border:
    none;

  background:
    transparent;

  color:
    white;

  cursor:
    pointer;

  font-size:
    20px;

}

/* =========================================================
   EMPTY STATES
========================================================= */

.empty-state {

  padding:
    80px 20px;

  text-align:
    center;

}

.empty-state-icon {

  font-size:
    64px;

  margin-bottom:
    16px;

}

.empty-state-title {

  font-size:
    22px;

  font-weight:
    700;

  margin-bottom:
    12px;

}

.empty-state-text {

  color:
    var(--muted);

  line-height:
    1.7;

}

/* =========================================================
   FORM
========================================================= */

.create-form {

  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

}

.form-block {

  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;

}

.form-row {

  display:
    flex;

  gap:
    14px;

}

.flex-1 {

  flex:
    1;

}

.currency-block {

  width:
    110px;

}

.form-label {

  font-size:
    15px;

  font-weight:
    600;

}

.main-input,
.main-textarea,
.main-select {

  width:
    100%;

  border:
    1px solid var(--border);

  background:
    var(--bg-secondary);

  color:
    white;

  border-radius:
    18px;

  padding:
    16px;

  font-size:
    15px;

}

.main-textarea {

  min-height:
    140px;

  resize:
    none;

}

.main-input::placeholder,
.main-textarea::placeholder {

  color:
    var(--muted);

}

/* =========================================================
   UPLOADS
========================================================= */

.upload-area {

  width:
    100%;

  border:
    2px dashed var(--border);

  border-radius:
    24px;

  height:
    220px;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  background:
    var(--bg-secondary);

  overflow:
    hidden;

  cursor:
    pointer;

}

.gallery-area {

  height: 90px;
  border-radius: 16px;
  margin-bottom: 12px;

}

.upload-preview-image {

  width:
    100%;

  height:
    220px;

  object-fit:
    cover;

  display:
    block;

}

.upload-icon {

  font-size:
    36px;

  margin-bottom:
    10px;

  text-align:
    center;

}

.upload-title {

  font-weight:
    700;

  margin-bottom:
    6px;

  text-align:
    center;

}

.upload-text {

  color:
    var(--muted);

  font-size:
    14px;

  text-align:
    center;

}

.gallery-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap:
    10px;

}

.gallery-image {

  width:
    100%;

  aspect-ratio:
    1 / 1;

  object-fit:
    cover;

  border-radius:
    16px;

}

/* =========================================================
   PROFILE
========================================================= */

.profile-top-card {

  background:
    var(--card);

  border:
    1px solid var(--border);

  border-radius:
    28px;

  padding:
    22px;

  margin-bottom:
    20px;

}

#profile-page .profile-top-card {
  background:
    linear-gradient(160deg, #2a2c30 0%, #1c1d20 55%, #141517 100%);
}

.profile-avatar-wrapper {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin-bottom: 18px;

}

.profile-avatar {

  width:
    120px;

  height:
    120px;

  border-radius:
    999px;

  object-fit:
    cover;

  background:
    #222;

  margin-bottom:
    12px;

}

.change-avatar-button {

  position: absolute;

  inset: 0;

  border-radius: 50%;

  cursor: pointer;

  z-index: 5;

}

/* The avatar reset cross in settings.
   The wrapper is a full-width flex column of the card, not the circle itself, so
   the position is counted from the center: 50% + 28px puts the button on the edge
   of the avatar (120px) at 45°. z-index is above the label with the file picker. */
.avatar-remove-button {

  position: absolute;

  top: 4px;

  left: calc(50% + 28px);

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.22);

  border-radius: 999px;

  background: rgba(20, 21, 23, 0.92);

  color: #e8eaed;

  cursor: pointer;

  z-index: 6;

  -webkit-tap-highlight-color: transparent;

  transition: background 0.15s ease, opacity 0.15s ease;

}

.avatar-remove-button:active {

  opacity: 0.6;

  background: rgba(255, 255, 255, 0.12);

}

/* Our .hidden is display:none, but the button has its own display:flex with the same
   specificity — without this line the cross wouldn't hide. */
.avatar-remove-button.hidden { display: none; }

.profile-name {

  text-align:
    center;

  font-size:
    24px;

  font-weight:
    800;

  margin-bottom:
    10px;

}

.profile-listing-credits {

  display: block;
  width: 100%;
  max-width: 240px;
  margin: 22px auto 8px;
  box-sizing: border-box;

  text-align:
    center;

  color:
    #e8eaed;

  font-size: 17px;
  letter-spacing: 0.5px;

  font-weight:
    700;

  padding: 13px 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, opacity 0.15s ease;

}

.profile-listing-credits:active {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.06);
}

/* User public ID (copyable) */
.profile-public-id {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  gap: 8px;
  margin: 12px auto 0;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #cfd3d8;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.profile-public-id.hidden {
  display: none;
}

.profile-public-id:active {
  opacity: 0.6;
  background: rgba(255, 255, 255, 0.09);
}

.profile-public-id-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #8b9096;
}

.profile-public-id-value {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #eef1f4;
}

.profile-public-id-copy {
  color: #8b9096;
  flex: 0 0 auto;
}

.seller-public-id {
  margin: 14px auto 22px;
}

.profile-about-input {

  width:
    100%;

  min-height:
    120px;

  resize:
    none;

  border:
    1px solid var(--border);

  background:
    var(--bg-secondary);

  color:
    white;

  border-radius:
    18px;

  padding:
    16px;

  margin-bottom:
    18px;

}

/* =========================================================
   PROFILE TABS
========================================================= */

.profile-tabs {

  display:
    flex;

  gap:
    10px;

  margin-bottom:
    20px;

  overflow-x:
    auto;

  scrollbar-width:
    none;

}

.profile-tab-button {

  flex-shrink:
    0;

  border:
    none;

  background:
    var(--bg-secondary);

  color:
    white;

  padding:
    12px 16px;

  border-radius:
    16px;

  cursor:
    pointer;

}

.active-profile-tab {

  background:
    var(--accent);

}

/* =========================================================
   MODALS
========================================================= */

.modal {

  position:
    fixed;

  inset:
    0;

  z-index:
    999;

  display:
    flex;

  justify-content:
    center;

  align-items:
    flex-end;

  overflow-y: auto;
  

}

.modal-overlay {

  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.6
    );

  z-index:
    1;

}

.listing-modal-content,
.seller-profile-content,
.sort-modal-content {

  background: var(--card);

  border-top:
    1px solid var(--border);

  border-radius:
    28px 28px 0 0;

  padding: 24px;

  position:
    relative;

  width:
    100%;

  max-height:
    92vh;

  overflow-y:
    auto;

  background:
    var(--bg);

  border-radius:
    28px 28px 0 0;

  z-index:
    2;

}

.close-modal-button {

  pointer-events:
  auto;

  z-index: 20;

  position: relative;

  position:
    absolute;

  top:
    18px;

  right:
    18px;

  width:
    42px;

  height:
    42px;

  border:
    none;

  border-radius:
    14px;

  background:
    rgba(
      0,
      0,
      0,
      0.5
    );

  color:
    white;

  cursor:
    pointer;

  z-index:
    10;

  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.close-modal-button svg {
  display: block;
}

/* =========================================================
   BOTTOM NAVIGATION
========================================================= */



.nav-icon {

  width:
    24px;

  height:
    24px;

  display:
    block;

  opacity:
    1;

  transition:
    0.2s ease;

}

.active-bottom-nav .nav-icon {

  opacity:
    1;

  transform:
    scale(1.08);

}



/* =========================================================
   LOADER
========================================================= */

.global-loader {

  position:
    fixed;

  inset:
    0;

  background:
    rgba(
      0,
      0,
      0,
      0.6
    );

  z-index:
    9999;

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

}

.loader {

  width:
    54px;

  height:
    54px;

  border:
    4px solid rgba(
      255,
      255,
      255,
      0.15
    );

  border-top:
    4px solid white;

  border-radius:
    999px;

  animation:
    spin 1s linear infinite;

}

@keyframes spin {

  from {

    transform:
      rotate(0deg);

  }

  to {

    transform:
      rotate(360deg);

  }

}

.modal-title {

  font-size: 22px;

  font-weight: 700;

  margin-bottom: 18px;

}

.sort-option-button {

  width: 100%;

  height: 52px;

  border: none;

  border-radius: 16px;

  background: #222;

  color: white;

  font-size: 16px;

  cursor: pointer;

}

.sort-option-button.active {

  box-shadow: inset 0 0 0 2px var(--accent);

  color: var(--accent);

  font-weight: 700;

}

/* Sorting by price without a selected currency is meaningless:
   200 USDT and 200 EUR in one list can't be compared. */
.sort-option-button:disabled {

  opacity: 0.4;

  cursor: default;

}

.sort-group-label {

  font-size: 13px;

  color: var(--muted);

  margin: 4px 0 10px;

}

.sort-group {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-bottom: 18px;

}

.sort-price-hint {

  font-size: 13px;

  color: var(--muted);

  margin: -10px 0 18px;

}

/* The city is typed manually: we have no city directory, and listings
   come from different countries. Datalist suggestions are collected from what
   is actually in the feed, so it's hard to miss. */
.sort-city-input {

  width: 100%;

  height: 52px;

  box-sizing: border-box;

  padding: 0 16px;

  border: none;

  border-radius: 16px;

  background: #222;

  color: white;

  font-size: 16px;

  font-family: inherit;

  margin-bottom: 18px;

  -webkit-appearance: none;

  appearance: none;

}

.sort-city-input::placeholder {

  color: var(--muted);

}

.sort-city-input:focus {

  outline: none;

  box-shadow: inset 0 0 0 2px var(--accent);

}

/* The native datalist arrow in WebKit is drawn over the text. */
.sort-city-input::-webkit-calendar-picker-indicator {

  display: none !important;

}

.sort-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px;

  margin-top: 4px;

}

.sort-action-button {

  height: 52px;

  border: none;

  border-radius: 16px;

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

}

.sort-action-reset {

  background: #222;

  color: var(--muted);

}

.sort-action-apply {

  background: var(--accent);

  color: white;

}

/* A dot on the header button: the feed is currently narrowed by a filter —
   without it the user would think there are just few listings. */
.sort-active-dot {

  position: absolute;

  top: 10px;

  right: 10px;

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: var(--accent);

  pointer-events: none;

}

.bottom-nav {

  position:
    fixed;

  bottom:
    0;

  left:
    0;

  width:
    100%;

  height:
    72px;

  background:
    rgba(10, 10, 10, 0.94);

  -webkit-backdrop-filter:
    blur(20px);

  backdrop-filter:
    blur(20px);

  border-top:
    1px solid rgba(
      255,
      255,
      255,
      0.06
    );

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-around;

  padding:
    0 8px;

  z-index:
    200;

}

.bottom-nav-button {

  border: none;

  background: transparent;

  color: rgba(
  255,
  255,
  255,
  0.88
);

  width: 52px;

  height: 52px;

  border-radius: 18px;

  font-size: 22px;

  cursor: pointer;

}

.active-bottom-nav {

  color: white;

}

.bottom-nav-create-button {

  width:
    68px;

  height:
    68px;

  border:
    none;

  background:
    transparent;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  margin-top:
    -34px;

  cursor:
    pointer;

  z-index:
    20;

}

.bottom-nav-create-button svg {

  width:
    68px;

  height:
    68px;

  display:
    block;

  filter:
    drop-shadow(
      0 12px 24px rgba(
        77,
        141,
        255,
        0.35
      )
    );

}


.profile-input {

  width: 100%;

  height: 56px;

  border: 1px solid #1f1f1f;

  border-radius: 18px;

  background: #111111;

  color: white;

  padding: 0 18px;

  font-size: 16px;

  outline: none;

  margin-top: 18px;

  margin-bottom: 14px;

}

.profile-input:disabled {

  opacity: 0.75;

}

.subcategories-container {

  display: block;

  width: 100%;

  margin-top: 14px;

}

.subcategory-level {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  gap: 10px;

  width: 100%;

  overflow-x: auto;

  overflow-y: hidden;

  margin-bottom: 12px;

  padding-bottom: 4px;

  scrollbar-width: none;

}

.subcategory-level::-webkit-scrollbar {

  display: none;

}

/* =========================================================
   LISTING DETAIL MODAL
========================================================= */

.listing-modal-gallery {

  display:
    flex;

  gap:
    12px;

  overflow-x:
    auto;

  scroll-snap-type:
    x mandatory;

  margin-bottom:
    22px;

  scrollbar-width:
    none;

}

.listing-modal-gallery::-webkit-scrollbar {

  display:
    none;

}

.listing-modal-gallery img {

  min-width:
    100%;

  width:
    100%;

  height:
    420px;

  object-fit:
    cover;

  border-radius:
    24px;

  scroll-snap-align:
    center;

  background:
    #111;

}

.listing-modal-body {

  padding-bottom:
    120px;

}

.listing-modal-title {

  font-size:
    30px;

  font-weight:
    800;

  line-height:
    1.25;

  margin-bottom:
    14px;

}

.listing-modal-price {

  font-size:
    36px;

  font-weight:
    800;

  margin-bottom:
    10px;

}

.listing-modal-city {

  font-size:
    15px;

  color:
    var(--muted);

  margin-bottom:
    24px;

}

.listing-modal-description {

  font-size:
    16px;

  line-height:
    1.7;

  white-space:
    pre-wrap;

}

.seller-card {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    16px;

  margin-top:
    32px;

  background:
    var(--bg-secondary);

  border:
    1px solid var(--border);

  border-radius:
    22px;

  cursor:
    pointer;

}

.seller-avatar {

  width:
    56px;

  height:
    56px;

  border-radius:
    999px;

  object-fit:
    cover;

  background:
    #222;

}

.seller-info {

  flex:
    1;

}

.seller-name {

  font-size:
    17px;

  font-weight:
    700;

  margin-bottom:
    4px;

}

.seller-rating {

  font-size:
    14px;

  color:
    var(--muted);

}

.listing-actions {

  display:
    flex;

  gap:
    12px;

  margin-top:
    24px;

}

.listing-article {

  margin-top: 12px;

  font-size: 13px;

  color: rgba(
    255,
    255,
    255,
    0.5
  );

  cursor: pointer;

  user-select: none;

  transition:
    opacity 0.2s ease;

}

.listing-article:active {

  opacity: 0.6;

}

/* =========================================================
   SELLER PROFILE
========================================================= */

.seller-profile-content {

  padding:
    28px 20px 140px;

}

.seller-profile-header {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  text-align:
    center;

  margin-bottom:
    28px;

}

.seller-profile-avatar {

  width:
    110px;

  height:
    110px;

  border-radius:
    999px;

  object-fit:
    cover;

  background:
    #222;

  border:
    2px solid rgba(
      255,
      255,
      255,
      0.08
    );

  margin-bottom:
    18px;

}

.seller-profile-name {

  font-size:
    28px;

  font-weight:
    800;

  margin-bottom:
    10px;

}

.seller-profile-rating {

  font-size:
    16px;

  color:
    var(--muted);

  margin-bottom:
    16px;

}

.seller-profile-about {

  margin-top:
    2px;

  margin-bottom:
    22px;

  padding:
    0 34px;

  color:
    #d2d2d2;

  text-align:
    left;

  font-size:
    15px;

  font-weight:
    600;

  line-height:
    1.5;

  width:
    100%;

  max-width:
    320px;

}

.seller-profile-grid {

  position:
  relative;

z-index:
  20;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    14px;

  margin-top:
    30px;

}

.seller-profile-info {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    8px;

}

.seller-profile-top-row {

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  margin-bottom:
    14px;

}

 .seller-profile-rating {

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    0;

}

.seller-review-button {

  width:
    100%;

  margin-bottom:
    20px;

}

/* =========================================================
   REVIEW MODAL
========================================================= */

.review-modal-content {

  pointer-events:
  auto;

  position:
    fixed;

  left:
    50%;

  bottom:
    0;

  transform:
    translateX(-50%);

  width:
    100%;

  max-width:
    520px;

  background:
    #111;

  border-radius:
    28px 28px 0 0;

  padding:
    24px 20px 40px;

  z-index:
    6000;

  max-height: 90vh;
  overflow-y: auto;

}

.review-stars {

  display:
    flex;

  justify-content:
    center;

  gap:
    8px;

  margin:
    24px 0;

}

.review-star-button {

  background:
    transparent;

  border:
    none;

  font-size:
    34px;

  color:
    rgba(
      255,
      255,
      255,
      0.25
    );

  cursor:
    pointer;

  transition:
    0.2s ease;

}

.review-star-button.active-review-star {

  color:
    #FFD54A;

}

.review-pros {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

  margin-bottom:
    22px;

}

.review-pro-button {

  border:
    none;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    white;

  border-radius:
    999px;

  padding:
    10px 14px;

  font-size:
    14px;

  cursor:
    pointer;

  transition:
    0.2s ease;

}

.review-pro-button.active-review-pro {

  background:
    #4D8DFF;

}

/* ========================================================
NOTIFICATIONS BADGE
======================================================== */

.notifications-badge {

  position: absolute;

  top: -4px;

  right: -4px;

  min-width: 18px;

  height: 18px;

  border-radius: 999px;

  background: #ff3b30;

  color: white;

  font-size: 11px;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 5px;

  z-index: 10;

}

/* ========================================================
SELLER REPLY
======================================================== */

.review-seller-reply {

  margin-top: 12px;

  padding: 12px;

  border-radius: 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  font-size: 13px;

  line-height: 1.5;

  color:
    rgba(
      255,
      255,
      255,
      0.85
    );

}

.review-seller-reply-title {

  font-weight: 700;

  margin-bottom: 6px;

  opacity: 0.8;

}

/* ========================================================
SELLER REPLY BUTTON
======================================================== */

.seller-reply-button {

  margin-top: 12px;

  border: none;

  background:
    rgba(
      59,
      130,
      246,
      0.12
    );

  color:
    var(--accent);

  padding:
    10px 14px;

  border-radius:
    12px;

  font-size:
    13px;

  font-weight:
    700;

  cursor:
    pointer;

}

.notifications-modal-content {

  position:
    fixed;

  left:
    50%;

  bottom:
    0;

  top:
    auto;

  transform:
    translateX(-50%);

  width:
    100%;

  max-width:
    480px;

  height:
    82vh;

  max-height:
    82vh;

  overflow-y:
    auto;

  background:
    #111111;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  border-bottom:
    none;

  border-radius:
    24px 24px 0 0;

  padding:
    24px;

  z-index:
    20;

}

.notifications-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    12px;

  margin-top:
    20px;

}

.notification-item {

  background:
    rgba(
      255,
      255,
      255,
      0.04
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.06
    );

  border-radius:
    18px;

  padding:
    14px;

}

.notification-text {

  font-size:
    14px;

  line-height:
    1.5;

  color:
    rgba(255, 255, 255, 0.78);

  white-space:
    pre-line;

}

.notification-title {

  font-size:
    14px;

  font-weight:
    700;

  color:
    white;

  margin-bottom:
    4px;

}

.notification-clickable {

  cursor:
    pointer;

  position:
    relative;

  padding-right:
    30px;

  transition:
    background 0.15s;

}

.notification-clickable::after {

  content:
    "\203A";

  position:
    absolute;

  right:
    14px;

  top:
    50%;

  transform:
    translateY(-50%);

  font-size:
    22px;

  line-height:
    1;

  color:
    rgba(255, 255, 255, 0.4);

}

.notification-clickable:active {

  background:
    rgba(255, 255, 255, 0.08);

}

.notification-copy-btn {

  margin-top:
    10px;

  border:
    1px solid var(--border);

  background:
    var(--bg-secondary);

  color:
    var(--accent);

  padding:
    8px 14px;

  border-radius:
    10px;

  font-size:
    13px;

  font-weight:
    600;

  cursor:
    pointer;

}

.notification-copy-btn:active {

  background:
    var(--border);

}

/* =========================================================
   PROFILE DASHBOARD
========================================================= */

.profile-dashboard-grid {

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    14px;

  margin-bottom:
    20px;

}

.profile-dashboard-card {

  border:
    1px solid var(--border);

  background:
    var(--card);

  border-radius:
    24px;

  min-height:
    120px;

  padding:
    20px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    flex-start;

  gap:
    14px;

  color:
    white;

  cursor:
    pointer;

  transition:
    0.2s ease;

}

.profile-dashboard-card:active {

  transform:
    scale(0.98);

  background:
    #1b1b1b;

}

.profile-dashboard-icon {

  font-size:
    28px;

}

.profile-dashboard-title {

  font-size:
    16px;

  font-weight:
    700;

}

.seller-pagination {

  display:
    flex;

  justify-content:
    center;

  align-items:
    center;

  gap:
    14px;

  margin-top:
    18px;

  margin-bottom:
    10px;

}

/* Feed and conversation list pagination: one centered row */
.feed-pagination {

  display:
    flex;

  flex-direction:
    row;

  flex-wrap:
    nowrap;

  justify-content:
    center;

  align-items:
    center;

  gap:
    16px;

  margin:
    18px 0 10px;

}

.feed-pagination:empty {

  display:
    none;

}

.pagination-button {

  background:
    #1a1a1a;

  border:
    1px solid #2d2d2d;

  color:
    white;

  padding:
    10px 18px;

  border-radius:
    14px;

  font-size:
    14px;

  font-weight:
    600;

  flex:
    0 0 auto;

  white-space:
    nowrap;

  cursor:
    pointer;

}

.pagination-button:disabled {

  opacity:
    0.4;

}

.pagination-info {

  color:
    #9f9f9f;

  font-size:
    14px;

}

/* Trigger button: expands the listing management block */
.my-listing-toggle {
  width: 100%;
  height: 38px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}

.my-listing-toggle:active {
  opacity: 0.7;
}

.my-listing-toggle-icon {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.my-listing-toggle.expanded .my-listing-toggle-icon {
  transform: rotate(180deg);
}

.my-listing-actions {

  display: flex;

  flex-direction: column;

  gap: 8px;

  margin-top: 8px;

  /* Expanding without measuring the height: max-height with a margin.
     Three 38px buttons + gaps fit into 200px. */
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.22s ease, margin-top 0.22s ease, opacity 0.18s ease;
  opacity: 1;
}

.my-listing-actions.collapsed {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .my-listing-actions,
  .my-listing-toggle-icon {
    transition: none;
  }
}

.my-listing-actions button {

  width: 100%;

  height: 38px;

  border: none;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

}

.edit-listing-button {

  background: #3b82f6;

  color: white;

}

.renew-listing-button {

  background: #2563eb;

  color: white;

}

.delete-listing-button {

  background: #ef4444;

  color: white;

}

.my-listing-meta {

  font-size: 13px;

  color: #a0a0a0;

  margin-top: 4px;

}

.my-listing-moderation {
  color: var(--accent);
  font-weight: 600;
}

.my-listings-tabs {

  display: flex;

  gap: 8px;

  margin-bottom: 12px;

}

.my-listings-tab {

  flex: 1;

  height: 40px;

  border: none;

  border-radius: 10px;

  background: #1e1e1e;

  color: white;

  font-weight: 600;

}

.active-my-listings-tab {

  background: #2563eb;

}

.my-listings-empty {

  grid-column: 1 / -1;

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 300px;

}
/* ========================================================
   REPORT / COMPLAINT
   ======================================================== */

.seller-action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
}

.seller-action-buttons .seller-review-button {
  flex: 1;
  margin-bottom: 0;
}

.report-button {
  background: transparent;
  border: 1.5px solid #ef4444;
  color: #ef4444;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.report-button:active {
  background: #ef444420;
}

.report-modal-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 40px;
  z-index: 1001;
  max-height: 90vh;
  overflow-y: auto;
}


/* ========================================================
   GALLERY ITEMS & DELETE BUTTON
   ======================================================== */

.gallery-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}

.gallery-item .gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

.remove-gallery-button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #ffffff;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 2;
}

.remove-gallery-button:active {
  background: rgba(0, 0, 0, 0.8);
}

/* ========================================================
   REPORT BUTTON (CORNER) & ALL REVIEWS BUTTON
   ======================================================== */

.report-button-corner {
  position: absolute;
  top: 16px;
  left: 16px;
  background: transparent;
  border: 1.5px solid #ef4444;
  color: #ef4444;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  z-index: 5;
  transition: background 0.15s;
}

.report-button-corner:active {
  background: #ef444420;
}

.all-reviews-button {
  flex: 0 0 auto;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  color: #ffffff;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.all-reviews-button:active {
  background: #3a3a3a;
}

/* ========================================================
   REVIEW CARDS
   ======================================================== */

.reviews-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.review-card {
  background: #1c1c1c;
  border: 1px solid #2a2a2a;
  border-radius: 16px;
  padding: 14px;
  position: relative;
}

/* Small “dispute review” button (pin style with !) */
.review-dispute-mini {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--danger);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.review-dispute-mini:active {
  background: var(--border);
}

/* Review date */
.review-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  margin-left: 8px;
}

/* Review filter: New / Good / Bad */
.reviews-filter-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.reviews-filter-btn {
  flex: 1;
  padding: 9px 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.reviews-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
  flex: 0 0 auto;
}

.review-avatar-fallback {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex: 0 0 auto;
}

.review-head-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.review-name {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
}

.review-rating {
  font-size: 13px;
  color: #facc15;
}

.review-text {
  font-size: 14px;
  color: #d1d1d1;
  line-height: 1.4;
  word-break: break-word;
}

.review-seller-reply {
  margin-top: 10px;
  padding: 10px 12px;
  background: #232323;
  border-radius: 12px;
  border-left: 3px solid #2563eb;
}

.review-seller-reply-title {
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  margin-bottom: 4px;
}

.reviews-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #888;
  margin: 16px 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* REVIEW ARTICLE & PHOTOS */

.review-article {
  font-size: 13px;
  color: #888;
  margin-top: 8px;
}

.review-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.review-photo {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid #2a2a2a;
}

/* REVIEW CARD CLICKABLE + TEXT CLAMP + DETAIL MODAL */

.review-card-clickable {
  cursor: pointer;
  transition: background 0.15s;
}

.review-card-clickable:active {
  background: #232323;
}

.review-text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.review-photo-count,
.review-has-reply {
  font-size: 12px;
  color: #888;
  margin-top: 8px;
}

.review-detail-content {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1a1a1a;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px 40px;
  z-index: 1001;
  max-height: 90vh;
  overflow-y: auto;
}

.reply-form {
  margin-top: 8px;
}

/* FULLSCREEN PHOTO VIEWER */

.photo-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.96);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  cursor: zoom-out;
}

.photo-viewer-overlay img {
  max-width: 95%;
  max-height: 90%;
  object-fit: contain;
  border-radius: 8px;
}

.photo-viewer-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Review detail modal must appear ABOVE the all-reviews modal */
#review-detail-modal {
  z-index: 1050;
}
#review-detail-modal .review-detail-content {
  z-index: 1051;
}

/* REVIEW PROS TAGS (approval categories) */

.review-pros-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.review-pro-tag {
  background: #1e3a5f;
  color: #6ab0ff;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Clickable article link in review detail */
#review-article-link {
  color: #6ab0ff;
  text-decoration: underline;
}

/* === Listing card: rating, reviews count, favorite heart === */

.listing-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 1;
}

.listing-reviews-count {
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 600;
}

.favorite-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 0;
}

.heart-icon {
  width: 22px;
  height: 22px;
  display: block;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

.listing-star-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* Center icon inside square action buttons (modal favorite / share) */
.secondary-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Keep rating/heart clear of the cards 20px rounded corners */
.listing-card-bottom {
  padding: 0 4px 4px;
}

/* Referrals page: stats block */
.referral-stats {
  display: flex;
  gap: 12px;
  margin: 18px 0;
}

.referral-stat {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 10px;
  text-align: center;
}

.referral-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}

.referral-stat-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.referral-link-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Referrals page: framed intro + actions */
.referral-intro {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
}

.referral-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.referral-description {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.referral-description b {
  color: var(--text);
}

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

.referral-actions .secondary-button.full-width-button {
  width: 100%;
  height: 54px;
  border-radius: 18px;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.referral-actions .secondary-button.full-width-button:active {
  transform: scale(0.98);
}

/* === Ad banners (home carousel + create constructor) === */
.ad-banner-area {
  margin: 10px 16px 16px;
}

.ad-banner-empty {
  height: 90px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ad-banner-empty-label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--muted);
}

.ad-banner-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}

.ad-banner-img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.ad-banner-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 10px;
  font-weight: 400;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 6px;
  border-radius: 6px;
}

.ad-banner-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}

.ad-banner-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}

.ad-banner-dot.active {
  background: #fff;
}

.ad-duration-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ad-duration-option {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.ad-duration-option.selected {
  border-color: var(--accent);
}

.ad-banner-preview-img {
  width: 100%;
  max-height: 120px;
  object-fit: cover;
  border-radius: var(--radius);
  margin-top: 8px;
}

/* Banner preview with a delete button */
.ad-banner-preview-wrap {
  position: relative;
  margin-top: 8px;
}
.ad-banner-preview-wrap .ad-banner-preview-img {
  margin-top: 0;
  display: block;
}
.ad-banner-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-banner-remove-btn:active { background: rgba(0, 0, 0, 0.8); }

/* Ad banner: raise higher under header + fit image without crop/distortion */
.header-top {
  margin-bottom: 4px;
}

.ad-banner-area {
  margin: 0 16px 10px;
}

.ad-banner-img {
  object-fit: contain;
  background: var(--bg-secondary);
}

.ad-banner-preview-img {
  object-fit: contain;
  background: var(--bg-secondary);
}


/* =========================================================
   SETTINGS / “MORE” PAGE
========================================================= */

.settings-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 24px;
}

.settings-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item:active {
  background: rgba(255, 255, 255, 0.05);
}

.settings-icon {
  font-size: 20px;
  margin-right: 14px;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}

.settings-label {
  flex: 1;
}

.settings-chevron {
  color: var(--muted);
  font-size: 22px;
  font-weight: 300;
  margin-left: 8px;
}

.app-info {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 40px 0 20px;
  user-select: none;
  -webkit-user-select: none;
}

/* Ad banner carousel track + slides — restore frame, 1080x400 proportion */
.ad-banner-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ad-banner-track::-webkit-scrollbar {
  display: none;
}
.ad-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1080 / 400;
  scroll-snap-align: start;
}
.ad-banner-slide .ad-banner-img {
  width: 100%;
  height: 100%;
}
.ad-banner-slide-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg-secondary);
  box-sizing: border-box;
  cursor: pointer;
}

/* ===== Promo code: input window ===== */
.promo-modal-content {
  background: var(--bg);
  border-top: 1px solid var(--border);
  border-radius: 28px 28px 0 0;
  padding: 24px;
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  z-index: 2;
}

.promo-modal-hint {
  color: var(--muted, #9aa0a6);
  font-size: 14px;
  line-height: 1.4;
  margin: 6px 0 18px;
  text-align: center;
}

.promo-code-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text, #fff);
  font-size: 17px;
  letter-spacing: 1px;
  text-align: center;
  text-transform: uppercase;
  outline: none;
}

.promo-code-input:focus {
  border-color: var(--accent);
}

.promo-submit-button {
  width: 100%;
  margin-top: 14px;
  padding: 15px 16px;
  border: none;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.promo-submit-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.promo-message {
  min-height: 20px;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
}

/* An empty message takes no space (removes the extra gap in the instructions) */
.promo-message:empty {
  min-height: 0;
  margin-top: 0;
}

.promo-message.promo-ok {
  color: #2ecc71;
}

.promo-message.promo-err {
  color: #ff6b6b;
}

/* Unavailable renewal button (term > 30 days) */
.renew-listing-button:disabled,
.renew-listing-button.renew-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ===== Backup email (settings) ===== */
.settings-email-card {
  margin-top: 14px;
}

.pwa-install-card {
  border: 1px solid var(--accent);
}

.settings-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.settings-email-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.settings-email-header .settings-section-title {
  margin-bottom: 0;
}
.email-hint-toggle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.email-hint-toggle:active {
  opacity: 0.6;
}

.settings-email-hint {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px 0;
}

#email-input-state .profile-input,
#email-code-state .profile-input {
  margin-bottom: 10px;
}

.email-linked-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text);
}

.email-verified-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--success);
  white-space: nowrap;
}

.link-button {
  background: transparent;
  border: none;
  padding: 4px 0;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
}
.link-button:active {
  opacity: 0.6;
}


/* ===== Entry gate (outside Telegram) ===== */
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.entry-gate-inner {
  width: 100%;
  max-width: 360px;
  text-align: center;
  position: relative;
}

/* The drawer cross in Telegram. The drawer comes up on an action, not on
   entry, so it must be possible to close it and return to the feed —
   otherwise it's the same gate, just one step later. */
.tg-gate-close {
  position: absolute;
  top: -8px;
  right: -4px;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

/* A footnote under the drawer buttons: removes the fear of “I'll pick the wrong one and lose
   my old account”. Small and muted — it's a hint, not a call to action. */
.tg-gate-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* The second metrics line in the listing list: repeated impressions and guests.
   Muted on purpose — they don't affect the feed sorting. */
.stats-top-metrics-muted {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.entry-logo {
  width: 96px;
  height: 96px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 14px;
}
.entry-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 18px;
}
.entry-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 16px;
}
.entry-gate .primary-button,
.entry-gate .secondary-button {
  margin-bottom: 10px;
}
.entry-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
}
.entry-ios-toggle {
  display: block;
  margin: 8px auto 0;
  padding: 6px;
  background: none;
  border: none;
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ===== Installation guide (More) ===== */
.install-important {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  padding: 0;
  margin: 0 0 14px;
}
.install-important b {
  color: #3B9EFF;
}

.install-guide-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bg-secondary);
}
.install-guide-os {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

/* “Copy link” — underlined, like the “Open site” link */
#install-copy-link {
  text-decoration: underline;
}

.install-guide-content {
  padding: 0 16px 14px;
}
#install-toggle .settings-chevron {
  transition: transform 0.2s ease;
}
#install-toggle.expanded .settings-chevron {
  transform: rotate(90deg);
}

/* ===== Login screen (gate) ===== */
.entry-login-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 0 8px;
}
.entry-login-sub {
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 20px;
}
.entry-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 6px 6px 6px 14px;
  margin-bottom: 14px;
}
.entry-email-icon {
  color: var(--muted);
  flex-shrink: 0;
}
.entry-email-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 16px;
  padding: 10px 0;
}
.entry-email-input::placeholder { color: var(--muted); }

/* Remove the white background of browser autofill (Chrome autofill) */
.entry-email-input:-webkit-autofill,
.entry-email-input:-webkit-autofill:hover,
.entry-email-input:-webkit-autofill:focus,
.entry-email-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-secondary) inset !important;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
.entry-email-submit {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.entry-email-submit:active { background: var(--accent-hover); }
.entry-divider {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  margin: 4px 0 14px;
}
.entry-divider::before,
.entry-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bg-secondary);
}
.entry-divider span { padding: 0 12px; }
.entry-tg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.entry-tg-button:active { opacity: 0.85; }
.entry-tg-icon { flex-shrink: 0; }

/* The “Sign in with Google” button */
.entry-google-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: #ffffff;
  color: #1f1f1f;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.entry-google-button:active { opacity: 0.9; }
.entry-google-icon { flex-shrink: 0; }

/* Login / Sign-up tabs on the login screen */
.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.auth-tab {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.auth-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.entry-register {
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}
.entry-register a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   CHAT (PWA only) + the “More” (⋮) button in the profile
   ============================================================ */

/* “⋮” in the top right corner of the profile */
#profile-page { position: relative; }
.profile-other-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.profile-other-btn:active { background: var(--bg-secondary); }

/* Chat page */
#chat-page { padding: 14px 14px 90px; }
.chat-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 4px 14px;
}
.chat-empty {
  text-align: center;
  color: var(--muted);
  padding: 48px 16px;
  font-size: 15px;
}

/* Conversation list */
.chat-conv-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border-radius: 14px;
  cursor: pointer;
}
.chat-conv-item:active { background: var(--bg-secondary); }
.chat-conv-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.chat-conv-main { flex: 1; min-width: 0; }
.chat-conv-name {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-conv-last {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.chat-conv-time { color: var(--muted); font-size: 12px; flex-shrink: 0; }

/* Conversation */
.chat-thread-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 2px 12px;
  border-bottom: 1px solid var(--bg-secondary);
  margin-bottom: 10px;
}
.chat-back-btn {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  display: flex;
}
.chat-thread-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
}
.chat-thread-name { font-weight: 600; color: var(--text); font-size: 16px; }

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding: 4px 2px;
  min-height: 40vh;
}
.chat-msg {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.35;
  word-wrap: break-word;
}
.chat-msg-in {
  align-self: flex-start;
  background: var(--bg-secondary);
  color: var(--text);
  border-bottom-left-radius: 5px;
}
.chat-msg-out {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-msg img { max-width: 100%; border-radius: 10px; display: block; }
.chat-msg-time { font-size: 11px; opacity: .7; margin-top: 3px; }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 2px 4px;
}
.chat-attach-btn,
.chat-send-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.chat-attach-btn { background: var(--bg-secondary); color: var(--text); }
.chat-send-btn { background: var(--accent); color: #fff; }
.chat-text-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 15px;
  outline: none;
}

/* ============================================================
   CHAT v2: full-screen conversation, input at the bottom (moves with
   the keyboard), a row of contact buttons, unread, pinning
   ============================================================ */

/* “Telegram” and “Message” buttons in one row */
.listing-contact-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.contact-tg-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

/* Full-screen conversation; the input is pinned to the bottom */
#chat-thread-view {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  z-index: 60;
}
#chat-thread-view.hidden { display: none; }

#chat-thread-view .chat-thread-header {
  flex-shrink: 0;
  padding: 12px 14px;
  margin-bottom: 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}
#chat-thread-view .chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}
#chat-thread-view .chat-input-row {
  flex-shrink: 0;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--bg-secondary);
}
#chat-thread-view .promo-message { padding: 0 14px; }

/* ------------------------------------------------------------------
   Conversation in the shop dashboard — the same layout as in the personal chat.
   Without it the thread lived in the normal flow: .chat-messages had min-height:40vh,
   and the input drifted to the middle of the screen and didn't follow the keyboard.
   The keyboard is caught by interactive-widget=resizes-content in the meta viewport:
   the layout viewport shrinks, the fixed container with it, the input stays
   exactly above the keyboard.
   ------------------------------------------------------------------ */
#shop-chat-thread {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  /* Below the shop drawer (z-index 91): the burger menu must open
     over the conversation, not the other way round. */
  z-index: 60;
}
#shop-chat-thread.hidden { display: none; }

#shop-chat-thread .chat-thread-header {
  flex-shrink: 0;
  padding: 12px 14px;
  margin-bottom: 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}

#shop-chat-thread .chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}

#shop-chat-thread .shop-chat-previews { flex-shrink: 0; padding: 0 12px; }

/* The status line is AFTER the input in the markup. We change the order
   via order, so that the message doesn't end up under the composer. */
#shop-chat-thread .shop-msg { flex-shrink: 0; order: 2; padding: 0 14px; }

#shop-chat-thread .chat-input-row {
  flex-shrink: 0;
  order: 3;
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--bg-secondary);
}

/* Unread conversation — highlight + dot */
.chat-conv-item { position: relative; }
.chat-conv-unread { background: rgba(77,141,255,0.10); }
.chat-conv-unread .chat-conv-name { font-weight: 700; }
.chat-conv-unread .chat-conv-last { color: var(--text); }
.chat-conv-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-left: 6px;
}

/* Pinned conversation */
.chat-conv-pin {
  flex-shrink: 0;
  margin-left: 6px;
  color: var(--muted);
  font-size: 13px;
}
.chat-conv-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================
   CHAT/LISTING v3: article row, contact spacing, video, pin
   ============================================================ */

/* Article + buttons (share/favorite) in one row */
.listing-article-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.listing-article-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Spacing of the “Message”/“Telegram” buttons from the seller frame */
.listing-contact-row { margin-top: 16px; }

/* Deal safety disclaimer at the bottom of the listing card */
.listing-safety-disclaimer {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(120, 120, 128, 0.08);
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #989898);
}
.listing-safety-disclaimer a {
  color: inherit;
  text-decoration: underline;
}

/* Round (i) icon next to the partner link */
.partner-info-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  padding: 0;
  border: 1px solid var(--muted, #989898);
  border-radius: 50%;
  background: transparent;
  color: var(--muted, #989898);
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
  flex-shrink: 0;
}
.partner-info-badge:active {
  opacity: 0.6;
}

/* Video and files in a message */
.chat-msg video { max-width: 100%; border-radius: 10px; display: block; }
.chat-msg a { color: inherit; text-decoration: underline; }

/* A white pin to the right of each conversation */
.chat-conv-pinbtn {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  cursor: pointer;
  padding: 0;
  margin-left: 6px;
  transition: background 0.12s, border-color 0.12s;
}
/* Press — a noticeable blue fill + a white icon */
.chat-conv-pinbtn:active {
  background: var(--accent);
  border-color: var(--accent);
}
.chat-conv-pinbtn:active svg path {
  fill: #ffffff;
  stroke: #ffffff;
}
.chat-conv-pinbtn svg { width: 22px; height: 22px; }
/* inactive — white outline */
.chat-conv-pinbtn svg path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
}
/* pinned — fully white icon + blue border */
.chat-conv-pinbtn.pinned {
  border-color: var(--accent);
}
.chat-conv-pinbtn.pinned svg path {
  fill: #ffffff;
  stroke: #ffffff;
}

/* The “supp.” badge for the admin */
.chat-conv-support-badge {
  font-size: 11px;
  color: var(--accent);
  background: rgba(59,130,246,0.15);
  padding: 1px 6px;
  border-radius: 6px;
  margin-left: 6px;
  white-space: nowrap;
}

/* The “Support requests” separator */
.chat-support-divider {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 18px 10px 8px;
}

/* Conversation list loading indicator */
.chat-loading {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 30px 10px;
}

/* ===== Moderation center ===== */
.mod-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  padding: 4px 10px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mod-tabs::-webkit-scrollbar {
  display: none;
}
.mod-tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mod-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.mod-tab-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 18px;
}
.mod-tab-count.show { display: inline-flex; }
.mod-tab.active .mod-tab-count { background: rgba(255,255,255,0.25); }

.mod-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 10px 8px;
}
.mod-filter-row { padding: 0 10px 10px; }
.mod-filter-btn {
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

/* Report / banner card */
.mod-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  margin: 0 10px 12px;
}
.mod-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.mod-card-ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
  flex-shrink: 0;
  cursor: pointer;
}
.mod-card-who { flex: 1; min-width: 0; }
.mod-card-label { font-size: 12px; color: var(--muted); }
.mod-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mod-card-arrow { color: var(--muted); font-size: 18px; }
.mod-card-reason {
  font-size: 14px;
  color: var(--text);
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.mod-card-shots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.mod-card-shots img {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}
.mod-card-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.mod-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  margin-left: 6px;
}
.mod-card-badge.warn { background: rgba(255,77,79,0.15); color: var(--danger); }
.mod-card-badge.done { background: rgba(0,200,83,0.15); color: var(--success); }

.mod-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mod-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mod-btn-danger  { background: var(--danger); color: #fff; }
.mod-btn-approve { background: var(--success); color: #fff; }
.mod-btn-neutral { background: var(--bg-secondary); color: var(--text); border: 1px solid var(--border); }

.mod-banner-preview {
  width: 100%;
  border-radius: 12px;
  margin: 8px 0;
  background: var(--bg-secondary);
}
.mod-card.resolved { opacity: 0.6; }

/* Applicant's email + one-click copy (admin) */
.mod-banner-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 8px 10px;
  margin: 8px 0;
}
.mod-banner-email {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}
.mod-copy-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Admin fields: term, credits, link */
.mod-banner-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 10px;
}
.mod-input {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
}
.mod-input::placeholder { color: var(--muted); }

/* Banner placement: Telegram / PWA / both segment */
.mod-placement {
  margin: 8px 0 10px;
}
.mod-placement-label {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.mod-seg {
  display: flex;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px;
}
.mod-seg-btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mod-seg-btn.active {
  background: var(--accent);
  color: #fff;
}

/* Placement badge on an active banner */
.mod-place-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: rgba(59,130,246,0.15);
  color: var(--accent);
}
.mod-place-telegram { background: rgba(59,130,246,0.15); color: var(--accent); }
.mod-place-pwa      { background: rgba(0,200,83,0.15); color: var(--success); }
.mod-place-both     { background: rgba(152,152,152,0.18); color: var(--text); }

/* Size hint for the ad form */
.banner-size-hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 6px 0 10px;
}
.banner-size-hint b { color: var(--text); }

/* Pop-up notifications (toasts) */
#sg-toast-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(80px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 99999;
  pointer-events: none;
  padding: 0 16px;
}
.sg-toast {
  max-width: 440px;
  width: fit-content;
  background: #1f1f1f;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s, transform 0.25s;
}
.sg-toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* OK / Cancel confirmation dialog */
.sg-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.2s;
}
.sg-confirm-overlay.show { opacity: 1; }
.sg-confirm-box {
  width: 100%;
  max-width: 360px;
  background: #1f1f1f;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  transform: translateY(12px);
  transition: transform 0.2s;
}
.sg-confirm-overlay.show .sg-confirm-box { transform: translateY(0); }
.sg-confirm-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 18px;
  white-space: pre-line;
}
.sg-confirm-btns {
  display: flex;
  gap: 10px;
}
.sg-confirm-btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.sg-confirm-btn:active { background: var(--border); }

/* ============================================================
   CHAT v4: compact borderless media + full-screen view
   ============================================================ */

/* Media message: without the blue “bubble” and padding */
.chat-msg.chat-msg-media {
  background: transparent !important;
  padding: 0;
  border-radius: 12px;
}
.chat-msg-media img,
.chat-msg-media video {
  max-width: 200px;
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 12px;
  display: block;
  cursor: pointer;
  object-fit: cover;
}

/* Full-screen view */
.chat-media-viewer {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.chat-media-viewer img,
.chat-media-viewer video {
  max-width: 100%;
  max-height: 100%;
}

/* ===== Photo album in the chat (up to 5 images) ===== */
.chat-msg-album { max-width: none; }
.chat-album {
  display: grid;
  gap: 3px;
  width: 252px;
  max-width: 72vw;
  border-radius: 14px;
  overflow: hidden;
}
.chat-album-cell { position: relative; overflow: hidden; }
.chat-msg-album .chat-album-cell img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: 0;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.chat-album-2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 124px; }
.chat-album-3 { grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; }
.chat-album-3 .chat-album-cell:first-child { grid-row: span 2; }
.chat-album-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 84px; }
.chat-album-5 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 84px; }
.chat-album-5 .chat-album-cell:nth-child(-n+2) { grid-column: span 3; }
.chat-album-5 .chat-album-cell:nth-child(n+3) { grid-column: span 2; }

/* ===== Full-screen viewer: album swiping ===== */
.chat-media-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(env(safe-area-inset-top) + 56px) 16px calc(env(safe-area-inset-bottom) + 16px);
}
.chat-media-stage img,
.chat-media-stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.chat-media-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 14px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-media-prev { left: 10px; }
.chat-media-next { right: 10px; }
.chat-media-counter {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 18px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.42);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Chat input (type=search) — remove the native cross */
.chat-text-input::-webkit-search-cancel-button,
.chat-text-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* ========================================================
   SELLER SUBSCRIPTIONS
   ======================================================== */

/* Subscribe / unsubscribe button */
.subscribe-btn {
  padding: 9px 16px;
  border-radius: 12px;
  border: 1.5px solid var(--accent);
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Subscribed -> black-and-white “Unsubscribe” style */
.subscribe-btn.subscribed {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text);
}
.subscribe-btn-full { display: block; width: 100%; margin-top: 10px; }
.subscribe-btn-mini { padding: 7px 14px; font-size: 13px; }

.seller-subscribe-wrap { margin-top: 10px; }
.seller-card-sub { margin-left: auto; }

/* Mini subscribe button in a feed card (icon) */
.card-subscribe-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-subscribe-btn .sub-icon { width: 22px; height: 22px; }

/* Tabs on the “Favorites” page */
.fav-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
}
.fav-tab {
  flex: 1;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.fav-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Subscription list item */
.sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
}
.sub-item-ava {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-secondary);
  flex-shrink: 0;
  cursor: pointer;
}
.sub-item-info { flex: 1; min-width: 0; cursor: pointer; }
.sub-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sub-item-rating { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sub-item-trash {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-item-trash:active { background: var(--border); }

/* Subscription block: button + counter */
.subscribe-block {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.subscribers-count {
  font-size: 13px;
  color: var(--muted);
}
/* In the profile the counter is larger and spaced */
.seller-subscribe-wrap .subscribers-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.seller-subscribe-wrap .subscribe-block { margin-bottom: 4px; }

/* The “Seller's listings” frame with info */
.seller-stats-box {
  margin: 20px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
}
.seller-stats-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.seller-stats-row {
  font-size: 13px;
  color: var(--muted);
}
.seller-stats-dot { margin: 0 6px; }
.seller-card-sub .subscribe-block {
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

/* ===== 18+ : blur of the whole card + disclaimer veil ===== */
.listing-card.adult-blur {
  position: relative;
  overflow: hidden;
}

.listing-card.adult-blur .listing-card-image,
.listing-card.adult-blur .listing-card-body {
  filter: blur(14px);
  pointer-events: none;
  user-select: none;
}

.adult-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.28);
  cursor: pointer;
}

.adult-veil-badge {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: #fff;
  background: #000;
  border: 2px solid rgba(255, 255, 255, 0.85);
  padding: 6px 14px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

/* Delete button for a processed request (moderation thread header) */
.chat-delete-appeal-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #ff5b5b;
  cursor: pointer;
}
.chat-delete-appeal-btn:active { background: rgba(255, 91, 91, 0.15); }

/* ===================== ADMIN PANEL ===================== */

.admin-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-back-button {
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 28px;
  line-height: 1;
  padding: 0 6px 0 0;
  cursor: pointer;
}
.admin-back-button:active {
  opacity: 0.6;
}

.admin-search-box {
  padding: 4px 16px 0;
}
.admin-search-label {
  display: block;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}
.admin-search-box .profile-input {
  margin-bottom: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.admin-search-msg {
  font-size: 13px;
  color: var(--muted);
  margin: 8px 2px 0;
  min-height: 16px;
}
.admin-search-msg.error {
  color: var(--danger);
}

.admin-user-card {
  margin: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
}

.admin-card-head {
  margin-bottom: 12px;
}
.admin-card-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.admin-card-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  word-break: break-all;
}

.admin-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.admin-badge-blue {
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent);
}
.admin-badge-red {
  background: rgba(255, 77, 79, 0.18);
  color: var(--danger);
}
.admin-badge-gray {
  background: rgba(152, 152, 152, 0.18);
  color: var(--muted);
}

.admin-id-line {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 14px;
}
.admin-id-code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
}
.admin-id-copy {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.admin-id-copy:active {
  background: var(--accent-hover);
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.admin-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.admin-stat-num {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.admin-stat-label {
  font-size: 12px;
  color: var(--muted);
}

/* The “ID” button in the seller profile modal (admin only) */
.admin-id-corner {
  position: absolute;
  top: 56px;
  left: 16px;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s;
}
.admin-id-corner:active {
  background: rgba(59, 130, 246, 0.12);
}

/* Inactive settings item (e.g. “Admin panel” — not in use yet) */
.settings-item-disabled {
  opacity: 0.4;
  cursor: default;
}
.settings-item-disabled:active {
  background: transparent;
}

/* User search inside the moderation center */
#mod-panel-usersearch .admin-search-box {
  padding: 14px 16px 0;
}
#mod-panel-usersearch .admin-user-card {
  margin: 14px 16px;
}

/* =========================================================
   Background scroll lock under an open modal/overlay
========================================================= */
html.sg-scroll-locked {
  overflow: hidden;
}
body.sg-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ===== ADMIN: clickable “Total listings” cell ===== */
.admin-stat-clickable {
  cursor: pointer;
  border-color: var(--accent);
  transition: background 0.15s, border-color 0.15s;
}
.admin-stat-clickable:active {
  background: rgba(59, 130, 246, 0.12);
}
.admin-stat-arrow {
  color: var(--accent);
  font-weight: 700;
}

/* ===== ADMIN: credit transaction history (by month) ===== */
.admin-spot-history-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  margin: 6px 0 12px;
}
.admin-spot-history-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.sph-month {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.sph-month-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
}
.sph-month-sum {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.sph-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 2px;
}
.sph-left {
  min-width: 0;
  flex: 1;
}
.sph-label {
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sph-when {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}
.sph-right {
  text-align: right;
  flex-shrink: 0;
}
.sph-amount {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.sph-in, .sph-sum-in { color: var(--accent); }
.sph-out, .sph-sum-out { color: #ef5350; }
.sph-zero { color: var(--muted); }
.sph-sum-sep { color: var(--muted); }
.sph-balance {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
}

/* ===== ADMIN: user listing list ===== */
.admin-listings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.admin-listing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
}
.al-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
}
.al-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.al-info {
  flex: 1;
  min-width: 0;
}
.al-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.al-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.al-price {
  font-size: 13px;
  color: var(--muted);
}
.al-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.al-badge-green {
  background: rgba(52, 199, 89, 0.18);
  color: #34c759;
}
.al-badge-gray {
  background: rgba(152, 152, 152, 0.18);
  color: var(--muted);
}
.al-badge-amber {
  background: rgba(255, 179, 64, 0.18);
  color: #ffb340;
}
.al-badge-red {
  background: rgba(255, 77, 79, 0.18);
  color: var(--danger);
}
.al-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.al-btn {
  border: none;
  border-radius: 9px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.al-hide {
  background: rgba(152, 152, 152, 0.18);
  color: var(--text);
}
.al-show {
  background: rgba(59, 130, 246, 0.18);
  color: var(--accent);
}
.al-del {
  background: rgba(255, 77, 79, 0.16);
  color: var(--danger);
}
.al-btn:active {
  opacity: 0.7;
}

/* ===== ADMIN: user chat list ===== */
.admin-chats-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.admin-chat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.admin-chat-row:active {
  background: rgba(59, 130, 246, 0.10);
  border-color: var(--accent);
}
.ac-ava {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
  border: 1px solid var(--border);
}
.ac-info {
  flex: 1;
  min-width: 0;
}
.ac-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-prev {
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ac-when {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  align-self: flex-start;
  white-space: nowrap;
}

/* ===== ADMIN: conversation viewer (read only) ===== */
.admin-chat-reader-note {
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 10px;
}
.admin-chat-reader-msgs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
  padding: 4px 2px 6px;
}
.acm {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}
.acm-in {
  align-self: flex-start;
  align-items: flex-start;
}
.acm-out {
  align-self: flex-end;
  align-items: flex-end;
}
.acm-from {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 4px 3px;
}
.acm-bubble {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 11px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.acm-out .acm-bubble {
  background: rgba(47, 203, 110, 0.12);
  border-color: rgba(47, 203, 110, 0.35);
}
.acm-text {
  white-space: pre-wrap;
}
.acm-media {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.acm-thumb {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  background: var(--card);
  display: block;
}
.acm-time {
  font-size: 10px;
  color: var(--muted);
  margin: 3px 4px 0;
}

/* =========================================================
   PUBLIC STOREFRONT (service landing page)
========================================================= */
.storefront {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.sf-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(13, 13, 13, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.sf-logo {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
}
.sf-lang {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sf-lang-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 6px;
}
.sf-lang-btn.active {
  color: var(--accent);
}

.sf-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 18px calc(48px + var(--safe-bottom));
}

.sf-hero {
  text-align: center;
  padding: 36px 0 28px;
}
.sf-hero-logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  display: block;
  margin: 0 auto 18px;
}
.sf-hero-title {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 12px;
}
.sf-hero-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto 22px;
  max-width: 520px;
}

.sf-cta {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  padding: 15px 22px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}
.sf-cta:hover {
  background: var(--accent-hover);
}
.sf-cta:active {
  opacity: 0.9;
}
.sf-cta-secondary {
  background: var(--bg-secondary);
  color: var(--text);
  border: 1px solid var(--border);
}

.sf-section {
  padding: 22px 0;
  border-top: 1px solid var(--border);
}
.sf-h2 {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 14px;
}
.sf-p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 10px;
}
.sf-muted {
  color: var(--muted);
  font-size: 14px;
}

.sf-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.sf-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 16px;
}
.sf-card-icon {
  font-size: 26px;
  margin-bottom: 10px;
}
.sf-card-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sf-card-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.sf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.sf-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.sf-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-step-title {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 4px;
}
.sf-step-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.sf-list {
  margin: 8px 0 12px;
  padding-left: 20px;
}
.sf-list li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 4px;
}

.sf-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.sf-contact-email {
  font-size: 16px;
  font-weight: 600;
}
.sf-copy-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.sf-copy-msg {
  font-size: 13px;
  color: var(--success);
  min-height: 18px;
  margin-bottom: 10px;
}

.sf-form {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.sf-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  font-size: 15px;
  padding: 12px 14px;
  outline: none;
}
.sf-input::placeholder {
  color: var(--muted);
}
.sf-input:focus {
  border-color: var(--accent);
}
.sf-textarea {
  resize: vertical;
  min-height: 96px;
  font-family: inherit;
}
.sf-form-note {
  font-size: 13px;
  color: var(--muted);
  min-height: 18px;
}

.sf-footer {
  text-align: center;
  padding: 28px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.sf-footer-note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 14px;
}
.sf-footer-link {
  display: inline-block;
  font-size: 12.5px;
  color: var(--muted);
  text-decoration: underline;
  margin-top: 8px;
}
.sf-footer-link:hover {
  color: var(--text);
}

/* The “Back” button in the gate — return to the storefront */
.entry-gate-back {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}
.entry-gate-back:active {
  opacity: 0.7;
}


/* ===== The “My credits” sheet and services balance top-up ===== */
.spot-sheet-balance {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 18px;
}
.spot-secondary {
  width: 100%;
  margin-top: 10px;
}
.spot-sheet-hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
}
.spot-disclaimer {
  margin-top: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
}
.buy-field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 14px 0 6px;
}
.buy-input {
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.buy-input:focus {
  border-color: var(--accent);
}
.buy-select {
  appearance: none;
  -webkit-appearance: none;
}

/* ===== Custom payment coin picker (crypto coin picker) ===== */
.coin-picker { position: relative; }
.coin-picker-trigger {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  text-align: left;
  min-height: 56px;
}
.coin-picker-trigger:after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  flex: none;
}
.coin-picker.open .coin-picker-trigger { border-color: var(--accent); }
.coin-picker-trigger-empty { color: var(--muted); }
.coin-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex: none;
  letter-spacing: 0.3px;
}
.coin-picker-trigger .coin-lines { display: flex; flex-direction: column; line-height: 1.2; }
.coin-picker-trigger .coin-name { font-size: 16px; font-weight: 600; color: var(--text); }
.coin-picker-trigger .coin-net  { font-size: 12px; color: var(--muted); }

.coin-picker-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.coin-picker-search-row {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.coin-picker-search {
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 15px;
  padding: 4px 2px;
}
.coin-picker-search::placeholder { color: var(--muted); }
.coin-picker-list {
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.coin-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
.coin-option:last-child { border-bottom: none; }
.coin-option:active { background: var(--bg-secondary); }
.coin-option.selected { background: rgba(47,203,110,0.10); }
.coin-option .coin-lines { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.coin-option .coin-name { font-size: 15px; font-weight: 600; color: var(--text); }
.coin-option .coin-net  { font-size: 12px; color: var(--muted); }
.coin-option .coin-check {
  width: 20px; height: 20px; flex: none;
  border-radius: 50%;
  border: 2px solid var(--border);
  box-sizing: border-box;
}
.coin-option.selected .coin-check {
  border-color: var(--accent);
  background:
    radial-gradient(circle at center, var(--accent) 0 5px, transparent 6px);
}
.coin-picker-empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.coin-group-header {
  padding: 10px 14px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--card);
}
.coin-option .coin-name {
  display: flex;
  align-items: center;
  gap: 8px;
}
.coin-net-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--muted);
  text-transform: uppercase;
}
.buy-estimate {
  min-height: 20px;
  margin-top: 14px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.buy-or-divider {
  margin: 12px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #888);
}

/* The consent line above the payment button: the offer is accepted by pressing the button. */
.buy-consent {
  margin: 12px 2px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted, #9aa3b2);
  text-align: center;
}
.buy-consent a {
  color: var(--accent);
  text-decoration: none;
}
.buy-consent a:hover {
  text-decoration: underline;
}

/* Full screen ONLY for the crypto screen (a long coin list). The
   buy-fullscreen class is set by JS. The method choice and the card stay a compact sheet. */
#buy-spot-modal.buy-fullscreen .promo-modal-content {
  max-height: 100vh;
  height: 100vh;
  border-radius: 0;
  padding-top: 20px;
  padding-bottom: 40px;
}
.buy-choose-hint {
  color: var(--muted, #9aa0a6);
  font-size: 14px;
  text-align: center;
  margin: 6px 0 20px;
}
.buy-choose-card-btn {
  margin-top: 12px;
}
.buy-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border, #2a2a2e);
  background: var(--card, #1a1a1e);
  color: var(--text, #fff);
  padding: 0;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.buy-back-button svg {
  display: block;
}
.buy-back-button:hover {
  background: rgba(74, 134, 255, 0.12);
  border-color: var(--accent, #4a86ff);
}
.buy-back-button:active {
  transform: scale(0.92);
}
.buy-method-switch {
  display: flex;
  gap: 8px;
  margin: 6px 0 4px;
}
.buy-method-btn {
  flex: 1;
  padding: 12px 8px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted, #9aa0a6);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.buy-method-btn.buy-method-active {
  border-color: var(--accent, #4a86ff);
  color: var(--text, #fff);
  background: rgba(74, 134, 255, 0.12);
}
.buy-pay-hint {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin: 6px 0 16px;
}
.buy-pay-amount {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  word-break: break-all;
}
.buy-pay-address-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}
.buy-pay-address {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.buy-copy-button {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 13px;
}
.buy-pay-status {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.buy-pay-ok { color: var(--success); }
.buy-pay-err { color: var(--danger); }


/* ===== QR on the payment screen ===== */
.buy-qr {
  display: flex;
  justify-content: center;
  margin: 4px 0 16px;
}
.buy-qr:empty {
  display: none;
}
.buy-qr-img {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
  box-sizing: border-box;
}


/* ===== Admin MFA (2FA) modal ===== */
.admin-2fa-hint {
  font-size: 13px;
  opacity: 0.8;
  margin: 8px 0 12px;
  text-align: center;
  line-height: 1.4;
}
.admin-2fa-qr {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}
.admin-2fa-qr img {
  width: 180px;
  height: 180px;
  border-radius: 8px;
  background: #fff;
  padding: 6px;
}
.admin-2fa-secret {
  font-size: 12px;
  opacity: 0.75;
  text-align: center;
  word-break: break-all;
  margin: 6px 0 14px;
}
.admin-2fa-secret code {
  font-size: 13px;
}
#admin-2fa-code {
  text-align: center;
  letter-spacing: 4px;
  font-size: 18px;
}

.admin-2fa-copy {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  -webkit-user-select: all;
  user-select: all;
}
.admin-2fa-copy:active {
  opacity: 0.6;
}


/* ===== Manager referral program ===== */
.manager-card,
.exclusive-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-top: 16px;
}

.manager-codes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 10px;
}

.manager-codes-left {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.manager-codes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.manager-code-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
}

.manager-code-row.used {
  opacity: 0.6;
}

.manager-code-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-code-status {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.manager-code-copy,
.manager-code-del {
  border: none;
  background: var(--bg);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.manager-code-del {
  color: var(--danger);
}

.manager-code-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 8px 0;
}

/* The “manager” badge in the admin dossier */
.admin-badge-green {
  background: rgba(52, 199, 89, 0.18);
  color: var(--success);
}

/* Manager assignment button in the dossier */
.admin-manager-toggle {
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.admin-manager-toggle.is-on {
  border-color: var(--danger);
  color: var(--danger);
}

/* The “Message on behalf of support” button in the admin dossier */
.admin-write-support {
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.admin-write-support:active {
  opacity: 0.85;
}


/* ===== Two manager referral links (1 credit / 5 credits) ===== */
.manager-links {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 18px;
}

.manager-link-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.manager-link-head {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.manager-link-sub {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  margin-bottom: 12px;
}

.manager-link-sub b {
  color: var(--text);
  font-weight: 600;
}

/* Referral code: a visible monospace code holder (unlike link-box). */
.referral-code-box {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-align: center;
  color: var(--text);
  background: var(--bg-primary, var(--bg-secondary));
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  margin-bottom: 12px;
  user-select: all;
  -webkit-user-select: all;
  word-break: break-all;
}

/* ===== Exclusive referrals in the manager dashboard ===== */
.manager-section-head {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 4px 0 10px;
}

.manager-exclusives-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.manager-excl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.manager-excl-info {
  flex: 1;
  min-width: 0;
}

.manager-excl-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-excl-earn {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.manager-excl-earn b {
  color: var(--text);
  font-weight: 600;
}

.manager-excl-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.manager-excl-reset,
.manager-excl-remove {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  padding: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.manager-excl-reset {
  color: var(--muted);
}

.manager-excl-remove {
  color: var(--danger);
}

.manager-excl-reset svg,
.manager-excl-remove svg {
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.manager-excl-empty {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
}

/* The “Reset all statistics” button in the manager dashboard */
.manager-reset-all-btn {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.manager-reset-all-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* The “Reset counter” button in the admin dossier */
.admin-counter-reset {
  width: 100%;
  margin-top: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--muted);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ===== EMOJI BAR (a panel inside the description field, opened by a button) ===== */
.emoji-field {
  position: relative;
}
.emoji-field .main-textarea {
  padding-bottom: 52px;
}
.emoji-toggle {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, transform 0.08s ease;
}
.emoji-toggle:hover {
  border-color: var(--accent);
}
.emoji-toggle:active {
  transform: scale(0.92);
}
.emoji-pop {
  position: absolute;
  right: 10px;
  bottom: 52px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.emoji-pop[hidden] {
  display: none;
}
.emoji-btn {
  -webkit-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  line-height: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.emoji-btn:hover {
  border-color: var(--accent);
}
.emoji-btn:active {
  transform: scale(0.9);
}

/* ===== LISTING CARD icon overlay controls (close left, share/fav right) ===== */
#close-listing-modal-button {
  right: auto;
  left: 18px;
}
.listing-modal-actions {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  gap: 8px;
  z-index: 20;
}
.listing-icon-button {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.08s ease;
}
.listing-icon-button:hover {
  background: rgba(0, 0, 0, 0.65);
}
.listing-icon-button:active {
  transform: scale(0.92);
}
.listing-icon-button svg,
.listing-icon-button .heart-icon {
  width: 20px;
  height: 20px;
}
.listing-modal-image {
  cursor: pointer;
}

/* ===== ADMIN: the “Hidden” container (moderation by managers) ===== */
.admin-hidden-row {
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.admin-hidden-row:hover {
  border-color: var(--accent);
}
.al-cat {
  background: rgba(47, 203, 110, 0.16);
  color: var(--accent);
  text-transform: none;
  letter-spacing: 0;
}
.al-hiddenby {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Eye button (a manager hides a listing) */
.manager-hide-btn {
  color: var(--muted);
}
.manager-hide-btn:hover {
  color: var(--danger);
}

/* Detailed view of a hidden listing */
.admin-hidden-meta {
  margin-top: 12px;
}
.admin-hidden-cat {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}
.admin-hidden-hiddenby {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.admin-hidden-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.admin-hidden-detail-actions .al-btn {
  flex: 1;
  min-width: 120px;
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}
.al-refund {
  background: rgba(47, 203, 110, 0.16);
  color: var(--accent);
}

/* ===== Uniform rendering of SVG icons in buttons (the same on iOS/Android) ===== */
.close-modal-button svg,
.buy-back-button svg,
.entry-gate-back svg,
.remove-gallery-button svg,
.photo-viewer-close svg,
.ad-banner-remove-btn svg,
.manager-code-del svg {
  display: block;
  pointer-events: none;
}
.manager-code-del svg {
  width: 14px;
  height: 14px;
}

/* ===== Page header with a “Back” arrow ===== */
.page-header-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.page-header-row .page-title {
  margin-bottom: 0;
}
.page-back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border, #2a2a2e);
  background: var(--bg-secondary, #1a1a1e);
  color: var(--text, #fff);
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.page-back-button svg {
  display: block;
  pointer-events: none;
}
.page-back-button:hover {
  background: rgba(74, 134, 255, 0.12);
  border-color: var(--accent, #4a86ff);
}
.page-back-button:active {
  transform: scale(0.92);
}


/* Marketplace rules */
.rules-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
}
.rules-block-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.rules-list {
  margin: 6px 0 0;
  padding-left: 18px;
}
.rules-list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 6px;
}

/* =========================================================
   STORIES · CIRCLES STRIP
   Position: under the banner, above the search bar.
   There must be no empty strip — when there are no stories
   the container gets .hidden from app.js.
=========================================================*/

.stories-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 16px 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stories-strip::-webkit-scrollbar {
  display: none;
}

.story-item {
  flex: 0 0 auto;
  width: 66px;
  text-align: center;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* The ring. The thickness is the same for paid and free ones — otherwise avatars
   would jump in size and the strip would look uneven. The fill differs. */
.story-ring {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 2.5px;
  display: grid;
  place-items: center;
  transition: transform 0.15s, opacity 0.15s;
}

.story-item:active .story-ring {
  transform: scale(0.94);
}

/* Paid story: the brand gradient across the whole thickness. */
.story-item.paid .story-ring {
  background: linear-gradient(140deg, #3b82f6 0%, #22a0d8 45%, #00c853 100%);
}

/* Free: a modest neutral ring. Noticeably quieter than the paid one,
   but the avatar geometry is the same. */
.story-item.free .story-ring {
  background: rgba(255, 255, 255, 0.42);
}

/* Viewed ones fade, but stay in their place by time.
   We mute the ring and slightly shade the avatar — on dark avatars
   shading alone would not be visible. */
.story-item.paid.seen .story-ring {
  opacity: 0.35;
}

.story-item.free.seen .story-ring {
  background: rgba(255, 255, 255, 0.13);
}

.story-item.seen .story-avatar {
  filter: brightness(0.65);
}

.story-ring-inner {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--bg);
  overflow: hidden;
}

.story-avatar {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-secondary);
}

.story-name {
  margin-top: 7px;
  font-size: 11px;
  color: #c9c9c9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-item.seen .story-name {
  color: #6f6f6f;
}

/* =========================================================
   STORIES · VIEWER
========================================================= */

.stories-viewer {
  position: fixed;
  inset: 0;
  background: #000000;
  z-index: 10000;
  overflow: hidden;
}

/* Blurred backdrop: the same frame, stretched and blurred.
   Needed so that photos of any proportions don't leave black bars. */
.sv-photo-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(28px) brightness(0.45);
  transform: scale(1.15); /* hide the blurred edges */
}

/* The photo itself: contain — the frame is fully visible, nothing is cropped.
   cover would cut horizontal photos at the sides on a vertical screen. */
.sv-photo {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 18+ gate inside stories: until the age is confirmed — the photo is under
   a dense blur, with a warning window on top. It covers the tap zones,
   the bar and the strip, so that one can't swipe underneath. */
.sv-adult-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 32px 28px;
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
}

.sv-adult-gate.hidden {
  display: none;
}

.sv-adult-badge {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #ffffff;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 16px;
  padding: 10px 22px;
  line-height: 1;
}

.sv-adult-text {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  max-width: 300px;
}

.sv-adult-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 300px;
}

.sv-adult-confirm {
  width: 100%;
  height: 46px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(140deg, #3b82f6 0%, #22a0d8 45%, #00c853 100%);
}

.sv-adult-decline {
  width: 100%;
  height: 46px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  background: transparent;
}

.sv-adult-confirm:active,
.sv-adult-decline:active {
  opacity: 0.75;
}

/* Tap zones under the bar and the strip, but above the photo */
.sv-zones {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 2;
}

.sv-zone {
  flex: 1;
}

/* Progress: a segment = a photo of the current card */
.sv-bars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 6;
  display: flex;
  gap: 3px;
  padding: 10px 10px 0;
  padding-top: calc(10px + env(safe-area-inset-top));
}

.sv-bar {
  flex: 1;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.28);
  overflow: hidden;
}

.sv-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: #ffffff;
  border-radius: 2px;
}

.sv-bar.done .sv-bar-fill {
  width: 100%;
}

/* Top bar */
.sv-top {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 6;
  padding: 8px 10px 0;
}

.sv-close {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 0;
  color: #ffffff;
  display: grid;
  place-items: center;
  z-index: 7;
  cursor: pointer;
  padding: 0;
}

.sv-plate {
  margin-right: 40px;
  background: rgba(12, 12, 12, 0.42);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.sv-plate:active {
  background: rgba(12, 12, 12, 0.6);
}

.sv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #333333;
}

.sv-info {
  flex: 1;
  min-width: 0;
}

.sv-seller {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-title {
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sv-price {
  font-size: 14.5px;
  font-weight: 700;
  color: #ffffff;
  margin-top: 2px;
}

.sv-acts {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.sv-ico {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.sv-ico.liked {
  color: #ff3b5c;
}

.sv-go {
  background: var(--success);
  color: #06210f;
}

/* Dots: position inside the card gallery */
.sv-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 96px;
  z-index: 6;
  display: flex;
  justify-content: center;
  gap: 5px;
  pointer-events: none;
}

.sv-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.sv-dot.on {
  background: #ffffff;
  width: 14px;
  border-radius: 3px;
}

/* Strip of the seller's other cards: hidden if there is only one card */
.sv-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px 12px 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex;
  gap: 9px;
  overflow-x: auto;
  overflow-y: hidden;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.62), transparent);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.sv-rail::-webkit-scrollbar {
  display: none;
}

.sv-rail-item {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 2px;
  background: rgba(255, 255, 255, 0.22);
  border: 0;
  cursor: pointer;
}

.sv-rail-item.on {
  background: linear-gradient(140deg, #3b82f6 0%, #22a0d8 45%, #00c853 100%);
}

.sv-rail-item img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid rgba(0, 0, 0, 0.5);
}

/* Pause */
.sv-pause {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sv-pause-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  color: #ffffff;
}

/* =========================================================
   SETTINGS · SWITCH
========================================================= */

.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-toggle-label {
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.4;
}

.sg-switch {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.sg-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.sg-switch-track {
  width: 46px;
  height: 27px;
  border-radius: 14px;
  background: #3a3a3a;
  display: block;
  position: relative;
  transition: background 0.2s;
}

.sg-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s;
}

.sg-switch input:checked + .sg-switch-track {
  background: var(--success);
}

.sg-switch input:checked + .sg-switch-track .sg-switch-thumb {
  transform: translateX(19px);
}

.sg-switch input:focus-visible + .sg-switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .story-ring,
  .sg-switch-track,
  .sg-switch-thumb {
    transition: none;
  }
}

/* =========================================================
   LISTING PROMOTION
========================================================= */

/* Gradient frame on a promoted card.

   Two approaches that do NOT work here:
   1) a pseudo-element with inset:-4px — it is clipped by overflow:hidden,
      which is set on .listing-card for the image rounding;
   2) a gradient background of the card itself + padding — it fills everything
      that has no background of its own (text, price, city).

   The working option: a wrapper around the card. It carries the gradient,
   the card sits inside with its own background and doesn't change at all.
   The card's overflow:hidden doesn't affect the wrapper. */
.boosted-wrap {
  padding: 3px;
  border-radius: 23px;
  background: linear-gradient(140deg, #3b82f6 0%, #22a0d8 45%, #00c853 100%);
  display: flex;
  /* Cards in the grid stretch to the row height — the wrapper must too,
     otherwise the frame would be cut by the content and the row would shift. */
  min-width: 0;
  align-self: stretch;
}

.boosted-wrap > .listing-card {
  flex: 1;
  border: none;
  min-width: 0;
}

/* Promotion buttons inside the management block */
.boost-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.boost-controls:empty {
  display: none;
}

.boost-button {
  width: 100%;
  height: 38px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  color: #ffffff;
}

.boost-paid {
  background: linear-gradient(140deg, #3b82f6 0%, #22a0d8 45%, #00c853 100%);
  color: #ffffff;
}

.boost-free {
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: var(--text);
}

.boost-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.boost-button:not(:disabled):active {
  opacity: 0.75;
}

/* Explanation under the promotion button (shop dashboard) */
.boost-hint {
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}

/* Active promotion: instead of buttons — the remaining time */
.boost-active {
  height: 38px;
  border-radius: 10px;
  background: rgba(0, 200, 83, 0.12);
  border: 1px solid rgba(0, 200, 83, 0.35);
  color: var(--success);
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ============================================================
   Verified seller — a blue badge next to the name
   ============================================================ */
.verified-badge {
  width: 15px;
  height: 15px;
  display: inline-block;
  vertical-align: -2px;
  flex: 0 0 auto;
}

/* Slot container: rendered as a sibling of the seller name */
.verified-badge-slot {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
}

/* In a feed card the badge stands next to the title, the spacing is set by .listing-card-badges */
.listing-card-title .verified-badge {
  margin-left: 0;
  vertical-align: 0;
}

/* Keep the seller name + badge on one line without wrapping the icon */
.seller-name,
.seller-profile-name,
.sv-seller,
.sub-item-name {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

/* Verification switch in the admin dossier */
.admin-verified-toggle {
  width: 100%;
  margin-top: 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.admin-verified-toggle.is-on {
  border-color: var(--accent);
  color: var(--accent);
}


/* ===== AI moderation: check overlay ===== */
.sg-mod-overlay {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.sg-mod-overlay.show { opacity: 1; pointer-events: auto; }
.sg-mod-overlay-box {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 32px 40px;
}
.sg-mod-overlay-text {
  color: var(--text); font-size: 15px; font-weight: 500; text-align: center;
}
.sg-mod-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--success);
  animation: sg-mod-spin 0.8s linear infinite;
}
@keyframes sg-mod-spin { to { transform: rotate(360deg); } }

/* ===== AI moderation: result modal ===== */
.sg-modres-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
}
.sg-modres-overlay.show { opacity: 1; pointer-events: auto; }
.sg-modres-box {
  width: 100%; max-width: 340px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px 22px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sg-modres-overlay.show .sg-modres-box { transform: translateY(0) scale(1); }
.sg-modres-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; line-height: 1;
  margin-bottom: 16px;
}
.sg-modres-box.ok   .sg-modres-icon { background: rgba(0, 200, 83, 0.15);  color: var(--success); }
.sg-modres-box.warn .sg-modres-icon { background: rgba(255, 176, 32, 0.15); color: #ffb020; }
.sg-modres-box.err  .sg-modres-icon { background: rgba(255, 77, 79, 0.15);  color: var(--danger); }
.sg-modres-title {
  color: var(--text); font-size: 18px; font-weight: 700; margin-bottom: 8px;
}
.sg-modres-body {
  color: var(--muted); font-size: 14px; line-height: 1.5;
}
.sg-modres-reason {
  margin-top: 14px; padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border); border-radius: 12px;
  color: var(--text); font-size: 13px; line-height: 1.45;
  width: 100%; box-sizing: border-box;
}
.sg-modres-btn {
  margin-top: 22px; width: 100%;
  padding: 13px 20px; border: none; border-radius: 14px;
  background: var(--success); color: #06210f;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: filter 0.15s ease;
}
.sg-modres-box.warn .sg-modres-btn { background: #ffb020; color: #2a1c00; }
.sg-modres-box.err  .sg-modres-btn { background: var(--danger); color: #2a0708; }
.sg-modres-btn:active { filter: brightness(0.92); }

/* =========================================================
   STATS PAGE (seller statistics)
========================================================= */

.stats-month-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 16px 16px;
}

.stats-month-nav {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.stats-month-nav:active {
  background: var(--bg-secondary);
}

.stats-month-nav:disabled {
  opacity: 0.35;
  cursor: default;
}

.stats-month-label {
  flex: 1 1 auto;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
}

.stats-loading {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: 15px;
}

.stats-content {
  padding: 0 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stats-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.stats-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.stats-card-icon {
  font-size: 18px;
  line-height: 1;
}

.stats-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* An explanation under the card metrics. Needed where a figure requires
   a caveat: for example, link clicks accumulate over time rather than
   for the selected month, like everything else on the page. */
.stats-card-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.stats-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stats-row-1 {
  display: grid;
  grid-template-columns: 1fr;
}

.stats-metric {
  background: var(--bg-secondary);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}

.stats-metric-wide {
  padding: 18px 12px;
}

.stats-metric-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.stats-metric-value-lg {
  font-size: 32px;
}

.stats-metric-label {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.3;
}

.stats-free-line {
  margin-top: 14px;
}

.stats-free-text {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.stats-free-text b {
  color: var(--text);
}

.stats-progress {
  height: 8px;
  border-radius: 6px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.stats-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
  transition: width 0.3s ease;
}

.stats-progress-fill.stats-progress-full {
  background: var(--danger);
}

.stats-free-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.stats-conv-line {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.stats-conv-line b {
  color: var(--text);
}

/* Top listings of the month */
.stats-top-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 10px 12px;
}

.stats-top-rank {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--card);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.stats-top-main {
  flex: 1 1 auto;
  min-width: 0;
}

.stats-top-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stats-top-metrics {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 12px;
}

.stats-top-metrics span b {
  color: var(--text);
  font-weight: 700;
}


/* =========================================================
   TELEGRAM · FULL-SCREEN MODE

   In full-screen mode Telegram draws its own header (“Close”,
   minimize, menu) OVER the page. env(safe-area-inset-top) knows
   nothing about it: it describes the screen notch, not someone else's
   interface. Because of this the shop dashboard header slid under
   the Telegram buttons and couldn't be reached.

   The offset value is provided by Telegram itself, JS puts it into --sg-top-inset
   (see syncTgSafeArea in app.js). Outside full screen the variable = 0,
   so the rules below are harmless for the PWA and the site.
========================================================= */

:root { --sg-top-inset: 0px; }

body.tg-fullscreen .page {
  padding-top: calc(10px + var(--sg-top-inset));
}

body.tg-fullscreen .shop-drawer {
  padding-top: calc(env(safe-area-inset-top) + var(--sg-top-inset));
}

/* =========================================================
   STOREFRONT · EXIT BUTTON

   The storefront is long and scrolls, so the button is fixed on
   the screen rather than in the flow: otherwise, after scrolling to the items, there would be
   no way to leave.
========================================================= */

.sf-close {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top) + var(--sg-top-inset));
  left: 12px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* The button lies over the banner, and each shop has its own:
     a semi-transparent backing keeps the contrast on any picture. */
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 0.1s ease, background 0.15s ease;
}

.sf-close svg { display: block; pointer-events: none; }
.sf-close:active { transform: scale(0.92); }
.sf-close:hover { background: rgba(0, 0, 0, 0.72); }

/* On desktop the menu takes the left column — the button moves to its right. */
@media (min-width: 900px) {
  .sf-close { left: 252px; }
}

/* =========================================================
   SHOP DASHBOARD
========================================================= */

.shop-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 14px;
}

.shop-menu-button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  padding: 0;
}
.shop-menu-button:active { opacity: 0.7; }

.shop-topbar-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
}

.shop-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
}

.shop-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 282px;
  max-width: 84vw;
  z-index: 91;
  background: #0f1115;
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.22s ease;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  overflow-y: auto;
}
.shop-drawer.open { transform: translateX(0); }

.shop-drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--border);
}

.shop-drawer-avatar {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--accent);
  color: #04342c;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
}

.shop-drawer-headtext { min-width: 0; }

.shop-drawer-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-drawer-status { font-size: 12px; color: var(--muted); }
.shop-drawer-status.ok { color: var(--accent); }
.shop-drawer-status.warn { color: #f0a92b; }
.shop-drawer-status.off { color: #ff5b5b; }

.shop-drawer-nav { padding: 6px 0; flex: 1; }

/* Exit is pinned to the very bottom of the drawer. padding-bottom with safe-area — so that
   on iPhone the button doesn't slide under the system gesture bar. */
.shop-drawer-foot {
  border-top: 1px solid var(--border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  margin-top: auto;
}

/* ------------------------------------------------------------------
   Shop dashboard mode: the personal profile bottom menu is hidden entirely,
   together with the “+” button. Shop navigation lives in the drawer on the left,
   leaving the dashboard — by a button at its bottom.
   ------------------------------------------------------------------ */
body.shop-mode .bottom-nav { display: none; }

/* The freed 120px at the bottom of the page are no longer needed: without the bottom menu
   an empty strip would gape under the content. */
body.shop-mode #shop-page {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

/* In full-screen mode there are no system bars — safe-area zeroes by itself,
   but :fullscreen on Android may give the backdrop a white background. We set our own. */
:fullscreen { background: var(--bg, #000); }
:-webkit-full-screen { background: var(--bg, #000); }

.shop-drawer-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}
.shop-drawer-item:active { background: rgba(255, 255, 255, 0.06); }
.shop-drawer-item.active { background: rgba(255, 255, 255, 0.10); }
.shop-drawer-item.active .shop-drawer-ico { color: #fff; }

.shop-drawer-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.shop-drawer-item.locked { opacity: 0.42; }
.shop-drawer-item.accent .shop-drawer-ico { color: #fff; }
.shop-drawer-exit { color: var(--muted); }

.shop-lock {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

/* ---- section content ---- */

.shop-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}

.shop-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.shop-card-label { font-size: 13px; color: var(--muted); }

/* A card header with a “?” button: long explanations are collapsed by default,
   otherwise the dashboard reads like a manual rather than a working screen. */
.shop-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.shop-card-header .shop-card-title { margin-bottom: 0; }
.shop-card-header .shop-field-label { margin: 0; }

.shop-hint-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 10px;
}
.shop-card-text { font-size: 13.5px; color: var(--text); line-height: 1.5; margin: 0 0 8px; }
.shop-card-muted { color: var(--muted); }

.shop-gate-note {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: 12px;
  font-size: 13.5px;
  color: var(--text);
  margin: 12px 0;
}

/* Subscription contents on the screen without verification: the person must
   see what they get verified for, not just a closed door. */
.shop-feat-trial {
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 11px 12px;
  margin: 12px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
}

.shop-feat-group {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 7px;
}
.shop-feat-group:first-of-type { margin-top: 0; }

.shop-feat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-feat-list li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.shop-feat-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.shop-status-row { display: flex; align-items: center; gap: 8px; }
.shop-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.shop-status-dot.ok { background: var(--accent); }
.shop-status-dot.warn { background: #f0a92b; }
.shop-status-dot.off { background: #ff5b5b; }
.shop-status-text { font-size: 15px; font-weight: 600; color: var(--text); }

.shop-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.shop-balance-value { font-size: 22px; font-weight: 700; color: var(--text); }

.shop-months-row { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }

.shop-month-btn {
  flex: 1;
  min-width: 62px;
  padding: 9px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
/* The selected state across the dashboard is white. The shop accent color
   was removed: storefront design is uniform, and green drew the eye away from the content. */
.shop-month-btn.active {
  border-color: #fff;
  color: #fff;
}

.shop-cost-line { font-size: 14px; color: var(--text); margin-bottom: 12px; }

.shop-btn {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
}
.shop-btn:active { opacity: 0.8; }
.shop-btn:disabled { opacity: 0.45; }

.shop-btn-primary { background: var(--accent); color: #04342c; border-color: var(--accent); }
.shop-btn-ghost { background: var(--bg-secondary); color: var(--text); width: auto; padding: 0 16px; height: 38px; }

#shop-promo-input { margin-bottom: 10px; }
#shop-promo-button { margin-top: 0; }

.shop-msg { font-size: 13px; margin-top: 10px; min-height: 16px; }
.shop-msg.ok { color: var(--accent); }
.shop-msg.err { color: #ff5b5b; }


/* ---- storefront and staff ---- */

.shop-field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 6px;
}

.shop-field-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}

.shop-textarea { resize: vertical; min-height: 88px; }

.shop-slug-row { display: flex; align-items: center; gap: 6px; }
.shop-slug-prefix { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.shop-slug-input { flex: 1; min-width: 0; }

.shop-banner-preview {
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-secondary) center / cover no-repeat;
  margin-bottom: 10px;
}

.shop-banner-actions { display: flex; gap: 8px; }

.shop-palette { display: flex; flex-wrap: wrap; gap: 10px; }

.shop-swatch {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 2px #0f1115;
}
.shop-swatch.active { border-color: var(--text); }

.shop-contact-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.shop-contact-row .main-input { margin: 0; }
.shop-contact-label { flex: 0 0 38%; }
.shop-contact-value { flex: 1; min-width: 0; }

.shop-contact-del {
  flex-shrink: 0;
  width: 38px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.shop-role-row { display: flex; gap: 8px; margin-bottom: 4px; }

.shop-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 0;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}
.shop-check input { width: 18px; height: 18px; flex-shrink: 0; accent-color: #fff; }

.shop-deputy-note {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: 12px;
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0;
}

.shop-staff-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.shop-staff-item:last-child { border-bottom: none; }

.shop-staff-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-secondary);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.shop-staff-info { flex: 1; min-width: 0; }
.shop-staff-name {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-staff-meta { font-size: 12px; color: var(--muted); }

.shop-staff-remove {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: #ff5b5b;
  font-size: 12.5px;
  padding: 7px 11px;
  cursor: pointer;
}

.shop-empty { font-size: 13.5px; color: var(--muted); padding: 10px 0; }


/* ---- shop chat ---- */

.shop-support-btn { width: 100%; margin-bottom: 12px; }

.shop-chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.shop-chat-item:last-child { border-bottom: none; }

.shop-chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-secondary);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.shop-chat-avatar.support { background: var(--accent); color: #04342c; }

.shop-chat-info { flex: 1; min-width: 0; }

.shop-chat-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-chat-last {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shop-chat-side {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.shop-chat-time { font-size: 11px; color: var(--muted); }

.shop-chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.shop-chat-author {
  font-size: 11px;
  opacity: 0.75;
  margin-bottom: 2px;
}

.shop-chat-previews { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 8px; }

.shop-chat-preview {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.shop-chat-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }

.shop-chat-preview button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}


/* ---- shop listings ---- */

.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.shop-tab {
  flex: 1;
  padding: 9px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.shop-tab.active { border-color: #fff; color: #fff; }

.shop-quota {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
}

.shop-listing-item {
  display: flex;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 14px;
  margin-bottom: 10px;
  background: var(--card);
}

.shop-listing-thumb {
  width: 62px;
  height: 62px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--bg-secondary) center / cover no-repeat;
}

.shop-listing-info { flex: 1; min-width: 0; }

.shop-listing-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.shop-listing-meta { font-size: 12.5px; color: var(--muted); }

.shop-listing-reason {
  font-size: 12.5px;
  color: #f0a92b;
  margin-top: 4px;
}

.shop-listing-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.shop-mini-btn {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 12px;
  cursor: pointer;
}
.shop-mini-btn.primary { border-color: #fff; color: #fff; }
.shop-mini-btn.danger { color: #ff5b5b; }
.shop-mini-btn:disabled { opacity: 0.45; }

#shop-draft-save-button { margin-top: 10px; }


/* ---- shop storefront (buyer side) ---- */

.sf-banner {
  width: 100%;
  aspect-ratio: 16 / 6;
  border-radius: 14px;
  background: var(--bg-secondary) center / cover no-repeat;
  margin-bottom: 12px;
}

.sf-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.sf-avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--bg-secondary) center / cover no-repeat;
  color: var(--text);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sf-headtext { min-width: 0; }
.sf-name-row { display: flex; align-items: center; gap: 6px; }

.sf-name {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-verified { color: #3B9BFF; display: none; align-items: center; }
.sf-verified.show { display: inline-flex; }

.sf-rating { font-size: 13px; color: var(--muted); margin-top: 2px; }

.sf-desc {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  margin: 0 0 12px;
  white-space: pre-wrap;
}

/* Storefront subscription block: button + shop follower counter. */
.sf-subscribe:not(:empty) { margin-bottom: 12px; }

/* Notifications switch in the shop dashboard drawer: separated by a line from the list
   of sections — it is a setting, not a navigation item. */
.shop-drawer-notif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}

.shop-drawer-notif-label {
  font-size: 14.5px;
  color: var(--text);
}

.sf-actions { display: flex; gap: 8px; margin-bottom: 12px; }

.sf-btn {
  flex: 1;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.sf-btn-primary {
  background: var(--bg-secondary);
  border-color: #fff;
  color: #fff;
}

.sf-contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 8px;
  background: var(--card);
}

.sf-contact-text { flex: 1; min-width: 0; }
.sf-contact-label { font-size: 12px; color: var(--muted); }

.sf-contact-value {
  font-size: 13.5px;
  color: var(--text);
  word-break: break-all;
}

.sf-copy {
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 11px;
  cursor: pointer;
}

.sf-cats { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 12px; }

.sf-cat {
  flex-shrink: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.sf-cat.active {
  border-color: #fff;
  color: #fff;
}

/* Shop search shares a row with the sort button —
   the same as in the feed header. */
.sf-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.sf-search-row #sf-search {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.sf-search-row .sort-button {
  flex: 0 0 52px;
}

/* seller type indicator in the feed */
.listing-seller-type {
  display: inline-flex;
  align-items: center;
  /* The icon goes before the rating, hence the right margin. A white outline instead of
     a muted one: the seller type is read before the numbers. */
  margin-right: 6px;
  color: #fff;
  opacity: 1;
  vertical-align: middle;
}


/* ---- banner carousel ---- */

.sf-carousel { position: relative; margin-bottom: 12px; }

.sf-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.sf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
}
.sf-dot.active { background: #fff; }

.sf-block-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 6px 0 10px;
}

.sf-pinned-wrap { margin-bottom: 16px; }

/* ---- live storefront editor ---- */

.sf-editor {
  position: sticky;
  bottom: 0;
  z-index: 40;
  margin: 16px -16px 0;
  padding: 0 16px 16px;
  background: #0f1115;
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

.sf-editor-toggle {
  width: 100%;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.sf-editor-body { max-height: 46vh; overflow-y: auto; }
.sf-editor-body.collapsed { display: none; }

.sf-ed-row { margin-bottom: 10px; }
.sf-ed-row .shop-field-label { margin-top: 0; }

.sf-ed-media { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.sf-ed-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  flex-shrink: 0;
  border: 1px dashed var(--border);
  background: var(--bg-secondary) center / cover no-repeat;
}

.sf-ed-banners { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.sf-ed-banner {
  position: relative;
  width: 94px;
  height: 46px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: var(--bg-secondary) center / cover no-repeat;
}

.sf-ed-banner button {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

/* subscription banner in the personal profile */
.sub-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 13px;
  margin-bottom: 14px;
}
.sub-warning.warn { border-color: #f0a92b; }
.sub-warning.off { border-color: #ff5b5b; }

.sub-warning-text { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text); line-height: 1.45; }

.sub-warning-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}


/* ---- Telegram schedule ---- */

.sf-slot-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.sf-slot-user { flex: 1 1 100%; min-width: 0; margin: 0; }

.sf-slot-day,
.sf-slot-hour {
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 13.5px;
  padding: 0 8px;
}

.sf-slot-dash { color: var(--muted); font-size: 13px; }

.sf-slot-del {
  flex-shrink: 0;
  width: 38px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.shop-listing-item.pinned { border-color: #fff; }

.shop-pin-badge {
  display: inline-block;
  font-size: 11px;
  color: #fff;
  margin-left: 6px;
}


/* ---- retargeting push ---- */

.rt-listing {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}

.rt-count-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 14px;
  text-align: center;
  margin-bottom: 12px;
}

.rt-count {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.rt-count-label { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.rt-counter {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  margin-top: 4px;
}
.rt-counter.over { color: #ff5b5b; }

.rt-cost { font-size: 13.5px; color: var(--text); margin: 12px 0; }

.rt-body { text-align: left; max-height: 62vh; overflow-y: auto; }
.rt-body .shop-field-label { margin-top: 12px; }


/* ---- ad card: dashboard ---- */

.ad-status {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: 11px 12px;
  font-size: 13.5px;
  color: var(--text);
  margin-bottom: 12px;
}
.ad-status.live { border-color: #fff; }

.ad-preview {
  width: 100%;
  max-width: 200px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-secondary) center / cover no-repeat;
  margin-bottom: 10px;
}

.ad-image-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.ad-remove-btn {
  color: var(--danger);
}

/* An empty preview: it shows that there is no image, not that it hasn't loaded */
.ad-preview.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  padding: 10px;
}

/* ---- ad card: feed ---- */

.ad-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.ad-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: var(--bg-secondary);
}

.ad-card-label {
  position: absolute;
  top: 7px;
  left: 7px;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 10px;
  letter-spacing: 0.3px;
}

.ad-card-caption {
  padding: 9px 10px 6px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  /* Truncation removed: the caption is paid for by the advertiser and must be read in full.
     The length is limited on input (60 characters), so the card won't spread out. */
  overflow-wrap: anywhere;
}

.ad-card-shop {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px 10px;
  margin-top: auto;
}

.ad-card-avatar {
  /* 22px is too little for a detailed logo: thin strokes collapse into mush.
     26px + a border give a resolution margin and separate a dark logo from a dark
     card, which is why the avatar read as “pixelated”. */
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent) center / cover no-repeat;
  border: 1px solid var(--border);
  box-sizing: border-box;
  color: #04342c;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-card-name {
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ---- shop reviews in the dashboard ---- */

.shop-rating-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }

.shop-rating-big {
  font-size: 34px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.shop-rev-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 13px;
  margin-bottom: 10px;
}

.shop-rev-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }

.shop-rev-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--bg-secondary) center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.shop-rev-who { flex: 1; min-width: 0; }
.shop-rev-name { font-size: 14px; font-weight: 600; color: var(--text); }
.shop-rev-date { font-size: 11.5px; color: var(--muted); }
.shop-rev-stars { font-size: 13px; color: #FFC83D; flex-shrink: 0; }
.shop-rev-text { font-size: 13.5px; color: var(--text); line-height: 1.45; white-space: pre-wrap; }

.shop-rev-photos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.shop-rev-photos img { width: 62px; height: 62px; border-radius: 9px; object-fit: cover; }

.shop-rev-reply {
  border-left: 2px solid var(--accent);
  padding-left: 10px;
  margin-top: 9px;
  font-size: 13px;
  color: var(--muted);
}

.shop-rev-reply-btn {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 12px;
  cursor: pointer;
  margin-top: 9px;
}


/* ---- shop statistics ---- */

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stat-tile {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 14px 12px;
  text-align: center;
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}

.stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; }

.stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--muted);
}
.stat-row:last-child { border-bottom: none; }
.stat-row b { color: var(--text); font-size: 14.5px; }


/* =====================================================================
   NOTIFICATION SETTINGS · category checkboxes
   ===================================================================== */

.notif-prefs {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.notif-prefs-title {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.notif-prefs .shop-check {
  margin-bottom: 6px;
}

.notif-prefs-note {
  margin-top: 10px;
}

/* =====================================================================
   SUBSCRIPTIONS · shop newsletter megaphone
   Filled — newsletters are on. Outline only — off.
   ===================================================================== */

.sub-item-bell {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.sub-item-bell:active { background: var(--border); }
.sub-item-bell[disabled] { opacity: 0.5; }

.sub-item-bell svg { display: block; }

.sub-item-bell svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sub-item-bell.on svg path.mg-body {
  fill: currentColor;
}


/* =====================================================================
   SHOP NEWSLETTER
   ===================================================================== */

.bc-groups {
  display: flex;
  gap: 10px;
}

.bc-group {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.bc-group.active {
  border-color: var(--accent);
}

.bc-group-name { font-size: 13px; color: var(--muted); }

.bc-group-count {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}

.bc-group.active .bc-group-count { color: var(--accent); }

.bc-group-state {
  font-size: 11.5px;
  color: var(--muted);
  min-height: 14px;
}

.bc-group-state.wait { color: #ff9f43; }

/* notification preview */

.bc-preview { margin: 14px 0; }

.bc-preview-label {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

.bc-preview-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}

.bc-preview-icon {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  flex-shrink: 0;
  /* The same way the buyer will see the push: the app logo serves as the icon.
     We take the 180px version from apple-touch-icon: at 26px CSS
     that is 78 physical pixels at DPR 3 — there is a margin. */
  background: #000 url("/favicon-180.png?v=3") center / cover no-repeat;
}

.bc-preview-text { min-width: 0; flex: 1; }

.bc-preview-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-preview-body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
  word-break: break-word;
}

/* shop name availability check */

.sf-name-check {
  font-size: 12.5px;
  margin-top: 5px;
  min-height: 15px;
  color: var(--muted);
}

.sf-name-check.ok { color: var(--accent); }
.sf-name-check.bad { color: #ff5b5b; }


/* =====================================================================
   REFERRAL PROGRAM BAR (5 invited = a reward)
   ===================================================================== */

.ref-scale { margin: 14px 0 4px; }

.ref-scale-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 7px;
}

.ref-scale-left {
  font-weight: 700;
  color: var(--text);
}

.ref-scale-cells {
  display: flex;
  gap: 5px;
}

.ref-scale-cell {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
}

.ref-scale-cell.filled { background: var(--accent); }

/* In the regular profile (“Referrals”) the “Share” / “Copy link” buttons
   must not stick to the progress bar — move them lower. */
#referral-base-card .ref-scale { margin-bottom: 26px; }

.ref-link-box {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 12px;
  word-break: break-all;
}


/* =====================================================================
   STOREFRONT · live editing on click
   ===================================================================== */

/* Field storage: the fields themselves move into the drawer, they are not visible here. */
.sf-ed-stash { display: none; }

.sf-editbar {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
}

.sf-editbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 11px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #04220f;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.sf-editbar-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  margin-left: auto;
}

.sf-editbar-btn.on {
  background: transparent;
  color: var(--accent);
}

/* Highlighting editable elements — only when the mode is on. */
.sf-editing #sf-carousel,
.sf-editing #sf-avatar,
.sf-editing #sf-name,
.sf-editing #sf-desc,
.sf-editing .sf-contact-row {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
  cursor: pointer;
}

.sf-editing #sf-desc.sf-placeholder,
.sf-editing .sf-contact-value.sf-placeholder { color: var(--muted); }

.sf-sheet-body { text-align: left; max-height: 58vh; overflow-y: auto; }
.sf-sheet-body .sf-ed-row { margin-bottom: 8px; }


/* =====================================================================
   BUTTON SPACING AND SHOP AVATAR
   ===================================================================== */

/* Two buttons in a row in a dashboard card stuck together: .shop-btn has no
   margins of its own, and wrappers with gap are not everywhere here. */
.shop-btn + .shop-btn { margin-top: 8px; }

/* The ghost button is narrow by default (used next to the logo preview).
   Where it is a standalone row, full width is needed. */
.shop-btn-full {
  width: 100%;
  height: 44px;
  padding: 0;
}

/* Shop logo in the dashboard header: if it is uploaded, we show it
   instead of the initials. */
.shop-drawer-avatar {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.shop-drawer-avatar.has-logo { color: transparent; }


/* =====================================================================
   SHOP LISTINGS · tiles like in “My listings”
   ===================================================================== */

/* A draft may have no photo — a placeholder instead of a broken image. */
.shop-card-noimg {
  background: var(--bg-secondary);
}

/* There are four buttons in the active tab, not three: raise the expansion ceiling. */
#shop-listings-list .my-listing-actions { max-height: 260px; }
#shop-listings-list .my-listing-actions.collapsed { max-height: 0; }

#shop-listings-list .shop-mini-btn { width: 100%; }

.listing-card.pinned { border-color: var(--accent); }


/* ===== HIDING A LISTING FROM THE PERSONAL FEED ===== */

/* Reason choice drawer */
.sg-hide-overlay {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sg-hide-overlay.show {
  opacity: 1;
}
.sg-hide-box {
  width: 100%;
  max-width: 520px;
  background: var(--card);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(16px);
  transition: transform 0.22s ease;
}
.sg-hide-overlay.show .sg-hide-box {
  transform: translateY(0);
}
.sg-hide-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
}
.sg-hide-hint {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.4;
}
.sg-hide-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.sg-hide-option:active {
  border-color: var(--accent);
  background: rgba(47, 203, 110, 0.1);
}
.sg-hide-cancel {
  display: block;
  width: 100%;
  padding: 13px 16px;
  margin-top: 4px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}


/* ===== ADMIN: content strikes and AI decision audit ===== */

.admin-badge-amber {
  background: rgba(232, 168, 56, 0.18);
  color: #e8a838;
}

.mod-panel-note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.admin-strikes-summary {
  margin: 4px 0 14px;
}
.admin-strikes-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.admin-strikes-row:last-child {
  border-bottom: none;
}
.admin-strikes-key {
  font-size: 13px;
  color: var(--muted);
}
.admin-strikes-val {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.admin-strikes-list {
  max-height: 46vh;
  overflow-y: auto;
}
.admin-mod-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.admin-mod-row:last-child {
  border-bottom: none;
}
.admin-mod-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.admin-mod-lvl,
.admin-mod-date {
  font-size: 11px;
  color: var(--muted);
}
.admin-mod-date {
  margin-left: auto;
}
.admin-mod-title {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-mod-reason {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

.admin-strikes-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.admin-strikes-actions .al-btn {
  flex: 1;
  min-width: 140px;
}


/* ========================================================
   GUEST MODE
   A guest sees the platform storefront, but not its mechanics: the seller's
   contacts, favorites and other actions are closed.
   ======================================================== */

.guest-only {
  display: none;
}

body.guest-mode .guest-only {
  display: block;
}

/* Seller contacts — only for account holders. Otherwise the site
   turns into a free phone directory and there is no reason to sign up. */
body.guest-mode .listing-contact-row,
body.guest-mode .favorite-button,
body.guest-mode #favorite-listing-button {
  display: none !important;
}

/* =========================================================
   DESKTOP
   The app is drawn for a phone: a bottom menu, a two-column
   feed, bottom sheets. On a monitor this looks like a phone
   in the middle of an empty screen, so the layout is different here:
   the menu moves to the left column, the feed stretches in width,
   sheets become centered windows.
========================================================= */

/* Captions and the logo live only in the side panel. */
.nav-label,
.nav-brand {
  display: none;
}

@media (min-width: 900px) {

  /* --- Bottom menu -> side panel --- */

  .bottom-nav {
    top: 0;
    bottom: auto;
    width: 236px;
    height: 100vh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 4px;
    padding: 18px 14px;
    border-top: none;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
  }

  .nav-brand {
    display: block;
    padding: 6px 12px 18px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
  }

  .nav-label {
    display: inline;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }

  .bottom-nav-button {
    width: 100%;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
  }

  .bottom-nav-button .nav-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
  }

  /* “Post” — an accent row, not a circle sticking out of the panel. */
  .bottom-nav-create-button {
    width: 100%;
    height: 46px;
    margin-top: 8px;
    padding: 0 12px;
    border-radius: 14px;
    justify-content: flex-start;
    gap: 12px;
    background: var(--accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
  }

  .bottom-nav-create-button:hover {
    background: var(--accent-hover);
  }

  .bottom-nav-create-button svg {
    width: 22px;
    height: 22px;
  }

  /* --- Content --- */

  #app {
    padding-left: 236px;
  }

  /* In the shop dashboard the side panel is hidden — no margin is needed for it. */
  body.shop-mode #app {
    padding-left: 0;
  }

  .page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 32px 56px;
  }

  .main-header {
    max-width: 1180px;
    margin: 0 auto;
  }

  /* Columns adapt to the monitor width by themselves: at 1280 there are four,
     at 1920 — six. A fixed number of columns on a large screen
     turns cards into posters. */
  .feed-grid {
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 20px;
  }

  /* --- Sheets -> windows --- */

  .modal {
    align-items: center;
    padding: 32px 16px;
  }

  .listing-modal-content,
  .seller-profile-content,
  .sort-modal-content,
  .report-modal-content,
  .review-detail-content,
  .promo-modal-content {
    max-width: 720px;
    max-height: 86vh;
    border: 1px solid var(--border);
    border-radius: 24px;
  }

}

/* Very wide monitors: give the feed more room, but don't let
   a line of text spread out — a long line is uncomfortable to read. */
@media (min-width: 1500px) {

  .page,
  .main-header {
    max-width: 1420px;
  }

}

/* =========================================================
   APP FOOTER
========================================================= */

.app-footer {
  margin-top: 32px;
  padding: 20px 2px 8px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13px;
}

.app-footer a {
  color: var(--muted);
  text-decoration: none;
}

.app-footer a:hover {
  color: var(--text);
}

.app-footer-note {
  width: 100%;
  margin-top: 4px;
  color: #5f6571;
  font-size: 12px;
}

.app-footer-social {
  width: 100%;
  margin-top: 6px;
  color: #5f6571;
  font-size: 12px;
}

.app-footer-social a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 8px;
}

.app-footer-social a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* =========================================================
   GUEST · centered invitation window
   Previously it was a strip above the menu. A person stops noticing a strip
   after a minute, while we need an account, so
   the window stands in the center — but it closes and doesn't get in the way of browsing.
========================================================= */

.guest-overlay {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.guest-overlay.hidden {
  display: none !important;
}

.guest-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
}

.guest-overlay-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 380px;
}

.guest-card {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 20px;
  text-align: center;
}

.guest-card-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  margin-bottom: 12px;
}

.guest-card-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.guest-card-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 16px;
}

.guest-card-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  margin-top: 8px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.guest-card-btn-primary {
  border: none;
  background: var(--accent);
  color: #ffffff;
}

.guest-card-btn-primary:hover {
  background: var(--accent-hover);
}

.guest-card-btn-ghost {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
}

.guest-card-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.guest-card-close:hover {
  color: var(--text);
}

.guest-ios-hint {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  text-align: left;
}

/* =========================================================
   LANDING PAGE · “Back” button
========================================================= */

.sf-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-right: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.sf-back:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* =========================================================
   DESKTOP · second stage
   Mouse scrolling, window sizes, the ad banner.
========================================================= */

@media (min-width: 900px) {

  /* Strips that are swiped by finger on a phone can't be scrolled by mouse
     at all. We show a thin scrollbar so that it's visible there is
     more; the mouse wheel is handled by app.js. */
  .categories-container,
  .listing-modal-gallery,
  .stories-strip {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    padding-bottom: 8px;
  }

  .categories-container::-webkit-scrollbar,
  .listing-modal-gallery::-webkit-scrollbar,
  .stories-strip::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .categories-container::-webkit-scrollbar-thumb,
  .listing-modal-gallery::-webkit-scrollbar-thumb,
  .stories-strip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
  }

  .categories-container::-webkit-scrollbar-track,
  .listing-modal-gallery::-webkit-scrollbar-track,
  .stories-strip::-webkit-scrollbar-track {
    background: transparent;
  }

  .ad-banner-area {
    margin: 12px auto 22px;
  }

  /* Windows: on a monitor they can be given more air. */
  .listing-modal-content,
  .seller-profile-content {
    max-width: 880px;
  }

  .review-detail-content,
  .promo-modal-content {
    max-width: 620px;
    border-radius: 24px;
  }

  .sort-modal-content {
    max-width: 460px;
  }

  /* Sheets stuck to the bottom of the screen: on a phone this is right,
     on a monitor — a centered window. */
  .review-modal-content,
  .notifications-modal-content {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    max-width: 620px;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 24px;
    border: 1px solid var(--border);
  }

  .report-modal-content {
    left: 50%;
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 620px;
    max-height: 86vh;
    border-radius: 24px;
    border: 1px solid var(--border);
  }

  /* Guest window: two cards side by side. */
  .guest-overlay-inner {
    flex-direction: row;
    align-items: stretch;
    max-width: 760px;
  }

  .guest-overlay-inner > .guest-card {
    flex: 1;
  }

}

/* =========================================================
   SPACING IN THE CARD AND BANNER SIZE
========================================================= */

/* The description ran into the seller block above and into the button below. */
.listing-modal-description {
  margin: 18px 0 20px;
}

.listing-article-row {
  margin-bottom: 14px;
}

.listing-contact-row {
  margin-top: 20px;
}

.guest-card-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.guest-card-link:hover {
  color: var(--text);
}

/* =========================================================
   BANNERS · uniform geometry
   A feed banner and a shop storefront banner are the same place
   in a person's eyes, so they have the same size. The 8:3 ratio
   matches the recommended upload size of 1440 × 540:
   at a block width of 720 this is exactly double density, i.e.
   on retina and in the installed app the picture isn't blurry.
========================================================= */

.ad-banner-carousel,
.ad-banner-empty,
.sf-banner {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.ad-banner-img,
.ad-banner-empty,
.sf-banner {
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 3;
}

.sf-banner {
  margin-bottom: 12px;
}

/* =========================================================
   STOREFRONT: public ID and report
========================================================= */

.sf-public-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
}
.sf-public-id:active {
  opacity: 0.6;
}
.sf-public-id-label {
  font-weight: 700;
  letter-spacing: 0.4px;
}
.sf-public-id-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text);
}

/* System ID (UUID) — a service button for the admin and the manager.
   It stands next to the public ID and deliberately looks different — as a pill,
   so that it isn't confused with the shop's buyer-facing number. */
.sf-sys-id {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.sf-sys-id:active {
  opacity: 0.6;
}
.sf-sys-id-label {
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* Report flag. The slot in the header is free: the edit pencil is seen only
   by the owner, and they don't need the button. */
.sf-report {
  flex-shrink: 0;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}
.sf-report:active {
  color: var(--danger);
  border-color: var(--danger);
}

/* =========================================================
   DASHBOARD: shop identifiers
========================================================= */

.shop-id-line {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 10px;
  cursor: pointer;
  text-align: left;
}
.shop-id-line:active {
  border-color: var(--accent);
}
.shop-id-label {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}
.shop-id-value {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--text);
  word-break: break-all;
}
.shop-id-copy {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.shop-id-hint {
  display: block;
  margin-top: 6px;
}

/* =========================================================
   ADMIN: shop dossier and queue pages
========================================================= */

.admin-shop-owner {
  color: var(--accent);
  cursor: pointer;
}

.admin-shop-staff {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.admin-shop-staff-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.admin-shop-staff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.admin-shop-staff-row:first-of-type {
  border-top: none;
}
.admin-shop-staff-name {
  font-size: 14px;
  color: var(--text);
}
.admin-shop-staff-role {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
}

.mod-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px 16px 20px;
}
.mod-pager-btn {
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  border-radius: 12px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}
.mod-pager-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.mod-pager-label {
  font-size: 13px;
  color: var(--muted);
}


/* SITE NAV */
/* =========================================================
   SITE · HEADER WITH PROFILE INSTEAD OF THE MENU

   In the browser there is no bottom menu or left column anymore. On top —
   logo, notifications and avatar; under the avatar a drawer with all
   sections. Search and the banner stay in their places inside
   the feed: the banner above, the search bar under it.

   Everything is turned on by the body.site-nav class, which app.js sets.
   In the Telegram Mini App and in the installed app the class is not
   set — there is the previous bottom menu.
========================================================= */

body.site-nav .bottom-nav { display: none !important; }

/* The logo and the bell moved to the header — the old feed header
   would remain as a second logo under the first one. */
body.site-nav .main-header { display: none; }

/* The freed 120px under the bottom menu are no longer needed. */
body.site-nav .page {
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}

/* ---------- the header itself ---------- */

.site-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 13, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
}

body.shop-mode .site-topbar { display: none !important; }

.site-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
}

.site-topbar-logo {
  border: none;
  background: transparent;
  padding: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  cursor: pointer;
}

.site-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-topbar-bell-slot {
  display: inline-flex;
  align-items: center;
}

/* ---------- profile button ---------- */

.site-profile-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 190px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
}

.site-profile-btn:hover { background: #1e1e1e; }
.site-profile-btn:active { opacity: 0.8; }

.site-profile-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}

.site-profile-name {
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-profile-chevron {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.site-profile-btn[aria-expanded="true"] .site-profile-chevron {
  transform: rotate(180deg);
}

/* ---------- “Post” next to search ----------*/

.site-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-shrink: 0;
  height: 52px;
  padding: 0 18px;
  border: none;
  border-radius: 18px;
  background: var(--accent);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.site-create-btn:hover { background: var(--accent-hover); }
.site-create-btn:active { opacity: 0.85; }

/* On narrow screens the caption eats the search bar — only “+” remains. */
@media (max-width: 519px) {
  .site-create-btn { padding: 0; width: 52px; }
  .site-create-btn span { display: none; }
}

/* ---------- profile drawer ---------- */

.profile-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 210;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.profile-drawer-overlay.open { opacity: 1; }

.profile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 211;
  width: 292px;
  max-width: 86vw;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #0f1115;
  border-left: 1px solid var(--border);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateX(100%);
  transition: transform 0.22s ease;
}

.profile-drawer.open { transform: translateX(0); }

.profile-drawer-head {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 15px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.profile-drawer-head:active { background: rgba(255, 255, 255, 0.06); }

.profile-drawer-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  background: var(--card);
}

.profile-drawer-headtext {
  display: block;
  min-width: 0;
}

.profile-drawer-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-drawer-spot {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
}

.profile-drawer-nav {
  padding: 6px 0 10px;
}

.profile-drawer-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
}

.profile-drawer-item:hover { background: rgba(255, 255, 255, 0.05); }
.profile-drawer-item:active { background: rgba(255, 255, 255, 0.09); }

.profile-drawer-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  color: var(--muted);
}

/* ---------- desktop ---------- */

@media (min-width: 900px) {

  /* There is no left column anymore — the margin for it is removed. */
  body.site-nav #app { padding-left: 0; }

  /* The storefront exit button stood to the right of the menu; the menu is gone. */
  body.site-nav .sf-close { left: 12px; }

  .site-topbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 32px;
  }

  /* The search bar stretches across the full width: “Post” and sorting
     are pressed to the right edge, no empty gap remains between them and search. */
  body.site-nav .search-wrapper { max-width: none; }

  /* Subcategories go in one row, like the top categories. The strip
     can't be scrolled with a mouse, so here there is a visible thin scrollbar;
     the mouse wheel is turned into sideways movement by app.js (see HSCROLL_SEL). */
  .subcategory-level {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
    padding-bottom: 8px;
  }

  .subcategory-level::-webkit-scrollbar {
    display: block;
    height: 8px;
  }

  .subcategory-level::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
  }

  .subcategory-level::-webkit-scrollbar-track {
    background: transparent;
  }

}

@media (min-width: 1500px) {
  .site-topbar-inner { max-width: 1420px; }
}

/* =====================================================================
   EXTERNAL PRODUCT LINK (marketplaces)
   ===================================================================== */

/* --- Field in the creation form (shop only) --- */

.listing-link-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 6px;
}

.listing-link-help {
  display: block;
  margin-top: 4px;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.listing-link-domains {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.listing-link-domains-group + .listing-link-domains-group {
  margin-top: 4px;
}

.listing-link-domains b {
  color: var(--text);
  font-weight: 600;
}

/* --- Full list of platforms under the button --- */

.listing-link-more {
  margin-top: 8px;
  display: inline-block;
}

.listing-link-all {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* --- Samples of correct addresses --- */
/* Separated by a line: this is not a continuation of the platform list, but an answer to
   another question — what exactly the link should look like. */

.listing-link-examples {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.listing-link-example {
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  /* Addresses are long and without spaces — otherwise they stretch the block in width. */
  word-break: break-all;
}

.listing-link-example-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

/* --- Block on the edit page: show and remove --- */

.edit-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.edit-link-value {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 13px;
  /* The link is long, and its end matters no less than its beginning: break by characters,
     so that the address doesn't run off the edge on a narrow screen. */
  overflow-wrap: anywhere;
  word-break: break-all;
}

.edit-link-remove {
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--danger);
  border-radius: 14px;
  background: transparent;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.edit-link-remove:active {
  background: rgba(255, 77, 79, 0.12);
}

/* --- Button in the listing card --- */

.listing-external-row {
  margin: 12px 0 4px;
}

.listing-external-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.listing-external-button:active {
  background: var(--bg-secondary);
}

.listing-external-button svg {
  flex: 0 0 auto;
  color: var(--muted);
}

.listing-external-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Screen before leaving to an external site --- */

.external-link-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* The host is the largest thing on the screen. It is the only thing a person should
   read before following the link. */
.external-link-host {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  overflow-wrap: anywhere;
}

.external-link-full {
  margin: 8px 0 16px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.external-link-cancel {
  width: 100%;
  margin-top: 10px;
  padding: 13px 16px;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

/* ===== Shop orders ===== */
.shop-orders-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shop-orders-scope,.shop-orders-filter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}

.shop-order-row{border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;padding:12px;margin-top:10px}
.shop-order-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.shop-order-no{font-weight:600;font-size:14px}
.shop-order-status{font-size:12px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap}
.shop-order-status.st-pending{background:rgba(255,176,32,.18);color:#ffb020}
.shop-order-status.st-confirmed{background:rgba(46,182,125,.18);color:#2eb67d}
.shop-order-status.st-declined,.shop-order-status.st-expired,
.shop-order-status.st-cancelled,.shop-order-status.st-returned{background:rgba(255,90,90,.15);color:#ff7b7b}
.shop-order-meta{margin-top:6px;font-size:13px;opacity:.75}
.shop-order-actions{display:flex;gap:8px;margin-top:10px}
.shop-btn-sm{padding:8px 14px;font-size:13px}
.shop-switch{position:relative;display:inline-block;flex:0 0 auto}
.shop-switch input{position:absolute;opacity:0;width:0;height:0}
.shop-switch-track{display:block;width:46px;height:26px;padding:2px;border-radius:999px;background:rgba(255,255,255,.15);transition:background .15s}
.shop-switch-track,.shop-switch-knob{box-sizing:border-box}
/* The knob spacing is set by the track padding: the knob's top margin “fell through” the track, and the knob stuck to its top edge */
.shop-switch-knob{display:block;width:22px;height:22px;margin:0;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .15s}
.shop-switch input:focus-visible + .shop-switch-track{outline:2px solid var(--accent,#7b61ff);outline-offset:2px}
.shop-switch input:checked + .shop-switch-track{background:var(--accent,#7b61ff)}
.shop-switch input:checked + .shop-switch-track .shop-switch-knob{transform:translateX(20px)}

/* Order response modal. Fixed + dvh: on iOS the keyboard
   must not cover the buttons, so the box scrolls by itself. */
.ord-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;
  justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.ord-overlay.hidden{display:none}
.ord-box{width:100%;max-width:460px;max-height:88dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;background:var(--card,#1b1b22);
  border-radius:18px 18px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -8px 40px rgba(0,0,0,.45)}
@media (min-width:560px){
  .ord-overlay{align-items:center}
  .ord-box{border-radius:18px;padding-bottom:20px}
}
.ord-box-title{font-size:17px;font-weight:600;margin-bottom:14px}
.ord-reasons{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.ord-reasons .shop-month-btn{width:100%;text-align:left}
.ord-actions{display:flex;gap:8px;margin-top:16px}
.ord-actions .shop-btn{flex:1}

/* Request on the listing card */
.listing-order-row{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.listing-stock-note{font-size:13px;opacity:.75;line-height:1.4}
.listing-about-link{background:none;border:none;padding:4px 0;font-size:13px;
  text-decoration:underline;opacity:.8;cursor:pointer;color:inherit;align-self:flex-start}
.primary-button.is-disabled{opacity:.5;pointer-events:none}
.of-listing{font-size:14px;opacity:.8;margin-bottom:12px;line-height:1.4}
.as-body{display:flex;flex-direction:column;gap:12px}
.as-row{display:flex;flex-direction:column;gap:2px}
.as-key{font-size:12px;opacity:.6}
.as-val{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}

.ord-field-row{border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;
  padding:12px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.ord-field-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px}
#of-fields-box select.main-input,#shop-fields-list select.main-input{appearance:none;-webkit-appearance:none}

/* Request card in the chat */
.chat-msg-order{max-width:100%;background:transparent;padding:0}
.ord-card{border:1px solid var(--border,rgba(255,255,255,.14));border-radius:14px;
  padding:12px 14px;background:var(--card,rgba(255,255,255,.05));min-width:230px}
.ord-card-loading{opacity:.6;font-size:13px}
.ord-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.ord-card-no{font-weight:600;font-size:13px}
.ord-card-status{font-size:11px;padding:3px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);white-space:nowrap}
.ord-card.st-pending .ord-card-status{background:rgba(255,176,32,.18);color:#ffb020}
.ord-card.st-confirmed .ord-card-status,
.ord-card.st-completed .ord-card-status{background:rgba(46,182,125,.18);color:#2eb67d}
.ord-card.st-declined .ord-card-status,.ord-card.st-expired .ord-card-status,
.ord-card.st-cancelled .ord-card-status,.ord-card.st-returned .ord-card-status{
  background:rgba(255,90,90,.15);color:#ff7b7b}
.ord-card-items{font-size:14px;line-height:1.4;margin-bottom:8px}
.ord-card-item{word-break:break-word}
.ord-card-body{display:flex;flex-direction:column;gap:4px}
.ord-card-row{display:flex;gap:8px;font-size:13px}
.ord-card-key{opacity:.6;flex:0 0 auto}
.ord-card-val{word-break:break-word}
.ord-card-note{margin-top:8px;font-size:12px;opacity:.7}
.ord-card-actions{display:flex;gap:8px;margin-top:10px}
.ord-card-actions .shop-btn{flex:1}

/* Booking schedule — seller dashboard */
.sch-params{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sch-day-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0}
.sch-day-name{flex:1 1 150px;min-width:150px}
.sch-times{display:flex;gap:8px;flex:1 1 190px}
.sch-times .main-input{flex:1;min-width:0}
.sch-cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;margin-top:10px}
.sch-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:8px 2px;border-radius:10px;cursor:pointer;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.sch-cell-day{font-size:15px;font-weight:600;line-height:1}
.sch-cell-mon{font-size:10px;opacity:.6}
.sch-cell.sch-off{opacity:.35}
.sch-cell.sch-closed{background:rgba(255,90,90,.16);border-color:rgba(255,90,90,.4);
  color:#ff7b7b;text-decoration:line-through}

/* Slot choice — buyer form */
.of-days{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:4px 0 8px;scrollbar-width:none}
.of-days::-webkit-scrollbar{display:none}
.of-day{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:52px;padding:8px 6px;border-radius:12px;cursor:pointer;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.of-day-dow{font-size:10px;opacity:.6;text-transform:uppercase}
.of-day-num{font-size:17px;font-weight:600;line-height:1}
.of-day-mon{font-size:10px;opacity:.6}
.of-day.active{background:var(--accent,#7b61ff);border-color:transparent;color:#fff}
.of-day.active .of-day-dow,.of-day.active .of-day-mon{opacity:.85}
.of-slots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.of-slot{padding:9px 14px;border-radius:10px;font-size:14px;cursor:pointer;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.of-slot.active{background:var(--accent,#7b61ff);border-color:transparent;color:#fff}

/* The “Requests” chip above the chat list */
.chat-filter-row{display:flex;gap:8px;padding:0 0 10px}
.chat-chip{padding:7px 14px;border-radius:999px;font-size:13px;cursor:pointer;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.chat-chip.active{background:var(--accent,#7b61ff);border-color:transparent;color:#fff}
.chat-chip-count{opacity:.75;font-variant-numeric:tabular-nums}
.chat-conv-order-badge{display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;
  border-radius:999px;background:rgba(255,255,255,.08);white-space:nowrap}
.chat-conv-order-badge.st-pending{background:rgba(255,176,32,.18);color:#ffb020}
.chat-conv-order-badge.st-confirmed,.chat-conv-order-badge.st-paid,
.chat-conv-order-badge.st-shipped{background:rgba(46,182,125,.18);color:#2eb67d}

/* Pinned request strip in the thread */
.chat-order-strip{display:flex;align-items:center;gap:8px;width:100%;
  padding:9px 14px;border:0;border-bottom:1px solid var(--border,rgba(255,255,255,.12));
  background:rgba(255,255,255,.05);cursor:pointer;color:inherit;text-align:left;
  position:sticky;top:0;z-index:5}
.cos-no{font-weight:600;font-size:13px;flex:0 0 auto}
.cos-status{font-size:11px;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.1);flex:0 0 auto}
.cos-status.st-pending{background:rgba(255,176,32,.18);color:#ffb020}
.cos-status.st-confirmed,.cos-status.st-paid,.cos-status.st-shipped{
  background:rgba(46,182,125,.18);color:#2eb67d}
.cos-extra{font-size:12px;opacity:.7;margin-left:auto;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ord-card-flash{animation:ordFlash 1.2s ease}
@keyframes ordFlash{0%,100%{box-shadow:0 0 0 0 rgba(123,97,255,0)}
  30%{box-shadow:0 0 0 3px rgba(123,97,255,.45)}}

/* Stock on the listing card in the dashboard */
.lst-stock{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.lst-stock-lab{font-size:12px;opacity:.6}
.lst-stock-inp{width:76px;padding:6px 8px;border-radius:8px;font-size:13px;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.05)}
.lst-stock-btn{padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.05)}
.lst-stock-btn:disabled{opacity:.5;pointer-events:none}
.lst-stock-res{font-size:11px;padding:2px 8px;border-radius:999px;
  background:rgba(255,176,32,.18);color:#ffb020}

/* Delivery rates in the order form */
.of-tariff{display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:11px 13px;margin-bottom:8px;border-radius:12px;cursor:pointer;
  color:inherit;text-align:left;
  border:1px solid var(--border,rgba(255,255,255,.14));background:rgba(255,255,255,.04)}
.of-tariff.active{border-color:var(--accent,#7b61ff);background:rgba(123,97,255,.14)}
.of-tariff-name{font-size:14px;line-height:1.3}
.of-tariff-meta{font-size:13px;opacity:.8;white-space:nowrap;flex:0 0 auto}

/* API integrations */
.api-token-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
.api-token-row:last-child{border-bottom:0}
.api-token-prefix{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.api-token-meta{font-size:11px;opacity:.6;margin-top:2px}
.api-fresh{margin-top:12px;padding:12px;border-radius:12px;
  background:rgba(46,182,125,.10);border:1px solid rgba(46,182,125,.3)}
.api-fresh-label{font-size:12px;opacity:.8;margin-bottom:6px}
.api-token-value{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;word-break:break-all;line-height:1.5;margin-bottom:8px;
  -webkit-user-select:all;user-select:all}

/* External service buttons on the card */
.listing-services-row{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.svc-button{width:100%;padding:13px 16px;border-radius:14px;font-size:15px;
  font-weight:500;cursor:pointer;color:#fff;border:0;line-height:1.25;
  background:var(--accent,#7b61ff);
  box-shadow:0 2px 10px rgba(123,97,255,.22)}
.svc-button:active{transform:translateY(1px)}
/* The second button is quieter than the first: there is one main one, the rest are options */
.svc-button + .svc-button{background:rgba(255,255,255,.06);color:inherit;
  border:1px solid var(--border,rgba(255,255,255,.16));box-shadow:none}
.svc-gate-text{font-size:14px;line-height:1.45;opacity:.85;margin-bottom:12px}
.svc-gate-host{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;word-break:break-all;padding:12px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--border,rgba(255,255,255,.14))}

.lst-type{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.lst-type-val{font-size:13px}
.lst-type-links{font-size:11px;padding:2px 8px;border-radius:999px;
  background:rgba(255,255,255,.08);opacity:.85}

/* Mini cart */
.of-items{margin:0 0 14px;border-radius:12px;overflow:hidden;
  border:1px solid var(--border,rgba(255,255,255,.12))}
.of-item{display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13px;
  border-bottom:1px solid var(--border,rgba(255,255,255,.08))}
.of-item:last-child{border-bottom:0}
.of-item-total{font-weight:600;background:rgba(255,255,255,.04)}
.of-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-item-price{flex:0 0 auto;opacity:.85}
.of-item-del{flex:0 0 auto;width:24px;height:24px;border-radius:6px;cursor:pointer;
  border:0;background:rgba(255,255,255,.08);color:inherit;font-size:15px;line-height:1}

/* ============================================================
   Layout fixes for the “Orders” and “Integrations” sections.
   .main-input has no outer margins, and .shop-btn takes
   the full width — in new blocks this made fields stick together and
   buttons wrap one per line.
   ============================================================ */

/* Fields going in a row without a caption between them */
#shop-orders-view .main-input + .main-input,
#shop-integrations-view .main-input + .main-input,
#shop-orders-view .sch-params + .main-input,
#shop-integrations-view .sch-params + .main-input,
.ord-box .main-input + .main-input{margin-top:8px}

/* A grid of two fields: margin at the bottom, otherwise it sticks to the next one */
.sch-params{margin-bottom:8px}

/* Buttons in rows: don't stretch to the full width */
.shop-order-actions .shop-btn,
.lst-stock .shop-btn,
.lst-type .shop-btn{width:auto;flex:0 0 auto}

/* Action row: on a narrow screen wrap rather than squeeze into a mess */
.ord-actions{flex-wrap:wrap}
.ord-actions .shop-btn{flex:1 1 120px;min-width:120px}

/* Tokens: the line must not run into the button */
.api-token-row{gap:12px}
.api-token-row .shop-btn{flex:0 0 auto;width:auto}

/* The “fresh token” block: monospace text wraps correctly */
.api-fresh .shop-btn{width:auto}

/* Buttons on the listing card */
.listing-services-row + .listing-order-row{margin-top:4px}
.listing-order-row .full-width-button{margin:0}

/* Card header and switch in one line */
.shop-orders-head{margin-bottom:6px}

/* Order payment */
.pay-gate-sum{font-size:26px;font-weight:600;margin-bottom:10px;line-height:1.2}
#ord-pay-box{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border,rgba(255,255,255,.12))}

/* An invoice from the shop in the chat */
.pay-card{border-color:rgba(46,182,125,.35)}
.pay-card.st-paid{border-color:rgba(46,182,125,.6)}
.pay-card.st-cancelled{opacity:.6}
.pay-card-sum{font-size:22px;font-weight:600;margin:6px 0 4px;line-height:1.2}
.pay-card.st-paid .ord-card-status{background:rgba(46,182,125,.18);color:#2eb67d}
.pay-card.st-cancelled .ord-card-status{background:rgba(255,90,90,.15);color:#ff7b7b}
#chat-pay-btn{flex:0 0 auto}

/* Invoice button: the amount on it, the gateway as the second line */
.pay-card-btn{display:flex;flex-direction:column;align-items:center;gap:2px;
  width:100%;margin-top:10px;padding:13px 16px;border:0;border-radius:14px;
  cursor:pointer;color:#fff;background:var(--accent,#7b61ff);
  box-shadow:0 2px 10px rgba(123,97,255,.22)}
.pay-card-btn:active{transform:translateY(1px)}
.pay-card-btn-main{font-size:17px;font-weight:600;line-height:1.2}
.pay-card-btn-sub{font-size:12px;opacity:.85;line-height:1.2}

/* Listing type choice (only for submission from the shop dashboard) */
.ptype-row{display:flex;gap:8px;margin:4px 0 10px}
.ptype-btn{flex:1;padding:10px 8px;border-radius:12px;font-size:13px;cursor:pointer;
  color:inherit;border:1px solid var(--border,rgba(255,255,255,.14));
  background:rgba(255,255,255,.04)}
.ptype-btn.active{background:var(--accent,#7b61ff);border-color:transparent;color:#fff}


/* =========================================================
   RESERVING SPACE FOR LATE CONTENT (Cumulative Layout Shift)

   The banner, categories and the feed come from the network and are inserted into empty
   containers. While the containers are empty, the footer is drawn almost right under
   the header, and a second later flies down several screens. The browser
   counts this as a layout shift: CLS 0.419 with a “good” threshold of 0.1,
   63% of loads in the red zone.

   There is one cure: the space must be taken from the first frame.
========================================================= */

/* Banner. The 1080x400 ratio is already set on the slide, but the slide is created by JS —
   at the moment of the first paint it doesn't exist yet. We keep the same
   ratio on the container itself while it is empty; as soon as the carousel
   is inserted, the rule stops applying, and the height doesn't change. */
.ad-banner-area:empty {
  aspect-ratio: 1080 / 400;
}

/* Categories. The chip height is fixed explicitly: without line-height it depends
   on whether Inter has loaded, and the reserve would have to be guessed.
   10 + 17 + 10 + 2 = 39px chip, plus 4px container padding = 43px.
   The reserve must match this height exactly: the container is flex with
   align-items: stretch, and an extra margin would stretch the chips themselves. */
.category-chip {
  line-height: 17px;
}

.categories-container {
  min-height: 43px;
}

/* Feed. The footer must go below the bottom edge of the screen from the first
   frame and not move anymore: shifts of elements outside the viewport don't count
   in CLS. The reserve is permanent and deliberately not removed after
   loading — otherwise a short feed would jerk the footer back up,
   and that is the same penalty. The rule is bound to the id: “Favorites”
   uses the same .feed-grid class, but its own id and is not affected. */
#feed-grid {
  min-height: calc(100vh - 220px);

  /* The reserve is only empty space under the feed, not space that
     the feed must fill. The grid's align-content defaults to
     stretch, so on a short result (one card after a narrow
     filter or search) the single row took the whole reserve, and together
     with it the card stretched: the image stayed at the top, while
     the rating with the heart slid to the bottom edge of the screen because of
     margin-top: auto inside the card. start presses rows to the top and
     leaves the reserve empty — the footer is still beyond the screen edge.
     align-items is not touched: neighboring cards in one row must
     stay the same height. */
  align-content: start;
}

/* The only exception: there are no listings at all. Then the reserve is removed,
   otherwise the “No listings yet” message slides down the screen. */
#feed-grid.feed-empty {
  min-height: 0;
}

/* =========================================================
   UNREAD DOT ON THE “CHAT” BUTTON
   The wrapper is needed so that the dot sticks to the icon both in the bottom
   panel of a phone and in the desktop side panel (there the button
   is stretched to the full width, and a dot at the edge would slide to the right).
========================================================= */

.nav-icon-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex-shrink: 0;
}

.nav-dot {
  position: absolute;
  top: -1px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  /* an outline in the panel color: the dot doesn't merge with the icon line */
  box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.94);
  pointer-events: none;
}

/* A soft pulse: noticeable, but doesn't blink in the eyes. */
@media (prefers-reduced-motion: no-preference) {
  .nav-dot {
    animation: nav-dot-pulse 2s ease-in-out infinite;
  }
}

@keyframes nav-dot-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.18); opacity: 0.82; }
}

/* =========================================================
   Safe deal (escrow)
   ========================================================= */

/* Card in the chat */
.esc-card{min-width:250px;max-width:100%}
.esc-card .ord-card-no{display:flex;align-items:center;gap:6px}
.esc-card .ord-card-no::before{content:"";width:14px;height:14px;flex:0 0 auto;
  background:var(--accent,#7b61ff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 3.4V12c0 5-3.8 9.3-9 10-5.2-.7-9-5-9-10V5.4L12 2z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 3.4V12c0 5-3.8 9.3-9 10-5.2-.7-9-5-9-10V5.4L12 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.esc-sub{font-size:12px;opacity:.65;margin:-2px 0 6px;word-break:break-word}
.esc-terms{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;
  margin:4px 0 8px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04)}
.esc-terms.is-clamped{max-height:7.3em;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.esc-more{background:none;border:none;color:var(--accent,#7b61ff);font-size:12px;padding:0 0 8px;cursor:pointer}
.esc-state:empty{display:none}
.esc-state{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border,rgba(255,255,255,.14))}
.esc-note{line-height:1.4}
.esc-quote{margin:8px 0 4px;padding:6px 10px;border-left:2px solid rgba(255,255,255,.25);
  font-size:13px;line-height:1.4;opacity:.85;white-space:pre-wrap;word-break:break-word}
.esc-offer{margin-top:8px;padding:8px 10px;border-radius:10px;font-size:13px;line-height:1.4;
  background:rgba(123,97,255,.10);border:1px solid rgba(123,97,255,.25)}
.esc-actions{flex-wrap:wrap}
.esc-actions .shop-btn{flex:1 1 auto;margin-top:0}
.esc-btn-danger{color:#ff7b7b !important}
.shop-btn-primary.esc-btn-danger{background:#ff5b5b;border-color:#ff5b5b;color:#fff !important}
.esc-link{display:inline-block;margin-top:10px;font-size:12px;opacity:.7;color:inherit}

.esc-card.st-esc-proposed .ord-card-status,
.esc-card.st-esc-awaiting_payment .ord-card-status{background:rgba(255,176,32,.18);color:#ffb020}
.esc-card.st-esc-funded .ord-card-status,
.esc-card.st-esc-settled .ord-card-status{background:rgba(46,182,125,.18);color:#2eb67d}
.esc-card.st-esc-claim .ord-card-status{background:rgba(255,140,60,.18);color:#ff9a4d}
.esc-card.st-esc-arbitration .ord-card-status{background:rgba(123,97,255,.18);color:#a894ff}
.esc-card.st-esc-declined .ord-card-status,.esc-card.st-esc-cancelled .ord-card-status,
.esc-card.st-esc-expired .ord-card-status{background:rgba(255,90,90,.15);color:#ff7b7b}

/* Transfer details: the main thing is to copy the amount and the address */
.esc-pay{margin-top:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.05);
  border:1px solid var(--border,rgba(255,255,255,.12))}
.esc-pay-title{font-weight:600;font-size:15px;margin-bottom:8px}
.esc-copy-row{display:flex;align-items:center;gap:10px;padding:10px;margin-top:6px;border-radius:10px;
  background:rgba(0,0,0,.25)}
.esc-copy-text{flex:1;min-width:0}
.esc-copy-label{font-size:11px;opacity:.6;margin-bottom:2px}
.esc-copy-value{font-size:14px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;line-height:1.35}
.esc-copy-btn{flex:0 0 auto;min-width:104px;padding:10px 12px;border-radius:10px;border:none;cursor:pointer;
  font-size:13px;font-weight:600;background:var(--accent,#7b61ff);color:#04342c}
.esc-copy-btn.is-done{background:#2eb67d;color:#fff}
.esc-pay-net{font-size:13px;margin-top:10px;line-height:1.4}
.esc-pay-sub{font-size:12px;opacity:.65;margin-top:4px;line-height:1.4}
.esc-qr-toggle{background:none;border:none;padding:8px 0 0;color:var(--accent,#7b61ff);font-size:12px;cursor:pointer}
.esc-qr-wrap{margin-top:6px}
.esc-qr{width:160px;height:160px;border-radius:10px;background:#fff;padding:6px;display:block}

/* Deal event lines in the conversation */
.chat-msg.esc-event{align-self:center;max-width:92%;background:rgba(255,255,255,.05);
  border:1px solid var(--border,rgba(255,255,255,.12));border-radius:12px;padding:8px 12px;margin:6px auto}
.esc-event-label{font-size:11px;font-weight:600;opacity:.7;margin-bottom:2px;text-transform:uppercase;letter-spacing:.02em}
.esc-event-text{font-size:13px;line-height:1.45;white-space:pre-wrap;word-break:break-word}

/* Proposal form */
.esc-role-row{display:flex;gap:6px;margin-bottom:6px;padding:3px;border-radius:12px;background:rgba(255,255,255,.06)}
.esc-role-btn{flex:1;border:none;border-radius:9px;padding:8px 10px;background:transparent;color:inherit;
  font-size:14px;cursor:pointer}
.esc-role-btn.is-active{background:var(--accent,#7b61ff);color:#04342c;font-weight:600}
.esc-textarea{min-height:96px;resize:vertical;line-height:1.4}
.esc-days-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.escrow-wallet-note{margin-top:8px;font-size:13px;line-height:1.4;color:#ffb020}
.escrow-link-inline{background:none;border:none;padding:0;color:var(--accent,#7b61ff);
  text-decoration:underline;font-size:inherit;cursor:pointer}

/* Switch on the listing and button on the listing card */
.escrow-toggle-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;border:1px solid var(--border);border-radius:18px;background:var(--bg-secondary)}
.escrow-toggle-text{flex:1;min-width:0}
.escrow-toggle-text .form-hint{margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}
.escrow-toggle-head .shop-switch{cursor:pointer;line-height:0}
.listing-escrow-row{margin:12px 0}
.listing-escrow-button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:14px;color:inherit;font:inherit;
  background:rgba(46,182,125,.08);border:1px solid rgba(46,182,125,.45)}
.listing-escrow-button:active{opacity:.85}
.listing-escrow-icon{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;
  align-items:center;justify-content:center;background:rgba(46,182,125,.16);color:#2eb67d}
.listing-escrow-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.listing-escrow-title{font-weight:600;font-size:15px}
.listing-escrow-sub{font-size:12px;opacity:.7;line-height:1.35}
.listing-escrow-chev{flex:0 0 auto;font-size:22px;opacity:.5}
.escrow-badge{width:15px;height:15px;vertical-align:-2px;flex:0 0 auto}

/* Wallets */
.escw-row{padding:12px 0;border-bottom:1px solid var(--border,rgba(255,255,255,.1))}
.escw-row:last-child{border-bottom:none}
.escw-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.escw-net{font-weight:600}
.escw-addr{font-size:13px;opacity:.75;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.escw-note{font-size:12px;color:#ffb020;margin-bottom:8px}

/* Arbiter panel */
.esca-box{max-width:620px}
.esca-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.esca-top .ord-box-title{margin-bottom:0}
.esca-empty{opacity:.6;padding:20px 0;text-align:center}
.esca-item{display:block;width:100%;text-align:left;margin-top:10px;padding:12px;border-radius:12px;
  color:inherit;background:rgba(255,255,255,.05);border:1px solid var(--border,rgba(255,255,255,.12));cursor:pointer}
.esca-item-top{font-weight:600;font-size:14px}
.esca-item-sub{font-size:13px;opacity:.75;margin-top:2px}
.esca-item-due{font-size:12px;opacity:.7;margin-top:4px}
.esca-item-due.is-late{color:#ff7b7b;opacity:1}
.esca-back{margin:12px 0}
.esca-form{margin-top:14px;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);
  border:1px solid var(--border,rgba(255,255,255,.12))}
.esca-form .shop-btn{margin-top:10px;width:100%}
.esca-form-title{font-weight:600;font-size:14px;margin:14px 0 6px}
.esca-form .esca-form-title{margin-top:0}
.esca-quick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.esca-quick .shop-btn{width:auto;flex:1 1 auto;margin-top:0}
.esca-textarea{min-height:90px;resize:vertical}
.esca-chat{display:flex;flex-direction:column;gap:8px;max-height:50vh;max-height:50dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:4px 2px}
.esca-msg{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13px;line-height:1.4}
.esca-msg-b{border-left:3px solid #4da3ff}
.esca-msg-s{border-left:3px solid #2eb67d}
.esca-msg-x{border-left:3px solid rgba(255,255,255,.3);opacity:.85}
.esca-msg-who{font-size:11px;opacity:.6;margin-bottom:2px}
.esca-msg-body{white-space:pre-wrap;word-break:break-word}
.esca-msg-img img{max-width:160px;max-height:160px;border-radius:8px;margin-top:6px;display:block}

/* Signing from a phone */
.escr-steps{margin:6px 0 12px;padding-left:20px;font-size:14px;line-height:1.5}
.escr-steps li{margin:4px 0}
.escr-open{display:block;width:100%;text-align:center;text-decoration:none;padding:14px 16px;font-size:16px}
.escr-wide{display:block;width:100%;margin-top:8px}
.escr-qr{margin-top:12px;text-align:center}
.escr-qr .esc-qr{margin:0 auto}

/* Arbiter panel: sections and the cash desk */
.esca-sec{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.esca-sec-title{font-weight:600;font-size:15px}
.esca-sec-count{min-width:24px;padding:2px 8px;border-radius:999px;text-align:center;font-size:12px;
  background:rgba(255,255,255,.08)}
.esca-sec-hint{font-size:12px;opacity:.6;margin-top:2px}
.esca-sec-empty{font-size:13px;opacity:.45;padding:8px 0}
.esca-item-reason{font-size:12px;opacity:.75;margin-top:4px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.esca-treasury{margin-top:12px;padding:12px;border-radius:12px;background:rgba(46,182,125,.07);
  border:1px solid rgba(46,182,125,.3)}
.esca-tr-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:4px 0}
.esca-tr-val{font-weight:600;text-align:right}
.esca-tr-warn{margin-top:8px;font-size:13px;color:#ffb020}
.escw-note-muted{color:inherit;opacity:.6}

/* Arbiter panel: tabs, assignment, admin sections */
.esca-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px;padding-bottom:2px}
.esca-tab{flex:0 0 auto;border:1px solid var(--border,rgba(255,255,255,.14));background:transparent;color:inherit;
  border-radius:999px;padding:7px 14px;font-size:13px;cursor:pointer}
.esca-tab.is-active{background:var(--accent,#7b61ff);color:#04342c;border-color:transparent;font-weight:600}
.esca-badge{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff5b5b;color:#fff;
  font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:auto;margin-right:6px}
.esca-item-who{font-size:12px;margin-top:4px;opacity:.75}
.esca-item-who.is-mine{color:#2eb67d;opacity:1}
.esca-assign{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;
  padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.05);font-size:13px}
.esca-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.esca-chip{border:1px solid var(--border,rgba(255,255,255,.14));background:transparent;color:inherit;border-radius:999px;
  padding:6px 12px;font-size:12px;cursor:pointer}
.esca-chip.is-active{background:rgba(255,255,255,.12);font-weight:600}
.esca-tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.esca-deal .esca-item-top{display:flex;align-items:center;gap:8px}
.esca-check{width:18px;height:18px;flex:0 0 auto}
.esca-more{margin-top:12px;width:100%}
.esca-arb-row{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.esca-arb-row select{flex:1 1 220px}
.esca-pct{width:80px;flex:0 0 80px}
div.esca-item{cursor:default}

/* The feature is off or not yet confirmed by the server — its entry points are hidden */
.escrow-off .escrow-toggle-block,
.escrow-off #escrow-wallets-button,
.escrow-off #listing-escrow-row,
.escrow-off #chat-escrow-btn{display:none !important}

/* Wallet not linked: a hint instead of the switch */
.escrow-locked .form-hint{margin:4px 0 8px}
.escrow-locked .escrow-link-inline{font-size:14px}

/* Several wallets in settings and choosing a wallet for a deal */
.escw-wallet{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px}
.escw-wallet-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.escw-wallet-acts{display:flex;gap:12px;flex:0 0 auto}
.escw-del{color:#ff7b7b}
.escpk-list{margin:10px 0 4px}
.escpk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-top:6px;border-radius:10px;
  background:rgba(255,255,255,.05);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;cursor:pointer}
.escpk-item input{width:18px;height:18px;flex:0 0 auto}
.escpk-save{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(46,182,125,.08);border:1px solid rgba(46,182,125,.3)}

/* The “Wallets for the safe deal” card in profile settings */
.escrow-wallets-summary{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.escrow-wallets-line{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.escrow-wallets-empty{font-size:13px;opacity:.6}
.escrow-off #escrow-wallets-card{display:none !important}

/* (?) next to the wallets window title */
#escrow-wallet-modal .settings-email-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
#escrow-wallet-modal .settings-email-header .ord-box-title{margin-bottom:0}
#escw-hint{margin-top:8px}
#escw-hint p{margin:0 0 8px}
#escw-hint p:last-child{margin-bottom:0}

/* Arbiter panel — a separate full-screen page, the header with tabs is pinned at the top */
#escrow-arbiter-modal{align-items:stretch;justify-content:center;background:var(--bg,#0f0f14);-webkit-backdrop-filter:none;backdrop-filter:none}
#escrow-arbiter-modal .esca-box{width:100%;max-width:760px;height:100%;max-height:none;margin:0;border-radius:0;
  box-shadow:none;padding:0 16px calc(24px + env(safe-area-inset-bottom))}
#escrow-arbiter-modal .esca-head{position:sticky;top:0;z-index:2;background:var(--card,#1b1b22);
  margin:0 -16px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
#escrow-arbiter-modal .esca-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
#escrow-arbiter-modal .esca-top .ord-box-title{margin-bottom:0;font-size:20px}
#escrow-arbiter-modal .esca-tabs{margin-top:10px}
#escrow-arbiter-modal .esca-chat{max-height:none}
@media (min-width:560px){
  #escrow-arbiter-modal{align-items:stretch}
  #escrow-arbiter-modal .esca-box{border-radius:0}
}

/* Cash desk: the service wallet balance in large type */
.esca-wallet-row{align-items:center}
.esca-wallet-bal{font-size:24px;font-weight:700;line-height:1.2;margin:2px 0 6px}
.esca-wallet-addr{font-size:12px;opacity:.85}

/* Cash desk: rate and manual wallet check (AML), admin only */
.esca-aml{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.3)}
.esca-aml-rates{margin-top:6px}
.esca-aml-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.esca-aml-form .main-input{margin:0}
.esca-aml-net{flex:0 0 96px;width:96px}
.esca-aml-addr{flex:1 1 220px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.esca-aml-out{margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);font-size:13px}
.esca-aml-out.is-pass{border-color:rgba(0,200,83,.55);background:rgba(0,200,83,.06)}
.esca-aml-out.is-fail{border-color:rgba(255,77,79,.6);background:rgba(255,77,79,.06)}
.esca-aml-out.is-err{border-color:rgba(255,176,32,.6);color:#ffb020}
.esca-aml-score{display:flex;align-items:baseline;gap:2px}
.esca-aml-num{font-size:24px;font-weight:700;line-height:1.1}
.esca-aml-of{opacity:.75}
.esca-aml-verdict{margin-top:2px;font-weight:600}
.esca-aml-reason,.esca-aml-detail{margin-top:4px;opacity:.8;word-break:break-word}

/* A warning in chats: messages older than 30 days are deleted */
.chat-retention-note{flex-shrink:0;padding:6px 14px;font-size:11px;line-height:1.35;color:var(--muted);
  text-align:center;border-bottom:1px solid var(--border)}

/* ===== Direct payment in TON: form, invoice, check, payment ===== */
.dp-body { display: flex; flex-direction: column; }
.dp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.dp-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.dp-head .dp-title { margin-bottom: 0; }
.dp-timer { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp-chips { display: flex; gap: 8px; margin: 6px 0 2px; }
.dp-chip {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 8px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--card); color: var(--muted); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.dp-chip-coin { font-size: 15px; font-weight: 700; }
.dp-chip-net { font-size: 11px; }
.dp-chip.dp-chip-on { border-color: var(--accent); color: var(--text); background: rgba(74, 134, 255, 0.12); }
.dp-price { font-size: 15px; }
.dp-note { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); text-align: center; }
.dp-receipt { border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; }
.dp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.dp-row:last-child { border-bottom: 0; }
.dp-row-left { min-width: 0; }
.dp-row-title { font-size: 14px; color: var(--text); }
.dp-row-sub { font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; }
.dp-row-amount { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dp-total { background: rgba(74, 134, 255, 0.08); }
.dp-total .dp-row-title, .dp-total .dp-row-amount { font-size: 16px; font-weight: 700; }
.dp-steps { margin: 12px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; color: var(--text); }
.dp-steps li { margin-bottom: 4px; }
.dp-wallet { margin-top: 10px; font-size: 13px; color: var(--muted); text-align: center; word-break: break-all; }
.dp-link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.dp-secondary { width: 100%; margin-top: 10px; }
.dp-passed { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--success); }
.dp-center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 24px 4px 8px; }
.dp-center .promo-submit-button, .dp-center .dp-secondary { width: 100%; margin-top: 10px; }
.dp-center-title { font-size: 17px; font-weight: 700; color: var(--text); }
.dp-center-sub { font-size: 13.5px; line-height: 1.45; color: var(--muted); max-width: 320px; }
.dp-icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700; background: var(--bg-secondary); color: var(--muted);
}
.dp-icon-sm { width: 22px; height: 22px; font-size: 13px; }
.dp-icon.dp-ok { background: rgba(46, 204, 113, 0.15); color: var(--success); }
.dp-icon.dp-bad { background: rgba(255, 107, 107, 0.15); color: var(--danger); }
.dp-icon.dp-warn { background: rgba(245, 172, 55, 0.15); color: #f5ac37; }
.dp-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: dp-spin 0.9s linear infinite; margin-bottom: 6px;
}
@keyframes dp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dp-spinner { animation-duration: 2.5s; } }

/* ===== Safe deal: invoice, payment from the wallet, evidence ===== */
.esc-pay-amount{font-size:20px;font-weight:700;margin:2px 0 4px;font-variant-numeric:tabular-nums}
.esc-receipt-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.esc-receipt-head .esc-pay-title{margin-bottom:6px}
.esc-receipt-timer{font-size:12px;opacity:.7;white-space:nowrap;font-variant-numeric:tabular-nums}
.esc-receipt-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:7px 0;
  border-top:1px solid var(--border,rgba(255,255,255,.1))}
.esc-receipt-left{min-width:0}
.esc-receipt-title{font-size:13px}
.esc-receipt-sub{font-size:11px;opacity:.6;line-height:1.35;margin-top:1px}
.esc-receipt-amt{font-size:13px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.esc-receipt-total .esc-receipt-title,.esc-receipt-total .esc-receipt-amt{font-size:15px;font-weight:700}
.esc-evidence-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.esc-evidence-item{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.2);font-size:13px;line-height:1.4;
  border-left:3px solid rgba(255,255,255,.25);word-break:break-word}
.esc-evidence-buyer{border-left-color:#4da3ff}
.esc-evidence-seller{border-left-color:#2eb67d}
.esc-evidence-who{font-size:11px;opacity:.6;margin-bottom:2px}
.esc-evidence-item .esc-link{margin-top:0;opacity:1;color:var(--accent,#4a86ff);font-size:13px;word-break:break-all}
.esc-evidence-note{margin-top:4px;white-space:pre-wrap}
.esc-evidence-img{display:block;max-width:180px;max-height:180px;border-radius:8px;margin-top:6px}

/* Public safe-deal history of the seller */
.escrow-history{margin:0 0 14px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;
  background:var(--bg-secondary)}
.escrow-history-head{display:flex;align-items:center;gap:10px}
.escrow-history-head .escrow-badge{width:26px;height:26px}
.escrow-history-text{flex:1;min-width:0}
.escrow-history-title{font-size:15px;font-weight:700;color:var(--text)}
.escrow-history-sum{font-size:13px;color:var(--muted)}
.escrow-history-toggle{flex:0 0 auto;border:1px solid var(--border);background:transparent;color:var(--text);
  border-radius:999px;padding:6px 12px;font-size:12px;cursor:pointer}
.escrow-history-list{margin-top:10px;display:flex;flex-direction:column}
.escrow-history-row{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--border);font-size:13px}
.escrow-history-no{flex:0 0 52px;font-weight:600;font-variant-numeric:tabular-nums}
.escrow-history-month{flex:0 0 auto;color:var(--muted)}
.escrow-history-res{margin-left:auto;text-align:right}
.escrow-history-row.is-disputed .escrow-history-res{color:#f5ac37}
.escrow-history-more{font-size:12px;color:var(--muted);padding-top:6px}
.listing-escrow-stats{display:block;font-size:12px;margin-top:3px;color:#2eb67d;font-weight:600}
#sf-escrow-history{margin:12px 0}

/* ---------- Button layout and (?) explanations ---------- */
/* Buttons in a row have the same height; if they don't fit side by side — each takes the full width,
   the text doesn't stick to the edges and doesn't wrap inside the button needlessly. */
.ord-actions .shop-btn + .shop-btn{margin-top:0}
.ord-actions{align-items:stretch}
.ord-actions .shop-btn{height:auto;min-height:42px;padding:9px 14px;line-height:1.25}
.esc-actions{align-items:stretch}
.esc-actions .shop-btn{height:auto;min-height:40px;padding:9px 14px;line-height:1.25}
.esc-textarea{font-family:inherit;font-size:15px}
.esc-qr-toggle{min-height:32px;padding:8px 0}
/* The (?) icon — an explanation for the buttons next to it; the text opens under the row. */
.esc-hint-btn{flex:0 0 32px;width:32px;height:32px;align-self:center;border-radius:50%;
  border:1px solid var(--border,rgba(255,255,255,.2));background:transparent;color:var(--muted,#9aa0a6);
  font-size:14px;font-weight:700;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer}
.esc-hint-btn[aria-expanded="true"]{color:var(--accent,#4a86ff);border-color:var(--accent,#4a86ff)}
.esc-hint-btn:active{opacity:.6}
.esc-hint{margin-top:8px}
.esc-actions-hint{flex-wrap:nowrap;align-items:center}
.esc-actions-main{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;min-width:0}
.esc-actions-main .shop-btn{flex:1 1 auto;margin-top:0}
.esc-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.esc-title-row .esc-pay-title{margin-bottom:0}
.esc-evidence .esc-hint{margin-top:6px}
.esc-evidence .esc-evidence-list{margin-top:8px}
/* Arbiter panel: all tabs are visible (on a phone — in two rows), values don't break. */
.esca-tabs{flex-wrap:wrap;overflow-x:visible}
.esca-tr-val{white-space:nowrap;text-align:right}
.esca-arb-row .shop-btn{width:auto;flex:1 1 auto;margin-top:0}
.esca-arb > .shop-btn{margin-top:10px}
#esca-list > .esca-sec-hint:first-child{margin:10px 0 8px}
textarea.main-input{font-family:inherit}
.esca-assign .shop-btn{width:auto;flex:0 1 auto;margin-top:0}
.esca-assign > span, .esca-assign > div:first-child{flex:1 1 auto;min-width:0}
.esca-assign .esc-hint-btn{flex:0 0 32px}
.esca-tools .shop-btn{width:auto;flex:1 1 auto;margin-top:0;height:auto;min-height:38px;padding:8px 14px}

/* ---------- Phones: iOS and Android ---------- */
/* The TON Connect wallet picker window — above the deal windows (they have z-index 9999). */
#tc-widget-root{position:relative;z-index:100002}
/* Height of bottom windows: vh — old browsers, dvh — new ones, --vvh — the visible part
   of the screen with the keyboard open (calculated in app.js). --kb lifts the window above
   the iOS keyboard, which doesn't change the page height. */
.ord-box{max-height:88vh;max-height:88dvh;max-height:calc(var(--vvh,100vh) * .88)}
.ord-overlay{padding-bottom:var(--kb,0px);-webkit-backdrop-filter:blur(2px)}
.guest-overlay-backdrop{-webkit-backdrop-filter:blur(2px)}
/* Full-screen credit payment on iPhone: the “×” and “←” buttons are not under the clock and the “island”. */
#buy-spot-modal.buy-fullscreen .promo-modal-content{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh;
  padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(40px + env(safe-area-inset-bottom))}
#buy-spot-modal.buy-fullscreen .close-modal-button{top:calc(18px + env(safe-area-inset-top))}
/* Mouse hover “sticks” after a tap on a phone. */
@media (hover:none){
  .buy-back-button:hover{background:var(--card,#1a1a1e);border-color:var(--border,#2a2a2e)}
}
/* Tap zones — no less than ~40 px, the look is the same. */
.esc-hint-btn,.email-hint-toggle{position:relative}
.esc-hint-btn::after{content:'';position:absolute;inset:-6px;border-radius:50%}
.email-hint-toggle::after{content:'';position:absolute;inset:-11px;border-radius:50%}
.escrow-link-inline,.dp-link{padding:4px 2px;margin:-4px 0}
.esc-more{padding:8px 0}
.esca-chip,.esca-tab,.escrow-history-toggle{min-height:36px}
/* The address and amount can be selected with a long press if copying didn't work. */
.esc-copy-value{-webkit-user-select:all;user-select:all;-webkit-touch-callout:default}
/* Leftovers at the address of a completed deal (admin panel) */
.esca-stuck{margin-top:8px;padding:10px;border-radius:10px;background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.3)}

/* =====================================================================
   CARD PREVIEW FROM THE SHOP DASHBOARD
   ===================================================================== */

/* A card in the list can be tapped — the cursor hints at this. */
#shop-listings-list .shop-preview-card .listing-card-image,
#shop-listings-list .shop-preview-card .listing-card-title,
#shop-listings-list .shop-preview-card .listing-card-price {
  cursor: pointer;
}

/* The “Preview” label exists only in this mode. */
.shop-preview-banner { display: none; }

#listing-modal.is-shop-preview .shop-preview-banner {
  display: block;
  margin: 0 0 10px;
  padding: 9px 12px;
  padding-right: 52px; /* don't overlap the close cross */
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: var(--text, #fff);
  font-size: 13px;
  line-height: 1.35;
}

/* The seller doesn't need buyer buttons: contacting yourself, ordering from yourself,
   adding your own item to favorites — pointless. */
#listing-modal.is-shop-preview .listing-modal-actions,
#listing-modal.is-shop-preview .listing-contact-row,
#listing-modal.is-shop-preview #guest-contact-cta,
#listing-modal.is-shop-preview #listing-order-row,
#listing-modal.is-shop-preview #listing-services-row,
#listing-modal.is-shop-preview #listing-escrow-row {
  display: none !important;
}

/* The shop block and the marketplace link are visible, but not clickable. */
#listing-modal.is-shop-preview .seller-card,
#listing-modal.is-shop-preview .listing-external-row {
  pointer-events: none;
}

/* A draft without a photo. */
.shop-preview-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: var(--bg-secondary);
  color: var(--muted);
  font-size: 14px;
}


/* The “Preparing payment…” button — while the deal is being created on-chain */
.esc-btn-wait{display:inline-flex;align-items:center;justify-content:center;gap:8px;opacity:.85}
.esc-btn-wait::before{content:"";width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:dp-spin .8s linear infinite}
.esc-pay-wait{color:var(--accent,#7b61ff)}

/* Unread dot on the site: at the avatar in the header and at “Chat” in the drawer */
.site-profile-avatar-wrap{position:relative;display:inline-block;line-height:0;flex-shrink:0}
.site-profile-avatar-wrap .nav-dot{top:-2px;right:-2px;box-shadow:0 0 0 2px #121212}
.profile-drawer-ico.nav-icon-wrap{display:flex}
.profile-drawer-ico .nav-dot{top:-3px;right:-4px;width:9px;height:9px;box-shadow:0 0 0 2px #121212}

/* =========================================================
   UNDER THE LISTING: “RECOMMENDED” AND “SIMILAR LISTINGS”
   “Recommended” — a sideways strip (seller's items + promoted ones),
   “Similar” — a two-column grid with a “Show more” button.
   The cards are the same as in the feed, only more compact.
========================================================= */

/* Back to the previous listing — next to the cross */
#listing-back-button {
  right: auto;
  left: 68px;
}

/* Switching to another listing in an open card */
.listing-modal-content.is-switching .listing-modal-body,
.listing-modal-content.is-switching .listing-modal-gallery {
  opacity: 0.45;
  transition: opacity 0.12s ease;
}

.listing-recs {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.listing-recs-section + .listing-recs-section {
  margin-top: 28px;
}

.listing-recs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.listing-recs-title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

/* Arrows — only where there is a mouse; on a phone people swipe with a finger */
.listing-recs-arrows {
  display: none;
  gap: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .listing-recs-arrows {
    display: flex;
  }
  .listing-recs-section.no-overflow .listing-recs-arrows {
    display: none;
  }
}

.listing-recs-arrow {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease;
}

.listing-recs-arrow:hover:not(:disabled) {
  background: var(--card);
  border-color: var(--accent);
}

.listing-recs-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.listing-recs-arrow svg {
  display: block;
  pointer-events: none;
}

/* Sideways strip: the edges go under the modal margins, like the photo gallery */
.listing-recs-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  margin: 0 -24px;
  padding: 3px 24px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.listing-recs-row::-webkit-scrollbar {
  display: none;
}

.listing-recs-item {
  flex: 0 0 clamp(138px, 42%, 188px);
  display: flex;
  min-width: 0;
  scroll-snap-align: start;
}

.listing-recs-item > .listing-card,
.listing-recs-item > .boosted-wrap {
  flex: 1;
  min-width: 0;
}

/* Grid of similar ones */
.listing-recs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 900px) {
  .listing-recs-grid {
    grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
    gap: 14px;
  }
}

.listing-recs-showmore {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.listing-recs-showmore:active {
  transform: scale(0.99);
}

/* Compact cards inside the blocks */
.listing-recs .listing-card {
  border-radius: 16px;
}

.listing-recs .boosted-wrap {
  border-radius: 19px;
}

.listing-recs .listing-card-body {
  padding: 10px 8px 6px;
}

.listing-recs .listing-card-title {
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 4px;
}

.listing-recs .listing-card-price {
  font-size: 16px;
  margin-bottom: 2px;
}

.listing-recs .listing-card-city {
  font-size: 12px;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-recs .listing-rating {
  font-size: 13px;
}

.listing-recs .favorite-button {
  font-size: 18px;
  padding: 0;
}

.listing-recs .heart-icon {
  width: 20px;
  height: 20px;
}

/* There are no strips in the preview from the shop dashboard*/
#listing-modal.is-shop-preview #listing-recs,
#listing-modal.is-shop-preview #listing-back-button {
  display: none !important;
}