:root {
  --bg: #060910;
  --panel: #101722;
  --panel-2: #151f2d;
  --border: #2c3b50;
  --text: #f5d96b;
  --muted: #9ca8b8;
  --purple: #b64cff;
  --gold: #f1c232;
  --red: #a61919;
  --green: #2f8f5b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(51, 89, 138, .35), transparent 34rem),
    linear-gradient(180deg, #08101a, var(--bg));
}

button, input, textarea { font: inherit; }

button {
  border: 1px solid #71120f;
  background: linear-gradient(#bd1e18, #6b0c0a);
  color: #ffdb55;
  padding: .7rem 1rem;
  border-radius: .5rem;
  cursor: pointer;
  font-weight: 800;
}

button:hover { filter: brightness(1.12); }

button.secondary {
  border-color: var(--border);
  background: linear-gradient(#27374c, #121923);
  color: #e8f0ff;
}

button.success {
  border-color: #45b173;
  background: linear-gradient(#3b9d68, #1d5f3c);
  color: white;
}

button.danger {
  background: linear-gradient(#a52525, #540909);
}

input, textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: #05070b;
  color: #ffe47a;
  border-radius: .5rem;
  padding: .7rem;
}

textarea {
  resize: vertical;
  color: #e8f0ff;
}

h1, h2, h3, p { margin: 0; }

p, .label, small { color: var(--muted); }

.shell {
  width: min(1440px, 96vw);
  margin: 0 auto;
  padding: 1rem 0 2rem;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  background: rgba(5, 8, 13, .9);
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 0 0 30px rgba(0,0,0,.35);
}

.top-actions {
  display: flex;
  align-items: end;
  gap: .8rem;
}

.player-name {
  width: min(330px, 55vw);
}

.status-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .75rem;
  margin: 1rem 0;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  background: rgba(16, 23, 34, .85);
  border-radius: .8rem;
}

.status-bar span {
  padding: .45rem .6rem;
  border: 1px solid rgba(44, 59, 80, .7);
  border-radius: .55rem;
  background: rgba(5, 7, 11, .55);
}

.empty-state {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 360px;
  padding: 2rem;
  border: 1px dashed var(--border);
  border-radius: 1rem;
  background: rgba(16, 23, 34, .55);
}

.empty-state h2 {
  margin-bottom: .5rem;
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: .9rem;
}

.item-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: .8rem;
  min-height: 210px;
  border: 1px solid #2a3648;
  border-radius: .95rem;
  background: linear-gradient(180deg, rgba(14, 19, 28, .96), rgba(5, 7, 11, .96));
  padding: .9rem;
  overflow: hidden;
}

.item-card.sold {
  border-color: #775a12;
  background: linear-gradient(180deg, rgba(54, 38, 9, .88), rgba(8, 7, 5, .96));
}

.item-card.expiring {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(166, 25, 25, .25);
}

.item-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 2px solid #647899;
  border-radius: .6rem;
  color: white;
  font-weight: 900;
  background-color: #111827;
  background-size: cover;
  background-position: center;
  text-shadow: 0 1px 2px #000;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 14px rgba(0,0,0,.4);
}

.item-icon.quality-epic { border-color: #a335ee; }
.item-icon.quality-rare { border-color: #0070dd; }
.item-icon.quality-uncommon { border-color: #1eff00; }
.item-icon.quality-legendary { border-color: #ff8000; }

.quality-text-epic { color: #a335ee !important; }
.quality-text-rare { color: #0070dd !important; }
.quality-text-uncommon { color: #1eff00 !important; }
.quality-text-legendary { color: #ff8000 !important; }

.item-title {
  color: var(--purple);
  font-weight: 900;
  line-height: 1.2;
}

.item-note {
  margin: .2rem 0 .7rem;
  color: var(--muted);
  font-size: .92rem;
}

.bid-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  margin-bottom: .75rem;
}

.top-bid {
  display: block;
  font-size: 1.35rem;
}

.top-bidder {
  display: block;
}

.timer {
  min-width: 64px;
  text-align: center;
  padding: .45rem .5rem;
  border: 1px solid var(--border);
  border-radius: .55rem;
  background: #05070b;
  color: white;
  font-weight: 900;
  font-size: .95rem;
}

.bid-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: .5rem;
  align-items: stretch;
}

dialog {
  width: min(980px, 96vw);
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

dialog::backdrop {
  background: rgba(0,0,0,.72);
}

.admin-modal {
  padding: 1rem;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel {
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: rgba(5, 8, 13, .5);
  padding: 1rem;
}

.hidden { display: none; }

.message {
  margin-top: .6rem;
  min-height: 1.3rem;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: .75rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: .8rem 0;
}

.admin-items {
  display: grid;
  gap: .55rem;
}

.admin-item {
  display: grid;
  grid-template-columns: 1fr 110px auto auto;
  gap: .5rem;
  align-items: end;
  padding: .65rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--panel-2);
}

.admin-item strong {
  color: var(--purple);
}

@media (max-width: 850px) {
  .topbar, .top-actions, .modal-header {
    flex-direction: column;
    align-items: stretch;
  }

  .player-name {
    width: 100%;
  }

  .settings-grid,
  .admin-item {
    grid-template-columns: 1fr;
  }
}

.bid-input {
  min-height: 52px;
  font-size: 1.3rem;
  font-weight: 800;
}

.bid-btn {
  min-height: 52px;
}


/* v1.6 compact bid layout override */
.item-content {
  min-width: 0;
}

.bid-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: .5rem;
  align-items: stretch;
}

.bid-input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  font-size: 1.15rem;
  font-weight: 800;
  padding: .55rem .65rem;
}

.bid-btn {
  min-height: 48px;
  padding: .55rem .65rem;
}

.item-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-bid {
  font-size: 1.25rem;
}

/* Wider cards so the input and Bid button do not overflow. */
.items-grid {
  grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
}


/* v1.8 Tempest Keep loot picker */
.loot-tabs { display: flex; gap: .5rem; margin-bottom: .55rem; }
.loot-tab { border-color: #3b4f6a; background: linear-gradient(#27374c, #121923); color: #e8f0ff; }
.loot-tab.active { border-color: #a335ee; color: #fff; box-shadow: 0 0 0 1px rgba(163, 53, 238, .35); }
.loot-picker-panel { border: 1px solid var(--border); border-radius: .85rem; background: rgba(5, 8, 13, .5); overflow: hidden; }
.loot-picker-header { display: grid; gap: .15rem; padding: .75rem .85rem; border-bottom: 1px solid var(--border); background: rgba(18, 40, 22, .6); }
.loot-picker { max-height: 330px; overflow-y: auto; padding: .6rem; }
.loot-boss-section { border: 1px solid rgba(44, 59, 80, .8); border-radius: .7rem; overflow: hidden; margin-bottom: .65rem; background: rgba(10, 14, 21, .8); }
.loot-boss-header { width: 100%; display: flex; justify-content: space-between; border: 0; border-radius: 0; background: rgba(18, 40, 22, .9); color: #fff; padding: .65rem .75rem; text-align: left; }
.loot-boss-header small { color: #b9c5d4; }
.loot-boss-body.collapsed { display: none; }
.loot-row { display: grid; grid-template-columns: 20px 24px minmax(180px, 1fr) 130px 90px 58px; align-items: center; gap: .45rem; padding: .45rem .55rem; border-top: 1px solid rgba(44, 59, 80, .45); color: #dfe9f7; }
.loot-row:hover { background: rgba(163, 53, 238, .08); }
.loot-row input[type="checkbox"] { width: 16px; height: 16px; }
.loot-icon { width: 22px; height: 22px; display: inline-block; border: 1px solid #647899; border-radius: .2rem; background-size: cover; background-position: center; }
.loot-name { color: #a335ee; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loot-type, .loot-slot { color: #dfe9f7; font-size: .9rem; }
.loot-quantity { width: 58px; min-height: 30px; padding: .25rem .35rem; text-align: center; }
.loot-quantity-placeholder { width: 58px; }
@media (max-width: 850px) { .loot-row { grid-template-columns: 20px 24px minmax(0, 1fr) 58px; } .loot-type, .loot-slot { display: none; } }


/* v1.9 admin item controls */
.admin-item {
  grid-template-columns: minmax(180px, 1fr) 110px auto auto auto;
}

.admin-item .restart-item {
  white-space: nowrap;
}

@media (max-width: 850px) {
  .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.0 player filter and bid status */
.player-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin: 1rem 0;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: rgba(16, 23, 34, .85);
}

.filter-button {
  border-color: var(--border);
  background: linear-gradient(#27374c, #121923);
  color: #e8f0ff;
}

.filter-button.active {
  border-color: #37b46e;
  box-shadow: 0 0 0 1px rgba(55, 180, 110, .45);
  color: #ffffff;
}

.filter-summary {
  color: #b9c5d4;
  margin-left: auto;
}

.item-card.hidden-by-filter {
  display: none;
}

.item-card.player-bid-item {
  border-color: #37b46e;
  box-shadow: 0 0 0 2px rgba(55, 180, 110, .2);
}

.item-card.player-outbid-item {
  animation: outbidPulse 1s ease-in-out infinite;
}

@keyframes outbidPulse {
  0%, 100% {
    border-color: #37b46e;
    box-shadow: 0 0 0 2px rgba(55, 180, 110, .2);
  }
  50% {
    border-color: #ff3838;
    box-shadow: 0 0 0 3px rgba(255, 56, 56, .45);
  }
}


/* v2.1 hidden items, custom tooltip, compact actions */
.item-card {
  position: relative;
}

.hide-item-btn {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 3;
  width: 34px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border-color: rgba(44, 59, 80, .9);
  background: rgba(5, 7, 11, .82);
  color: #e8f0ff;
  font-size: .95rem;
}

.hidden-item-card {
  opacity: .55;
}

.item-tooltip {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: .15rem;
  min-width: 210px;
  max-width: 310px;
  padding: .65rem .75rem;
  border: 1px solid #647899;
  border-radius: .45rem;
  background: rgba(4, 7, 18, .97);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  pointer-events: none;
  font-size: .9rem;
}

.item-tooltip.hidden {
  display: none;
}

.item-tooltip span {
  color: #dfe9f7;
}

.filter-summary {
  white-space: nowrap;
}

@media (max-width: 850px) {
  .filter-summary {
    margin-left: 0;
  }
}


/* v2.2 admin stability, filter display, tooltip details */
.gold-amount {
  color: #f5d96b;
  font-weight: 900;
}

.tooltip-yellow {
  color: #ffd84c !important;
}

.tooltip-green {
  color: #1eff00 !important;
}

.tooltip-muted {
  color: #9ca8b8 !important;
}

.loot-boss-body.collapsed {
  display: none !important;
}


/* v2.3 loot picker selection stability */
.loot-row:has(.loot-check:checked) {
  background: rgba(55, 180, 110, .12);
  outline: 1px solid rgba(55, 180, 110, .35);
}


/* v2.4 button audit */
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}


/* v2.5 session logs and finish flow */
.session-logs-list {
  display: grid;
  gap: .55rem;
  max-height: 420px;
  overflow-y: auto;
}

.session-log-row {
  width: 100%;
  text-align: left;
}

.admin-item {
  grid-template-columns: minmax(180px, 1fr) 110px auto auto auto auto;
}

@media (max-width: 850px) {
  .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.6 admin modal fallback */
dialog[open] {
  display: block;
}


/* v2.8 tooltip stability */
.item-tooltip {
  pointer-events: auto;
  max-width: 320px;
}


/* v2.9 tooltip render stability */
.item-tooltip {
  z-index: 99999;
  pointer-events: auto;
}


/* v2.14 card icons from Wowhead XML cache */
.item-icon {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* v2.15 online players and name/bid safety */
.content-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.online-players-panel {
  position: sticky;
  top: 1rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: rgba(16, 23, 34, .85);
  padding: .8rem;
}

.online-header {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .65rem;
  color: #fff;
}

.online-header span {
  color: #f5d96b;
  font-weight: 900;
}

.online-players-list {
  display: grid;
  gap: .35rem;
  max-height: 360px;
  overflow-y: auto;
}

.online-player-row {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .38rem .45rem;
  border: 1px solid rgba(44, 59, 80, .55);
  border-radius: .45rem;
  background: rgba(5, 7, 11, .5);
}

.online-player-row small {
  color: #f5d96b;
}

.muted {
  color: #9ca8b8;
}

#playerName.locked {
  opacity: .85;
  border-color: #37b46e;
}

.bid-input.invalid-bid {
  border-color: #ff3838 !important;
  box-shadow: 0 0 0 2px rgba(255, 56, 56, .18);
}

@media (max-width: 950px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .online-players-panel {
    position: static;
  }
}


/* v2.16 SSC loot picker + session recap */
.session-recap-list {
  display: grid;
  gap: .85rem;
  max-height: 520px;
  overflow-y: auto;
}

.recap-player-section {
  border: 1px solid rgba(44, 59, 80, .8);
  border-radius: .7rem;
  overflow: hidden;
  background: rgba(10, 14, 21, .8);
}

.recap-player-section h3 {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: .65rem .75rem;
  background: rgba(18, 40, 22, .9);
  color: #fff;
}

.recap-player-section h3 span {
  color: #f5d96b;
}

.recap-items {
  display: grid;
}

.recap-item-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .75rem;
  border-top: 1px solid rgba(44, 59, 80, .45);
}

.recap-item-row strong {
  color: #f5d96b;
  white-space: nowrap;
}


/* v2.19 create auction busy state */
#createAuctionBtn:disabled {
  opacity: .65;
  cursor: wait;
}


/* v2.22 card icon loading state */
.item-icon.icon-loading {
  background-color: #05070b;
}


/* v2.23 shared icon resolver */
.item-icon,
.loot-icon {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* v2.24 bidding card icon hardening */
.item-icon {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.item-icon.icon-loading {
  background-color: #05070b;
}


/* v2.25 hard reset for bidding card icons */
.item-card .item-icon {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #05070b;
}

.item-card .item-icon::before,
.item-card .item-icon::after {
  display: none !important;
  content: none !important;
}

.item-card .item-icon span {
  display: none !important;
}


/* v2.26 bidding card icons use <img>, not background, to prevent fallback overwrite */
.item-card .item-icon {
  background-image: none !important;
  overflow: hidden;
  display: block;
  position: relative;
}

.item-card .item-icon .card-icon-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: .45rem;
  pointer-events: none;
}

.item-card .item-icon span:not(.card-icon-img) {
  display: none !important;
}


/* v2.31 admin item min bid live settings */
.admin-item-min-bid-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}


/* v2.32 admin min bid without save button */
.admin-item-min-bid-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}


/* v2.33 stable admin item start bid rows */
.admin-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: .75rem;
  align-items: center;
}

.admin-item-start-bid {
  display: grid;
  gap: .25rem;
}

.admin-item-start-bid span {
  color: #f5d96b;
  font-size: .85rem;
}

.admin-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

@media (max-width: 850px) {
  .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.38 stable admin flow */
.admin-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: .75rem;
  align-items: center;
}

.admin-item-start-bid {
  display: grid;
  gap: .25rem;
}

.admin-item-start-bid span {
  color: #f5d96b;
  font-size: .85rem;
}

.admin-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.admin-item-min-bid-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

@media (max-width: 850px) {
  .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.40 admin imported items controls */
.admin-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: .75rem;
  align-items: center;
}

.admin-item-start-bid {
  display: grid;
  gap: .25rem;
}

.admin-item-start-bid span {
  color: #f5d96b;
  font-size: .85rem;
}

.admin-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.admin-item-min-bid-input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

@media (max-width: 850px) {
  .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.41 imported items panel */
#adminItems {
  display: block;
  min-height: 40px;
}

#adminItems .admin-item {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: .75rem;
  align-items: center;
  margin-bottom: .6rem;
}

#adminItems .admin-item-start-bid {
  display: grid;
  gap: .25rem;
}

#adminItems .admin-item-start-bid span {
  color: #f5d96b;
  font-size: .85rem;
}

#adminItems .admin-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

@media (max-width: 850px) {
  #adminItems .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.42 hard imported items mount */
#importedItemsSection,
.imported-items-section {
  display: block !important;
  margin-top: 1rem;
}

#adminItemsDebug {
  display: block;
  margin: .4rem 0 .6rem;
  color: #f5d96b;
  font-size: .9rem;
}

#adminItems {
  display: block !important;
  min-height: 48px;
  visibility: visible !important;
}

#adminItems .admin-item {
  display: grid !important;
  grid-template-columns: minmax(180px, 1fr) 130px auto;
  gap: .75rem;
  align-items: center;
  margin-bottom: .6rem;
  padding: .65rem;
  border: 1px solid rgba(120, 170, 220, .28);
  border-radius: .75rem;
  background: rgba(14, 24, 38, .92);
}

#adminItems .admin-item-start-bid {
  display: grid;
  gap: .25rem;
}

#adminItems .admin-item-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

@media (max-width: 850px) {
  #adminItems .admin-item {
    grid-template-columns: 1fr;
  }
}


/* v2.43 imported row visibility */
#adminItems .admin-item {
  min-height: 64px;
  color: var(--text, #e8f0ff);
  opacity: 1 !important;
}

#adminItems .admin-item-main,
#adminItems .admin-item-start-bid,
#adminItems .admin-item-actions {
  visibility: visible !important;
  opacity: 1 !important;
}

#adminItems .error {
  color: #ff6b6b;
  font-weight: 700;
}