/*
 * Extracted from assets/app.css on 2026-04-06.
 * Section: Shops, market, economy, sidebar and data-heavy sections
 * Source lines: 3307-6373
 */

/* Shops UI */
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;}
.shopTile{border:1px solid var(--border);border-radius:14px;background: rgba(0,0,0,.16);padding:10px;}
.shopTile__items{display:flex; align-items:center; justify-content:space-between;
 gap:8px;}
.itemBox{position:relative;width:72px;height:72px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.itemBox img{width:64px;height:64px;object-fit:contain;image-rendering:auto;}
.itemAmt{position:absolute;right:6px;bottom:6px;font-size:12px;font-weight:700;background:rgba(0,0,0,.45);border:1px solid var(--border);padding:2px 6px;border-radius:999px;}
.shopArrow{opacity:.6;font-weight:700;}

/* Shops Page (minimal) */
.shopsPage .card__head.shopsHead{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsHead__title{font-size:18px;font-weight:800;letter-spacing:.2px}
.shopsHead__meta{font-size:12px;color:rgba(255,255,255,.65)}

.shopsApp{margin-top:10px}

/* Stage 4: unify Market page shell with Panel style */
.card.shopsPage{ padding:0; overflow:hidden; }
.shopsPage > .hint{ padding: var(--panel-pad); }
.shopsPage .card__head.shopsHead{
  margin:0;
  padding: var(--panel-head-pad-y) var(--panel-head-pad-x);
  border-bottom: 1px solid var(--panel-head-border);
  background: var(--panel-head-bg);
}
.shopsHead__title{ font-size: 20px; font-weight: 1000; letter-spacing: .2px; }
.shopsHead__meta{ color: var(--text700); }
.shopsApp{ margin-top:0; padding: var(--panel-pad); }

/* Stage 4: shops toolbar uses shared tokens */
.shopsToolbar{
  background: rgba(0,0,0,.14);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
}
html.page-market .shopsToolbar{
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,.22);
}
.shopsTab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text900);
  font-weight:900;
}
.shopsTab.is-active{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.shopsSearch input{
  border:1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text900);
}
.shopsChip{ border:1px solid var(--border); background: rgba(0,0,0,.12); color: var(--text900); }
.shopsSelect{ border:1px solid var(--border); background: rgba(0,0,0,.16); color: var(--text900); }


.shopsToolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:10px}

/* Market toolbar should stay visible while scrolling the offers list */
html.page-market .shopsToolbar{
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: rgba(0,0,0,.22);
}
.shopsTabs{display:flex;gap:8px;align-items:center}
.shopsTab{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.9);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:13px;transition:.15s}
.shopsTab:hover{transform:translateY(-1px)}
.shopsTab.is-active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}

.shopsSearch{flex:1;min-width:220px;display:flex;align-items:center;gap:8px}
.shopsSearch input{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.92);padding:9px 12px;border-radius:14px;outline:none}
.shopsSearch input::placeholder{color:rgba(255,255,255,.45)}

.shopsFilters{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shopsChip{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.10);border-radius:999px;padding:7px 10px;font-size:12px;color:rgba(255,255,255,.85)}
.shopsChip input{accent-color:var(--accent)}
.shopsSelect{border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.9);padding:8px 10px;border-radius:12px;outline:none;font-size:12px}
.shopsRange{display:flex;gap:8px;align-items:center}
.shopsRange input{width:90px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.12);color:rgba(255,255,255,.92);padding:8px 10px;border-radius:12px;outline:none;font-size:12px}

.shopsStatsLine{margin-top:10px;font-size:12px;color:rgba(255,255,255,.65)}

.shopsOwnerCard{background: rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px;margin-top:12px}
.shopsOwnerHead{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsOwnerInfo{display:flex;align-items:center;gap:10px}
.shopsOwnerAvatar{width:38px;height:38px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.shopsOwnerName{font-weight:800;line-height:1.1}
.shopsOwnerSub{font-size:12px;color:rgba(255,255,255,.6)}

.shopsShopCard{margin-top:10px;background: rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:12px}
.shopsShopTop{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsMetaRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:rgba(255,255,255,.65)}
.shopsBadge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);font-size:11px}
.shopsBadge--bp{border-color:rgba(255,200,100,.25);background:rgba(255,200,100,.10)}
.shopsBadge--broadcast{border-color:rgba(255,255,255,.18)}
.shopsBadge--online{border-color:rgba(120,255,180,.22);background:rgba(120,255,180,.08)}
.shopsBadge--deal{border-color:rgba(255,210,120,.26);background:rgba(255,210,120,.10)}
.shopsBadge--best{border-color:rgba(130,210,255,.26);background:rgba(130,210,255,.10)}

.coordBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.10);color:rgba(255,255,255,.88);padding:6px 10px;border-radius:12px;cursor:pointer;font-size:12px}
.coordBtn:hover{transform:translateY(-1px)}

.shopsMarketGroup{margin-top:14px}
.shopsGroupTitle{display:flex; align-items:center; justify-content:space-between;
 gap:10px}
.shopsGroupTitle h3{margin:0;font-size:14px;font-weight:900}
.shopsGroupCount{font-size:12px;color:rgba(255,255,255,.6)}
.shopsMarketList{margin-top:8px;display:flex;flex-direction:column;gap:8px}

.shopsOfferLeft{display:flex;align-items:center;gap:10px;min-width:0}
.shopsOfferItem{display:flex;align-items:center;gap:10px;min-width:0}
.shopsOfferItem .itemBox{width:62px;height:62px;border-radius:16px}
.shopsOfferItem .itemBox img{width:54px;height:54px}
.shopsOfferText{min-width:0}
.shopsOfferText .t1{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsOfferText .t2{font-size:12px;color:rgba(255,255,255,.65)}
.shopsOfferRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.shopsMiniBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:rgba(255,255,255,.9);padding:6px 10px;border-radius:12px;cursor:pointer;font-size:12px}
.shopsMiniBtn:hover{transform:translateY(-1px)}

.shopsEmpty{margin-top:12px;padding:14px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:rgba(255,255,255,.65)}
.shopsEmpty.shopsEmptyCenter{display:flex;justify-content:center;align-items:center;padding:14px 0;border:none;background:transparent}

@media (max-width: 720px){
  .shopsToolbar{padding:10px}
  .shopsSearch{min-width:100%}
  .shopsRange input{width:80px}
}


/* =========================
   Shops minimal UI (player -> shops -> modal)
   ========================= */
.shopsBodyMinimal{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:12px}
@media (max-width: 1100px){
  .shopsBodyMinimal{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 720px){
  .shopsBodyMinimal{grid-template-columns:1fr;}
}
.shopsPlayer{padding:10px;border-radius:20px;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.12);cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.shopsPlayer:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.18);box-shadow:0 10px 26px rgba(0,0,0,.38);background:rgba(0,0,0,.18)}
.shopsPlayerHead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.shopsAvatar{width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.shopsAvatar{image-rendering:auto}
.shopsPlayerText{min-width:0}
.shopsPlayerName{font-weight:950;font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsPlayerId{font-size:12px;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}

.shopsShopList{display:flex;flex-direction:column;gap:8px}

/* Compact shop scroller (player cards) */
.shopsShopScroller{display:flex;gap:6px;overflow:auto;padding:2px 2px 4px;scrollbar-width:thin;}
.shopsShopScroller::-webkit-scrollbar{height:8px;}
.shopsShopScroller::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:99px;}
.shopsShopChip{flex:0 0 auto;min-width:140px;max-width:220px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);border-radius:14px;padding:8px;text-align:left;cursor:pointer;}
.shopsShopChip:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);} 
.shopsShopChipName{font-weight:850;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shopsShopChipMeta{margin-top:3px;font-size:11px;color:rgba(255,255,255,.62);} 

.shopsShopChip--more{border-style:dashed;opacity:.95}

.shopsPlayerText{min-width:0;}
.shopsPlayerSub{font-size:12px;color:rgba(255,255,255,.62);margin-top:4px;}

/* Owner modal shop switch */


/* Owner modal: stacked shops (many shops/items) */
.shopsOwnerStack{display:flex;flex-direction:column;gap:12px;}
.shopsShopSection{padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);backdrop-filter:blur(10px);}
.shopsShopSectionHead{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;}
.shopsShopSectionHead[data-shop-open="1"]{cursor:pointer;}
.shopsShopSection:hover{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.14);box-shadow:0 10px 26px rgba(0,0,0,.28);}

