/* ================================================================
   LIQUID EVENTS — CEL SHADE COMIC  v4
   Style:   Comic-book cel shading · Manga ink · Halftone dots
            Hard offset shadows · Ink outlines · Speed lines
   Palette: Deep Ink Navy · Electric Sky · Cyan · Hot Pink · Gold
   Fonts:   Russo One (display) · Oxanium (UI) · Outfit (body)
   ================================================================ */

/* @property for conic border spin */
@property --spin-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ================================================================
   ROOT — CEL SHADE SYSTEM
   Key rule: shadows are HARD (0 blur). No soft glows on structure.
   Light source = top-left. Shadow offset = bottom-right.
   ================================================================ */
:root {
  /* Ink backgrounds */
  --ink:     #00080F;
  --bg-950:  #010D1A;
  --bg-900:  #021422;
  --bg-850:  #031C2E;
  --bg-800:  #042538;

  /* Ink outlines */
  --ink-border: rgba(0,8,20, 0.92);
  --ink-shadow: #000C1A;

  /* Hard cel-shade shadows (0 blur!) */
  --cel-sm:  4px 4px 0 var(--ink-shadow);
  --cel-md:  6px 6px 0 var(--ink-shadow);
  --cel-lg:  8px 8px 0 var(--ink-shadow);
  --cel-sm-b: 4px 4px 0 rgba(0,50,100,.80);
  --cel-md-b: 7px 7px 0 rgba(0,40,90,.90);

  /* Surfaces */
  --sur-card: rgba(2,18,40, 0.92);
  --sur-dark: rgba(1,12,28, 0.96);

  /* Lines */
  --line-ink:  rgba(0,8,20,.90);
  --line-blue: rgba(56,189,248,.38);
  --line-blue-strong: rgba(125,211,252,.72);

  /* Text */
  --text-strong: #F0FAFF;
  --text-main:   #8CCDE8;
  --text-soft:   #426E88;

  /* Sky Blue — primary */
  --b700: #0A3D5C;
  --b600: #0C5280;
  --b500: #0284C7;
  --b400: #0EA5E9;
  --b300: #38BDF8;
  --b200: #7DD3FC;
  --b100: #BAE6FD;
  --b050: #E0F5FF;

  /* Hot Pink — accent */
  --p500: #DB2777;
  --p400: #EC4899;
  --p300: #F472B6;
  --p200: #FBCFE8;

  /* Teal — accent 2 */
  --c500: #0F766E;
  --c400: #14B8A6;
  --c300: #5EEAD4;

  /* Gold */
  --g500: #B45309;
  --g400: #D97706;
  --g300: #FBBF24;

  /* Flat fills for cel cards */
  --card-fill:    #021628;
  --card-fill-b:  #031E36;
  --cel-highlight: rgba(186,230,253,.22);  /* top-left bright streak */
  --cel-shade:     rgba(0,0,0,.55);         /* bottom-right dark band */

  /* Radius — big and round like comic panels */
  --r-xs: 10px;
  --r-sm: 16px;
  --r-md: 22px;
  --r-lg: 32px;
  --r-xl: 48px;
}

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

html {
  min-height: 100%;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  background: var(--ink);
}

/* ================================================================
   BODY — halftone dot background
   ================================================================ */
body {
  margin: 0;
  padding-top: 5.75rem;
  min-height: 100vh;
  color: var(--text-main);
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: .01em;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background-color: var(--bg-950);
  background-image:
    /* halftone dot layer — the signature comic texture */
    radial-gradient(circle, rgba(56,189,248,.14) 1.5px, transparent 1.5px),
    /* ambient color washes */
    radial-gradient(ellipse 120% 70% at 15% 10%,  rgba(14,165,233,.16) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 85% 80%,  rgba(236,72,153,.12) 0%, transparent 55%),
    linear-gradient(170deg, var(--bg-950) 0%, var(--bg-900) 45%, var(--bg-850) 75%, var(--bg-800) 100%);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%;
}

/* Event image watermark */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url("event2.png") center / cover no-repeat;
  opacity: .05;
  filter: saturate(.4) brightness(.3) hue-rotate(200deg);
  pointer-events: none;
}

main { position: relative; isolation: isolate; }
[hidden] { display: none !important; }

/* Page leave */
html.js body.page-leaving {
  opacity: 0;
  transform: translateY(12px) scale(.99);
  filter: blur(3px);
  transition: opacity .20s ease, transform .20s ease, filter .20s ease;
  pointer-events: none;
}

::selection { color: #000C1A; background: rgba(56,189,248,.92); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); border-left: 2px solid rgba(56,189,248,.14); }
::-webkit-scrollbar-thumb {
  background: var(--b400);
  border: 2px solid var(--ink);
  border-radius: 4px;
  /* Hard scrollbar shadow */
  box-shadow: inset -2px 0 0 rgba(0,0,0,.60);
}

/* ---- Layout ---- */
.container { width: min(1240px, calc(100% - 2.8rem)); margin: 0 auto; }

/* ================================================================
   AMBIENT ORBS — softer, background only
   ================================================================ */
.ambient {
  position: fixed;
  border-radius: 999px;
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
  opacity: .55;
}
.ambient-1 {
  width: 500px; height: 500px;
  left: -180px; top: 60px;
  background: rgba(14,165,233,.30);
  animation: orb-drift 18s ease-in-out infinite alternate;
}
.ambient-2 {
  width: 400px; height: 400px;
  right: -160px; top: 320px;
  background: rgba(236,72,153,.22);
  animation: orb-drift 22s ease-in-out infinite alternate-reverse;
}

/* ================================================================
   HERO — MANGA CEL SHADE
   Speed lines radiate from centre like a manga action panel
   ================================================================ */
.hero-epic {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 6rem 0 4rem;
  overflow: hidden;
}

/* Speed lines — conic manga burst */
.hero-epic::before {
  content: "";
  position: absolute;
  inset: -120%;
  z-index: 0;
  background: repeating-conic-gradient(
    from 0deg at 50% 58%,
    transparent            0deg,
    transparent            1.4deg,
    rgba(56,189,248,.032)  1.4deg,
    rgba(56,189,248,.032)  2.8deg
  );
  animation: speed-spin 60s linear infinite;
  pointer-events: none;
}

/* Hero orbs — soft atmosphere behind speed lines */
.hero-orb {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
  animation: orb-drift var(--dur, 14s) ease-in-out infinite alternate;
}
.hero-orb-1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(14,165,233,.24) 0%, transparent 68%);
  filter: blur(80px);
  top: -240px; left: -160px; --dur: 12s;
}
.hero-orb-2 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(236,72,153,.20) 0%, transparent 68%);
  filter: blur(90px);
  bottom: -140px; right: -120px; --dur: 17s;
}
.hero-orb-3 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(20,184,166,.18) 0%, transparent 68%);
  filter: blur(70px);
  top: 28%; right: 6%; --dur: 24s;
}

