* {

  box-sizing: border-box;

  font-family: system-ui, -apple-system, Segoe UI, sans-serif;

}



body {

  margin: 0;

  background: #ffffff;

  color: #1f2937;

}



.header {

  text-align: center;

  padding: 3rem 1rem 2rem;

}



.logo {

  width: 64px;

  margin-bottom: 1rem;

}



.header h1 {

  margin: 0.5rem 0;

  font-size: 2.4rem;

}



.header p {

  color: #6b7280;

}



.container {

  max-width: 1100px;

  margin: auto;

  padding: 2rem;

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

  gap: 1.5rem;

}



.card {

  border: 1px solid #e5e7eb;

  border-radius: 16px;

  padding: 2rem;

  text-decoration: none;

  color: inherit;

  position: relative;

  transition: box-shadow 0.2s ease, transform 0.2s ease;

}



.card img {

  width: 40px;

  height: 40px;

  margin-bottom: 1rem;

}



.card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(0,0,0,0.08);

}



.card.disabled {

  opacity: 0.6;

  cursor: not-allowed;

}



.card.admin {

  border-color: #fca5a5;

}



.status {

  position: absolute;

  top: 16px;

  right: 16px;

  font-size: 0.75rem;

  padding: 4px 10px;

  border-radius: 999px;

}



.ready {

  background: #dcfce7;

  color: #166534;

}



.soon {

  background: #fef3c7;

  color: #92400e;

}



.restricted {

  background: #fee2e2;

  color: #991b1b;

}



.footer {

  text-align: center;

  padding: 2rem;

  color: #9ca3af;

  font-size: 0.9rem;

}