.shopsShopSectionTitle{min-width:180px;flex:1;min-width:0;}
.shopsShopName{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.shopsShopCoords{font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;}
.shopsShopSectionMeta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}
.shopsShopSectionActions{display:flex;gap:8px;align-items:center;}
.shopsShopSectionBody{margin-top:10px;}
.shopsShopSectionFoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap;}
.shopsShopNote{font-size:12px;opacity:.85;}

/* Player card compact variant */
.shopsPlayer--compact{padding:10px;}
.shopsPlayer--compact .shopsPlayerHead{margin-bottom:0;}

.shopsOwnerSwitch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px;}
.shopsSelect--wide{min-width:260px;}
.shopsOwnerCoords{font-size:12px;color:rgba(255,255,255,.70);padding:6px 10px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(0,0,0,.12);} 
.shopsOwnerPreviewHead{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px;}
.shopsOwnerPreviewTitle{font-weight:850;}
.shopsOwnerPreviewMeta{display:flex;gap:8px;flex-wrap:wrap;}
.shopsChipMini{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);font-size:12px;}

/* Compact offers */
.shopTile--mini{padding:10px;}
.shopsOffersList--mini{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
@media (max-width:860px){.shopsOffersList--mini{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.shopsOffersList--mini{grid-template-columns:1fr;}}
.shopsOffersList--mini .itemBox{width:60px;height:60px;border-radius:16px;}
.shopsOffersList--mini .itemBox img{width:52px;height:52px;}

/* Coords pill (market rows) */
.shopsCoordPill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);color:rgba(255,255,255,.75);font-size:12px;}

/* Server monitor (no copy button) */
.serverConnectText{display:inline-flex;align-items:center;gap:8px;font-size:12px;padding:8px 10px;border:1px solid rgba(255,255,255,.10);border-radius:999px;background:rgba(255,255,255,.04);} 

.shopsShopRow{width:100%;display:flex; align-items:center; justify-content:space-between;
 gap:10px;
  appearance:none;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);
  color:rgba(255,255,255,.92);padding:10px 12px;border-radius:14px;cursor:pointer;text-align:left}
.shopsShopRow:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.shopsShopTitle{font-weight:850;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsShopCoords{font-size:12px;color:rgba(255,255,255,.78);white-space:nowrap;
  padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.18)}
.shopsShopCoords:hover{text-decoration:underline}

@media (max-width: 680px){
  .shopsAvatar{width:56px;height:56px;border-radius:14px}
  .shopsShopRow{flex-direction:column;align-items:flex-start}
  .shopsShopCoords{margin-left:auto}
}

/* Modal */
.shopsModal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}
.shopsModal.hidden{display:none}
.shopsModalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.shopsModalPanel{position:relative;max-width:780px;width:100%;
  background:linear-gradient(180deg, rgba(22,22,26,.92), rgba(12,12,14,.90));
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  box-shadow:0 30px 90px rgba(0,0,0,.55);
  overflow:hidden}
.shopsModalHead{display:flex; align-items:center; justify-content:space-between;
 gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:2}
.shopsModalTitle{font-weight:900;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsModalClose{appearance:none;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);width:32px;height:32px;border-radius:10px;cursor:pointer;font-size:20px;line-height:28px}
.shopsModalClose:hover{transform:translateY(-1px)}
.shopsModalBody{padding:14px;max-height:72vh;overflow:auto}

.shopsModalSeller{display:flex; align-items:center; justify-content:space-between;
 gap:12px;margin-bottom:12px}
.shopsSellerLeft{display:flex;align-items:center;gap:12px;min-width:0}
.shopsSellerText{min-width:0}
.shopsSellerName{font-weight:900}
.shopsSellerMeta{margin-top:4px}

.shopsOffersList{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:10px;margin-top:10px}
.shopsOffersList .shopTile{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.12)}
.shopsOffersList .shopTile:hover{border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.04)}
.shopsOffersList .shopArrow{color:rgba(255,255,255,.6);font-weight:900}

