/* STORE PREVIEW (view-only). Mobile-first; widens to a list + detail layout. */
#start .tabPanel[data-panel="store"] { padding-bottom: 24px; }
#storePreviewRoot { margin: 0 20px; display: grid; gap: 14px; color: var(--bf-text, #e0e4e8); }
#storePreviewRoot h3, #storePreviewRoot h4 { margin: 0; letter-spacing: .06em; }
#storePreviewRoot h3 { font-size: 15px; }
#storePreviewRoot h4 { font-size: 11px; color: var(--bf-accent, #ffb300); margin-top: 14px; margin-bottom: 6px; }
#storePreviewRoot p { margin: 0; line-height: 1.5; font-size: 13px; }
#storePreviewRoot ul, #storePreviewRoot ol { list-style: none; margin: 0; padding: 0; }
#storePreviewRoot .bfStoreMuted { color: #a9b0b6; font-size: 12px; }

#storePreviewRoot .bfStoreNotice { border: 1px solid #e7b558; background: rgba(231, 181, 88, .1); padding: 10px 12px; font-size: 13px; line-height: 1.5; }
#storePreviewRoot .bfStoreNotice strong { color: #e7b558; letter-spacing: .06em; }

#storePreviewRoot .bfStoreWallet { display: grid; gap: 8px; grid-template-columns: 1fr; }
#storePreviewRoot .bfStoreWalletRow { display: grid; gap: 2px; padding: 10px 12px; background: #11161a; border: 1px solid var(--bf-border-subtle, rgba(255,255,255,.08)); }
#storePreviewRoot .bfStoreWalletRow strong { font-size: 18px; letter-spacing: .04em; }
#storePreviewRoot .bfStoreWalletRow[data-currency="real"] strong { color: #c9ced2; }
#storePreviewRoot .bfStoreWalletRow small { color: #a9b0b6; font-size: 11px; line-height: 1.4; }
#storePreviewRoot .bfStoreWalletLabel { font-size: 10px; letter-spacing: .12em; color: #a9b0b6; }

#storePreviewRoot .bfStoreNav { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
#storePreviewRoot .bfStoreNavBtn { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; background: #171d21; color: #edf0ee; border: 1px solid #566067; font: inherit; font-size: 12px; letter-spacing: .06em; cursor: pointer; }
#storePreviewRoot .bfStoreNavBtn[aria-pressed="true"] { border-color: #e7b558; color: #e7b558; }
#storePreviewRoot .bfStoreNavBtn.bfStoreOwner { border-style: dashed; }

#storePreviewRoot .bfStoreMain { display: grid; gap: 16px; grid-template-columns: 1fr; }
#storePreviewRoot .bfStoreList { display: grid; gap: 10px; min-width: 0; }
#storePreviewRoot .bfStoreSection { font-size: 12px; color: #c9ced2; margin-top: 4px; }
#storePreviewRoot .bfStoreGrid { display: grid; gap: 10px; grid-template-columns: 1fr; }
#storePreviewRoot .bfStoreCard { width: 100%; min-height: 96px; text-align: left; display: grid; gap: 6px; padding: 12px; background: #12171b; color: inherit; border: 1px solid #3a4349; font: inherit; cursor: pointer; }
#storePreviewRoot .bfStoreCard[aria-pressed="true"] { border-color: #e7b558; background: #1a1d18; }
#storePreviewRoot .bfStoreCardTitle { font-weight: 600; font-size: 14px; letter-spacing: .03em; }
#storePreviewRoot .bfStoreCardTag { font-size: 12px; color: #a9b0b6; line-height: 1.4; }
#storePreviewRoot .bfStoreCardFoot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
#storePreviewRoot .bfStorePrice { font-size: 12px; letter-spacing: .05em; color: #edf0ee; border: 1px dashed #8b949a; padding: 2px 6px; }

#storePreviewRoot .bfStoreBadge { display: inline-block; font-size: 10px; letter-spacing: .08em; padding: 3px 6px; border: 1px solid currentColor; white-space: nowrap; }
#storePreviewRoot .bfStoreBadge[data-status="proposed"] { color: #e7b558; }
#storePreviewRoot .bfStoreBadge[data-status="free"] { color: #8fd18f; }
#storePreviewRoot .bfStoreBadge[data-status="owned"] { color: #7fc4ff; }
#storePreviewRoot .bfStoreBadge[data-status="earn-credits"] { color: #c9ced2; }

