:root {
  --bg: #ebe5d7;
  --bg-deep: #ddd2bc;
  --panel: rgba(255, 250, 240, 0.9);
  --panel-strong: #fff7ea;
  --ink: #000000;
  --muted: #000000;
  --accent: #9f3c20;
  --accent-dark: #7d2710;
  --line: rgba(33, 27, 22, 0.12);
  --shadow: 0 18px 40px rgba(51, 35, 21, 0.12);
  --white: #d6d7dc;
  --green: #3fbf60;
  --blue: #2f7dff;
  --purple: #8f52ff;
  --gold: #e7b82f;
  --red: #e14848;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(circle at top left, rgba(159, 60, 32, 0.18), transparent 28%),
    radial-gradient(circle at top right, rgba(231, 184, 47, 0.16), transparent 24%),
    linear-gradient(180deg, var(--bg) 0%, #f3ecdf 45%, var(--bg-deep) 100%);
  min-height: 100vh;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  padding: 24px 28px;
  border-radius: 26px;
  background: var(--panel);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
}

.topbar h1 {
  margin: 0;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1;
}

.topbar-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  min-width: 360px;
}

.stat-card,
.panel,
.info-block,
.surface-card,
.map-card,
.role-card,
.tool-card,
.bidder-card,
.item-card,
.shop-card,
.warehouse-card,
.doc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.stat-card {
  padding: 16px;
}

.stat-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.stat-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.nav-btn,
.pill-btn,
.primary-btn,
.secondary-btn,
.tool-use-btn,
.action-btn {
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--ink);
  transition: 0.2s ease;
}

.nav-btn.is-active,
.primary-btn,
.action-btn {
  background: var(--accent);
  color: #fff;
}

.nav-btn:hover,
.pill-btn:hover,
.primary-btn:hover,
.secondary-btn:hover,
.tool-use-btn:hover,
.action-btn:hover {
  transform: translateY(-1px);
}

.main-grid {
  display: block;
}

.view-section {
  display: none;
}

.view-section.is-active {
  display: block;
}

.panel {
  padding: 22px;
}

.section-title {
  margin: 0 0 14px;
  font-size: 26px;
}

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

.home-grid,
.setup-grid,
.shop-grid,
.warehouse-grid,
.docs-grid {
  display: grid;
  gap: 18px;
}

.home-grid {
  grid-template-columns: 1.1fr 0.9fr;
}

.setup-grid {
  grid-template-columns: 1fr;
}

.split-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.map-grid,
.role-grid,
.tool-grid,
.shop-grid,
.warehouse-grid,
.docs-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.map-card,
.role-card,
.tool-card,
.bidder-card,
.item-card,
.shop-card,
.warehouse-card,
.doc-card,
.surface-card {
  padding: 18px;
}

.map-card.is-selected,
.role-card.is-selected,
.tool-card.is-selected {
  outline: 3px solid rgba(159, 60, 32, 0.35);
  background: var(--panel-strong);
}

.map-card h3,
.role-card h3,
.tool-card h3,
.shop-card h3,
.warehouse-card h3,
.doc-card h3,
.item-card h4,
.bidder-card h3,
.surface-card h3 {
  margin: 0 0 8px;
}

.meta-line,
.small-line {
  color: var(--muted);
  font-size: 14px;
}

.badge-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.badge,
.quality-chip,
.state-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.75);
}

