body {

  font-family: Arial, sans-serif;

  background: #ffffff;

  color: #eee;

  margin: 0;

  padding: 0;

}

#searchInput {

  width: 300px;

  padding: 10px 12px;

  margin: 15px;

  border-radius: 8px;

  border: 2px solid #444;

  background: #222;

  color: #eee;

  font-size: 16px;

  transition: all 0.3s ease;

}

#searchInput:focus {

  border-color: #ff9c00;

  outline: none;

  box-shadow: 0 0 10px #ff9c00;

}

#imageContainer {

  display: flex;

  flex-wrap: wrap;

  padding: 10px;

  justify-content: flex-start;

}

#vanta-bg {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

}

#content {

  position: relative;

  z-index: 1; /* keeps your UI above the effect */

}



#imageContainer img {

  max-width: 150px;

  max-height: 150px;

  width: auto;

  height: auto;

  margin: 6px;

  cursor: pointer;

  border-radius: 10px;

  border: 2px solid transparent;

  transition: all 0.3s ease;

  object-fit: contain;

}

#imageContainer img:hover {

  transform: scale(1.15);

  border-color: #ff9c00;

  box-shadow: 0 4px 12px rgba(255, 156, 0, 0.5);

}

#resultbox {

  display: none;

  position: fixed;

  top: 10%;

  left: 5%;

  right: 5%;

  max-height: 80%;

  overflow: auto;

  background: #1c1c1c;

  color: #eee;

  padding: 20px;

  border: 3px solid #ff9c00;

  border-radius: 12px;

  z-index: 10001;

  box-shadow: 0 10px 25px rgba(0,0,0,0.7);

}

.itemsTable td img {

  max-width: 50px;

  max-height: 50px;

  width: auto;

  height: auto;

  border-radius: 6px;

  margin: 2px 0;

  transition: transform 0.2s ease;

  object-fit: contain;

}

.itemsTable th, .itemsTable td {

  border: 1px solid #444;

  padding: 8px;

  text-align: left;

  transition: all 0.2s ease;

}

.itemsTable th {

  cursor: pointer;

  background: #222;

  color: #ff9c00;

  position: sticky;

  top: 0;

}

.itemsTable th:hover {

  background: #ff9c00;

  color: #111;

  text-shadow: 0 0 3px #000;

}

.itemsTable tr:nth-child(even) {

  background: #1a1a1a;

}

.itemsTable tr:hover {

  background: #333;

  color: #ff9c00;

  transform: scale(1.01);

}

.itemsTable td img:hover {

  transform: scale(1.2);

  box-shadow: 0 2px 8px rgba(255, 156, 0, 0.5);

}

.floating-image {

  position: absolute;

  user-select: none;

  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;

  border: 6px solid transparent;

  border-radius: 10px;

  max-width: 150px;

  object-fit: contain;

}

.floating-image:hover {

  transform: scale(1.1);

  border-color: #ff9c00;

  box-shadow: 0 6px 20px rgba(255,156,0,0.6);

}

.enlarged-image img {

  max-width: 400px;

  max-height: 400px;

  width: auto;

  height: auto;

  background-color: black;

  border-radius: 10px;

  object-fit: contain;

}

#closeResultBox {

  display:block;

  cursor:pointer;

  position:absolute;

  top:0;

  right:10px;

  margin:1%;

  padding:4px;

  background-color:#ffffffba;

  border-radius:8px;

  font-size:20px;

  font-weight:bold;

  z-index:10002;

  border:2px solid black;

  box-shadow:2px 2px 4px rgba(0,0,0,0.5);

  transition: all 0.2s ease;

}

#closeResultBox:hover {

  background-color: #ff9c00;

  color: #111;

  transform: scale(1.1);

}



#content {

  position: relative;

  z-index: 1;

}

.item-tooltip {

  position: absolute;

  background: rgba(20, 20, 20, 0.95);

  color: #eee;

  padding: 10px;

  border-radius: 8px;

  border: 2px solid #ff9c00;

  max-width: 300px;

  font-size: 14px;

  z-index: 10002;

  pointer-events: none;

  display: none;

  box-shadow: 0 5px 15px rgba(0,0,0,0.5);

}

.item-tooltip img {

  max-width: 60px;

  max-height: 60px;

  object-fit: contain;

  display: block;

  margin-bottom: 6px;

}

.item-tooltip strong {

  color: #ff9c00;

}

#filterControls {

  position: fixed;

  top: 100px;

  left: 20%;

  z-index: 10010;

  padding: 10px;

  border-radius: 10px;

  display: flex;

  align-items: center;

  gap: 10px;

  background:#e1bea661;

}

#filterControls input, #filterControls select, #filterControls button {

  background: #222;

  color: #eee;

  border: 2px solid #444;

  border-radius: 6px;

  padding: 6px 8px;

  font-size: 14px;

  transition: all 0.2s ease;

}

#filterControls input:focus, #filterControls select:focus {

  border-color: #ff9c00;

  outline: none;

  box-shadow: 0 0 6px #ff9c00;

}

#filterControls button {

  cursor: pointer;

}

#filterControls button:hover {

  color: #111;

  transform: scale(1.05);

}

#dragHandle {

  cursor: grab;

  user-select: none;

  margin-right: 6px;


}

#dragHandle:active {

  cursor: grabbing;

}