* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

body {
    height: 100vh;
    display: flex;
    overflow: hidden;
    background:
        radial-gradient(circle at top left, #1a1a1a 0%, #050505 40%),
        linear-gradient(135deg, #050505, #0d0d0d);
    color: #f5f5f5;
}

/* LEFT PANEL */
.image-card {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-card img {
    width: 160px;
    height: 160px;
    object-fit: contain;
}

.info-grid div,
.stats-grid div {
    display: flex;
    justify-content: space-between;
    margin: 6px 0;
    font-size: 14px;
    color: #ddd;
}

.info-grid span,
.stats-grid span {
    color: #aaa;
}

.sidebar-left {
    width: 300px;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(14px);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
    overflow-y: auto;
    /*box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);*/
}

.sidebar-left h2 {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ffffff;
}

.data-card {
    background: linear-gradient(145deg,
            rgba(30, 30, 30, 0.95),
            rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

.data-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    /*background: #8b5cf6;
    transition: 0.6s;*/
}

.data-card:hover::before {
    left: 100%;
}

.data-card:hover {
    transform: translateY(-0px);
    border-color: rgba(255, 255, 255, 0.12);
}

.data-card h3 {
    margin-bottom: 10px;
    font-weight: 500;
    color: #d4d4d4;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.data-card p {
    color: #ffffff;
    font-size: 18px;
    font-weight: 300;
}

/* MAP */
/*
.map-container {
    flex: 1;
    position: relative;
    background: black;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    filter:
        brightness(0.85) contrast(1.15) saturate(0.75);
}*/
.map-container{flex:1;position:relative;overflow:hidden;background:#020609;cursor:grab}
.map-container:active{cursor:grabbing}
#marker-canvas{
  position:absolute;top:0;left:0;
  pointer-events:none;
  image-rendering:pixelated;
}
#map-img{
  position:absolute;top:0;left:0;
  pointer-events:none;
  image-rendering:auto;
  transform-origin:0 0;
}
.coord-display{
  position:absolute;bottom:18px;left:18px;
  background:rgba(5,10,15,.88);border:1px solid var(--border);
  padding:5px 11px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-dim);
  pointer-events:none;backdrop-filter:blur(6px);z-index:20;
}
.map-controls{position:absolute;bottom:18px;right:18px;display:flex;flex-direction:column;gap:4px;z-index:20}
.ctrl-btn{
  width:34px;height:34px;
  background:rgba(8,14,20,.92);border:1px solid var(--border);
  color:var(--text-secondary);font-size:17px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;border-radius:3px;
  transition:all .15s;backdrop-filter:blur(6px);
}
.ctrl-btn:hover{background:var(--bg-hover);border-color:var(--border-glow);color:var(--accent)}
#loading-overlay{
  position:absolute;inset:0;background:rgba(5,10,15,.85);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;z-index:50;transition:opacity .4s;
}
#loading-overlay.hidden{opacity:0;pointer-events:none}
.loading-spinner{
  width:40px;height:40px;border:2px solid var(--border);
  border-top-color:var(--accent);border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-txt{font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--text-secondary)}

/* tooltip popup */
#map-tooltip{
  position:absolute;pointer-events:none;z-index:30;
  background:rgba(5,10,15,.96);border:1px solid var(--border-glow);
  padding:6px 12px;border-radius:3px;font-size:11px;
  white-space:nowrap;color:var(--text-primary);letter-spacing:1px;
  backdrop-filter:blur(8px);opacity:0;transition:opacity .15s;
}
#map-tooltip.show{opacity:1}

/* scanlines */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:100;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);
}

::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* RIGHT PANEL */
.sidebar-right {
    width: 290px;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(14px);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    padding: 24px;
    overflow-y: auto;
}

.sidebar-right h2 {
    font-size: 24px;
    margin-bottom: 24px;
    font-weight: 300;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: white;
}

.toggle-group {
    background: linear-gradient(145deg,
            rgba(28, 28, 28, 0.95),
            rgba(12, 12, 12, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
    /*transition: 0.3s ease;*/
}

.toggle-group:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-0px);
}

.toggle-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #f1f1f1;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.status {
    margin-top: 10px;
    font-size: 13px;
    color: #8b8b8b;
}

/* CUSTOM SWITCH */
input[type="checkbox"] {
    appearance: none;
    width: 42px;
    height: 22px;
    background: #222;
    border-radius: 20px;
    position: relative;
    cursor: pointer;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

input[type="checkbox"]::before {
    content: "";
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 3px;
    transition: 0.3s;
}

input[type="checkbox"]:checked {
    background: #0a84ff;
}

input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

/* BUTTON */
button {
    width: 100%;
    padding: 15px;
    margin-top: 8px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(90deg,
            #111,
            #1d1d1d);
    color: white;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

button:hover {
    transform: translateY(-0px);
    box-shadow: 0 0 10px rgba(205, 205, 205, 0.2);
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #050505;
}

::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 20px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 12px;
  padding: 8px 0;

  color: #d4d4d4;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.status-row span {
  opacity: 0.9;
}

/* SEARCH BAR */
#dinoSearch {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(28, 28, 28, 0.95);
  color: white;
  outline: none;
}

/* SCROLL AREA */
.scroll-box {
  max-height: 220px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 5px;
}

/* ROW STYLE */
.status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 4px;
  margin: 4px 0;

  color: #e2e8f0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* SCROLLBAR */
.scroll-box::-webkit-scrollbar {
  width: 6px;
}

.scroll-box::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 10px;
}

#minLevel {
    width: 100%;
    padding: 10px;
    margin-top: 10px;

    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);

    background: rgba(28, 28, 28, 0.95);
    color: white;

    outline: none;
    font-size: 14px;
}

.filter-block {
    margin-top: 14px;
}

.filter-block span,
.filter-check span {
    display: block;
    margin-bottom: 6px;
    color: #d4d4d4;
    font-size: 14px;
}

.filter-check {
    margin-top: 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

#minLevel,
#genderFilter {
    width: 100%;

    padding: 10px;

    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);

    background: rgba(28,28,28,0.95);
    color: white;

    outline: none;
}