/* Particle field */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.hero-particles .p {
  position: absolute;
  bottom: -8px;
  width: 4px; height: 4px;
  border-radius: 2px;
  opacity: 0;
  animation: particle-rise var(--d, 7s) ease-in var(--del, 0s) infinite;
}
/* Star/diamond particles — more comic */
.hero-particles .p:nth-child(odd)  { border-radius: 1px; transform: rotate(45deg); }
.hero-particles .p:nth-child(1)  { left:  5%; background: var(--b300);  --d:7s;  --del:0s;   width:4px;  height:4px;  }
.hero-particles .p:nth-child(2)  { left: 12%; background: var(--p300);  --d:9s;  --del:1.2s; width:5px;  height:5px;  }
.hero-particles .p:nth-child(3)  { left: 20%; background: var(--c300);  --d:6s;  --del:2.4s; width:3px;  height:10px; border-radius:2px; }
.hero-particles .p:nth-child(4)  { left: 27%; background: var(--b200);  --d:8s;  --del:0.8s; }
.hero-particles .p:nth-child(5)  { left: 35%; background: var(--g300);  --d:10s; --del:3.1s; width:6px;  height:6px;  }
.hero-particles .p:nth-child(6)  { left: 42%; background: var(--p200);  --d:7s;  --del:1.6s; }
.hero-particles .p:nth-child(7)  { left: 50%; background: var(--b300);  --d:9s;  --del:4.2s; }
.hero-particles .p:nth-child(8)  { left: 58%; background: var(--c300);  --d:6s;  --del:0.4s; width:3px;  height:3px;  }
.hero-particles .p:nth-child(9)  { left: 65%; background: var(--b200);  --d:8s;  --del:2.8s; }
.hero-particles .p:nth-child(10) { left: 72%; background: var(--p300);  --d:11s; --del:1.0s; width:6px;  height:6px;  }
.hero-particles .p:nth-child(11) { left: 78%; background: var(--g300);  --d:7s;  --del:3.6s; }
.hero-particles .p:nth-child(12) { left: 84%; background: var(--b400);  --d:9s;  --del:0.6s; }
.hero-particles .p:nth-child(13) { left: 90%; background: var(--c300);  --d:6s;  --del:4.8s; width:3px;  height:3px;  }
.hero-particles .p:nth-child(14) { left: 96%; background: var(--p300);  --d:8s;  --del:2.0s; }
.hero-particles .p:nth-child(15) { left: 15%; background: var(--g300);  --d:10s; --del:5.2s; width:3px;  height:12px; border-radius:2px; }
.hero-particles .p:nth-child(16) { left: 45%; background: var(--b200);  --d:7s;  --del:3.9s; }
.hero-particles .p:nth-child(17) { left: 62%; background: var(--p300);  --d:9s;  --del:1.4s; width:3px;  height:3px;  }
.hero-particles .p:nth-child(18) { left: 32%; background: var(--c300);  --d:6s;  --del:2.6s; }
.hero-particles .p:nth-child(19) { left: 55%; background: var(--b300);  --d:8s;  --del:0.2s; }
.hero-particles .p:nth-child(20) { left: 88%; background: var(--g300);  --d:11s; --del:4.4s; width:6px;  height:6px;  }

.hero-epic-content {
  position: relative;
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Hero kicker */
.hero-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .90rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

/* Live badge — comic tag style */
.hero-live-badge {
  display: inline-flex;
  align-items: center;
  gap: .52rem;
  padding: .44rem 1.0rem;
  border-radius: 999px;
  /* Bold ink border + hard offset */
  border: 3px solid var(--b300);
  background: var(--b700);
  box-shadow: 3px 3px 0 var(--ink-shadow), 0 0 16px rgba(56,189,248,.30);
  color: var(--b100);
  font-family: "Oxanium", sans-serif;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--b300);
  border: 2px solid var(--ink-shadow);
  box-shadow: 0 0 0 2px var(--b300), 0 0 10px rgba(56,189,248,.80);
  animation: live-pulse 2s ease-in-out infinite;
}

/* ================================================================
   HERO TITLE — full cel-shade ink outline
   -webkit-text-stroke creates the manga ink border
   ================================================================ */
.hero-title {
  font-family: "Russo One", sans-serif;
  font-size: clamp(3.8rem, 9.5vw, 9.5rem);
  line-height: .98;
  color: var(--text-strong);
  letter-spacing: -.02em;
  margin: 0 0 .2rem;
  /* INK OUTLINE — this is the cel-shade magic */
  -webkit-text-stroke: 3px rgba(0,15,40,.95);
  paint-order: stroke fill;
  /* Hard depth stack — no blur, just offset layers */
  text-shadow:
     0  4px 0 rgba(7,89,133,.90),
     0  7px 0 rgba(4,60,100,.75),
     0 10px 0 rgba(2,36,70,.58),
    /* faint glow only at large distance */
     0 20px 40px rgba(14,165,233,.28);
}

.hero-title-accent {
  display: block;
  background: linear-gradient(135deg, var(--b200) 0%, var(--c300) 45%, var(--b300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 2px transparent; /* keep stroke size but transparent for gradient text */
  filter:
    drop-shadow(0 4px 0 rgba(4,60,100,.80))
    drop-shadow(0 8px 0 rgba(2,36,70,.55))
    drop-shadow(0 0 32px rgba(56,189,248,.50));
  animation: accent-shimmer 5s ease-in-out infinite;
  background-size: 200% 100%;
}

.hero-desc {
  font-size: 1.13rem;
  color: var(--text-main);
  max-width: 680px;
  line-height: 1.72;
  margin: 1.3rem 0 0;
}

/* ================================================================
   STAT PILLS — comic tag
   ================================================================ */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .64rem;
  margin-top: 1.5rem;
}

.hero-stat-pill,
.status-pill,
.admin-count-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 2.5px solid var(--b400);
  background: var(--b700);
  color: var(--b050);
  font-size: .78rem;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  letter-spacing: .07em;
  padding: .38rem .88rem;
  /* Hard shadow — no blur */
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transition: transform .15s, box-shadow .15s;
}

.hero-stat-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink-shadow);
}

.status-pill-warning {
  border-color: #F87171;
  background: #450A0A;
  color: #FECACA;
  box-shadow: 3px 3px 0 #1A0000;
}
.status-pill-confirmed {
  border-color: var(--c400);
  background: #042E2A;
  color: var(--c300);
  box-shadow: 3px 3px 0 #001410;
}

.hero-actions {
  display: flex;
  gap: .86rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
}

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
h1, h2, h3, h4 { margin: 0; color: var(--text-strong); line-height: 1; letter-spacing: .01em; }

h1:not(.hero-title) {
  font-family: "Russo One", sans-serif;
  font-size: clamp(2.6rem, 7vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.04;
  -webkit-text-stroke: 2px rgba(0,15,40,.88);
  paint-order: stroke fill;
  text-shadow:
     0 3px 0 rgba(7,89,133,.85),
     0 6px 0 rgba(2,36,70,.60);
}

h2 { font-family: "Oxanium", sans-serif; font-size: clamp(1.7rem,3.6vw,2.7rem); font-weight: 700; }
h3 { font-family: "Oxanium", sans-serif; font-size: clamp(1.2rem,2.2vw,1.75rem); font-weight: 600; }
h4 { font-family: "Oxanium", sans-serif; font-size: 1.0rem; font-weight: 700; }

p { margin: 0; }
a, button, input, select, textarea { font: inherit; }

.eyebrow {
  margin: 0;
  color: var(--b300);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-weight: 800;
  font-size: .72rem;
  font-family: "Oxanium", sans-serif;
}

.hero-text { color: var(--text-main); line-height: 1.70; font-size: 1.04rem; }
.page-title { margin-top: .5rem; }

.text-gradient {
  background: linear-gradient(135deg, var(--b300), var(--c400));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.text-gold {
  background: linear-gradient(135deg, var(--g400), var(--g300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.center { text-align: center; }
.center-text { max-width: 760px; margin: .75rem auto 0; }

/* Section divider — comic panel rule */
.divider {
  width: min(860px, 100%);
  margin: 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--b400) 25%, var(--c400) 60%, transparent 100%);
  border-radius: 999px;
  box-shadow: 0 2px 0 rgba(0,0,0,.50);
}

.section { padding: 3.2rem 0; }
.section-top { padding-top: 3.8rem; }
.section-head { margin-bottom: 1.4rem; }

/* ================================================================
   TOPBAR — floating comic card
   ================================================================ */
.topbar {
  position: fixed;
  top: .80rem;
  left: 1.3rem;
  right: 1.3rem;
  z-index: 100;
  border-radius: 20px;
  /* Thick ink border */
  border: 3px solid rgba(56,189,248,.45);
  background:
    /* cel highlight band top */
    linear-gradient(180deg, rgba(125,211,252,.08) 0%, transparent 30%),
    linear-gradient(140deg, rgba(2,18,44,.97), rgba(1,12,30,.99));
  /* Hard shadow — the defining feature */
  box-shadow:
    0 6px 0 rgba(0,0,0,.70),
    0 8px 0 rgba(0,30,70,.50),
    0 22px 50px rgba(0,8,22,.55);
  transition: border-color .26s, box-shadow .26s;
}

/* Ink line at bottom of topbar */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(90deg, transparent, var(--b400), var(--c400), transparent);
  pointer-events: none;
}

/* Gloss sweep */
.topbar::before {
  content: "";
  position: absolute;
  left: 20%; top: -55%;
  width: 120px; height: 210%;
  background: linear-gradient(90deg, transparent, rgba(186,230,253,.10), transparent);
  pointer-events: none;
  animation: nav-gloss 10s linear infinite;
  border-radius: 20px;
}

.topbar-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: .68rem 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .76rem;
  color: var(--text-strong);
  text-decoration: none;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  letter-spacing: .04em;
}

.brand img {
  width: 40px; height: 40px;
  border-radius: 12px;
  object-fit: cover;
  /* Comic-style thick border + hard shadow */
  border: 3px solid var(--b300);
  box-shadow: 3px 3px 0 var(--ink-shadow), 0 0 16px rgba(56,189,248,.32);
  transition: transform .18s, box-shadow .18s;
}
.brand:hover img {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink-shadow), 0 0 22px rgba(56,189,248,.50);
}

.nav { justify-self: center; display: inline-flex; align-items: center; gap: 1.9rem; }

.nav a {
  position: relative;
  color: var(--text-soft);
  text-decoration: none;
  font-family: "Oxanium", sans-serif;
  font-weight: 700;
  font-size: .93rem;
  letter-spacing: .06em;
  padding: .28rem .1rem;
  transition: color .18s;
  cursor: pointer;
}
/* Thick underline instead of thin */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.18rem;
  height: 3px;
  border-radius: 2px;
  background: var(--b300);
  box-shadow: 0 1px 0 var(--ink-shadow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .20s;
}
.nav a:hover, .nav a.active { color: var(--text-strong); }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

.top-actions { display: inline-flex; align-items: center; gap: .5rem; }

/* Profile */
.profile-menu { position: relative; }
.profile-menu-btn { max-width: 220px; }

.profile-popover {
  position: absolute;
  right: 0;
  top: calc(100% + .6rem);
  width: min(300px, calc(100vw - 2rem));
  border-radius: 18px;
  border: 3px solid rgba(56,189,248,.40);
  background: linear-gradient(145deg, rgba(2,18,44,.99), rgba(1,12,30,1));
  box-shadow: 6px 6px 0 var(--ink-shadow);
  padding: .82rem;
  z-index: 120;
}

.profile-popover-header { display:flex; gap:.66rem; align-items:center; }

.profile-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 3px solid var(--b400);
  object-fit: cover;
  background: var(--b700);
  box-shadow: 3px 3px 0 var(--ink-shadow);
}
.profile-avatar-fallback { background: var(--b700); }
.profile-name { color: var(--text-strong); font-size:.92rem; font-weight:700; line-height:1.2; }
.profile-tag  { margin-top:.1rem; color: var(--text-soft); font-size:.80rem; }

.profile-signout-btn {
  width: 100%;
  margin-top: .72rem;
  border-radius: 12px;
  border: 3px solid #EF4444;
  background: #450A0A;
  color: #FECACA;
  cursor: pointer;
  padding: .58rem .72rem;
  font-weight: 800;
  box-shadow: 4px 4px 0 #1A0000;
  transition: transform .14s, box-shadow .14s;
}
.profile-signout-btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 #1A0000; }
.profile-signout-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #1A0000; }

/* ================================================================
   BUTTONS — comic press style
   Press down on :active, pop up on :hover
   ================================================================ */
.btn {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  text-decoration: none;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  font-size: .92rem;
  letter-spacing: .07em;
  padding: .88rem 1.40rem;
  /* Base: no transform */
  transition: transform .12s, box-shadow .12s, filter .18s;
}

