/* LOADOUT LABS — shared styles */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #000;
  color: #f5f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px max(24px, 3vw);
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header .logo { display: flex; align-items: center; gap: 10px; color: #f5f5f7; text-decoration: none; font-weight: 700; font-size: 14px; }
.header .logo img { height: 24px; width: auto; }

.header-right { display: flex; align-items: center; gap: 10px; }

.header a { text-decoration: none; color: #8e8e93; font-size: 13px; transition: color 150ms; }
.header a:hover { color: #f5f5f7; }

.header .back-link {
  display: inline-flex; align-items: center; color: #8e8e93; text-decoration: none; font-size: 13px; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 6px 16px; transition: all 140ms; white-space: nowrap;
}
.header .back-link:hover { border-color: rgba(255,255,255,0.3); color: #f5f5f7; }

.card {
  background: #0d0d0f; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px;
  display: block; text-decoration: none; color: #f5f5f7; padding: 24px; transition: border-color 180ms;
}
.card:hover { border-color: rgba(255,255,255,0.15); }

.panel {
  background: #0d0d0f; border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px;
}

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }