*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;margin:0;padding:0;background:#0f172a;color:#e2e8f0}
.container{max-width:960px;margin:40px auto;padding:0 16px}
h1,h2{margin:0 0 12px}
.card{background:#111827;border:1px solid #1f2937;border-radius:14px;padding:16px;margin:16px 0;box-shadow:0 8px 24px rgba(0,0,0,.2)}
label{display:block;font-size:.9rem;margin:8px 0 4px}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #374151;background:#0b1220;color:#e2e8f0}
button{padding:10px 14px;border-radius:10px;border:0;background:#2563eb;color:#fff;cursor:pointer}
button.danger{background:#dc2626}
.alert.error{background:#431515;border:1px solid #7f1d1d;padding:10px;border-radius:10px;margin:10px 0}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.flex{display:flex;align-items:center}.between{justify-content:space-between}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border-bottom:1px solid #1f2937;padding:10px;text-align:left;vertical-align:top}
.hint{opacity:.7;font-size:.85rem}
a{color:#93c5fd}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-button {
  flex: 1;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid #1f2937;
  background: #020617;
  color: #e5e7eb;
  cursor: pointer;
  font-size: 0.9rem;
}

.tab-button.active {
  background: #2563eb;
  border-color: #2563eb;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.alert.success {
  background: #064e3b;
  border: 1px solid #059669;
  padding: 10px;
  border-radius: 10px;
  margin: 10px 0;
}

.hero {
  margin-bottom: 24px;
}

.hero-image {
  max-width: 100%;
  margin-top: 12px;
  border-radius: 12px;
}
.spacer {
    display: block;   /* divs are block by default but this is explicit */
    height: 16px;     /* <-- this is what actually creates the gap */
}
/* Navigation Menu */
.nav-menu {
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    margin-bottom: 16px;
}

.nav-menu a {
    padding: 8px 14px;
    border-radius: 8px;
    background: #1e293b; /* dark slate */
    color: #e2e8f0;       /* light grey text */
    text-decoration: none;
    border: 1px solid #334155;
    font-size: 0.9rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-menu a:hover {
    background: #2563eb;  /* blue hover highlight */
    border-color: #2563eb;
    color: #fff;
}