/* Shine sweep */
.btn::before {
  content: "";
  position: absolute;
  top: -140%; bottom: -140%; left: -44%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.40), transparent);
  transform: translateX(-280%) rotate(18deg);
  transition: transform .45s;
  pointer-events: none;
}
/* HOVER: pop up, shadow grows */
.btn:hover { transform: translate(-2px, -3px); }
.btn:hover::before { transform: translateX(680%) rotate(18deg); }
/* ACTIVE: press down — shadow collapses */
.btn:active { transform: translate(3px, 4px); }

.btn-small { padding:.54rem .96rem; font-size:.83rem; border-radius:11px; }

/* Primary — bright sky blue, thick ink border, hard shadow */
.btn-primary {
  color: #001828;
  background: linear-gradient(170deg, var(--b200) 0%, var(--b300) 40%, var(--b400) 100%);
  border: 3px solid var(--b500);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.20),
    /* hard bottom-right ink shadow */
    5px 5px 0 rgba(0,30,70,.85);
}
.btn-primary:hover {
  filter: brightness(1.08) saturate(1.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.20),
    7px 8px 0 rgba(0,30,70,.85);
}
.btn-primary:active {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.20),
    2px 2px 0 rgba(0,30,70,.85);
}

/* Secondary — dark glass, ink border */
.btn-secondary {
  color: var(--text-strong);
  border: 3px solid rgba(56,189,248,.46);
  background: var(--card-fill-b);
  box-shadow:
    inset 0 1px 0 rgba(125,211,252,.14),
    5px 5px 0 var(--ink-shadow);
}
.btn-secondary:hover {
  border-color: var(--b300);
  background: var(--b700);
  box-shadow:
    inset 0 1px 0 rgba(125,211,252,.22),
    7px 8px 0 var(--ink-shadow);
}
.btn-secondary:active {
  box-shadow: inset 0 1px 0 rgba(125,211,252,.14), 2px 2px 0 var(--ink-shadow);
}

/* Ghost */
.btn-ghost {
  color: var(--text-main);
  border: 3px solid rgba(56,189,248,.32);
  background: transparent;
  box-shadow: 5px 5px 0 var(--ink-shadow);
}
.btn-ghost:hover {
  border-color: var(--b300);
  color: var(--text-strong);
  background: rgba(56,189,248,.08);
  box-shadow: 7px 8px 0 var(--ink-shadow);
}
.btn-ghost:active { box-shadow: 2px 2px 0 var(--ink-shadow); }

/* Gold */
.btn-gold {
  color: #0A0600;
  background: linear-gradient(170deg, var(--g300), var(--g400));
  border: 3px solid var(--g500);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    5px 5px 0 rgba(60,20,0,.80);
}
.btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 7px 8px 0 rgba(60,20,0,.80);
}
.btn-gold:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 2px 2px 0 rgba(60,20,0,.80); }

/* ================================================================
   GLASS CARDS — CEL SHADE PANELS
   Flat fill + cel highlight on top-left + hard ink offset shadow
   No backdrop-filter on structure — cel shading is CRISP
   ================================================================ */
.glass {
  position: relative;
  border-radius: var(--r-md);
  /* Thick ink border */
  border: 3px solid rgba(56,189,248,.38);
  /* Flat dark fill */
  background:
    /* cel highlight: bright streak top-left */
    linear-gradient(
      135deg,
      rgba(186,230,253,.16) 0%,
      rgba(125,211,252,.08) 18%,
      transparent 35%
    ),
    /* cel shade: dark band bottom-right */
    linear-gradient(
      315deg,
      rgba(0,0,0,.40) 0%,
      transparent 40%
    ),
    /* flat fill */
    linear-gradient(148deg, var(--card-fill-b), var(--card-fill));
  /* HARD shadow — defining feature of cel shading */
  box-shadow:
    6px 6px 0 var(--ink-shadow),
    /* subtle inner highlight line */
    inset 0 1px 0 rgba(186,230,253,.20),
    inset -1px -1px 0 rgba(0,0,0,.30);
  overflow: visible;
  transform-style: preserve-3d;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

/* Top ink line highlight */
.glass::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(186,230,253,.80), var(--b200), rgba(94,234,212,.60), transparent);
  pointer-events: none;
}

/* Spinning border on hover — ring only, center masked out */
.glass::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--r-md) + 4px);
  padding: 3px; /* defines ring thickness */
  background: conic-gradient(
    from var(--spin-angle, 0deg),
    var(--b300)   0deg,
    var(--c300)   90deg,
    var(--p300)  180deg,
    var(--b300)  270deg,
    var(--b300)  360deg
  );
  /* Cut out the card interior — only the 3px ring is painted */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  transition: opacity .30s;
  animation: spin-border 3.5s linear infinite paused;
  pointer-events: none;
}

.glass:hover {
  transform: translate(-3px, -5px);
  border-color: var(--b300);
  box-shadow:
    /* shadow grows as card "lifts" */
    9px 9px 0 var(--ink-shadow),
    inset 0 1px 0 rgba(186,230,253,.28),
    inset -1px -1px 0 rgba(0,0,0,.30),
    /* faint blue glow */
    0 0 40px rgba(56,189,248,.15);
}
.glass:hover::before { opacity: 1; animation-play-state: running; }

/* ================================================================
   STATUS / CARDS
   ================================================================ */
.status-card, .app-card, .cta-panel, .details-card, .empty-panel {
  padding: 1.6rem;
}
.status-card h2 { margin-bottom: .72rem; }

.status-list { margin-top: .78rem; display: grid; gap: .60rem; }

.status-list div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .50rem;
  padding: .52rem .74rem;
  border-radius: 10px;
  /* Mini cel card */
  background: rgba(56,189,248,.07);
  border: 2px solid rgba(56,189,248,.18);
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.status-list div:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--ink-shadow);
  border-color: rgba(56,189,248,.42);
}
.status-list strong { color: var(--text-strong); }

/* ---- Metrics ---- */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 1.2rem;
  align-items: stretch;
}

.metric-card {
  padding: 1.6rem 1.4rem;
  min-height: 220px;
  /* Lighter flat fill with more noticeable cel highlight */
  background:
    linear-gradient(135deg, rgba(186,230,253,.18) 0%, rgba(125,211,252,.06) 22%, transparent 38%),
    linear-gradient(315deg, rgba(0,0,0,.35) 0%, transparent 38%),
    var(--card-fill-b);
  animation: card-float var(--float-delay, 4s) ease-in-out infinite alternate;
}
.metric-card:nth-child(1) { --float-delay: 4.0s; }
.metric-card:nth-child(2) { --float-delay: 5.4s; }
.metric-card:nth-child(3) { --float-delay: 6.6s; }
.metric-card:nth-child(4) { --float-delay: 7.8s; }