.quality-white { background: var(--white); color: #111; }
.quality-green { background: var(--green); color: #fff; }
.quality-blue { background: var(--blue); color: #fff; }
.quality-purple { background: var(--purple); color: #fff; }
.quality-gold { background: var(--gold); color: #111; }
.quality-red { background: var(--red); color: #fff; }

.auction-layout {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 320px;
  gap: 18px;
}

.info-column,
.board-column,
.side-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.info-block {
  padding: 18px;
}

.log-list {
  display: grid;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
}

.log-item {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.58);
  border: 1px solid var(--line);
  font-size: 14px;
}

.auction-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.hero-kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kpi {
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.62);
  border: 1px solid var(--line);
}

.knowledge-board {
  min-height: 360px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(238,228,210,0.9));
  border-radius: 24px;
  border: 1px dashed rgba(33, 27, 22, 0.2);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  align-content: start;
}

.empty-board {
  grid-column: 1 / -1;
  min-height: 260px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-radius: 20px;
  border: 1px dashed var(--line);
  background: rgba(255,255,255,0.35);
}

.item-card .shape,
.reveal-shape {
  display: grid;
  gap: 3px;
  justify-content: start;
  margin-top: 10px;
}

.cell {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
}

.cell.unknown {
  background: rgba(255,255,255,0.2);
  border-style: dashed;
}

.bidder-list {
  display: grid;
  gap: 12px;
}

.bidder-card.leading {
  outline: 3px solid rgba(159, 60, 32, 0.35);
}

.actions-panel {
  display: grid;
  gap: 16px;
}

.bid-box {
  display: grid;
  gap: 10px;
}

.inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

input[type="number"] {
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.85);
}

.tool-list {
  display: grid;
  gap: 12px;
}

.tool-card.used {
  opacity: 0.55;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.settlement-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
}

.summary-list {
  display: grid;
  gap: 10px;
}

.money-positive {
  color: #0f8a3f;
}

.money-negative {
  color: #a92121;
}

.footer-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 1200px) {
  .auction-layout,
  .settlement-grid,
  .home-grid,
  .split-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-stats {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 16px;
  }

  .topbar,
  .panel,
  .info-block,
  .surface-card,
  .map-card,
  .role-card,
  .tool-card,
  .bidder-card,
  .shop-card,
  .warehouse-card,
  .doc-card {
    border-radius: 18px;
  }
}

/* v2 layout overrides */
.topbar {
  background: linear-gradient(135deg, rgba(18, 24, 28, 0.82), rgba(30, 40, 48, 0.72));
  color: #fff;
}
.topbar .eyebrow,
.topbar .stat-card span {
  color: rgba(255,255,255,0.72);
}
.topbar .stat-card {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.main-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 10px 0;
  backdrop-filter: blur(12px);
}
.proto-cta { margin-top: 16px; }
.stage-map-panel,
.role-stage-panel,
.config-stage-panel,
.player-track-panel,
.info-stage-panel,
.bid-stage-panel,
.blind-box-panel,
.settlement-summary-panel,
.settlement-items-panel {
  background: rgba(17, 21, 27, 0.72);
  color: #fff;
  border-color: rgba(255,255,255,0.08);
}
.stage-map-panel .muted,
.role-stage-panel .muted,
.config-stage-panel .muted,
.player-track-panel .muted,
.info-stage-panel .muted,
.bid-stage-panel .muted,
.blind-box-panel .muted,
.settlement-summary-panel .muted,
.settlement-items-panel .muted,
.stage-map-panel .meta-line,
.role-stage-panel .meta-line,
.config-stage-panel .meta-line,
.player-track-panel .meta-line,
.bid-stage-panel .meta-line,
.settlement-items-panel .meta-line {
  color: rgba(255,255,255,0.68);
}
.map-node-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.map-node { min-height:190px; background:rgba(255,255,255,0.06); }
.setup-hero-layout { display:grid; grid-template-columns:1.2fr 0.8fr; gap:18px; margin-top:18px; }
.role-stage-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.tool-select-surface { margin-top:16px; background:rgba(255,255,255,0.06); }
.compact-tool-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.setup-actions { margin-top:18px; }
.auction-screen { display:grid; grid-template-columns:300px 1fr 420px; gap:18px; }
.auction-left-column,.auction-center-column,.auction-right-column { display:flex; flex-direction:column; gap:18px; }
.compact-header { align-items:flex-start; }
.track-list { display:grid; gap:12px; }
.track-card { background:rgba(255,255,255,0.06); }
.track-row { display:grid; grid-template-columns:42px repeat(5,1fr); gap:6px; margin-top:8px; }
.track-label,.track-value { display:grid; place-items:center; min-height:32px; border-radius:10px; background:rgba(255,255,255,0.08); font-size:12px; }
.track-tool { font-size:11px; line-height:1.2; padding:2px 4px; }
.info-stage-list { display:grid; gap:10px; max-height:540px; overflow:auto; }
.private-log { background:rgba(67,130,255,0.14); }
.bid-stage-grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:18px; }
.bid-entry-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding:18px; }
.bid-entry-card input { background:rgba(255,255,255,0.94); color:#111; }
.tool-side-list { display:grid; gap:12px; }
.blind-box-scroll { height:760px; overflow-y:auto; overflow-x:hidden; padding-right:4px; }
.blind-box-grid { position:relative; min-height:760px; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(30,24px); gap:2px; padding:8px; background:linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px), rgba(255,255,255,0.03); background-size:calc(100% / 10) calc(100% / 30), calc(100% / 10) calc(100% / 30), auto; border-radius:18px; }
.empty-box-tip { grid-column:1 / -1; grid-row:1 / span 8; display:grid; place-items:center; color:rgba(255,255,255,0.62); border:1px dashed rgba(255,255,255,0.18); border-radius:16px; }
.blind-box-item,.blind-box-token { border-radius:8px; border:1px solid rgba(255,255,255,0.28); background:rgba(255,255,255,0.18); }
.blind-box-item.outline-only { background:rgba(255,255,255,0.12); box-shadow:inset 0 0 0 2px rgba(255,255,255,0.45); }
.blind-box-token { min-width:20px; min-height:20px; }
.token-unknown { background:rgba(255,255,255,0.2); }
.settlement-photo-layout { grid-template-columns:0.72fr 1.28fr; }
.settlement-number-list .log-item { font-size:16px; }
.settlement-sell-surface { margin-top:18px; background:rgba(255,255,255,0.06); }
.quality-checkboxes label { color:#fff; }
.settlement-item-grid { grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.settlement-item-card { min-height:120px; }
.warehouse-text-preview { margin:12px 0; color:var(--muted); }
@media (max-width: 1280px) {
  .auction-screen,.setup-hero-layout,.bid-stage-grid,.settlement-photo-layout { grid-template-columns:1fr; }
  .blind-box-scroll { height:520px; }
}

.public-log { background: rgba(255,255,255,0.08); }
.blind-box-token-tray { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:8px 10px; margin-bottom:6px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px dashed rgba(255,255,255,0.14); }
.tray-label { color: rgba(255,255,255,0.62); font-size: 12px; margin-right: 8px; }
.blind-box-token-tray .blind-box-token { position: relative; min-width: 18px; min-height: 18px; }


.info-stage-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.info-subpanel {
  min-height: 0;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 250, 240, 0.62);
  border: 1px solid rgba(33, 27, 22, 0.08);
}

.mini-title {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.info-stage-list {
  display: grid;
  gap: 10px;
  max-height: 280px;
  overflow: auto;
  padding-right: 4px;
}

.public-log {
  background: rgba(231, 184, 47, 0.14);
  border-color: rgba(159, 60, 32, 0.14);
}

.private-log {
  background: rgba(47, 125, 255, 0.08);
  border-color: rgba(47, 125, 255, 0.12);
}

.blind-box-panel .hero-kpis {
  justify-content: flex-end;
}

.blind-box-token-tray {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

.tray-label {
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.blind-box-token-tray .blind-box-token {
  position: relative;
  min-width: 18px;
  min-height: 18px;
}

@media (max-width: 1180px) {
  .info-stage-columns {
    grid-template-columns: 1fr;
  }
}


body,
.panel,
.info-block,
.surface-card,
.map-card,
.role-card,
.tool-card,
.bidder-card,
.item-card,
.shop-card,
.warehouse-card,
.doc-card,
.kpi,
.meta-line,
.small-line,
.muted,
.log-item,
.tray-label,
.footer-note,
.stat-card span {
  color: #000;
}


.role-card h3,
.role-card .meta-line,
.tool-card h3,
.tool-card .meta-line,
.shop-card h3,
.shop-card .meta-line,
.config-stage-panel h3,
.config-stage-panel .muted,
.tool-select-surface h3,
.tool-select-surface .muted {
  color: #000 !important;
}

.blind-box-item.quality-white,
.blind-box-token.quality-white {
  background: #f3f3f3 !important;
  border-color: rgba(0, 0, 0, 0.28) !important;
}

.blind-box-item.quality-green,
.blind-box-token.quality-green {
  background: var(--green) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.blind-box-item.quality-blue,
.blind-box-token.quality-blue {
  background: var(--blue) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.blind-box-item.quality-purple,
.blind-box-token.quality-purple {
  background: var(--purple) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.blind-box-item.quality-gold,
.blind-box-token.quality-gold {
  background: var(--gold) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.blind-box-item.quality-red,
.blind-box-token.quality-red {
  background: var(--red) !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}

.blind-box-item.outline-only {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}


.settlement-loading-card {
  background: rgba(255, 250, 240, 0.88);
}

.settlement-item-top {
  display: flex;
  gap: 14px;
  align-items: center;
}

.settlement-outline-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  min-height: 84px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px dashed rgba(0, 0, 0, 0.16);
}

.settlement-outline-grid {
  display: grid;
  gap: 2px;
  align-content: center;
  justify-content: center;
}

.settlement-outline-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
}

.settlement-outline-grid.outline-only .settlement-outline-cell,
.settlement-outline-cell.outline-only {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.55) !important;
}

.settlement-outline-grid.quality-white .settlement-outline-cell,
.settlement-outline-cell.quality-white {
  background: #f3f3f3 !important;
}

.settlement-outline-grid.quality-green .settlement-outline-cell,
.settlement-outline-cell.quality-green {
  background: var(--green) !important;
}

.settlement-outline-grid.quality-blue .settlement-outline-cell,
.settlement-outline-cell.quality-blue {
  background: var(--blue) !important;
}

.settlement-outline-grid.quality-purple .settlement-outline-cell,
.settlement-outline-cell.quality-purple {
  background: var(--purple) !important;
}

.settlement-outline-grid.quality-gold .settlement-outline-cell,
.settlement-outline-cell.quality-gold {
  background: var(--gold) !important;
}

.settlement-outline-grid.quality-red .settlement-outline-cell,
.settlement-outline-cell.quality-red {
  background: var(--red) !important;
}

.settlement-item-meta {
  display: grid;
  gap: 6px;
}

.settlement-item-meta h4 {
  margin: 0;
}

.loading-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.18);
  border-top-color: rgba(0, 0, 0, 0.72);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.settlement-box-scroll {
  max-height: 860px;
  overflow-y: auto;
  padding-right: 6px;
}

.settlement-box-grid {
  min-height: 1320px;
}

.settlement-box-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.24);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.settlement-box-item.outline-only {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

.settlement-box-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.08);
}

.settlement-box-content {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 6px;
}

.settlement-box-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  color: #000;
  word-break: break-all;
}

.settlement-box-price {
  font-size: 10px;
  color: #000;
}

.warehouse-actions {
  margin-top: 14px;
}

.quality-checkboxes {
  gap: 10px;
}

.quality-checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(159, 60, 32, 0.12);
  color: #000;
}

.quality-checkboxes input {
  margin: 0;
}