body.page { margin: 0; font-family: system-ui, Arial, sans-serif; background: #0b0f14; color: #e8eef6; }
a { color: inherit; text-decoration: none; }
.top strong { letter-spacing: .2px; }
.nav { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.nav__link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  line-height: 1;
  font-weight: 600;
}
.nav__link:hover { border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.nav__link.is-active { border-color: rgba(31,111,235,.8); background: rgba(31,111,235,.18); }
.nav__link--danger { border-color: rgba(255,80,80,.35); background: rgba(255,80,80,.10); }
.nav__link--danger:hover { border-color: rgba(255,80,80,.55); background: rgba(255,80,80,.14); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
.top { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid rgba(255,255,255,.08); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 16px; }
.card { display:block; padding: 16px; border:1px solid rgba(255,255,255,.10); border-radius: 14px; background: rgba(255,255,255,.03); }
.card:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.cards { display:flex; flex-direction:column; gap: 12px; margin-top: 14px; }
.card__title, .card-title { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.card__meta, .card-meta { font-size: 12px; opacity: .85; margin-top: 6px; }
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(31,111,235,.65);
  background:#1f6feb;
  color:#fff;
  font-weight: 700;
  width: fit-content;
}
.btn:hover { filter: brightness(1.08); }
.box { max-width: 420px; margin: 9vh auto; padding: 22px; border:1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(255,255,255,.03); }
label { display:block; margin-top: 12px; font-size: 13px; opacity: .9; }
input { width:100%; margin-top:6px; padding: 10px 12px; border-radius: 10px; border:1px solid rgba(255,255,255,.15); background:#0b0f14; color:#e8eef6; }
button { margin-top: 14px; width:100%; padding: 10px 12px; border-radius: 10px; border:0; background:#1f6feb; color:white; font-weight: 700; cursor:pointer; }
.alert { padding: 10px 12px; border-radius: 10px; background: rgba(255, 80, 80, .15); border: 1px solid rgba(255, 80, 80, .35); }
/* ===== MOBILE SANDWICH MENU (slide-down + SVG icon) ===== */

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:40px;
  margin-left:12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color:#e8eef6;
  cursor:pointer;
}

.nav-toggle:hover{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}

@media (max-width: 768px){
  .top{ flex-wrap:wrap; gap:10px; }

  .nav-toggle{ display:inline-flex; }

  /* Nav becomes a collapsible panel */
  .nav{
    width:100%;
    flex-direction:column;
    gap:10px;
    margin-top:10px;

    /* slide-down animation */
    overflow:hidden;
    max-height:0;
    opacity:0;
    transform: translateY(-6px);
    transition: max-height .28s ease, opacity .18s ease, transform .28s ease;
  }

  body.nav-open .nav{
    max-height: 70vh; /* large enough for all links */
    opacity:1;
    transform: translateY(0);
  }

  .nav__link{
    width:100%;
    justify-content:center;
  }
}