.metric-top {
  display: flex;
  align-items: center;
  gap: .72rem;
  color: var(--b100);
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  font-size: .92rem;
}

/* CEL SHADE icon box — hard multi-layer shadow */
.metric-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 3px solid var(--b400);
  background: linear-gradient(135deg, rgba(186,230,253,.22) 0%, var(--b700) 100%);
  color: var(--b100);
  flex: 0 0 auto;
  /* Hard 3D stacked shadows */
  box-shadow:
    3px 3px 0 var(--ink-shadow),
    4px 4px 0 rgba(0,20,50,.60),
    5px 5px 0 rgba(0,10,30,.40);
  transform: perspective(200px) rotateX(10deg) rotateY(-8deg);
  transition: transform .22s, box-shadow .22s;
}
.metric-card:hover .metric-icon {
  transform: perspective(200px) rotateX(5deg) rotateY(-4deg) translateZ(6px);
  box-shadow:
    2px 2px 0 var(--ink-shadow),
    3px 3px 0 rgba(0,20,50,.60),
    /* glow on hover */
    0 0 22px rgba(56,189,248,.45);
}
.metric-card p { margin-top: .88rem; color: var(--text-soft); font-size: .93rem; line-height: 1.64; }

/* ---- Applications ---- */
.applications { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.app-card h2, .cta-panel h2 { margin-top: .30rem; }
.app-card .btn { margin-top: 1.1rem; }
.cta-panel { display: grid; gap: .90rem; align-items: center; grid-template-columns: 1fr auto; }
.cta-panel p { color: var(--text-main); }

/* ---- Filter chips ---- */
.filter-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .64rem; margin-top: 1.2rem; }

.chip {
  appearance: none;
  cursor: pointer;
  border-radius: 999px;
  border: 3px solid rgba(56,189,248,.38);
  background: var(--b700);
  color: var(--b100);
  font-family: "Oxanium", sans-serif;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: .52rem 1.0rem;
  box-shadow: 4px 4px 0 var(--ink-shadow);
  transition: transform .12s, box-shadow .12s, border-color .14s;
}
.chip:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-shadow); border-color: var(--b300); }
.chip:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink-shadow); }

.chip-active {
  color: #001828;
  background: var(--b300);
  border-color: var(--b500);
  box-shadow: 4px 4px 0 rgba(0,30,70,.80), 0 0 18px rgba(56,189,248,.38);
}

/* ================================================================
   EVENTS
   ================================================================ */
.events-sections-layout { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; align-items: start; }
.events-sections-layout.events-sections-single { grid-template-columns: 1fr; }
.section-compact { padding-top: 1.6rem; }
.events-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; }
.events-grid-single { grid-template-columns: 1fr; }

.event-card { display: block; color: inherit; text-decoration: none; overflow: hidden; position: relative; cursor: pointer; }

.event-cover {
  position: relative;
  overflow: hidden;
  height: 280px;
  border-bottom: 3px solid rgba(56,189,248,.30);
}
.event-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .40s ease, filter .40s ease;
  filter: saturate(.85) brightness(.88);
}
.event-card:hover .event-cover img {
  transform: scale(1.07);
  filter: saturate(1.18) brightness(1.05);
}

/* Gradient overlay */
.event-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,10,22,.02) 0%, rgba(1,10,22,.12) 40%, rgba(2,18,44,.70) 100%);
}

/* Tags */
.event-tag {
  position: absolute;
  top: .84rem; left: .84rem;
  z-index: 2;
  border-radius: 999px;
  padding: .32rem .74rem;
  border: 3px solid #EF4444;
  background: #450A0A;
  color: #FECACA;
  font-size: .70rem;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #1A0000;
}
.event-tag-upcoming {
  border-color: var(--b300);
  background: var(--b700);
  color: var(--b050);
  box-shadow: 3px 3px 0 rgba(0,20,50,.80);
}

.event-body { padding: 1.3rem; }
.event-title-row { display: flex; align-items: center; justify-content: space-between; gap: .66rem; }

.event-side-tag {
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2.5px solid rgba(56,189,248,.46);
  background: var(--b700);
  color: var(--b050);
  font-size: .68rem;
  font-family: "Oxanium", sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
  padding: .28rem .64rem;
  box-shadow: 2px 2px 0 var(--ink-shadow);
}

