:root{
  --bg:#000000;
  --panel:#080808;
  --panel-2:#0f0f0f;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.18);
  --text:#f5f5f5;
  --muted:#a1a1aa;
  --accent:#ffffff;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
  --page-max:1240px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

textarea{
  resize:vertical;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.ambient{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
  background:#000;
}

.ambient__blur{
  position:absolute;
  inset:8%;
  background-position:center;
  background-size:cover;
  filter:blur(130px) saturate(1.08);
  opacity:.18;
  transform:scale(1.18);
  transition:background-image 480ms ease, opacity 480ms ease;
}

.ambient__glow{
  position:absolute;
  inset:auto 50% -18rem 50%;
  width:48rem;
  height:48rem;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.07), rgba(255,255,255,0) 65%);
  opacity:.35;
}

.ambient__noise{
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.03), transparent 35%),
    radial-gradient(circle at 80% 10%, rgba(255,255,255,.025), transparent 25%),
    radial-gradient(circle at 50% 70%, rgba(255,255,255,.02), transparent 30%);
  mix-blend-mode:screen;
}

.topbar{
  position:sticky;
  top:0;
  z-index:30;
  width:min(calc(100% - 2rem), var(--page-max));
  margin:0 auto;
  padding:max(1rem, env(safe-area-inset-top)) 0 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:1rem;
  padding-inline:1rem;
}

.topbar::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:calc(100% - .25rem);
  background:linear-gradient(180deg, rgba(0,0,0,.82), rgba(0,0,0,.42));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:0 0 24px 24px;
  box-shadow:0 10px 45px rgba(0,0,0,.35);
}

.topbar,
.topbar *{
  position:relative;
}

.brand{
  display:inline-flex;
  align-items:center;
  max-width:min(46vw, 230px);
  padding:.42rem 0 .58rem;
}

.brand img{
  width:100%;
  height:auto;
  object-fit:contain;
}

.topbar__nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.topbar__nav a,
.badge,
.mini-note{
  color:#d4d4d8;
  font-size:.82rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.topbar__nav a{
  padding:.55rem .7rem;
  border-radius:999px;
  transition:background .2s ease, color .2s ease;
}

.topbar__nav a:hover,
.topbar__nav a:focus-visible{
  background:rgba(255,255,255,.06);
  color:#fff;
}

.topbar__actions{
  display:flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.badge{
  display:inline-flex;
  align-items:center;
  min-height:2.5rem;
  padding:0 .95rem;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}

.pill,
.ghost-button,
.quick-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:2.85rem;
  padding:0 1.1rem;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:rgba(255,255,255,.02);
  color:var(--text);
  transition:transform .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease;
}

.pill:hover,
.pill:focus-visible,
.ghost-button:hover,
.ghost-button:focus-visible,
.quick-action:hover,
.quick-action:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.26);
}

.pill--solid{
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.24);
}

.pill--ghost,
.ghost-button{
  background:transparent;
}

main,
.footer{
  width:min(calc(100% - 2rem), var(--page-max));
  margin:0 auto;
}

.hero{
  display:grid;
  gap:2rem;
  padding:clamp(1.3rem, 2vw, 2rem) 0 2rem;
  min-height:calc(100svh - 5rem);
  align-items:center;
}

.hero__copy{
  max-width:37rem;
  padding-top:1rem;
}

.eyebrow,
.panel__kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  min-height:2.2rem;
  padding:0 .9rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#d4d4d8;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.78rem;
}

h1,
h2,
h3,
h4{
  margin:0;
}

h1{
  margin:.95rem 0 .95rem;
  font-size:clamp(2.6rem, 10vw, 5.8rem);
  line-height:.9;
  letter-spacing:-.06em;
  max-width:11ch;
}

.hero__copy p,
.section-head p,
.footer p,
.member-detail__empty{
  margin:0;
  color:var(--muted);
  font-size:clamp(1rem, 3.8vw, 1.08rem);
  line-height:1.68;
}

.hero__actions,
.member-form__actions,
.footer__actions,
.quick-actions{
  display:flex;
  gap:.9rem;
  flex-wrap:wrap;
}

.hero__actions{
  margin-top:1.4rem;
}

.microdata{
  list-style:none;
  padding:0;
  margin:1.45rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
}

.microdata li{
  min-height:2.35rem;
  display:inline-flex;
  align-items:center;
  padding:0 .9rem;
  border-radius:999px;
  background:#070707;
  border:1px solid rgba(255,255,255,.06);
  color:#d4d4d8;
  font-size:.92rem;
}

.hero__visual{
  position:relative;
}