#storePreviewRoot .bfStoreDetail { background: #0e1215; border: 1px solid #3a4349; padding: 14px; min-width: 0; scroll-margin-top: 12px; }
#storePreviewRoot .bfStoreDetail h3:focus { outline: none; }
#storePreviewRoot .bfStoreDetail h3:focus-visible { outline: 1px solid var(--bf-text, #e0e4e8); outline-offset: 2px; }
#storePreviewRoot .bfStoreDetailMeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
#storePreviewRoot .bfStoreRef { margin: 12px 0 0; }
#storePreviewRoot .bfStoreRefImgs { display: flex; gap: 8px; flex-wrap: wrap; }
#storePreviewRoot .bfStoreRefImgs img { width: 96px; height: auto; max-height: 140px; object-fit: contain; background: #070a0c; border: 1px solid #2a3136; filter: grayscale(.35); }
#storePreviewRoot .bfStoreRef figcaption { font-size: 11px; color: #a9b0b6; margin-top: 6px; line-height: 1.4; }
#storePreviewRoot .bfStoreArtMissing { display: grid; place-items: center; height: 88px; border: 1px dashed #566067; color: #8b949a; font-size: 12px; letter-spacing: .12em; }
#storePreviewRoot .bfStoreContents li, #storePreviewRoot .bfStoreFacts li { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
#storePreviewRoot .bfStoreContents small { color: #a9b0b6; font-size: 12px; line-height: 1.4; }
#storePreviewRoot .bfStoreContents .bfStoreBadge { justify-self: start; }
#storePreviewRoot .bfStoreFacts li span, #storePreviewRoot .bfStoreChecklist p span { display: block; font-size: 10px; letter-spacing: .1em; color: #8b949a; text-transform: uppercase; }
#storePreviewRoot .bfStoreFit { margin-top: 8px; font-size: 12px; }
#storePreviewRoot .bfStoreFit[data-fits="false"] { color: #f0a58f; }
#storePreviewRoot .bfStoreFit[data-fits="true"] { color: #8fd18f; }
#storePreviewRoot .bfStoreNever li { font-size: 12px; padding: 3px 0 3px 14px; position: relative; color: #c9ced2; }
#storePreviewRoot .bfStoreNever li::before { content: "×"; position: absolute; left: 0; color: #8b949a; }
#storePreviewRoot .bfStoreCta { margin-top: 16px; width: 100%; min-height: 48px; background: repeating-linear-gradient(135deg, #1b2024 0 10px, #161a1d 10px 20px); color: #c9ced2; border: 1px dashed #8b949a; font: inherit; font-size: 13px; letter-spacing: .1em; cursor: not-allowed; }
#storePreviewRoot .bfStoreActionStatus { min-height: 1.5em; margin-top: 8px; font-size: 12px; color: #e7b558; }
#storePreviewRoot .bfStoreEmpty { color: #a9b0b6; font-size: 13px; }

#storePreviewRoot .bfStoreSwatch { display: inline-flex; gap: 2px; flex: 0 0 auto; }
#storePreviewRoot .bfStoreSwatch i { width: 14px; height: 14px; border: 1px solid rgba(255,255,255,.18); display: inline-block; }
#storePreviewRoot .bfStoreExisting { display: grid; gap: 10px; grid-template-columns: 1fr; }
#storePreviewRoot .bfStoreExistGroup h4 { margin-top: 0; color: #c9ced2; }
#storePreviewRoot .bfStoreExistGroup li, #storePreviewRoot .bfStoreExistList li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05); font-size: 12px; }
#storePreviewRoot .bfStoreExistName { flex: 1 1 auto; min-width: 0; }
#storePreviewRoot .bfStoreExistName small { color: #8b949a; }
#storePreviewRoot .bfStoreThumbs { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
#storePreviewRoot .bfStoreThumbs li { display: grid; gap: 4px; justify-items: start; font-size: 11px; background: #11161a; padding: 6px; border: 1px solid rgba(255,255,255,.06); }
#storePreviewRoot .bfStoreThumbs img { width: 100%; height: 96px; object-fit: contain; background: #070a0c; }

#storePreviewRoot .bfStoreOwnerView { display: grid; gap: 10px; }
#storePreviewRoot .bfStoreChecklist { display: grid; gap: 10px; }
#storePreviewRoot .bfStoreChecklist > li { display: grid; gap: 6px; padding: 12px; background: #11161a; border-left: 3px solid #566067; }
#storePreviewRoot .bfStoreChecklist > li[data-status="blocked"] { border-left-color: #e0705a; }
#storePreviewRoot .bfStoreChecklist > li[data-status="partial"] { border-left-color: #e7b558; }
#storePreviewRoot .bfStoreChecklist p { font-size: 12px; color: #c9ced2; }
#storePreviewRoot .bfStoreCheckHead { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
#storePreviewRoot .bfStoreCheckHead strong { flex: 1 1 200px; font-size: 13px; }
#storePreviewRoot .bfStorePri { font-size: 11px; font-weight: 700; color: #e7b558; }
#storePreviewRoot .bfStoreCheckStatus { font-size: 10px; letter-spacing: .1em; color: #a9b0b6; }
#storePreviewRoot .bfStoreEconGrid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
#storePreviewRoot .bfStoreEconGrid label { display: grid; gap: 4px; font-size: 11px; color: #a9b0b6; letter-spacing: .04em; }
#storePreviewRoot .bfStoreEconGrid input { min-height: 44px; box-sizing: border-box; width: 100%; background: #171d21; color: #edf0ee; border: 1px solid #566067; padding: 8px 10px; font: inherit; font-size: 16px; }
#storePreviewRoot .bfStoreEconOut { display: grid; gap: 0; margin: 4px 0 8px; }
#storePreviewRoot .bfStoreEconOut div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
#storePreviewRoot .bfStoreEconOut dt { color: #a9b0b6; }
#storePreviewRoot .bfStoreEconOut dd { margin: 0; font-variant-numeric: tabular-nums; }
#storePreviewRoot .bfStoreEconNet { font-weight: 700; }
#storePreviewRoot button:focus-visible, #storePreviewRoot input:focus-visible { outline: 2px solid #e7b558; outline-offset: 2px; }

@media (min-width: 560px) {
  #storePreviewRoot .bfStoreWallet { grid-template-columns: 1fr 1fr; }
  #storePreviewRoot .bfStoreGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #storePreviewRoot .bfStoreExisting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #storePreviewRoot .bfStoreEconGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  #storePreviewRoot .bfStoreMain { grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); align-items: start; }
  #storePreviewRoot .bfStoreDetail { position: sticky; top: 12px; max-height: calc(100dvh - 180px); overflow-y: auto; }
}
@media (max-width: 900px) {
  #storePreviewRoot { margin: 0 12px; }
}