.event-meta { margin-top: .56rem; font-size: .87rem; color: var(--text-soft); }
.event-meta-alert { color: #FCA5A5; }
.empty-panel { border-style: dashed; border-width: 3px; text-align: center; }

/* ================================================================
   DETAIL PAGES
   ================================================================ */
.details-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

.details-map {
  width: 100%;
  border-radius: 16px;
  border: 3px solid rgba(56,189,248,.38);
  margin-top: .84rem;
  /* Hard photo shadow */
  box-shadow: 7px 7px 0 var(--ink-shadow);
  transition: transform .20s, box-shadow .20s;
}
.details-map:hover {
  transform: translate(-3px,-4px);
  box-shadow: 10px 10px 0 var(--ink-shadow), 0 0 30px rgba(56,189,248,.22);
}

.check-list { list-style: none; margin: .88rem 0 0; padding: 0; display: grid; gap: .68px; }
.check-list li { position: relative; padding-left: 1.5rem; color: var(--text-main); margin-bottom: .68rem; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: .44rem;
  width: .62rem; height: .62rem;
  border: 2.5px solid var(--b400);
  background: var(--b300);
  transform: rotate(45deg);
  box-shadow: 2px 2px 0 var(--ink-shadow);
}

.video-wrap iframe {
  width: 100%;
  border: 0;
  border-radius: 18px;
  aspect-ratio: 16/9;
  box-shadow: 7px 7px 0 var(--ink-shadow);
}

.timeline-list { margin-top: .88rem; display: grid; gap: .64rem; }
.timeline-list div {
  border-left: 5px solid var(--b400);
  padding: .54rem 0 .54rem .90rem;
  border-radius: 0 12px 12px 0;
  background: rgba(56,189,248,.07);
  /* Hard shadow */
  box-shadow: 4px 4px 0 var(--ink-shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.timeline-list div:hover {
  transform: translate(-3px,-2px);
  box-shadow: 7px 6px 0 var(--ink-shadow);
  border-left-color: var(--b200);
}

.notice-banner {
  margin-top: 1.1rem;
  border-radius: 14px;
  border: 3px solid rgba(56,189,248,.36);
  background: linear-gradient(
    135deg,
    rgba(186,230,253,.12) 0%, transparent 30%
  ),
  var(--card-fill-b);
  padding: .96rem 1.12rem;
  box-shadow: 5px 5px 0 var(--ink-shadow);
}
.notice-banner p { color: var(--b100); }

/* ================================================================
   FORMS
   ================================================================ */
.form-shell { width: min(980px, 100%); margin: 0 auto; display: grid; gap: 1.2rem; }

.gform-header {
  border-radius: var(--r-lg);
  border: 3px solid rgba(56,189,248,.40);
  border-top: 6px solid var(--b300);
  background:
    linear-gradient(135deg, rgba(186,230,253,.12) 0%, transparent 28%),
    var(--sur-dark);
  padding: 1.6rem;
  box-shadow: 7px 7px 0 var(--ink-shadow);
  position: relative;
  overflow: hidden;
}
.gform-header::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; top: 5px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(186,230,253,.70), var(--c300), transparent);
  border-radius: 999px;
}

.gform-intro, .gform-body { padding: 1.5rem; }
.gform-form { display: grid; gap: .96rem; }
.form-stack { margin-top: .80rem; display: grid; gap: .76rem; }

.form-stack label, .question-card label {
  display: grid;
  gap: .44rem;
  color: var(--b100);
  font-size: .94rem;
  font-weight: 700;
}

.form-stack input,
.form-stack textarea,
.form-stack select,
.gform-form input,
.gform-form textarea,
.gform-form select {
  width: 100%;
  border-radius: 12px;
  border: 3px solid rgba(56,189,248,.32);
  background: var(--card-fill);
  color: var(--text-strong);
  padding: .76rem .90rem;
  resize: vertical;
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.form-stack input::placeholder,
.form-stack textarea::placeholder,
.gform-form input::placeholder,
.gform-form textarea::placeholder { color: rgba(125,211,252,.50); }

.form-stack input:focus,
.form-stack textarea:focus,
.form-stack select:focus,
.gform-form input:focus,
.gform-form textarea:focus,
.gform-form select:focus {
  outline: none;
  border-color: var(--b300);
  background: var(--b700);
  box-shadow: 3px 3px 0 var(--ink-shadow), 0 0 0 3px rgba(56,189,248,.22);
}

.word-counter {
  margin: .34rem 0 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--b300);
  opacity: .85;
  text-align: right;
}
.word-counter-short { color: #FDBA74; }
.word-counter-ok { color: #86EFAC; }

.section-divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--b300); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.section-divider::before, .section-divider::after {
  content: ""; flex: 1; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.35), transparent);
}

.question-card {
  border-radius: 16px;
  border: 2.5px solid rgba(56,189,248,.22);
  background:
    linear-gradient(135deg, rgba(186,230,253,.10) 0%, transparent 30%),
    var(--card-fill);
  padding: 1.12rem;
  box-shadow: 4px 4px 0 var(--ink-shadow);
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.question-card:hover {
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--ink-shadow);
  border-color: rgba(56,189,248,.46);
}

.question-check-grid { margin-top: .72rem; display: grid; gap: .56rem; }
.checkbox-field {
  display: inline-flex !important;
  align-items: center;
  gap: .64rem !important;
  line-height: 1.5;
  color: var(--b100) !important;
}
.checkbox-field input[type="checkbox"],
.checkbox-field input[type="radio"] {
  margin: 0 !important;
  width: 18px !important; height: 18px !important;
  min-width: 18px;
  flex: 0 0 18px;
  padding: 0; border: 0; background: transparent; box-shadow: none;
  accent-color: var(--b400);
}

.question-note { margin: .56rem 0 0; color: var(--text-main); font-size: .86rem; }
.question-warning {
  margin: .1rem 0 .4rem;
  color: #FF6B6B;
  font-size: .86rem;
  font-weight: 800;
  letter-spacing: .01em;
}

/* Clickable text inside application forms inherits the surrounding text color
   (instead of the browser default link/visited purple) and is marked by
   underline + italic. */
.question-card a,
.question-card a:visited,
.question-note a,
.question-note a:visited,
.checkbox-field a,
.checkbox-field a:visited {
  color: inherit;
  font-style: italic;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .16s;
}
.question-card a:hover,
.question-note a:hover,
.checkbox-field a:hover { opacity: .72; }
.submit-row { display: grid; gap: .74rem; }
.form-message { margin: 0; color: #86EFAC; font-size: .90rem; }
.error-message { color: #FCA5A5; }

/* ================================================================
   ADMIN PANEL
   ================================================================ */
.admin-only-mode .ambient { display: none; }

.admin-overlay {
  min-height: 100vh;
  padding: 2.6rem 1rem;
  background:
    radial-gradient(900px 560px at -12% -14%, rgba(14,165,233,.14), transparent 58%),
    radial-gradient(900px 560px at 110%  10%, rgba(236,72,153,.11), transparent 58%),
    linear-gradient(160deg, #000A14, #000E1C 46%, #001526);
  background-image:
    radial-gradient(circle, rgba(56,189,248,.11) 1.5px, transparent 1.5px),
    radial-gradient(900px 560px at -12% -14%, rgba(14,165,233,.14), transparent 58%),
    radial-gradient(900px 560px at 110%  10%, rgba(236,72,153,.11), transparent 58%),
    linear-gradient(160deg, #000A14, #000E1C 46%, #001526);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%;
}

.admin-center { min-height: calc(100vh - 4.8rem); display: grid; place-items: center; }
.admin-login-card { width: min(520px, 100%); padding: 1.4rem; }

.admin-panel-wrap { width: min(1380px, 100%); margin: 0 auto; display: grid; gap: 1.2rem; }

.admin-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: var(--r-md);
  border: 3px solid rgba(56,189,248,.32);
  background: linear-gradient(135deg, rgba(186,230,253,.10) 0%, transparent 25%), var(--sur-dark);
  padding: 1.1rem;
  box-shadow: 6px 6px 0 var(--ink-shadow);
}
.admin-head-actions { display: inline-flex; gap: .44rem; }

.admin-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .90rem; padding: .92rem 1.1rem; }
.admin-toolbar-main { display: grid; gap: .44rem; }
.admin-search-wrap { display: block; width: min(440px, 100%); }

.admin-search-input {
  width: 100%;
  border-radius: 12px;
  border: 3px solid rgba(56,189,248,.34);
  background: var(--card-fill);
  color: var(--text-strong);
  padding: .60rem .84rem;
  font-size: .92rem;
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transition: border-color .18s, box-shadow .18s;
}
.admin-search-input::placeholder { color: rgba(125,211,252,.55); }
.admin-search-input:focus {
  outline: none;
  border-color: var(--b300);
  box-shadow: 3px 3px 0 var(--ink-shadow), 0 0 0 3px rgba(56,189,248,.20);
}

.admin-counts { display: flex; flex-wrap: wrap; gap: .46rem; }
.admin-filter-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .46rem; }
.admin-panel-grid { display: grid; grid-template-columns: 400px 1fr; gap: 1.2rem; }

.admin-list,
.admin-detail {
  border-radius: var(--r-md);
  border: 3px solid rgba(56,189,248,.28);
  background: linear-gradient(135deg, rgba(186,230,253,.08) 0%, transparent 22%), var(--sur-dark);
  padding: 1rem;
  min-height: 72vh;
  box-shadow: 6px 6px 0 var(--ink-shadow);
}
.admin-list { display: flex; flex-direction: column; gap: .72rem; max-height: 72vh; padding-bottom: .2rem; overflow: auto; }
.admin-detail { overflow: auto; }

.admin-app-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 14px;
  border: 2.5px solid rgba(56,189,248,.30);
  background: linear-gradient(135deg, rgba(186,230,253,.10) 0%, transparent 30%), var(--card-fill);
  color: var(--text-strong);
  text-align: left;
  padding: 0;
  min-height: 175px;
  overflow: hidden;
  box-shadow: 4px 4px 0 var(--ink-shadow);
  transition: transform .14s, border-color .14s, box-shadow .14s;
  cursor: pointer;
}
.admin-app-card:hover {
  transform: translate(-2px,-2px);
  border-color: var(--b300);
  box-shadow: 6px 6px 0 var(--ink-shadow);
}