.section-kicker,
.panel__header,
.panel__header--stacked{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.section-kicker{
  align-items:center;
  margin-bottom:1rem;
  padding-inline:.25rem;
  color:#d4d4d8;
  font-size:.92rem;
}

.counter{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  color:#fafafa;
  font-variant-numeric:tabular-nums;
}

.counter__divider{
  width:1.6rem;
  height:1px;
  background:rgba(255,255,255,.24);
}

.carousel{
  position:relative;
  border-radius:var(--radius-xl);
}

.carousel__viewport{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  padding:.35rem;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  touch-action:pan-x pan-y;
  scroll-padding-inline:.35rem;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}

.carousel__viewport::-webkit-scrollbar{
  display:none;
}

.slide{
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
}

.poster{
  position:relative;
  width:100%;
  margin:0;
  border-radius:calc(var(--radius-xl) - 4px);
  overflow:hidden;
  background:#030303;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  display:grid;
  place-items:center;
  padding:.35rem;
}

.poster::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.03), transparent 25%),
    linear-gradient(180deg, transparent 76%, rgba(0,0,0,.14));
  pointer-events:none;
}

.poster img{
  width:100%;
  height:auto;
  max-height:min(82svh, 960px);
  object-fit:contain;
  object-position:center top;
  border-radius:calc(var(--radius-xl) - 8px);
  user-select:none;
  -webkit-user-drag:none;
}

.slide__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding:.95rem .35rem 0;
}

.slide__title{
  font-size:.98rem;
  color:#f5f5f5;
  letter-spacing:.01em;
}

.slide__hint{
  color:#8b8b93;
  font-size:.78rem;
  text-align:right;
}

.carousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:3rem;
  height:3rem;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.48);
  backdrop-filter:blur(8px);
  color:#fff;
  display:grid;
  place-items:center;
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible{
  transform:translateY(-50%) scale(1.04);
}

.carousel__arrow span{
  font-size:2rem;
  line-height:1;
  margin-top:-.12rem;
}

.carousel__arrow--prev{ left:.8rem; }
.carousel__arrow--next{ right:.8rem; }

.dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin-top:1rem;
  flex-wrap:wrap;
}

.dot{
  width:.62rem;
  height:.62rem;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.18);
  cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}

.dot[aria-current="true"]{
  background:#fff;
  transform:scale(1.28);
}

.swipe-note{
  margin:.8rem 0 0;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}

.essentials{
  padding:1rem 0 1.2rem;
}

.essentials__grid,
.members__stats,
.members__grid,
.members__admin{
  display:grid;
  gap:1rem;
}

.info-card,
.panel,
.stat-card{
  padding:1.15rem 1.2rem;
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
}

.info-card__label,
.stat-card span,
.credential__meta span,
.member-item__meta,
.member-detail__label{
  display:block;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
}

.info-card a,
.info-card p{
  margin:0;
  font-size:1rem;
  line-height:1.55;
  color:#f4f4f5;
}

.members{
  padding:2rem 0 3rem;
}

.section-head{
  display:grid;
  gap:1rem;
  margin-bottom:1rem;
}

.section-head h2{
  margin-top:.85rem;
  font-size:clamp(2rem, 7vw, 3.4rem);
  letter-spacing:-.05em;
}

.members__stats{
  margin-bottom:1rem;
}

.stat-card{
  display:grid;
  gap:.45rem;
}

.stat-card strong{
  font-size:clamp(1.5rem, 5vw, 2.15rem);
  letter-spacing:-.05em;
}

.panel{
  padding:1.15rem;
}

.panel__header h3{
  margin-top:.65rem;
  font-size:1.2rem;
}

.panel__header--stacked{
  flex-wrap:wrap;
}

.member-form{
  display:grid;
  gap:.85rem;
  margin-top:1rem;
}

.member-form label,
.search-field{
  display:grid;
  gap:.42rem;
}

.member-form label span,
.search-field span{
  color:#d4d4d8;
  font-size:.84rem;
}

.member-form input,
.member-form select,
.member-form textarea,
.search-field input{
  width:100%;
  min-height:3rem;
  padding:.9rem 1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.1);
  background:#050505;
  color:#fff;
  outline:none;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.member-form textarea{
  min-height:6.5rem;
}

.member-form input:focus,
.member-form select:focus,
.member-form textarea:focus,
.search-field input:focus{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 4px rgba(255,255,255,.05);
}

.member-form__split{
  display:grid;
  gap:.85rem;
}

.credential{
  margin-top:1rem;
  padding:1rem;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.11), transparent 28%),
    linear-gradient(180deg, #131313 0%, #050505 100%);
  border:1px solid rgba(255,255,255,.1);
  overflow:hidden;
  min-height:350px;
  display:grid;
  gap:1rem;
}

.credential__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.credential__top img{
  width:min(11rem, 44vw);
}

.credential__chip{
  padding:.5rem .8rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:#d4d4d8;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.credential__eyebrow{
  margin:0;
  color:#bcbcc5;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.74rem;
}

.credential h4{
  margin:.55rem 0 .3rem;
  font-size:clamp(1.7rem, 6vw, 2.6rem);
  letter-spacing:-.04em;
}

.credential__alias{
  margin:0;
  color:#9999a3;
  font-size:.98rem;
}

.credential__meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.8rem;
}

.credential__meta strong{
  display:block;
  margin-top:.3rem;
  font-size:1rem;
}