@media (max-width: 860px){
  .shopsOffersList{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 520px){
  .shopsOffersList{grid-template-columns:1fr}
}
.shopsOfferRow{display:flex; align-items:center; justify-content:space-between;
 gap:10px;
  background:rgba(0,0,0,.10);border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:10px}
.shopsOfferSide{display:flex;align-items:center;gap:10px;min-width:0}
.shopsItemIcon{width:46px;height:46px;border-radius:14px;object-fit:contain;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);padding:6px}
.shopsItemText{min-width:0}
.shopsItemName{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shopsItemAmt{font-size:12px;color:rgba(255,255,255,.65)}
.shopsOfferArrow{color:rgba(255,255,255,.55);font-weight:900}

/* Modal tabs + history */
.shopsModalTabs{display:flex;gap:8px;align-items:center;margin:6px 0 12px;padding:2px}
.shopsModalTabs .shopsTab{padding:7px 12px;font-size:12px;background:rgba(0,0,0,.10)}
.shopsModalTabs .shopsTab.isActive{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
.shopsPanel.hidden{display:none}

.shopsHistoryLoading{padding:12px;border:1px dashed rgba(255,255,255,.18);border-radius:18px;color:rgba(255,255,255,.65)}
.shopsHistoryStats{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:10px;margin-bottom:12px}
.shopsStat{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);border-radius:18px;padding:12px}
.shopsStatVal{font-size:18px;font-weight:950}
.shopsStatLbl{font-size:12px;color:rgba(255,255,255,.65);margin-top:2px}
.shopsStat--wide{grid-column:1 / -1}
.shopsChips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

.shopsHistoryList{display:flex;flex-direction:column;gap:8px}
.shopsHistoryRow{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10)}
.shopsHistoryTime{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;min-width:78px}
.shopsHistoryBody{min-width:0}
.shopsHistoryLine{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:850;white-space:normal}
.shopsHistoryPair{display:inline-flex;align-items:center;gap:6px}
.shopsHistItem{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:140px}
.shopsHistShort{font-size:11px;font-weight:850;color:rgba(255,255,255,.70);max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.shopsHistoryArrow{color:rgba(255,255,255,.55);font-weight:950}
.shopsHistoryNames{min-width:0;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.itemBox--hist{width:40px;height:40px;border-radius:13px}
.itemBox--hist img{width:34px;height:34px}
.itemBox--hist .itemAmt{font-size:11px;padding:1px 6px;border-radius:10px}
.shopsHistorySub{font-size:12px;margin-top:3px}



/* v71 - owner history modal + player card actions */
.shopsPlayerHead{position:relative}
.shopsPlayerActions{margin-left:auto;display:flex;align-items:center;gap:8px}
.shopsMiniBtn--ghost{background:transparent;border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.shopsMiniBtn--ghost:hover{background:rgba(255,255,255,.06)}

.shopsShopList--modal{display:flex;flex-direction:column;gap:8px}
.shopsShopRow--modal{width:100%}

.shopsChip--tiny{padding:2px 8px;border-radius:999px;font-size:11px;opacity:.95}


/* Market (seller pill + currency inline icon) */
.shopsCur img{width:18px;height:18px;border-radius:6px;vertical-align:middle;margin:0 4px -3px 0}
.shopsSellerPill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);max-width:220px}
.shopsSellerAv{width:22px;height:22px;border-radius:999px;object-fit:cover}
.shopsSellerNm{font-size:12px;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.shopsSellerLvl{
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  flex: 0 0 auto;
}


/* =========================
   Market v2 (aggregator, many sellers/items)
   ========================= */
.marketGroups{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.marketGroup{border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.10);border-radius:18px;overflow:hidden}
.marketGroupHead{display:flex; align-items:center; justify-content:space-between;
 gap:12px;padding:12px 12px;cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.marketGroupHead:hover{background:rgba(0,0,0,.14);box-shadow:0 14px 36px rgba(0,0,0,.28)}

.marketGroupLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketGroupText{min-width:0}
.marketGroupText .t{font-weight:950;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketGroupText .s{font-size:12px;color:rgba(255,255,255,.60);margin-top:2px}

.marketGroupMid{flex:1;min-width:0;display:flex;justify-content:center}
.marketPrice{display:flex;align-items:center;gap:10px;min-width:0}
.marketPriceText{min-width:0}
.marketPriceText .p1{font-size:12px;color:rgba(255,255,255,.86);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketPriceText .p2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.marketPriceText .u{color:rgba(255,255,255,.95);font-weight:900}

.unitPill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.unitPill .u{font-weight:900;color:rgba(255,255,255,.98)}

.marketBadges{display:inline-flex;align-items:center;gap:6px;margin-left:6px;vertical-align:middle}
.marketBadges .shopsBadge{padding:2px 8px;font-size:11px}

.marketGroupRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.marketExpandBtn{appearance:none;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.88);padding:7px 12px;border-radius:999px;cursor:pointer;font-size:12px}
.marketExpandBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}

.marketGroupBody{border-top:1px solid rgba(255,255,255,.08);padding:10px 10px 12px}
.marketMoreWrap{display:flex;justify-content:center;padding:10px 0 0}

/* Market v3: tiles layout + actions */
.marketGroups--tiles{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:10px;
  margin-top:10px;
}
.marketTile{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  border-radius:14px;
  overflow:hidden;
  padding:12px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.marketTile:hover{
  background:rgba(0,0,0,.14);
  box-shadow:0 14px 36px rgba(0,0,0,.28);
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.18);
}
.marketTileTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.marketTileLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketTileText{min-width:0}
.marketTileText .t{font-weight:950;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTileText .s{font-size:12px;color:rgba(255,255,255,.60);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTilePrice{display:flex;align-items:center;gap:10px;margin-top:10px}
.marketTilePriceText{min-width:0}
.marketTilePriceText .p1{font-size:12px;color:rgba(255,255,255,.90);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTilePriceText .p2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketTileBottom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.marketTileBottom .marketExpandBtn{margin-left:auto}

.marketFavBtn{
  appearance:none;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.marketFavBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.08)}
.marketFavBtn.is-on{background:rgba(255,215,120,.10);border-color:rgba(255,215,120,.25)}

.marketActionBtn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.90);
  padding:9px 12px;
  border-radius:14px;
  cursor:pointer;
  font-weight:800;
  font-size:12px;
}
.marketActionBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.marketActionBtn.is-on{background:rgba(255,215,120,.10);border-color:rgba(255,215,120,.25)}

.marketTabs--layout .shopsTab{min-width:84px}

@media (max-width: 720px){
  .marketGroups--tiles{grid-template-columns:1fr}
}

/* Offer rows inside expanded group */
.marketOfferRow{display:flex; align-items:center; justify-content:space-between;
 gap:12px;
  border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.08);border-radius:16px;padding:10px 10px;
  cursor:pointer;transition:transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease}
.marketOfferRow:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.12);box-shadow:0 10px 26px rgba(0,0,0,.22)}
.marketOfferLeft{display:flex;align-items:center;gap:10px;min-width:0}
.marketOfferText{min-width:0}
.marketOfferText .l1{font-weight:900;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marketOfferText .l2{font-size:12px;color:rgba(255,255,255,.60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.marketOfferText .u{color:rgba(255,255,255,.98);font-weight:900}
.marketOfferText .u{font-weight:900}
.marketOfferRight{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Bigger item boxes for market (sell icon & price icon are same size) */
.itemBox.marketBox{width:54px;height:54px;border-radius:16px}
.itemBox.marketBox img{width:46px;height:46px}

@media (max-width: 720px){
  .marketGroupHead{flex-wrap:wrap;align-items:flex-start}
  .marketGroupRight{width:100%;justify-content:flex-start}
}

@media (max-width: 980px){
  .marketPriceText .p2{max-width:180px}
  .marketOfferText .l2{max-width:180px}
}

/* Phone layout: stack blocks and keep rows readable */
@media (max-width: 520px){
  html.page-market .shopsTabs{
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  html.page-market .shopsTabs::-webkit-scrollbar{ height: 0; }
  html.page-market .shopsTab{ white-space: nowrap; }

  .marketGroupHead{ padding: 10px; gap: 10px; }
  .marketGroupMid{ width: 100%; justify-content:flex-start; }
  .marketGroupRight{ width: 100%; justify-content:flex-start; }

  .itemBox.marketBox{ width: 50px; height: 50px; border-radius: 15px; }
  .itemBox.marketBox img{ width: 42px; height: 42px; }
  .itemBox.marketBox .itemAmt{ font-size: 11px; padding: 1px 6px; right: 5px; bottom: 5px; }

  .shopsCoordPill{ padding: 5px 9px; font-size: 11px; }
  .shopsSellerPill{ padding: 5px 9px; max-width: 240px; }
  .shopsSellerNm{ max-width: 140px; }

  .marketOfferRow{ flex-direction: column; align-items: stretch; gap: 8px; }
  .marketOfferRight{ justify-content:flex-start; }
}