.admin-app-main {
  display: block; flex: 1 1 auto; width: 100%;
  text-align: left; color: inherit; border: 0;
  background: transparent;
  padding: .84rem .84rem .66rem;
  cursor: pointer;
}

.admin-app-title-row { display: flex; align-items: center; justify-content: space-between; gap: .72rem; }
.admin-app-user { display: flex; align-items: center; gap: .62rem; min-width: 0; }

.admin-app-avatar,
.admin-detail-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  border: 3px solid var(--b400);
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--b700);
  box-shadow: 3px 3px 0 var(--ink-shadow);
}

.admin-app-avatar-fallback,
.admin-detail-avatar-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--b100); font-size: .86rem; font-weight: 800; text-transform: uppercase;
}

.admin-app-card h3 { margin: 0; font-size: 1.28rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.admin-app-number {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: .18rem .56rem;
  border-radius: 999px;
  border: 2.5px solid var(--b400);
  background: var(--b700);
  color: var(--b050);
  font-size: .74rem; font-family: "Oxanium", sans-serif; font-weight: 800;
  letter-spacing: .05em; line-height: 1.2;
  box-shadow: 2px 2px 0 var(--ink-shadow);
}

.admin-app-card p { margin: .3rem 0 0; color: var(--b300); letter-spacing: .07em; font-size: .82rem; }
.admin-app-card small { display: block; margin-top: .36rem; color: var(--text-soft); }
.admin-review-text { font-size: .70rem; letter-spacing: .10em; font-weight: 800; color: var(--b100); }

.admin-app-actions {
  display: flex; align-items: center; gap: .44rem;
  justify-content: flex-start; flex-wrap: wrap;
  margin-top: auto;
  border-top: 3px solid rgba(56,189,248,.18);
  background: rgba(0,8,22,.40);
  padding: .50rem .84rem .78rem;
}

.admin-review-btn {
  width: 32px; height: 32px;
  flex: 0 0 auto; border-radius: 9px;
  border: 2.5px solid rgba(56,189,248,.36);
  background: var(--b700);
  color: var(--b100);
  font-size: 1rem; font-weight: 800; line-height: 1;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink-shadow);
  transition: transform .12s, box-shadow .12s;
}
.admin-review-btn:hover { transform: translate(-1px,-2px); box-shadow: 4px 5px 0 var(--ink-shadow); }
.admin-review-btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink-shadow); }
.admin-review-btn:disabled { opacity: .7; cursor: wait; }

