:root{
  --bg:#0a0f17;--card:#121a27;--txt:#e7eefc;--muted:#8aa0c6;--acc:#50b6ff;--bad:#ff6b6b;
  --header:#0e1521;--border:#1b2a42;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;color:var(--txt);font:16px/1.4 system-ui,Segoe UI,Roboto;background:var(--bg);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}

header{
  display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(14,21,33,.85);backdrop-filter: blur(6px);
  border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10;
}
.brand { min-width: 120px; }
.mainnav { display:flex; justify-content:center; align-items:center; }
.navlink{padding:8px 10px;border-radius:8px;color:var(--txt);border:1px solid transparent}
.navlink:hover{background:rgba(80,182,255,.08);border-color:rgba(80,182,255,.2)}
.navlink.active{background:rgba(80,182,255,.15);border-color:rgba(80,182,255,.35)}

.rightnav select { width:auto; min-width:160px; }
.btn{background:#0f2238;border:1px solid var(--border);color:var(--txt);padding:8px 10px;border-radius:8px}
.btn.small{padding:6px 9px;font-size:14px}
.btn:hover{filter:brightness(1.1)}

.dropdown{position:relative}
.dropdown .menu{
  display:none; position:absolute; right:0; top:110%; min-width:220px;
  background:rgba(14,21,33,.95); border:1px solid var(--border); border-radius:10px; padding:6px;
}
.dropdown:hover .menu{display:block}
.menu-item{display:block;padding:8px 10px;border-radius:6px;color:var(--txt)}
.menu-item:hover{background:rgba(80,182,255,.12)}
.menu-item.selected{background:rgba(80,182,255,.2);border:1px solid rgba(80,182,255,.35)}
.muted{color:var(--muted)}

.container{max-width:1000px;margin:24px auto;padding:0 16px}
.card{
  background:rgba(18,26,39,.88);padding:16px;border-radius:12px;border:1px solid var(--border);
}
.card2{
  background:rgba(18,26,39,.88);border-radius:12px;border:1px solid var(--border);padding:16px;
}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

input,button,select{width:100%;padding:10px;border-radius:8px;border:1px solid #2a3e61;background:#0f1724;color:var(--txt)}
button{cursor:pointer}
/* Global shop-style button: match the green 'Buy' buttons used on the shop pages */
.shop-btn { padding:7px 18px; font-size:0.98em; border-radius:6px; background:#00ff99; color:#222b38; border:none; cursor:pointer; font-weight:bold; }
.shop-btn:disabled { background:#444; color:#ccc; cursor:not-allowed; }
.shop-btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(0.98); }
pre{white-space:pre-wrap;background:#0c131e;padding:12px;border-radius:8px;border:1px solid var(--border)}

.list.ledger {margin-top:8px}
.list.ledger .item{
  background:rgba(12,19,30,.7);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:14px;
}

/* === Two-row topbar matching the mock === */
.topbar--two-row {
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
}

.topbar__brand-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: .25rem;
}

.brand-xl {
  font-size: 28px;            /* tune to taste */
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-strong, #e9edf3);
  text-decoration: none;
}

.topbar__nav-row {
  /* 3 columns: [spacer] [centered nav] [right tools] */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}

/* keep center nav centered regardless of right tools width */
.menu--centered {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
}
.menu--centered a {
  text-decoration: none;
}
.menu--centered a.active {
  font-weight: 700;
}

.toolbar-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
}

.wallpaper-form {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.wallpaper-form label.muted {
  opacity: 0.8;
  font-size: 0.9rem;
}

/* optional: tighten top spacing below header if needed */
.container:first-of-type .card.stats {
  margin-top: 0.75rem;
}
.score-green { color: #00ff99; font-weight: bold; }
.score-red { color: #ff4444; font-weight: bold; }

/* Marketplace specific styles (moved from inline view) */
.market-filter-bar { display:flex; align-items:center; gap:18px; margin-bottom:18px; background:linear-gradient(180deg, rgba(22,30,40,0.6), rgba(10,18,28,0.55)); padding:12px; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.35); }
.filter-group { display:flex; gap:12px; align-items:center; white-space:nowrap; flex-wrap:nowrap; }
.filter-label { color:#9fd; font-weight:700; margin-right:6px; font-size:0.95rem; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.filter-select {
  /* standard readable dropdowns: white bg, black text */
  background:#ffffff; color:#000000; border:1px solid rgba(0,0,0,0.12);
  padding:10px 14px; border-radius:10px; min-width:140px;
  box-shadow:none; -webkit-appearance:menulist; appearance:auto;
}
.filter-select option { color:#000; background:#fff; }
.filter-actions { display:flex; gap:8px; align-items:center; }
.filter-reset { display:inline-block; text-decoration:none; background:transparent; border:1px solid rgba(255,255,255,0.06); color:#9fb; padding:8px 14px; border-radius:8px; }
@media (max-width:980px) {
  .market-filter-bar { flex-direction:column; align-items:stretch; gap:10px; }
  .filter-group { width:100%; justify-content:flex-start; white-space:normal; }
  .filter-select { min-width:120px; }
}

/* Prevent global "width:100%" from stretching form controls inside the marketplace top bar */
.market-filter-bar select,
.market-filter-bar input,
.market-filter-bar button {
  width: auto; /* allow flex children to size naturally */
  max-width: 320px; /* avoid extremely wide controls on large screens */
}
.market-filter-bar .filter-group select,
.market-filter-bar .filter-group input {
  min-width: 140px;
}
@media (max-width:980px) {
  /* On small screens, controls should be full-width stacked */
  .market-filter-bar select,
  .market-filter-bar input,
  .market-filter-bar button {
    width: 100%;
    max-width: none;
  }
}

/* Marketplace grid layout: desktop 2-column, mobile collapses to 1 column */
.market-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 100%; /* don't force wider than viewport */
  margin: 36px auto; /* center like inventory */
  padding: 0 16px; /* small side padding to keep content from touching edges on small screens */
  overflow-x: hidden; /* prevent child elements from creating horizontal scroll */
}
/* Allow cards inside the grid to shrink rather than forcing the grid wider */
.market-grid .card, .market-grid .card2 { min-width: 0; }
@media (max-width: 900px) {
  .market-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* Make cards full-width inside the grid on small screens */
  .market-grid .card, .market-grid .card2 {
    width: 100%;
  }
}

/* Ensure tables inside cards don't force page width on mobile; allow horizontal scrolling inside the card */
.card table {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.card table th, .card table td {
  text-overflow: ellipsis;
}
/* Make tables block-scrollable only on small screens to avoid layout shifts on desktop */
@media (max-width: 900px) {
  .card table { display: block; }
  .card table th, .card table td { white-space: nowrap; overflow: hidden; }
}

/* Listings polish */
.market-listing-row:hover { background: rgba(255,255,255,0.02); }
.rarity-badge { padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.92em; color:#081; display:inline-block; }
.rarity-common { background: rgba(255,255,255,0.03); color:#e7eefc; }
.rarity-rare { background: rgba(79,195,247,0.12); color:#4fc3f7; }
.rarity-epic { background: rgba(162,89,255,0.12); color:#a259ff; }
.rarity-legendary { background: rgba(255,215,0,0.12); color:#ffd700; }
.market-buy-btn { background: linear-gradient(180deg,#00ff99,#00d17a); color:#072; border:none; padding:8px 12px; border-radius:8px; font-weight:800; cursor:pointer; }
.market-buy-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.25); }
.filter-label .icon { margin-right:8px; opacity:0.9; }
/* Pagination */
.nav-page { display:inline-block; padding:8px 10px; border-radius:6px; background:rgba(15,22,36,0.7); color:var(--txt); text-decoration:none; border:1px solid var(--border); }
.nav-page:hover { background:rgba(80,182,255,0.06); }