/* MineMapper Pro — Polished UI Theme (Dark) */
/* Typography & Base ------------------------------------------------------- */
:root{
  --bg:#0b0f14;
  --panel:#10151c;
  --panel-2:#0d1218;
  --text:#e6edf3;
  --muted:#93a4b7;
  --edge:#1e2630;
  --primary:#3b82f6;  /* blue */
  --primary-600:#2563eb;
  --primary-700:#1d4ed8;
  --accent:#22c55e;   /* green */
  --danger:#ef4444;
  --warn:#f59e0b;
  --success:#22c55e;
  --shadow: 0 8px 30px rgba(0,0,0,.25);
  --radius-lg:16px;
  --radius-md:12px;
  --radius-sm:10px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg), #0c1218 70%);
  color:var(--text);
  font: 15px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing:.2px;
}

/* Links & Focus ----------------------------------------------------------- */
a{ color:var(--text); text-decoration:none }
a:hover{ color:#fff }
:focus{ outline: none }
:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Layout ------------------------------------------------------------------ */
.container{ max-width:1200px; margin:28px auto; padding:0 18px }
.card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding:20px;
  box-shadow: var(--shadow);
}
.h1{ font-size:24px; margin:0 0 8px; font-weight:700 }
.h2{ font-size:18px; margin:0 0 8px; font-weight:600 }
.muted{ color:var(--muted) }
hr.sep{ border:0; border-top:1px solid var(--edge); margin:18px 0 }

/* Top Nav ----------------------------------------------------------------- */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; gap:10px; align-items:center;
  padding:12px 18px;
  background: rgba(10,15,21,.8);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--edge);
}
.nav .brand{
  font-weight:800; letter-spacing:.4px; margin-right:auto;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav a{
  padding:8px 12px;
  border:1px solid var(--edge);
  border-radius:12px;
  transition: all .15s ease;
}
.nav a:hover{ border-color:#2b3644; background:#0f1620 }
.nav .badge{ margin-left:6px }

/* Grid -------------------------------------------------------------------- */
.grid{ display:grid; gap:14px }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 980px){
  .grid.cols-2, .grid.cols-3{ grid-template-columns: 1fr; }
}

/* Forms ------------------------------------------------------------------- */
label{ display:block; font-size:12px; color:var(--muted); margin:6px 0 6px }
input, select, textarea{
  width:100%;
  background:#0c1219;
  color:var(--text);
  border:1px solid var(--edge);
  padding:12px 12px;
  border-radius: var(--radius-sm);
  transition: border .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder{ color:#6f8195 }
input:focus, select:focus, textarea:focus{
  border-color:#2f3a49;
  box-shadow: 0 0 0 3px rgba(59,130,246,.15);
  background:#0e1621;
}

/* Buttons ----------------------------------------------------------------- */
button, .btn{
  appearance:none;
  background: linear-gradient(180deg, var(--primary), var(--primary-600));
  color:white;
  border:1px solid #1e40af;
  padding:10px 14px;
  border-radius: 12px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:.2px;
  transition: transform .05s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: 0 6px 20px rgba(37,99,235,.25);
  display:inline-block;
}
button:hover, .btn:hover{ background: linear-gradient(180deg, var(--primary-600), var(--primary-700)); }
button:active, .btn:active{ transform: translateY(1px); }
.btn.ghost{
  background: transparent; color: var(--text);
  border-color: var(--edge);
  box-shadow:none;
}
.btn.danger{
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-color: #b91c1c;
  box-shadow: 0 6px 20px rgba(239,68,68,.25);
}

/* Tables ------------------------------------------------------------------ */
.table{ width:100%; border-collapse: collapse; overflow:hidden; border-radius:12px }
.table th{
  text-align:left; font-weight:600; color:#cbd5e1;
  background:#0f1620; border-bottom:1px solid var(--edge); padding:12px;
}
.table td{
  border-bottom:1px solid var(--edge); padding:12px;
}
.table tr:hover td{ background:#0c1219 }

/* Badges & Pills ---------------------------------------------------------- */
.badge{
  border:1px solid var(--edge);
  padding:4px 10px; border-radius:999px;
  font-size:12px; color:#cbd5e1; background:#0f1620;
}
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  background:#0e1621; border:1px solid var(--edge);
  font-size:12px; color:#cbd5e1;
}

/* Icons ------------------------------------------------------------------- */
.icon-dot{ display:inline-block; width:14px; height:14px; border-radius:999px; vertical-align:middle; margin-right:6px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.5)}

/* Map & Images ------------------------------------------------------------ */
#map{ width:100%; height:560px; border-radius:16px; border:1px solid var(--edge) }
.cover-img{ max-width:300px; max-height:300px; object-fit:cover; border-radius:12px; border:1px solid var(--edge); box-shadow: var(--shadow) }

/* Toasts ------------------------------------------------------------------ */
.toast{
  position:fixed; right:16px; bottom:16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--edge);
  padding:12px 14px;
  border-radius:14px;
  box-shadow: var(--shadow);
  color:var(--text);
}

/* Utility ----------------------------------------------------------------- */
.row{ display:flex; gap:10px; align-items:center }
.gap-6{ gap:6px } .gap-10{ gap:10px } .mt-10{ margin-top:10px } .mt-16{ margin-top:16px }
.center{ display:flex; align-items:center; justify-content:center }
.max-w-520{ max-width:520px }
.alert{ padding:10px 12px; border-radius:12px; border:1px solid var(--edge); background:#0f1620; color:#cbd5e1 }
.alert.error{ border-color:#47171a; background:#1a0f11; color:#fecaca }