/* =========================================
   Fonts
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');

/* =========================================
   Theme tokens
========================================= */
:root{
  --bg:#0b0b0d;
  --surface:rgba(18,18,23,.92);
  --text:#f5f5f5;
  --muted:#9a9a9a;
  --accent:#ed1167;
  --error:#ff4d6d;

  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.55);
}

/* =========================================
   Base / Reset
========================================= */
*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg) url('/bg.webp') center center fixed;
  background-size:cover;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width:880px;
  margin:2rem auto 3rem;
  padding:0 1.25rem;
}

/* =========================================
   Hero
========================================= */
header.hero{
  padding:clamp(1.5rem,3vw,2.5rem) 1rem;
  text-align:center;
}
header.hero h1{
  margin:0 0 .4rem;
  font-weight:700;
  letter-spacing:.5px;
  font-size:clamp(1.8rem,5vw,3rem);
  color:var(--text);
  text-shadow:0 0 12px rgba(237,17,103,.4);
}
header.hero p.small{
  margin:.25rem 0 0 0;
  color:var(--muted);
  font-size:.95rem;
}

/* =========================================
   Cards / Sections
========================================= */
.card{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  backdrop-filter:blur(6px);
  padding:1.1rem 1.25rem;
  margin:1rem 0 1.25rem;
}
.hidden{ display:none !important; }

h2,h3,h4{
  letter-spacing:.3px;
  color:var(--text);
  margin:.2rem 0 .7rem;
}
h2{ font-size:1.4rem; }
h3{ font-size:1.2rem; }
h4{ font-size:1rem; color:var(--muted); }

p.small,.small{ color:var(--muted); font-size:.92rem; }
ul{ padding-left:1.2rem; }
li{ margin:.25rem 0; }

/* =========================================
   Brand images
========================================= */
.hero-logo{
  width:clamp(180px,40vw,420px);
  height:auto;
  display:block;
  margin:0 auto .6rem;
  filter:drop-shadow(0 0 12px rgba(237,17,103,.35));
}
.hero-logo--sm{ width:clamp(160px,32vw,320px); }

/* subtle watermark / heart */
.heart{
  display:block;
  margin:3rem auto 2rem auto;
  width:clamp(180px,5vw,360px);
  height:auto;
  opacity:1;
}

/* =========================================
   Layout helpers
========================================= */
.flex{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.grid{ display:grid; gap:.7rem; grid-template-columns:1fr; }
@media (min-width:720px){
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
hr{
  border:0;
  border-top:1px solid rgba(255,255,255,.08);
  margin:1rem 0;
}

/* =========================================
   Forms (force grotesk everywhere)
========================================= */
form{ display:grid; gap:.75rem; }
label{ display:flex; flex-direction:column; gap:.35rem; font-size:.95rem; }

/* Force controls to Space Grotesk across browsers */
input,select,textarea,button{
  font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1rem;
  color:var(--text);
  background:#111;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:.7rem .85rem;
  transition:border-color .2s, box-shadow .2s, transform .06s ease-in-out;
}

input::placeholder,textarea::placeholder{ color:#666; }

input:focus,select:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(237,17,103,.25);
}

textarea{ min-height:6.5rem; resize:vertical; }

/* Buttons */
button{
  cursor:pointer;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  border:none;
  border-radius:999px;
  padding:.7rem 1.2rem;
  box-shadow:0 6px 20px rgba(237,17,103,.4);
  transition:transform .1s ease-in-out, filter .2s;
}
button:hover{ filter:brightness(1.05); transform:translateY(-1px); }
button:active{ transform:translateY(0); }
button.secondary{
  background:#2c2c34;
  color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

/* Button spinner */
@keyframes spin{ to{ transform:rotate(360deg); } }
button.loading{ position:relative; opacity:.85; }
button.loading::after{
  content:"";
  position:absolute; right:.75rem; top:50%;
  width:16px; height:16px; margin-top:-8px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 1s linear infinite;
}

/* =========================================
   Crew slots (public)
========================================= */
#slotsWrap button{
  background:#1c1c22;
  color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
}
#slotsWrap button[disabled]{ opacity:.55; }
#slotsWrap button:hover{ transform:translateY(-1px); }

#crewCard .grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.8rem;
}
#crewCard .grid>*{ width:100%; }

.msg{ margin-top:.5rem; font-size:.95rem; }
.msg.error{ color:var(--error); font-weight:600; }
.msg.success{ color:var(--accent); }

/* =========================================
   Admin overview table
========================================= */
.ov-wrap{ overflow:auto; }

.ov-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.ov-table th,.ov-table td{
  padding:.5rem .6rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
  text-align:center;
}
.ov-table thead th{
  position:sticky; top:0; z-index:2;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(4px);
}
.ov-table th.sticky{
  position:sticky; left:0; text-align:left; z-index:3;
  background:rgba(0,0,0,.55);
}
.ov-table tbody tr:last-child td,
.ov-table tbody tr:last-child th{ border-bottom:0; }

.ov-na{ color:#aaa; }
.ov-free{ background:rgba(237,17,103,.10); border-left:3px solid #ed1167; }
.ov-partial{ background:rgba(237,17,103,.22); border-left:3px solid #ed1167; }
.ov-full{
  background:rgba(255,255,255,.08);
  color:#ddd;
  border-left:3px solid rgba(255,255,255,.18);
}
.ov-table td{ border-right:1px solid rgba(255,255,255,.06); }
.ov-table td:last-child{ border-right:0; }

/* =========================================
   Compact badges (deduped)
========================================= */
.slotband{
  display:flex; flex-wrap:wrap;
  gap:.35rem; margin-top:.25rem;
}
.badge{
  display:inline-block;
  padding:.15rem .45rem;
  border-radius:999px;
  font-size:.85em; line-height:1;
  background:#1c1c22;
  border:1px solid #333;
}
.badge.free{ border:1px dashed rgba(237,17,103,.7); }
.badge.partial{ background:rgba(237,17,103,.2); }
.badge.full{ background:rgba(255,255,255,.12); color:#ddd; opacity:.9; }

/* =========================================
   Iconic buttons
========================================= */
button.trash{
  background:none; border:none;
  color:#ed1167;
  font-size:1.1rem; cursor:pointer;
  padding:.2rem .4rem;
  transition:transform .15s ease;
}
button.trash:hover{ transform:scale(1.2); }

/* =========================================
   Modal
========================================= */
.modal{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.55);
  display:grid; place-items:center;
}
.modal-card{
  max-width:560px; width:calc(100% - 2rem);
  background:rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; padding:1rem;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
.modal-card h3{ margin-top:0; }
.modal-card .grid{ gap:.6rem; }

/* =========================================
   Details / expanders
========================================= */
.event-details>summary{
  cursor:pointer; list-style:none; user-select:none;
  padding:.35rem .25rem; margin-bottom:.35rem;
  border-radius:10px;
  background:rgba(0,0,0,.35);
}
.event-details[open]>summary{ background:rgba(0,0,0,.15); }
.event-details>summary::-webkit-details-marker{ display:none; }

/* =========================================
   Reduced motion
========================================= */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}