.credential__code{
  height:60px;
  border-radius:16px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.95) 0 4%,
      transparent 4% 7%,
      rgba(255,255,255,.4) 7% 11%,
      transparent 11% 13%,
      rgba(255,255,255,.9) 13% 16%,
      transparent 16% 20%,
      rgba(255,255,255,.55) 20% 22%,
      transparent 22% 25%,
      rgba(255,255,255,.88) 25% 31%,
      transparent 31% 34%,
      rgba(255,255,255,.35) 34% 39%,
      transparent 39% 41%,
      rgba(255,255,255,.85) 41% 47%,
      transparent 47% 50%,
      rgba(255,255,255,.5) 50% 54%,
      transparent 54% 58%,
      rgba(255,255,255,.92) 58% 61%,
      transparent 61% 64%,
      rgba(255,255,255,.44) 64% 67%,
      transparent 67% 70%,
      rgba(255,255,255,.95) 70% 78%,
      transparent 78% 81%,
      rgba(255,255,255,.52) 81% 85%,
      transparent 85% 88%,
      rgba(255,255,255,.86) 88% 100%
    );
  opacity:.78;
}

.quick-actions{
  margin-top:1rem;
}

.quick-action{
  min-height:2.75rem;
  padding:0 1rem;
  border-radius:16px;
}

.quick-action:disabled,
.ghost-button:disabled,
.pill:disabled{
  opacity:.4;
  pointer-events:none;
}

.member-list{
  display:grid;
  gap:.7rem;
  margin-top:1rem;
  max-height:420px;
  overflow:auto;
  padding-right:.15rem;
}

.member-item{
  width:100%;
  text-align:left;
  display:grid;
  gap:.32rem;
  padding:1rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:#050505;
  color:#fff;
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}

.member-item:hover,
.member-item:focus-visible,
.member-item[aria-current="true"]{
  background:#0b0b0b;
  border-color:rgba(255,255,255,.18);
  transform:translateY(-1px);
}

.member-item strong{
  font-size:1rem;
}

.member-item small{
  color:#a1a1aa;
}

.member-detail{
  margin-top:1rem;
  display:grid;
  gap:1rem;
}

.member-detail__card{
  display:grid;
  gap:1rem;
}

.member-detail__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.member-detail__name{
  display:grid;
  gap:.3rem;
}

.member-detail__name strong{
  font-size:1.25rem;
}

.member-detail__badge{
  min-height:2.4rem;
  display:inline-flex;
  align-items:center;
  padding:0 .9rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);
  color:#f1f1f4;
}

.member-detail__grid{
  display:grid;
  gap:.85rem;
}

.member-detail__box{
  padding:1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#050505;
}

.member-detail__box strong{
  display:block;
  margin-top:.3rem;
  font-size:1.1rem;
}

.member-detail__notes{
  padding:1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:#050505;
  color:#d4d4d8;
  line-height:1.65;
}

.footer{
  margin:0 auto 2rem;
  padding:1rem 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:grid;
  gap:1rem;
  justify-items:start;
}

.footer__logo{
  width:min(16rem, 58vw);
}

@media (max-width: 959px){
  .topbar{
    grid-template-columns:auto 1fr;
  }

  .topbar__nav{
    order:3;
    grid-column:1 / -1;
    justify-content:flex-start;
    padding-bottom:.65rem;
  }
}

@media (max-width: 739px){
  .topbar{
    width:calc(100% - 1rem);
    padding-inline:.75rem;
  }

  .topbar__actions .badge{
    display:none;
  }

  main,
  .footer{
    width:calc(100% - 1rem);
  }

  .hero{
    padding-top:1rem;
    gap:1.5rem;
  }

  .hero__copy{
    padding-top:.25rem;
  }

  .carousel__arrow{
    width:2.7rem;
    height:2.7rem;
  }

  .poster img{
    max-height:76svh;
  }

  .slide__meta{
    padding-top:.7rem;
    align-items:flex-start;
    flex-direction:column;
  }

  .swipe-note{
    padding-inline:.4rem;
  }

  .credential__meta,
  .member-detail__grid,
  .members__stats,
  .essentials__grid,
  .members__grid,
  .members__admin{
    grid-template-columns:1fr;
  }

  .quick-actions{
    flex-direction:column;
  }

  .quick-action,
  .pill,
  .ghost-button{
    width:100%;
  }
}

@media (min-width: 740px){
  .hero{
    grid-template-columns:minmax(0, 1fr) minmax(360px, 480px);
    gap:2rem;
    padding-top:2rem;
  }

  .hero__visual{
    justify-self:end;
    width:min(100%, 480px);
  }

  .essentials__grid,
  .members__stats{
    grid-template-columns:repeat(4, minmax(0, 1fr));
  }

  .members__grid,
  .members__admin{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:start;
  }

  .member-form__split,
  .member-detail__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .swipe-note{
    text-align:left;
    padding-left:.35rem;
  }
}

@media (min-width: 1100px){
  .hero{
    gap:4rem;
  }

  .hero__visual{
    width:500px;
  }
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}