:root{
  --bg: #0B0F19;
  --card: #151B28;
  --text: #FFFFFF;
  --text2: #B0B3C2;
  --grad: linear-gradient(135deg,#00C6FF,#7C00FF);
  --line: rgba(255,255,255,.08);
  --cardBorder: rgba(255,255,255,.06);
  --accent: #7C00FF;
}

/* Base market */
.market {
  padding-bottom: 48px;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Flash banner */
.flash{
  background: rgba(124,0,255,.1);
  border-bottom: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
}
.flash__inner{
  display:flex;
  align-items:center;
  gap:16px;
  padding:14px 0;
  flex-wrap:wrap;
}
.flash__icon{font-size:20px}
.flash__title{margin:0}
.flash__text{margin:2px 0 0;color:var(--text2)}
.flash__cta{margin-left:auto}
@media (max-width:720px){
  .flash__inner{flex-direction:column;align-items:flex-start}
  .flash__cta{margin-left:0}
}

/* Header + filters */
.market__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.market__titleWrap{min-width:240px}
.section__title{margin:0;font-size:1.6rem}
.section__subtitle{margin:6px 0 0;color:var(--text2)}

.market__filters{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
}
.market__select{
  -webkit-appearance:none;
  appearance:none;
  background:var(--card);
  border:1px solid var(--cardBorder);
  padding:.45rem .6rem;
  border-radius:10px;
  color:var(--text);
}
.market__search{
  display:flex;
  gap:.4rem;
  align-items:center;
  width:100%;
  max-width:720px;
}
.market__searchInput{
  background:#0f1420;
  border:1px solid var(--cardBorder);
  padding:.5rem .6rem;
  border-radius:10px;
  color:var(--text);
  flex:1;
  min-width:160px;
}
.market__searchBtn{padding:.5rem .75rem}

/* Grid */
.market__grid{
  display:grid;
  gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top:1rem;
}

/* Card (base + overrides) */
.mcard{
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--cardBorder);
  min-height: 220px;
}
.mcard__media{
  position:relative;
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0f1420;
}
.mcard__img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mcard__placeholder{font-size:2.2rem;opacity:.9}
.mcard__badge{
  position:absolute;
  left:8px;
  top:8px;
  padding:6px 8px;
  border-radius:8px;
  background:rgba(0,0,0,.45);
  font-size:0.85rem;
  color:#fff;
  border:1px solid var(--line);
}

/* Body / content */
.mcard__body{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  flex:1 1 auto;
}
.mcard__title{margin:0;font-size:1.05rem}
.mcard__desc{
  margin:0;
  color:var(--text2);
  font-size:.95rem;
  min-height:2.6rem;
  line-height:1.2;
}
.mcard__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  margin-top:auto;
}
.mcard__price{font-weight:700}
.mcard__price--muted{color:var(--text2)}
.mcard__actions{display:flex;gap:.4rem;align-items:center}

/* Skeleton */
.mcard--skeleton .skeleton{
  background:linear-gradient(90deg,#141a24 0%, #0c1117 50%, #141a24 100%);
  height:14px;border-radius:6px;
}
.skeleton-title{height:18px;width:60%}
.skeleton-desc{height:12px;width:80%;margin-top:.5rem}
.skeleton-footer{height:36px;width:100%;margin-top:10px;border-radius:8px}

/* Loader / end / error */
.market__loader{display:flex;justify-content:center;padding:18px 0}
.market__spinner{
  width:36px;height:36px;border-radius:50%;
  border:4px solid rgba(255,255,255,.08);
  border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.market__end{padding:14px;text-align:center;color:var(--text2)}
.market__error{
  padding:12px;margin-top:8px;
  background:rgba(255,0,0,0.06);
  color:#ffb3b3;border-radius:8px;border:1px solid rgba(255,0,0,0.06);
}

/* Empty state */
.market__empty{
  padding:36px;text-align:center;color:var(--text2);
  border:1px dashed var(--line);border-radius:14px;
}
.market__emptyIcon{font-size:2.6rem;margin-bottom:8px}
.market__emptyText{font-weight:600}

/* Responsive tweaks */
@media (max-width:720px){
  .market__header{align-items:flex-start}
  .market__filters{width:100%;flex-wrap:wrap}
  .market__searchInput{flex:1;min-width:160px}
  .mcard__media{height:140px}
}
@media (min-width:960px){
  .mcard__media{height:180px}
}