/* public/assets/board.css */
/* ==========================================================================
   BOARD UI — scoped styles only (всё только внутри .board-ui)
   Laravel Blade + обычный CSS
   Под общий светлый воздушный стиль сайта
   ========================================================================== */

.board-ui,
.board-ui *{
  box-sizing: border-box;
}

.board-ui{
  --brand: var(--theme-color, #0088cc);

  --bg: transparent;
  --card: rgba(255,255,255,.68);
  --card-strong: rgba(255,255,255,.76);
  --text: #111827;
  --muted: #6b7280;

  --border: rgba(181,194,222,.26);
  --border-strong: rgba(181,194,222,.34);

  --shadow:
    0 12px 26px rgba(71,85,105,.055),
    inset 0 1px 0 rgba(255,255,255,.58);
  --shadow-soft:
    0 8px 22px rgba(71,85,105,.045),
    inset 0 1px 0 rgba(255,255,255,.54);

  --r: 20px;
  --r-sm: 14px;

  background: transparent;
  color: var(--text);
  padding: 14px 0 22px;
  line-height: 1.35;
}

@media (min-width:721px){
  .board-ui{
    padding: 18px 0 28px;
  }
}

.board-ui img{
  max-width: 100%;
  height: auto;
  display: block;
}

.board-ui a{
  color: inherit;
  text-decoration: none;
}

.board-ui a:hover{
  text-decoration: none;
}

.board-ui :where(h1,h2,h3,h4){
  margin: 0;
  font-weight: 900;
  letter-spacing: -.01em;
}

.board-ui :where(p){
  margin: 0;
}

.board-ui .board-container{
  width: 100%;
  max-width: var(--shell-wide, min(1380px, calc(100vw - 28px)));
  margin: 0 auto;
  padding: 0;
  min-width: 0;
}

@media (min-width:901px){
  .board-ui .board-container{
    max-width: var(--shell-wide, min(1380px, calc(100vw - 28px)));
    padding: 0;
  }
}

.board-ui .board-muted{
  color: var(--muted);
}

/* ==========================================================================
   Page header (promo-top)
   ========================================================================== */

.board-ui .promo-page{
  min-width: 0;
}

.board-ui .promo-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.board-ui .promo-kicker{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 6px;
}

.board-ui .promo-title{
  font-size: 20px;
  line-height: 1.15;
  font-weight: 950;
  color: #163b67;
  overflow-wrap: anywhere;
}

@media (min-width:721px){
  .board-ui .promo-title{
    font-size: 24px;
  }
}

.board-ui .promo-top__right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Cards (promo-card)
   ========================================================================== */

.board-ui .promo-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  min-width: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-ui .promo-card__head{
  padding: 14px 14px 0;
  display: grid;
  gap: 6px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .promo-card__head{
    padding: 16px 16px 0;
  }
}

.board-ui .promo-card__title{
  font-size: 16px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.board-ui .promo-card__hint{
  font-size: 12px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.board-ui .promo-card__body{
  padding: 14px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .promo-card__body{
    padding: 16px;
  }
}

.board-ui .promo-empty{
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 14px;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.board-ui .promo-btn,
.board-ui .promo-back,
.board-ui .board-btn,
.board-ui .btn{
  appearance: none;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  user-select: none;
  transition:
    transform .08s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    color .12s ease,
    filter .12s ease;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.board-ui .promo-btn:active,
.board-ui .promo-back:active{
  transform: translateY(1px);
}

.board-ui .promo-btn[disabled],
.board-ui .promo-back[disabled]{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.board-ui .promo-btn--primary,
.board-ui .promo-back{
  background: linear-gradient(180deg, var(--brand), #006fa8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 18px rgba(0,136,204,.16);
}

.board-ui .promo-btn--primary:hover,
.board-ui .promo-back:hover{
  filter: brightness(1.02);
}

.board-ui .promo-back--soft,
.board-ui .board-btn-soft{
  background: rgba(255,255,255,.64);
  border-color: rgba(181,194,222,.26);
  color: var(--text);
  box-shadow: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .promo-back--soft:hover,
.board-ui .board-btn-soft:hover{
  background: rgba(255,255,255,.72);
  border-color: rgba(167,188,221,.34);
}

.board-ui .promo-btn--full{
  width: 100%;
}

/* ==========================================================================
   Inputs
   ========================================================================== */

.board-ui :where(
  input[type="text"], input[type="number"], input[type="tel"], input[type="email"],
  input[type="url"], input[type="password"], select, textarea
),
.board-ui .promo-input{
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
  background: rgba(255,255,255,.82);
  outline: none;
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.board-ui textarea{
  min-height: 120px;
  resize: vertical;
}

.board-ui :where(input,select,textarea):focus,
.board-ui .promo-input:focus{
  border-color: rgba(0,136,204,.28);
  box-shadow:
    0 0 0 4px rgba(0,136,204,.08),
    inset 0 1px 0 rgba(255,255,255,.64);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.board-ui .board-pagination{
  padding-top: 14px;
}

.board-ui .pagination{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.board-ui .pagination .page-item{
  margin: 0;
}

.board-ui .pagination .page-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 6px 16px rgba(71,85,105,.04);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .pagination .page-item.active .page-link{
  background: linear-gradient(180deg, var(--brand), #006fa8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 10px 18px rgba(0,136,204,.16);
}

.board-ui .pagination .page-item.disabled .page-link{
  opacity: .55;
  cursor: not-allowed;
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.board-ui .board-alert,
.board-ui .alert{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  padding: 12px 12px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
  font-size: 13px;
  overflow-wrap: anywhere;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .board-alert--success,
.board-ui .alert-success{
  border-color: rgba(16,185,129,.20);
  background: rgba(236,253,245,.68);
}

.board-ui .board-alert--warning,
.board-ui .alert-warning{
  border-color: rgba(245,158,11,.20);
  background: rgba(255,251,235,.70);
}

.board-ui .board-alert--error,
.board-ui .alert-error{
  border-color: rgba(239,68,68,.20);
  background: rgba(254,242,242,.70);
}

/* ==========================================================================
   Safety overflow
   ========================================================================== */

.board-ui :where(.promo-card,.promo-title,.promo-card__title,.board-container,.board-cards,.board-cats-grid,.board-layout,.board-main,.board-side,.board-my-item,.board-card,.gallery,.board-desc-card){
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.board-ui [hidden]{
  display: none !important;
}

/* ==========================================================================
   Categories page (ads/categories.blade.php)
   ========================================================================== */

.board-ui .board-cats-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-cats-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
}

@media (min-width:901px){
  .board-ui .board-cats-grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
  }
}

.board-ui .board-subcats{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.board-ui .board-subcat-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.52);
  font-weight: 900;
  overflow-wrap: anywhere;
  min-width: 0;
}

.board-ui .board-subcat-link:hover{
  border-color: rgba(167,188,221,.34);
  background: rgba(255,255,255,.68);
}

/* ==========================================================================
   Listing: cards grid + card base
   ========================================================================== */

.board-ui .board-cards{
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-cards{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
}

@media (min-width:901px){
  .board-ui .board-cards{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
  }
}

.board-ui .board-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-ui .board-card:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 28px rgba(71,85,105,.06),
    inset 0 1px 0 rgba(255,255,255,.60);
  border-color: rgba(167,188,221,.34);
  background: var(--card-strong);
}

.board-ui .board-card-thumb{
  position: relative;
  background: rgba(255,255,255,.28);
  min-width: 0;
}

.board-ui .board-card-thumb img{
  width: 100%;
  height: 168px;
  object-fit: cover;
}

@media (min-width:721px){
  .board-ui .board-card-thumb img{
    height: 186px;
  }
}

@media (min-width:901px){
  .board-ui .board-card-thumb img{
    height: 198px;
  }
}

.board-ui .board-card-body{
  padding: 12px;
  display: grid;
  gap: 8px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-card-body{
    padding: 14px;
  }
}

.board-ui .board-card-title{
  font-size: 15px;
  font-weight: 950;
  line-height: 1.2;
  overflow-wrap: anywhere;
  min-width: 0;
}

.board-ui .board-card-price{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  color: #163b67;
}

.board-ui .board-card-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  min-width: 0;
  border-top: 1px solid rgba(17,24,39,.06);
  padding-top: 10px;
}

.board-ui .board-card-right{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.board-ui .board-card-views,
.board-ui .board-card-date{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(181,194,222,.24);
  background: rgba(255,255,255,.58);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.board-ui .fav-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.56);
  color: var(--text);
  font-weight: 950;
  cursor: pointer;
  line-height: 1;
}

.board-ui .fav-btn.active{
  border-color: rgba(59,130,246,.22);
  background: rgba(219,234,254,.58);
}

.board-ui .reaction-btn{
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.56);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 900;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.board-ui .reaction-btn.active{
  background: rgba(219,234,254,.58);
  border-color: rgba(59,130,246,.22);
}

.board-ui .reaction-label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.board-ui .board-thumb-link{
  display: block;
}

/* ==========================================================================
   PROMO CARDS: VIP / PIN / HIGHLIGHT
   ========================================================================== */

.board-ui .board-card-vip,
.board-ui .board-card-pinned,
.board-ui .board-card-highlight{
  position: relative;
  overflow: hidden;
  border-width: 2px;
}

.board-ui .board-card-vip .board-card-body,
.board-ui .board-card-pinned .board-card-body,
.board-ui .board-card-highlight .board-card-body{
  background: transparent;
}

.board-ui .board-card-vip .board-card-thumb,
.board-ui .board-card-vip .board-card-body,
.board-ui .board-card-pinned .board-card-thumb,
.board-ui .board-card-pinned .board-card-body,
.board-ui .board-card-highlight .board-card-thumb,
.board-ui .board-card-highlight .board-card-body{
  position: relative;
  z-index: 2;
}

@keyframes board-vip-shimmer{
  0%{
    transform: translateX(-130%) skewX(-16deg);
    opacity: 0;
  }
  12%{
    opacity: .95;
  }
  48%{
    transform: translateX(230%) skewX(-16deg);
    opacity: .95;
  }
  62%{
    opacity: 0;
  }
  100%{
    transform: translateX(230%) skewX(-16deg);
    opacity: 0;
  }
}

@keyframes board-vip-glow{
  0%, 100%{
    box-shadow:
      0 0 0 2px rgba(251, 191, 36, .95),
      0 0 22px rgba(245, 158, 11, .42),
      0 0 44px rgba(251, 191, 36, .22),
      0 14px 36px rgba(146, 64, 14, .18),
      inset 0 1px 0 rgba(255, 255, 255, .65);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(255, 215, 0, 1),
      0 0 32px rgba(245, 158, 11, .58),
      0 0 56px rgba(255, 193, 7, .32),
      0 18px 42px rgba(146, 64, 14, .24),
      inset 0 1px 0 rgba(255, 255, 255, .78);
  }
}

@keyframes board-vip-badge-pulse{
  0%, 100%{
    filter: brightness(1);
    transform: scale(1);
  }
  50%{
    filter: brightness(1.08);
    transform: scale(1.03);
  }
}

.board-ui .board-card-vip{
  border-color: rgba(217, 119, 6, .85);
  background: linear-gradient(165deg, #fff9e8 0%, #ffefb8 38%, #ffe08a 72%, #fff6d6 100%);
  animation: board-vip-glow 2.8s ease-in-out infinite;
}

.board-ui .board-card-vip::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .92) 0%, rgba(255, 248, 220, 0) 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(255, 193, 7, .35) 0%, rgba(255, 193, 7, 0) 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(245, 158, 11, .18) 0%, rgba(245, 158, 11, 0) 70%),
    linear-gradient(
      135deg,
      rgba(255, 237, 160, .55) 0%,
      rgba(255, 214, 102, .35) 35%,
      rgba(255, 248, 225, .25) 70%,
      rgba(255, 237, 160, .4) 100%
    );
}

.board-ui .board-card-vip::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 42%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .12) 18%,
    rgba(255, 252, 235, .92) 48%,
    rgba(255, 255, 255, .18) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: board-vip-shimmer 3.4s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.board-ui .board-card-vip .board-card-thumb{
  border-bottom: 1px solid rgba(217, 119, 6, .22);
}

.board-ui .board-card-vip .board-card-title,
.board-ui .board-card-vip .board-card-title a{
  color: #5c3a06;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.board-ui .board-card-vip .board-card-price{
  font-size: 17px;
  background: linear-gradient(90deg, #92400e 0%, #d97706 35%, #f59e0b 65%, #b45309 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.board-ui .board-card-vip .board-card-meta{
  border-top-color: rgba(217, 119, 6, .2);
}

.board-ui .board-card-vip .board-card-views,
.board-ui .board-card-vip .board-card-date,
.board-ui .board-card-vip .fav-btn{
  border-color: rgba(217, 119, 6, .28);
  background: rgba(255, 255, 255, .72);
}

@keyframes board-pin-glow{
  0%, 100%{
    box-shadow:
      inset 5px 0 0 #2563eb,
      0 0 0 2px rgba(59, 130, 246, .88),
      0 0 20px rgba(59, 130, 246, .38),
      0 0 40px rgba(37, 99, 235, .16),
      0 14px 34px rgba(30, 64, 175, .16),
      inset 0 1px 0 rgba(255, 255, 255, .62);
  }
  50%{
    box-shadow:
      inset 5px 0 0 #3b82f6,
      0 0 0 2px rgba(96, 165, 250, 1),
      0 0 30px rgba(59, 130, 246, .52),
      0 0 52px rgba(37, 99, 235, .24),
      0 18px 40px rgba(30, 64, 175, .22),
      inset 0 1px 0 rgba(255, 255, 255, .78);
  }
}

@keyframes board-highlight-glow{
  0%, 100%{
    box-shadow:
      inset 5px 0 0 #059669,
      0 0 0 2px rgba(16, 185, 129, .82),
      0 0 20px rgba(52, 211, 153, .36),
      0 0 42px rgba(16, 185, 129, .18),
      0 14px 34px rgba(4, 120, 87, .14),
      inset 0 1px 0 rgba(255, 255, 255, .62);
  }
  50%{
    box-shadow:
      inset 5px 0 0 #10b981,
      0 0 0 2px rgba(52, 211, 153, .95),
      0 0 32px rgba(16, 185, 129, .5),
      0 0 54px rgba(52, 211, 153, .26),
      0 18px 40px rgba(4, 120, 87, .2),
      inset 0 1px 0 rgba(255, 255, 255, .78);
  }
}

@keyframes board-promo-shimmer{
  0%{
    transform: translateX(-130%) skewX(-16deg);
    opacity: 0;
  }
  14%{
    opacity: .85;
  }
  50%{
    transform: translateX(230%) skewX(-16deg);
    opacity: .85;
  }
  64%{
    opacity: 0;
  }
  100%{
    transform: translateX(230%) skewX(-16deg);
    opacity: 0;
  }
}

@keyframes board-promo-badge-pulse{
  0%, 100%{
    filter: brightness(1);
    transform: scale(1);
  }
  50%{
    filter: brightness(1.06);
    transform: scale(1.025);
  }
}

@media (prefers-reduced-motion: reduce){
  .board-ui .board-card-vip,
  .board-ui .board-card-pinned,
  .board-ui .board-card-highlight{
    animation: none;
  }

  .board-ui .board-card-vip::after,
  .board-ui .board-card-pinned::after,
  .board-ui .board-card-highlight::after{
    animation: none;
    opacity: .32;
    left: 10%;
    width: 80%;
    transform: skewX(-12deg);
  }

  .board-ui .board-card-vip .board-badge--vip,
  .board-ui .board-card-pinned .board-badge--pinned,
  .board-ui .board-card-highlight .board-badge--highlight{
    animation: none;
  }
}

/* —— Закреп: синий, «наверху» —— */
.board-ui .board-card-pinned{
  border-color: rgba(37, 99, 235, .78);
  background: linear-gradient(165deg, #f0f7ff 0%, #dbeafe 40%, #bfdbfe 72%, #eff6ff 100%);
  animation: board-pin-glow 3.1s ease-in-out infinite;
}

.board-ui .board-card-pinned::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(255, 255, 255, .9) 0%, rgba(219, 234, 254, 0) 58%),
    radial-gradient(85% 65% at 100% 0%, rgba(96, 165, 250, .28) 0%, rgba(96, 165, 250, 0) 62%),
    linear-gradient(135deg, rgba(191, 219, 254, .45) 0%, rgba(219, 234, 254, .2) 50%, rgba(239, 246, 255, .15) 100%);
}

.board-ui .board-card-pinned::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .1) 20%,
    rgba(219, 234, 254, .88) 50%,
    rgba(255, 255, 255, .12) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: board-promo-shimmer 3.8s ease-in-out infinite;
  mix-blend-mode: soft-light;
}

.board-ui .board-card-pinned .board-card-thumb{
  border-bottom: 1px solid rgba(37, 99, 235, .2);
}

.board-ui .board-card-pinned .board-card-title,
.board-ui .board-card-pinned .board-card-title a{
  color: #1e3a8a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.board-ui .board-card-pinned .board-card-price{
  font-size: 17px;
  background: linear-gradient(90deg, #1e40af 0%, #2563eb 40%, #3b82f6 70%, #1d4ed8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.board-ui .board-card-pinned .board-card-meta{
  border-top-color: rgba(37, 99, 235, .18);
}

.board-ui .board-card-pinned .board-card-views,
.board-ui .board-card-pinned .board-card-date,
.board-ui .board-card-pinned .fav-btn{
  border-color: rgba(37, 99, 235, .26);
  background: rgba(255, 255, 255, .74);
}

/* —— Выделение: изумрудное цветное —— */
.board-ui .board-card-highlight{
  border-color: rgba(5, 150, 105, .75);
  background: linear-gradient(165deg, #ecfdf5 0%, #d1fae5 38%, #a7f3d0 70%, #f0fdf4 100%);
  animation: board-highlight-glow 3s ease-in-out infinite;
}

.board-ui .board-card-highlight::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 0% 0%, rgba(255, 255, 255, .88) 0%, rgba(209, 250, 229, 0) 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(52, 211, 153, .32) 0%, rgba(52, 211, 153, 0) 60%),
    radial-gradient(70% 55% at 50% 100%, rgba(16, 185, 129, .16) 0%, rgba(16, 185, 129, 0) 68%),
    linear-gradient(135deg, rgba(167, 243, 208, .5) 0%, rgba(110, 231, 183, .22) 45%, rgba(236, 253, 245, .2) 100%);
}

.board-ui .board-card-highlight::after{
  content: "";
  position: absolute;
  top: -40%;
  left: -60%;
  width: 40%;
  height: 180%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .08) 18%,
    rgba(167, 243, 208, .9) 48%,
    rgba(255, 255, 255, .14) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  animation: board-promo-shimmer 3.6s ease-in-out infinite;
  animation-delay: .6s;
  mix-blend-mode: soft-light;
}

.board-ui .board-card-highlight .board-card-thumb{
  border-bottom: 1px solid rgba(5, 150, 105, .2);
}

.board-ui .board-card-highlight .board-card-title,
.board-ui .board-card-highlight .board-card-title a{
  color: #065f46;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}

.board-ui .board-card-highlight .board-card-price{
  font-size: 17px;
  background: linear-gradient(90deg, #047857 0%, #059669 35%, #10b981 65%, #047857 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.board-ui .board-card-highlight .board-card-meta{
  border-top-color: rgba(5, 150, 105, .2);
}

.board-ui .board-card-highlight .board-card-views,
.board-ui .board-card-highlight .board-card-date,
.board-ui .board-card-highlight .fav-btn{
  border-color: rgba(5, 150, 105, .26);
  background: rgba(255, 255, 255, .74);
}

.board-ui .board-card.board-card-vip:hover{
  transform: translateY(-4px) scale(1.01);
  box-shadow:
    0 0 0 2px rgba(255, 215, 0, 1),
    0 0 38px rgba(245, 158, 11, .65),
    0 0 64px rgba(255, 193, 7, .35),
    0 22px 48px rgba(146, 64, 14, .28),
    inset 0 1px 0 rgba(255, 255, 255, .85);
}

.board-ui .board-card.board-card-pinned:hover{
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    inset 5px 0 0 #3b82f6,
    0 0 0 2px rgba(96, 165, 250, 1),
    0 0 34px rgba(59, 130, 246, .55),
    0 0 56px rgba(37, 99, 235, .22),
    0 20px 44px rgba(30, 64, 175, .24),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.board-ui .board-card.board-card-highlight:hover{
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    inset 5px 0 0 #10b981,
    0 0 0 2px rgba(52, 211, 153, .95),
    0 0 34px rgba(16, 185, 129, .52),
    0 0 56px rgba(52, 211, 153, .24),
    0 20px 44px rgba(4, 120, 87, .22),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

.board-ui .board-badge{
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 3;
  font-weight: 800;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow:
    0 8px 18px rgba(17,24,39,.08),
    inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}

.board-ui .board-badge--vip{
  left: 10px;
  bottom: 10px;
  top: auto;
  right: auto;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 7px 13px 7px 11px;
  color: #3f2605;
  border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(135deg, #fff4b8 0%, #ffd54a 28%, #f59e0b 62%, #d97706 100%);
  box-shadow:
    0 0 18px rgba(245, 158, 11, .55),
    0 6px 16px rgba(120, 53, 15, .22),
    inset 0 1px 0 rgba(255, 255, 255, .65);
  animation: board-vip-badge-pulse 2.4s ease-in-out infinite;
  z-index: 4;
}

.board-ui .board-badge--pinned{
  left: 10px;
  bottom: 10px;
  top: auto;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 7px 12px;
  color: #eff6ff;
  border: 1px solid rgba(191, 219, 254, .55);
  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 45%, #2563eb 100%);
  box-shadow:
    0 0 16px rgba(59, 130, 246, .5),
    0 6px 14px rgba(30, 64, 175, .22),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: board-promo-badge-pulse 2.6s ease-in-out infinite;
}

.board-ui .board-badge--highlight{
  left: 10px;
  bottom: 10px;
  top: auto;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 7px 12px;
  color: #ecfdf5;
  border: 1px solid rgba(167, 243, 208, .55);
  background: linear-gradient(135deg, #6ee7b7 0%, #34d399 40%, #10b981 75%, #059669 100%);
  box-shadow:
    0 0 16px rgba(16, 185, 129, .48),
    0 6px 14px rgba(4, 120, 87, .2),
    inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: board-promo-badge-pulse 2.5s ease-in-out infinite;
}

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

/* ==========================================================================
   Wizard (add/edit)
   ========================================================================== */

.board-ui .board-h3{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 950;
}

.board-ui .wizard-steps{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  padding: 0;
}

.board-ui .step-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.56);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
  white-space: nowrap;
}

.board-ui .step-item.active{
  color: var(--text);
  background: rgba(255,255,255,.74);
  border-color: rgba(167,188,221,.34);
}

.board-ui .step-panel{
  display: grid;
  gap: 10px;
}

.board-ui .wizard-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 6px;
}

@media (max-width:720px){
  .board-ui .wizard-actions .promo-btn{
    width: 100%;
  }
}

.board-ui .drop-zone{
  border: 1px dashed rgba(181,194,222,.42);
  border-radius: 16px;
  background: rgba(255,255,255,.50);
  padding: 14px;
  text-align: center;
  display: grid;
  gap: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .drop-zone.dragover{
  background: rgba(239,246,255,.68);
  border-color: rgba(0,136,204,.28);
}

.board-ui .photo-preview{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

@media (min-width:721px){
  .board-ui .photo-preview{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (min-width:901px){
  .board-ui .photo-preview{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

.board-ui .photo-thumb{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.52);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}

.board-ui .photo-thumb img{
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.board-ui .main-badge{
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  background: linear-gradient(180deg, var(--brand), #006fa8);
  color: #fff;
}

.board-ui .photo-label{
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(17,24,39,.72);
  color: #fff;
}

.board-ui .remove-photo{
  position: absolute;
  right: 8px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(17,24,39,.58);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.board-ui .photo-errors{
  display: grid;
  gap: 8px;
}

.board-ui .error-item{
  border: 1px solid rgba(239,68,68,.20);
  background: rgba(254,242,242,.72);
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
}

.board-ui .mobile-photo-upload{
  display: grid;
  gap: 10px;
}

.board-ui .mobile-file-input{
  display: none;
}

.board-ui .mobile-file-label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.58);
  font-weight: 900;
  cursor: pointer;
}

.board-ui .compression-info{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  padding: 12px;
  display: grid;
  gap: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .compression-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.board-ui .completion-badge{
  display: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(16,185,129,.20);
  background: rgba(16,185,129,.08);
  font-weight: 950;
  font-size: 12px;
}

.board-ui .quality-control{
  display: grid;
  gap: 10px;
}

@media (min-width:721px){
  .board-ui .quality-control{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.board-ui .qc-row{
  display: grid;
  gap: 6px;
}

.board-ui .progress-bar{
  display: none;
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.08);
  overflow: hidden;
}

.board-ui .progress-fill{
  height: 100%;
  width: 0%;
  background: rgba(0,136,204,.50);
  transition: width .15s ease;
}

.board-ui .board-form-errors-title{
  font-weight: 950;
  margin-bottom: 6px;
}

.board-ui .board-form-errors-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--text);
  font-size: 13px;
}

.board-ui .preview-container{
  display: grid;
  gap: 12px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .preview-container{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

.board-ui .preview-photo{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.50);
}

.board-ui .preview-photo img{
  width: 100%;
  height: 240px;
  object-fit: cover;
}

@media (min-width:721px){
  .board-ui .preview-photo img{
    height: 320px;
  }
}

.board-ui .preview-info{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.board-ui .preview-info h4{
  margin: 0;
  font-size: 18px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.board-ui .price{
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  color: #163b67;
}

.board-ui .preview-info ul{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  display: grid;
  gap: 4px;
}

/* ==========================================================================
   ADS LIST (board-list_view)
   ========================================================================== */

.board-ui .board-list_view .board-filter-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.board-ui .board-list_view .board-filter-grid .board-cat-toggle,
.board-ui .board-list_view .board-filter-grid .board-input-wide,
.board-ui .board-list_view .board-filter-grid .promo-btn--primary,
.board-ui .board-list_view .board-filter-grid .board-btn-soft{
  grid-column: 1 / -1;
}

@media (min-width:721px){
  .board-ui .board-list_view .board-filter-grid{
    grid-template-columns: 220px 1fr 140px 140px auto auto;
    gap: 10px;
  }

  .board-ui .board-list_view .board-filter-grid .board-cat-toggle,
  .board-ui .board-list_view .board-filter-grid .board-input-wide,
  .board-ui .board-list_view .board-filter-grid .promo-btn--primary,
  .board-ui .board-list_view .board-filter-grid .board-btn-soft{
    grid-column: auto;
  }
}

.board-ui .board-cards--grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.board-ui .board-cards--grid .board-card{
  height: 100%;
}

@media (min-width:721px){
  .board-ui .board-cards--grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
  }
}

@media (min-width:1024px){
  .board-ui .board-cards--grid{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

@media (min-width:1320px){
  .board-ui .board-cards--grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
}

.board-ui .board-list_view .board-cat-overlay{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 10060;
}

.board-ui .board-list_view .board-cat-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

.board-ui .board-list_view .board-cat-panel{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  top: auto;
  max-height: calc(100vh - 24px);
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .16s ease, opacity .16s ease;
  z-index: 10061;
  overflow: hidden;
  min-width: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
}

.board-ui .board-list_view .board-cat-panel.is-open{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (min-width:721px){
  .board-ui .board-list_view .board-cat-panel{
    left: 50%;
    right: auto;
    width: 760px;
    transform: translate(-50%, 16px);
    top: 90px;
    bottom: auto;
    max-height: calc(100vh - 140px);
  }

  .board-ui .board-list_view .board-cat-panel.is-open{
    transform: translate(-50%, 0);
  }
}

.board-ui .board-list_view .board-cat-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  flex: 0 0 auto;
}

.board-ui .board-list_view .board-cat-header .board-cat-close{
  margin-left: auto;
}

.board-ui .board-cat-title{
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 950;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-ui .board-cat-back{
  display: none;
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.70);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 950;
  flex: 0 0 auto;
  margin-right: 4px;
}

.board-ui .board-cat-back:not([hidden]){
  display: inline-flex;
}

@media (min-width:721px){
  .board-ui .board-cat-back{
    display: none !important;
  }
}

.board-ui .board-cat-close{
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.70);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 950;
  flex: 0 0 auto;
}

.board-ui .board-list_view .board-cat-body{
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

@media (min-width:721px){
  .board-ui .board-list_view .board-cat-body{
    grid-template-columns: 280px 1fr;
  }
}

.board-ui .board-list_view .board-cat-left{
  padding: 10px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  max-height: 40vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width:721px){
  .board-ui .board-list_view .board-cat-left{
    border-bottom: 0;
    border-right: 1px solid rgba(17,24,39,.06);
    max-height: unset;
    height: 100%;
  }
}

.board-ui .board-list_view .board-cat-right{
  padding: 10px;
  max-height: 50vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width:721px){
  .board-ui .board-list_view .board-cat-right{
    max-height: unset;
    height: 100%;
  }
}

.board-ui .board-cat-parent{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  font-weight: 900;
  min-width: 0;
}

.board-ui .board-cat-parent:hover{
  background: rgba(255,255,255,.56);
  border-color: rgba(181,194,222,.24);
}

.board-ui .board-cat-parent.is-active{
  background: rgba(255,255,255,.74);
  border-color: rgba(167,188,221,.30);
}

.board-ui .board-cat-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(17,24,39,.22);
  flex: 0 0 auto;
}

.board-ui .board-cat-name{
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 500;
}

.board-ui .board-cat-arrow{
  color: var(--muted);
  flex: 0 0 auto;
  padding: 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.board-ui .board-cat-subset{
  display: none;
}

.board-ui .board-cat-subset.is-active{
  display: grid;
  gap: 8px;
}

.board-ui .board-cat-subitem{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.54);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.board-ui .board-cat-subitem:hover{
  border-color: rgba(167,188,221,.34);
  background: rgba(255,255,255,.70);
}

.board-ui .board-cat-empty{
  color: var(--muted);
  font-size: 13px;
  padding: 10px 6px;
}

/* Mobile: один столбец, прокрутка всего списка (перебивает grid и max-height:40vh выше) */
@media (max-width:720px){
  .board-ui .board-list_view .board-cat-panel{
    top: max(14px, env(safe-area-inset-top, 0px));
    bottom: auto;
    left: 12px;
    right: 12px;
    max-height: calc(100dvh - var(--bottom-nav-h, 78px) - 28px - env(safe-area-inset-top, 0px));
    height: auto;
    transform: translateY(10px);
  }

  .board-ui .board-list_view .board-cat-panel.is-open{
    transform: translateY(0);
  }

  .board-ui .board-list_view .board-cat-body{
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100dvh - var(--bottom-nav-h, 78px) - 90px - env(safe-area-inset-top, 0px));
    overflow: hidden;
  }

  .board-ui .board-list_view .board-cat-body:not(.is-drill-down) .board-cat-right{
    display: none !important;
  }

  .board-ui .board-list_view .board-cat-body.is-drill-down .board-cat-left{
    display: none !important;
  }

  .board-ui .board-list_view .board-cat-body.is-drill-down .board-cat-right{
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .board-ui .board-list_view .board-cat-left{
    max-height: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0;
  }

  .board-ui .board-list_view .board-cat-right{
    max-height: none;
  }
}

html.board-cat-scroll-lock{
  overflow: hidden;
}

/* ==========================================================================
   ADS MY (board-my_view)
   ========================================================================== */

.board-ui .board-my_view .promo-top{
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.board-ui .board-my_view .promo-top__right{
  justify-content: flex-start;
}

.board-ui .board-my_view .promo-title{
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  line-height: 1.2;
}

.board-ui .board-my-list{
  display: grid;
  gap: 12px;
}

@media (min-width:980px){
  .board-ui .board-my-list{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (min-width:1200px){
  .board-ui .board-my-list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board-ui .board-my-item--with-vip{
    grid-column: 1 / -1;
  }
}

.board-ui .board-my-item{
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-ui .board-my-item__row{
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  min-width: 0;
  align-items: stretch;
}

@media (min-width:721px){
  .board-ui .board-my-item__row{
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width:420px){
  .board-ui .board-my-item__row{
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

.board-ui .board-my-item.inactive{
  opacity: .92;
  background: rgba(255,255,255,.58);
}

.board-ui .board-my-thumb{
  position: relative;
  background: rgba(255,255,255,.28);
  border-right: 1px solid rgba(17,24,39,.06);
  min-width: 0;
  overflow: hidden;
  align-self: stretch;
}

.board-ui .board-my-thumb img{
  width: 100%;
  height: 100%;
  min-height: 108px;
  max-height: 140px;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 1;
  border-radius: 0 !important;
}

.board-ui .status-badge{
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  background: rgba(17,24,39,.72);
  color: #fff;
  z-index: 2;
}

.board-ui .promo-badge{
  position: absolute;
  left: 10px;
  top: 10px;
  right: auto;
  bottom: auto;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.42);
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 16px rgba(17,24,39,.08);
  z-index: 2;
  color: #111827;
  background: rgba(255,255,255,.82);
}

.board-ui .promo-badge.vip,
.board-ui .promo-badge--vip{
  background: linear-gradient(180deg, rgba(255,214,90,.90), rgba(255,175,0,.90));
  color: #2b1b00;
}

.board-ui .promo-badge.pinned{
  background: linear-gradient(180deg, rgba(219,241,255,.90), rgba(153,224,255,.90));
  color: #06324a;
}

.board-ui .promo-badge.highlight{
  background: linear-gradient(180deg, rgba(255,238,170,.90), rgba(255,210,90,.90));
  color: #3a2a00;
}

.board-ui .board-my-info{
  padding: 12px;
  display: grid;
  gap: 10px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-my-info{
    padding: 14px;
  }
}

.board-ui .board-my-title-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.board-ui .board-my-title{
  font-weight: 950;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.board-ui .board-my-actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.board-ui .board-icon-btn{
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.68);
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 950;
}

.board-ui .board-icon-btn--warn{
  border-color: rgba(245,158,11,.20);
  background: rgba(255,251,235,.72);
}

.board-ui .board-icon-btn--ok{
  border-color: rgba(16,185,129,.20);
  background: rgba(236,253,245,.70);
}

.board-ui .board-icon-btn--danger{
  border-color: rgba(239,68,68,.20);
  background: rgba(254,242,242,.70);
}

.board-ui .board-my-price{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.01em;
  color: #163b67;
}

.board-ui .board-my-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}

.board-ui .status-active,
.board-ui .status-inactive{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.58);
  font-weight: 900;
  font-size: 12px;
}

.board-ui .board-my-cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

@media (max-width:720px){
  .board-ui .board-my-cta .promo-btn{
    width: 100%;
  }
}

.board-ui .board-bump-note{
  font-size: 13px;
  margin-top: 6px;
  color: var(--muted);
}

.board-ui .board-bump-note strong{
  color: var(--text);
}

.board-ui .board-vip-empty{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.65);
  border: 1px dashed rgba(181,194,222,.35);
}

.board-ui .board-vip-empty--inline{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed rgba(245,158,11,.35);
  background: rgba(255,251,235,.55);
  font-size: 13px;
}

.board-ui .board-vip-empty--inline a{
  color: var(--brand);
  font-weight: 900;
}

/* —— Мои объявления: VIP-карточка на всю ширину —— */
.board-ui .board-my-item--with-vip{
  display: flex;
  flex-direction: column;
}

.board-ui .board-my-item--with-vip .board-my-item__row{
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-my-item--with-vip .board-my-item__row{
    grid-template-columns: 160px minmax(0, 1fr);
  }
}

@media (max-width:420px){
  .board-ui .board-my-item--with-vip .board-my-item__row{
    grid-template-columns: 96px minmax(0, 1fr);
  }
}

.board-ui .board-my-vip-section{
  border-top: 1px solid rgba(245,158,11,.22);
  background: linear-gradient(180deg, rgba(255,251,235,.42), rgba(255,255,255,.55));
  padding: 12px 14px 14px;
}

.board-ui .board-my-item--with-vip .board-my-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* —— VIP-аналитика —— */
.board-ui .board-vip-analytics{
  display: grid;
  gap: 14px;
  min-width: 0;
}

.board-ui .board-vip-analytics__head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.board-ui .board-vip-analytics__head-main{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
}

.board-ui .board-vip-analytics__icon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: linear-gradient(145deg, rgba(255,236,179,.95), rgba(255,214,120,.85));
  border: 1px solid rgba(245,158,11,.25);
  flex-shrink: 0;
}

.board-ui .board-vip-analytics__title{
  margin: 0;
  font-weight: 950;
  font-size: 15px;
  line-height: 1.2;
}

.board-ui .board-vip-analytics__sub{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.board-ui .board-vip-analytics__gift-tag{
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #92400e;
  background: rgba(255,237,179,.85);
  border: 1px solid rgba(245,158,11,.25);
}

.board-ui .board-vip-analytics__cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
  text-decoration: none;
  color: #92400e;
  background: #fff;
  border: 1px solid rgba(245,158,11,.35);
  box-shadow: 0 4px 12px rgba(245,158,11,.12);
  flex-shrink: 0;
}

.board-ui .board-vip-analytics__cta:hover{
  background: rgba(255,251,235,.95);
}

.board-ui .board-vip-kpi{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 640px){
  .board-ui .board-vip-kpi{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px){
  .board-ui .board-my-item--with-vip .board-vip-kpi{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.board-ui .board-vip-kpi__card{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(181,194,222,.28);
  background: rgba(255,255,255,.82);
  min-width: 0;
}

.board-ui .board-vip-kpi__card--primary{
  border-color: rgba(245,158,11,.3);
  background: linear-gradient(160deg, rgba(255,251,235,.95), rgba(255,255,255,.88));
}

.board-ui .board-vip-kpi__ico{
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.board-ui .board-vip-kpi__body{
  min-width: 0;
}

.board-ui .board-vip-kpi__label{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  line-height: 1.25;
}

.board-ui .board-vip-kpi__value{
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
  margin-top: 2px;
  color: #1e3a5f;
}

.board-ui .board-vip-kpi__hint{
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.board-ui .board-vip-strip{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 720px){
  .board-ui .board-vip-strip{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.board-ui .board-vip-strip__item{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(181,194,222,.22);
  display: grid;
  gap: 2px;
}

.board-ui .board-vip-strip__k{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.board-ui .board-vip-strip__v{
  font-size: 13px;
  font-weight: 950;
}

.board-ui .board-vip-charts{
  display: grid;
  gap: 10px;
}

@media (min-width: 768px){
  .board-ui .board-vip-charts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.board-ui .board-vip-chart-card{
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(181,194,222,.26);
  min-width: 0;
}

.board-ui .board-vip-chart-card__title{
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 10px;
  color: #334155;
}

.board-ui .board-vip-chart-card__plot{
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 120px;
  padding-top: 4px;
}

.board-ui .board-vip-chart-col{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}

.board-ui .board-vip-chart-col__val{
  font-size: 10px;
  font-weight: 900;
  color: #64748b;
  min-height: 14px;
  line-height: 1;
}

.board-ui .board-vip-chart-col__track{
  flex: 1;
  width: 100%;
  max-width: 32px;
  min-height: 72px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.board-ui .board-vip-chart-col__bar{
  width: 100%;
  height: var(--pct, 8%);
  min-height: 4px;
  border-radius: 8px 8px 4px 4px;
  transition: height .2s ease;
}

.board-ui .board-vip-chart-col__bar--views{
  background: linear-gradient(180deg, #60a5fa, #2563eb);
}

.board-ui .board-vip-chart-col__bar--dwell{
  background: linear-gradient(180deg, #fbbf24, #d97706);
}

.board-ui .board-vip-chart-col__date{
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
}

/* Полная страница аналитики — старые классы для 30-дн. графиков */
.board-ui .board-vip-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px){
  .board-ui .board-vip-cards--wide{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.board-ui .board-vip-stat{
  border: 1px solid rgba(181,194,222,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.board-ui .board-vip-stat--gold{
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(180deg, rgba(255,251,235,.92), rgba(255,255,255,.78));
}

.board-ui .board-vip-stat .label{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.board-ui .board-vip-stat .value{
  font-size: 18px;
  font-weight: 950;
}

.board-ui .board-vip-chart-wrap{
  border: 1px solid rgba(181,194,222,.24);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
  padding: 12px;
  margin-top: 12px;
}

.board-ui .board-vip-chart-title{
  font-weight: 950;
  font-size: 13px;
  margin-bottom: 8px;
}

.board-ui .board-vip-chart{
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 72px;
  overflow-x: auto;
}

.board-ui .board-vip-bar{
  flex: 1;
  min-width: 8px;
  max-width: 20px;
  border-radius: 6px 6px 3px 3px;
  height: var(--h, 8px);
  background: rgba(59,130,246,.55);
}

.board-ui .board-my-item.promo-vip{
  border-color: rgba(245,158,11,.38) !important;
  box-shadow:
    0 12px 28px rgba(245,158,11,.12),
    var(--shadow-soft) !important;
  background: linear-gradient(135deg, rgba(255,251,235,.55), rgba(255,255,255,.92)) !important;
}

.board-ui .board-my-item.promo-pinned{
  border-color: rgba(59,130,246,.32) !important;
  box-shadow: 0 10px 24px rgba(59,130,246,.08), var(--shadow-soft) !important;
}

.board-ui .board-my-item.promo-highlight{
  border-color: rgba(16,185,129,.28) !important;
  box-shadow: 0 10px 24px rgba(16,185,129,.08), var(--shadow-soft) !important;
}

.board-ui .board-my-item.promo-vip,
.board-ui .board-my-item.promo-pinned,
.board-ui .board-my-item.promo-highlight{
  overflow: hidden !important;
}

.board-ui .promo-badge__gift{
  font-size: 10px;
  font-weight: 800;
  opacity: .9;
  text-transform: lowercase;
}

.board-ui .board-btn-vip-analytics{
  border: 1px solid rgba(245,158,11,.35);
  background: linear-gradient(180deg, rgba(255,251,235,.95), rgba(255,255,255,.85));
  color: #92400e;
  font-weight: 950;
  padding: 10px 16px;
  border-radius: 12px;
}

.board-ui .board-my-item.promo-vip::before,
.board-ui .board-my-item.promo-vip::after,
.board-ui .board-my-item.promo-pinned::before,
.board-ui .board-my-item.promo-pinned::after,
.board-ui .board-my-item.promo-highlight::before,
.board-ui .board-my-item.promo-highlight::after{
  content: none !important;
  display: none !important;
}

.board-ui .board-my-item.promo-vip .board-my-thumb,
.board-ui .board-my-item.promo-pinned .board-my-thumb,
.board-ui .board-my-item.promo-highlight .board-my-thumb{
  background: transparent !important;
  background-image: none !important;
  filter: none !important;
}

.board-ui .board-my-item.promo-vip .board-my-thumb *::before,
.board-ui .board-my-item.promo-vip .board-my-thumb *::after,
.board-ui .board-my-item.promo-pinned .board-my-thumb *::before,
.board-ui .board-my-item.promo-pinned .board-my-thumb *::after,
.board-ui .board-my-item.promo-highlight .board-my-thumb *::before,
.board-ui .board-my-item.promo-highlight .board-my-thumb *::after{
  content: none !important;
  display: none !important;
}

/* ==========================================================================
   ADS SINGLE (board-single_view)
   ========================================================================== */

.board-ui .board-single-topmeta{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.board-ui .board-static-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.58);
  font-weight: 900;
  font-size: 12px;
  color: var(--text);
}

.board-ui .board-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

@media (min-width:721px){
  .board-ui .board-layout{
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr);
    gap: 16px;
    align-items: start;
  }
}

@media (min-width:901px){
  .board-ui .board-layout{
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.85fr);
  }
}

.board-ui .board-main{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.board-ui .board-main > *{
  min-width: 0;
  max-width: 100%;
}

.board-ui .gallery{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.board-ui .board-side{
  display: grid;
  gap: 12px;
  min-width: 0;
}

@media (min-width:901px){
  .board-ui .board-side{
    position: sticky;
    top: 16px;
  }
}

.board-ui .main-photo-wrap{
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.44);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .main-photo{
  width: 100%;
  max-width: 100%;
  height: 240px;
  object-fit: cover;
  cursor: zoom-in;
}

@media (min-width:721px){
  .board-ui .main-photo{
    height: 360px;
  }
}

@media (min-width:901px){
  .board-ui .main-photo{
    height: 420px;
  }
}

.board-ui .thumbs{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding-top: 10px;
  -webkit-overflow-scrolling: touch;
}

.board-ui .thumbs img{
  width: 74px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid transparent;
  cursor: pointer;
  flex: 0 0 auto;
  opacity: .88;
  transition: opacity .12s ease, transform .12s ease;
}

.board-ui .thumbs img:hover{
  opacity: 1;
  transform: translateY(-1px);
}

.board-ui .thumbs img.active{
  opacity: 1;
  border-color: rgba(0,136,204,.42);
}

.board-ui .meta-fields{
  margin-top: 12px;
  border-top: 1px dashed rgba(17,24,39,.10);
  padding-top: 12px;
}

.board-ui .meta-fields h3{
  font-size: 14px;
  font-weight: 950;
  margin: 0 0 8px;
}

.board-ui .meta-fields ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.board-ui .meta-fields li{
  font-size: 13px;
  overflow-wrap: anywhere;
}

.board-ui .meta-fields strong{
  color: var(--muted);
  font-weight: 900;
}

.board-ui .board-desc-card{
  box-shadow: none;
  min-width: 0;
  max-width: 100%;
}

.board-ui .board-desc-card .promo-card__body{
  min-width: 0;
}

.board-ui .desc{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: var(--text);
  font-size: 14px;
}

.board-ui .board-sideCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  padding: 14px;
  min-width: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@media (min-width:721px){
  .board-ui .board-sideCard{
    padding: 16px;
  }
}

.board-ui .board-sidePrice{
  font-size: 22px;
  font-weight: 950;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  color: #163b67;
}

.board-ui .board-sideMeta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
  margin-top: 8px;
}

.board-ui .board-sideActions{
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.board-ui .seller{
  display: grid;
  gap: 10px;
  min-width: 0;
}

.board-ui .seller-link{
  font-weight: 950;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--brand);
}

.board-ui .seller-actions{
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.board-ui .self-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

/* Lightbox (single) */
.board-ui .lightbox{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.82);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 14px;
}

.board-ui .lightbox.active{
  display: flex;
}

.board-ui .lightbox img{
  max-width: min(980px, 92vw);
  max-height: 82vh;
  border-radius: 16px;
}

.board-ui .close-btn{
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.board-ui .lightbox .nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.board-ui .lightbox .nav.prev{
  left: 14px;
}

.board-ui .lightbox .nav.next{
  right: 14px;
}

/* ==========================================================================
   Promotion packages page (promo-*)
   ========================================================================== */

.board-ui .promo-meta{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}

.board-ui .promo-link{
  color: var(--brand);
  font-weight: 950;
  text-decoration: none;
}

.board-ui .promo-link:hover{
  text-decoration: underline;
}

.board-ui .promo-benefits{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 12px 0 14px;
}

@media (min-width:901px){
  .board-ui .promo-benefits{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

.board-ui .benefit{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-soft);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-ui .benefit__ico{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(255,255,255,.64);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.board-ui .benefit__title{
  font-weight: 950;
  margin-bottom: 2px;
}

.board-ui .benefit__text{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.board-ui .promo-grid{
  display: grid;
  gap: 12px;
}

.board-ui .benefit--highlight{
  border-color: rgba(16,185,129,.22);
  background: linear-gradient(135deg, rgba(236,253,245,.85), rgba(255,255,255,.72));
}

.board-ui .benefit--pin{
  border-color: rgba(59,130,246,.22);
  background: linear-gradient(135deg, rgba(239,246,255,.88), rgba(255,255,255,.72));
}

.board-ui .benefit--vip{
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(135deg, rgba(255,251,235,.9), rgba(255,255,255,.72));
}

.board-ui .promo-live-hero{
  position: relative;
  max-width: 340px;
  margin: 0 auto 16px;
  min-height: 120px;
}

.board-ui .promo-live-hero__pane{
  display: none;
}

.board-ui .promo-live-hero__pane.is-visible{
  display: block;
}

.board-ui .promo-live-previews{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  margin-bottom: 14px;
}

@media (min-width:900px){
  .board-ui .promo-live-previews{
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}

.board-ui .promo-live-cell{
  cursor: pointer;
  border-radius: calc(var(--r) + 2px);
  padding: 4px;
  transition: box-shadow .2s ease, transform .15s ease;
}

.board-ui .promo-live-cell:hover{
  transform: translateY(-1px);
}

.board-ui .promo-live-cell.is-active{
  box-shadow: 0 0 0 2px rgba(59,130,246,.45);
  background: rgba(239,246,255,.35);
}

.board-ui .promo-live-label{
  text-align: center;
  font-size: 12px;
  font-weight: 950;
  color: var(--muted);
  margin-bottom: 6px;
}

.board-ui .promo-preview-block .board-card{
  pointer-events: none;
}

.board-ui .promo-preview-block .fav-btn{
  display: none;
}

.board-ui .promo-live-previews .board-card{
  font-size: .92em;
}

.board-ui .promo-compare{
  margin-top: 4px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.board-ui .promo-compare__title{
  font-weight: 950;
  font-size: 14px;
  margin-bottom: 8px;
}

.board-ui .promo-compare__table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.board-ui .promo-compare__table th,
.board-ui .promo-compare__table td{
  border: 1px solid rgba(181,194,222,.28);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}

.board-ui .promo-compare__table th{
  background: rgba(255,255,255,.55);
  font-weight: 950;
}

.board-ui .pkg--preview-focus{
  box-shadow: 0 0 0 2px rgba(59,130,246,.35), var(--shadow-soft);
}

.board-ui .pkg__perday{
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.board-ui .promo-preview-footnote{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid rgba(181,194,222,.26);
  background: rgba(255,255,255,.52);
  color: var(--muted);
  font-size: 13px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.board-ui .promo-code{
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width:560px){
  .board-ui .promo-code{
    flex-direction: column;
    align-items: stretch;
  }
}

.board-ui .promo-result{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 900;
}

.board-ui .promo-result--ok{
  color: #157347;
  background: rgba(236,253,245,.72);
  border: 1px solid rgba(16,185,129,.20);
  padding: 10px 12px;
  border-radius: 14px;
}

.board-ui .promo-result--bad{
  color: #b42318;
  background: rgba(254,242,242,.72);
  border: 1px solid rgba(239,68,68,.20);
  padding: 10px 12px;
  border-radius: 14px;
}

.board-ui .promo-packages{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width:721px){
  .board-ui .promo-packages{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width:960px){
  .board-ui .promo-packages{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.board-ui .pkg{
  border: 1px solid rgba(181,194,222,.26);
  border-radius: var(--r);
  background: var(--card);
  padding: 14px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.board-ui .pkg--popular{
  border-color: rgba(16,185,129,.20);
  box-shadow: 0 12px 24px rgba(16,185,129,.08);
}

.board-ui .pkg--active{
  border-color: rgba(59,130,246,.22);
  box-shadow: 0 12px 24px rgba(59,130,246,.08);
}

.board-ui .pkg__badges{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.board-ui .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
  border: 1px solid rgba(181,194,222,.26);
  background: rgba(255,255,255,.66);
  color: var(--text);
}

.board-ui .badge--success{
  background: rgba(236,253,245,.72);
  border-color: rgba(16,185,129,.20);
  color: #157347;
}

.board-ui .badge--primary{
  background: rgba(239,246,255,.72);
  border-color: rgba(59,130,246,.22);
  color: #1d4ed8;
}

.board-ui .pkg__name{
  font-weight: 950;
  font-size: 16px;
}

.board-ui .pkg__price{
  font-weight: 950;
  font-size: 22px;
  display: flex;
  gap: 10px;
  align-items: baseline;
  flex-wrap: wrap;
  color: #163b67;
}

.board-ui .pkg__price-old{
  text-decoration: line-through;
  color: var(--muted);
  font-size: 14px;
  font-weight: 950;
}

.board-ui .pkg__price-new{
  font-size: 22px;
  font-weight: 950;
}

.board-ui .pkg__duration{
  color: var(--muted);
  font-size: 13px;
}

.board-ui .pkg__features{
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
}

.board-ui .pkg__features li{
  margin: 4px 0;
}

.board-ui .pkg__note{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(181,194,222,.26);
  background: rgba(255,255,255,.58);
  color: var(--muted);
  font-weight: 900;
  font-size: 13px;
}

.board-ui .pkg__note--ok{
  background: rgba(236,253,245,.72);
  border-color: rgba(16,185,129,.20);
  color: #157347;
}

.board-ui .pkg__subhint{
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* Breadcrumbs */
.board-breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 12px;
  font-size: .95rem;
  color: rgba(17,24,39,.65);
}

.board-breadcrumbs a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed rgba(17,24,39,.20);
}

.board-breadcrumbs a:hover{
  color: rgba(0,85,170,1);
  border-bottom-color: rgba(0,85,170,.36);
}

.board-breadcrumbs .sep{
  opacity: .6;
}

.board-breadcrumbs .current{
  color: rgba(17,24,39,.9);
  font-weight: 700;
}

.board-ui .seller-actions .open-chat-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  height: auto !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;

  background: linear-gradient(180deg, var(--brand), #006fa8) !important;
  border: 1px solid transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(0,136,204,.16) !important;

  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.board-ui .seller-actions .open-chat-btn:hover{
  background: linear-gradient(180deg, var(--brand), #006fa8) !important;
  color: #fff !important;
  filter: brightness(1.02);
}

.board-ui .seller-actions .open-chat-btn:visited,
.board-ui .seller-actions .open-chat-btn:focus,
.board-ui .seller-actions .open-chat-btn:active{
  color: #fff !important;
  text-decoration: none !important;
}

.board-ui .seller-actions .open-chat-btn::before,
.board-ui .seller-actions .open-chat-btn::after{
  pointer-events: none;
}

/* ==========================================================================
   BOARD DESIGN REFINEMENT
   Calmer typography and richer card surfaces.
   ========================================================================== */

.board-ui{
  --card: rgba(255,255,255,.78);
  --card-strong: rgba(255,255,255,.88);
  --text: #18243a;
  --muted: #64748b;
  --border: rgba(175,193,222,.30);
  --border-strong: rgba(126,156,198,.40);
  --shadow:
    0 18px 42px rgba(44,62,92,.085),
    inset 0 1px 0 rgba(255,255,255,.70);
  --shadow-soft:
    0 12px 30px rgba(44,62,92,.06),
    inset 0 1px 0 rgba(255,255,255,.62);
  --r: 22px;
}

.board-ui .board-container{
  max-width: var(--shell-wide, min(1380px, calc(100vw - 28px)));
}

.board-ui :where(h1,h2,h3,h4){
  letter-spacing: 0;
  color: var(--text);
}

.board-ui .promo-title{
  font-size: clamp(25px, 2.2vw, 34px);
  line-height: 1.16;
  font-weight: 820;
  letter-spacing: 0;
  color: #215f9a;
}

.board-ui .promo-kicker,
.board-ui .promo-card__hint,
.board-ui .board-muted{
  color: var(--muted);
}

.board-ui .promo-card,
.board-ui .board-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.91), var(--card));
  border-color: var(--border);
  box-shadow: var(--shadow-soft);
}

.board-ui .promo-card{
  border-radius: 22px;
}

.board-ui .board-card{
  border-radius: 20px;
}

.board-ui .board-card:hover{
  transform: translateY(-3px);
  border-color: var(--border-strong);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), var(--card-strong));
  box-shadow: var(--shadow);
}

.board-ui .board-card-thumb{
  background: rgba(255,255,255,.36);
  border-bottom: 1px solid rgba(175,193,222,.22);
}

.board-ui .board-card-thumb img{
  transition: transform .22s ease;
}

.board-ui .board-card:hover .board-card-thumb img{
  transform: scale(1.018);
}

.board-ui .board-card-body{
  padding: 15px;
  gap: 9px;
}

.board-ui .board-card-title{
  font-size: 1rem;
  line-height: 1.38;
  font-weight: 760;
  letter-spacing: 0;
  color: var(--text);
}

.board-ui .board-card-price{
  font-size: 1.02rem;
  line-height: 1.2;
  font-weight: 820;
  letter-spacing: 0;
  color: #215f9a;
}

.board-ui .board-card-meta{
  color: var(--muted);
  border-top-color: rgba(17,24,39,.07);
}

.board-ui .board-card-views,
.board-ui .board-card-date,
.board-ui .fav-btn,
.board-ui .reaction-btn,
.board-ui .board-subcat-link,
.board-ui .promo-back--soft,
.board-ui .board-btn-soft{
  background: rgba(255,255,255,.72);
  border-color: rgba(175,193,222,.30);
  box-shadow: 0 8px 18px rgba(44,62,92,.04);
}

@media (max-width: 720px){
  .board-ui{
    padding-top: 10px;
  }

  .board-ui .promo-title{
    font-size: clamp(24px, 7vw, 31px);
  }

  .board-ui .board-card-body{
    padding: 14px;
  }
}

/* ==========================================================================
   BOARD TYPOGRAPHY SOFTENING
   Reduces the heavy 900/950 look across list and single pages.
   ========================================================================== */

.board-ui{
  font-weight: 480;
}

.board-ui .promo-title{
  font-size: clamp(25px, 2vw, 32px);
  line-height: 1.2;
  font-weight: 760;
}

.board-ui :where(.promo-card__title, .board-cat-title, .board-section-title){
  font-weight: 720;
  letter-spacing: 0;
}

.board-ui .board-card-title,
.board-ui .board-card-title a{
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 680;
}

.board-ui .board-card-price{
  font-size: 1rem;
  line-height: 1.22;
  font-weight: 740;
}

.board-ui .board-card-meta,
.board-ui .board-card-cat,
.board-ui .board-card-views,
.board-ui .board-card-date,
.board-ui .board-static-pill,
.board-ui .board-sideMeta,
.board-ui .meta-fields li,
.board-ui .desc{
  font-weight: 540;
}

.board-ui .promo-btn,
.board-ui .promo-back,
.board-ui .board-btn,
.board-ui .btn,
.board-ui .fav-btn,
.board-ui .reaction-btn,
.board-ui .board-subcat-link{
  font-weight: 680;
  letter-spacing: 0;
}

.board-ui .board-sidePrice{
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: 0;
}

.board-ui .meta-fields h3{
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 720;
}

.board-ui .desc{
  font-size: 1rem;
  line-height: 1.68;
  color: #243248;
}

@media (max-width: 720px){
  .board-ui .promo-title{
    font-size: clamp(23px, 6vw, 29px);
  }

  .board-ui .board-sidePrice{
    font-size: clamp(22px, 7vw, 30px);
  }
}

.board-ui [class*="title"],
.board-ui [class*="Title"],
.board-ui [class*="summary"],
.board-ui [class*="label"]{
  font-weight: 700;
  letter-spacing: 0;
}

.board-ui [class*="price"],
.board-ui [class*="Price"]{
  font-weight: 760;
  letter-spacing: 0;
}

.board-ui [class*="btn"],
.board-ui [class*="Btn"],
.board-ui [class*="pill"],
.board-ui [class*="badge"],
.board-ui [class*="Badge"],
.board-ui button,
.board-ui summary{
  font-weight: 660;
  letter-spacing: 0;
}

.board-ui [class*="meta"],
.board-ui [class*="Meta"],
.board-ui [class*="hint"],
.board-ui [class*="note"],
.board-ui [class*="empty"]{
  font-weight: 520;
}

.board-ui .board-sidePrice{
  font-size: clamp(23px, 2.2vw, 31px);
  line-height: 1.14;
  font-weight: 720;
  color: #214f7c;
}

.board-ui .seller-link{
  font-weight: 680;
}

.board-ui .board-single_view .promo-title{
  color: #255f93;
}

.board-ui .board-single_view .main-photo-wrap{
  box-shadow: 0 12px 28px rgba(44,62,92,.07);
}

/* ==========================================================================
   BOARD FINAL POLISH
   Cleaner forms, category drawer, promotion cards and upload controls.
   ========================================================================== */

.board-ui{
  color: #1b2a40;
}

.board-ui .promo-top{
  align-items: center;
}

.board-ui .promo-card__head{
  border-bottom: 1px solid rgba(175,193,222,.18);
  padding-bottom: 12px;
}

.board-ui .promo-card__title{
  color: #1d426a;
}

.board-ui :where(input, select, textarea, .form-control, .form-select, .promo-input){
  border-color: rgba(175,193,222,.34);
  background: rgba(255,255,255,.74);
  color: #1b2a40;
  font-weight: 500;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.56);
}

.board-ui :where(input, select, textarea, .form-control, .form-select, .promo-input)::placeholder{
  color: rgba(97,113,136,.62);
}

.board-ui :where(input, select, textarea, .form-control, .form-select, .promo-input):focus{
  border-color: rgba(0,136,204,.36);
  box-shadow:
    0 0 0 4px rgba(0,136,204,.08),
    inset 0 1px 0 rgba(255,255,255,.68);
}

.board-ui .wizard-steps{
  gap: 8px;
}

.board-ui .step-item{
  border-color: rgba(175,193,222,.28);
  background: rgba(255,255,255,.62);
  color: #5f7088;
  font-weight: 640;
  letter-spacing: 0;
}

.board-ui .step-item.active{
  background: rgba(0,136,204,.10);
  border-color: rgba(0,136,204,.20);
  color: #1d5f91;
}

.board-ui .drop-zone,
.board-ui .board-drop-zone{
  margin-top: 10px;
  border-color: rgba(175,193,222,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.56));
  box-shadow:
    0 10px 24px rgba(44,62,92,.04),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.board-ui .board-drop-zone__text{
  margin: 0 0 10px;
  color: #5f7088;
  font-weight: 560;
}

.board-ui .board-clear-btn{
  margin-left: 8px;
}

.board-ui .photo-preview{
  gap: 10px;
}

.board-ui .photo-thumb,
.board-ui .preview-container,
.board-ui .compression-info{
  border-color: rgba(175,193,222,.28);
  background: rgba(255,255,255,.62);
  box-shadow:
    0 8px 18px rgba(44,62,92,.035),
    inset 0 1px 0 rgba(255,255,255,.50);
}

.board-ui .board-cat-parent{
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-ui .board-cat-name{
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.board-ui .board-cat-arrow{
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: #5f7088;
  cursor: pointer;
}

.board-ui .board-cat-modal,
.board-ui .board-filter,
.board-ui .board-searchbar{
  border-color: rgba(175,193,222,.28);
  background: rgba(255,255,255,.74);
  box-shadow:
    0 12px 30px rgba(44,62,92,.06),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.board-ui .promo-packages .pkg{
  height: 100%;
}

.board-ui .promo-packages .pkg__form,
.board-ui .promo-packages .pkg__note{
  margin-top: auto;
}

.board-ui .pkg__bump-terms{
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(175,193,222,.28);
  background: rgba(255,255,255,.56);
  color: rgba(37,52,75,.68);
  font-weight: 560;
  font-size: 13px;
  line-height: 1.4;
}

.board-ui .pkg__bump-terms strong{
  color: #1d426a;
  font-weight: 680;
}

.board-ui .pkg,
.board-ui .benefit{
  border-color: rgba(175,193,222,.28);
  box-shadow:
    0 10px 24px rgba(44,62,92,.045),
    inset 0 1px 0 rgba(255,255,255,.58);
}

@media (max-width: 720px){
  .board-ui .promo-top{
    align-items: flex-start;
  }

  .board-ui .board-clear-btn{
    margin-left: 0;
    margin-top: 8px;
  }
}