.admin-review-accept { border-color: #4ADE80; color: #DCFCE7; background: #052E16; }
.admin-review-accept:hover,
.admin-review-accept.is-selected {
  background: #14532D;
  box-shadow: 4px 5px 0 #021A0A;
}

.admin-review-deny { border-color: #F87171; color: #FFE4E4; background: #450A0A; }
.admin-review-deny:hover,
.admin-review-deny.is-selected {
  background: #7F1D1D;
  box-shadow: 4px 5px 0 #1A0000;
}

.admin-app-card-accepted {
  border-color: #4ADE80;
  background: linear-gradient(135deg, rgba(74,222,128,.12) 0%, transparent 30%), #052E16;
}
.admin-app-card-denied {
  border-color: #F87171;
  background: linear-gradient(135deg, rgba(248,113,113,.12) 0%, transparent 30%), #450A0A;
}

.admin-app-card.active { border-color: var(--b200); box-shadow: 0 0 0 2px var(--b400), 5px 5px 0 var(--ink-shadow); }
.admin-app-card.active.admin-app-card-accepted { box-shadow: 0 0 0 2px #4ADE80, 5px 5px 0 #021A0A; }
.admin-app-card.active.admin-app-card-denied   { box-shadow: 0 0 0 2px #F87171, 5px 5px 0 #1A0000; }

.admin-detail-header h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); }
.admin-detail-user-row { display: flex; align-items: center; gap: .72rem; }
.admin-detail-user-row h3 { margin: 0; }
.admin-detail-avatar { width: 44px; height: 44px; }
.admin-detail-header p { color: var(--text-main); }

.admin-review-pill {
  display: inline-flex; align-items: center;
  border-radius: 999px; border: 2.5px solid rgba(56,189,248,.44);
  background: var(--b700); color: var(--b050);
  font-size: .78rem; font-family: "Oxanium", sans-serif;
  font-weight: 800; letter-spacing: .05em; padding: .22rem .62rem;
  box-shadow: 2px 2px 0 var(--ink-shadow);
}
.admin-review-pill-pending  { border-color: rgba(56,189,248,.44); background: var(--b700); color: var(--b050); }
.admin-review-pill-accepted { border-color: #4ADE80; background: #052E16; color: #DCFCE7; }
.admin-review-pill-denied   { border-color: #F87171; background: #450A0A; color: #FFE4E4; }

.admin-detail-actions { display: flex; flex-wrap: wrap; gap: .56rem; margin: .76rem 0 .40rem; }
.admin-detail-actions .admin-review-btn { width:auto; min-width:122px; height:38px; padding: 0 .88rem; border-radius:11px; font-size:.9rem; }

.admin-answer-list { margin-top: .94rem; display: grid; gap: .74rem; }
.admin-answer-row {
  border-left: 5px solid var(--b400);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(186,230,253,.10) 0%, transparent 30%), var(--card-fill);
  padding: .76rem .90rem;
  box-shadow: 4px 4px 0 var(--ink-shadow);
}
.admin-answer-row-pasted {
  border-left-color: var(--g400);
  background: linear-gradient(135deg, rgba(251,191,36,.10) 0%, transparent 30%), var(--card-fill);
  box-shadow: 0 0 0 2px rgba(251,191,36,.40), 4px 4px 0 var(--ink-shadow);
}
.admin-answer-row h4 { margin: 0; color: var(--b300); font-size: .88rem; letter-spacing: .08em; text-transform: uppercase; }

.admin-paste-flag {
  display: inline-flex; align-items: center; margin-left: .56rem;
  border-radius: 999px;
  border: 2px solid var(--g400);
  background: #3A1C02;
  color: #FDE68A;
  font-size: .65rem; letter-spacing: .04em; font-weight: 800; padding: .12rem .52rem;
  vertical-align: middle;
  box-shadow: 2px 2px 0 rgba(40,16,0,.80);
}

.admin-answer-row p { margin: .44rem 0 0; color: var(--text-strong); line-height: 1.56; white-space: pre-wrap; }
mark.admin-paste-highlight {
  background: rgba(253,230,138,.35);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
  outline: 1.5px solid rgba(251,191,36,.55);
}
.admin-storage-note { font-size: .84rem; opacity: .78; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer {
  margin-top: 4rem;
  border-top: 3px solid rgba(56,189,248,.28);
  background: linear-gradient(180deg, rgba(0,8,20,0) 0%, rgba(0,8,20,.70) 100%);
  position: relative;
}
.footer::before {
  content: "";
  position: absolute;
  left: 10%; right: 10%; top: -3px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--b300), var(--c400), transparent);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--ink-shadow);
}
.footer-inner {
  padding: 1.5rem 0 2.6rem;
  display: flex; justify-content: space-between; gap: .66rem;
  color: var(--text-soft); font-size: .88rem;
}
.footer-inner a { color: var(--text-soft); text-decoration: none; transition: color .16s; }
.footer-inner a:hover { color: var(--b300); }

/* ================================================================
   REVEAL
   ================================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px) scale(.984);
  transition: opacity .58s ease, transform .58s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* ================================================================
   ANIMATIONS
   ================================================================ */

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(38px) scale(.97); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0);   }
}
.hero-epic-content { animation: hero-fade-up .88s cubic-bezier(.16,1,.30,1) both; }
.hero-kicker       { animation-delay: .06s; }
.hero-title        { animation: hero-fade-up .84s cubic-bezier(.16,1,.30,1) .13s both; }
.hero-desc         { animation: hero-fade-up .80s cubic-bezier(.16,1,.30,1) .24s both; }
.hero-stats        { animation: hero-fade-up .78s cubic-bezier(.16,1,.30,1) .34s both; }
.hero-actions      { animation: hero-fade-up .76s cubic-bezier(.16,1,.30,1) .44s both; }

.glass-tilt-active { transform-style: preserve-3d; will-change: transform; }

@keyframes orb-drift {
  0%   { transform: translate(0px,   0px)  scale(1.00); }
  33%  { transform: translate(30px, -26px) scale(1.08); }
  66%  { transform: translate(-22px, 18px) scale(.93); }
  100% { transform: translate(16px,  -12px) scale(1.05); }
}

@keyframes particle-rise {
  0%   { opacity:0; transform: translateY(0)    translateX(0)   scale(0); }
  15%  { opacity:1; transform: translateY(-44px) translateX(4px)  scale(1); }
  75%  { opacity:.5; transform: translateY(-240px) translateX(-6px) scale(.6); }
  100% { opacity:0; transform: translateY(-380px) translateX(2px)  scale(0); }
}

@keyframes card-float {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-7px); }
}

@keyframes spin-border {
  to { --spin-angle: 360deg; }
}

/* Speed lines rotation */
@keyframes speed-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes nav-gloss {
  from { transform: translateX(-300px); }
  to   { transform: translateX(1600px); }
}

@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 2px var(--b300), 0 0 12px rgba(56,189,248,.90); opacity: 1; }
  50%      { box-shadow: 0 0 0 3px var(--b200), 0 0 24px rgba(56,189,248,1.00); opacity: .76; }
}

@keyframes accent-shimmer {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .reveal, .reveal.is-visible { opacity:1; transform:none; }
}

/* ================================================================
   RESPONSIVE — 1180px
   ================================================================ */
@media (max-width: 1180px) {
  .hero, .applications, .details-layout { grid-template-columns: 1fr; }
  .metrics-grid    { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .events-sections-layout, .events-grid { grid-template-columns: 1fr; }
  .cta-panel       { grid-template-columns: 1fr; }
  .admin-panel-grid { grid-template-columns: 1fr; }
  .admin-list, .admin-detail { min-height: auto; max-height: none; }
  .admin-toolbar   { flex-direction: column; align-items: flex-start; }
  .admin-filter-row { justify-content: flex-start; }
}

/* ================================================================
   RESPONSIVE — 820px
   ================================================================ */
@media (max-width: 820px) {
  body { padding-top: 0; }

  .topbar {
    position: sticky;
    top: 0; left: 0; right: 0;
    border-radius: 0;
    border-left: none; border-right: none; border-top: none;
    /* flat ink shadow on mobile */
    box-shadow: 0 5px 0 var(--ink-shadow), 0 8px 20px rgba(0,8,22,.45);
  }

  .container { width: min(1240px, calc(100% - 1.4rem)); }

  .topbar-inner {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: .76rem;
    padding: .70rem 1rem;
  }
  .nav { justify-self: start; gap: 1.2rem; }
  .top-actions { width: 100%; justify-content: flex-end; }

  .hero-epic { min-height: 70vh; padding: 4rem 0 3rem; }
  .hero-title { font-size: clamp(2.8rem, 11vw, 4.5rem); -webkit-text-stroke: 2px rgba(0,15,40,.95); }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; }

  .event-cover { height: 230px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   RESPONSIVE — 500px
   ================================================================ */
@media (max-width: 500px) {
  .hero-title { font-size: clamp(2.4rem, 13vw, 3.6rem); -webkit-text-stroke: 1.5px rgba(0,15,40,.95); }
  .hero-kicker { flex-direction: column; gap: .6rem; }
  .admin-panel-wrap { padding: 0 .1rem; }
}