/* ========= GLOBAL COLORS ========= */
:root {
  --bg:#0a0f1a;
  --text:#e6ecff;
  --muted:#9bb0ff;
  --accent:#3aa0ff;
  --accent-2:#6dfbff;
  --border:rgba(109,251,255,.25);
  --card:rgba(15,21,36,.55);
  --shadow:0 10px 30px rgba(0,0,0,.4),0 0 20px rgba(61,165,255,.2);
  --accent-glow:0 0 24px rgba(61,165,255,.35),0 0 48px rgba(61,165,255,.2);
}

/* ========= RESETS ========= */
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; scroll-behavior:smooth; }

/* ========= BACKGROUND ========= */
body.bg-aurora {
  /* base sky */
  background:
    /* soft glows */
    radial-gradient(1200px 700px at 20% -10%, rgba(58,160,255,.10), transparent 60%),
    radial-gradient(900px 560px at 110% 8%, rgba(109,251,255,.08), transparent 70%),
    /* deep vertical fade */
    linear-gradient(180deg, #07101c 0%, #0a0f1a 40%, #060a14 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Aurora ribbons (conic gradients, super light on GPU; no seams) */
body.bg-aurora::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  opacity: 0.55;                    /* tune 0.4–0.7 */
  background:
    conic-gradient(from 210deg at 15% 40%,
      rgba(61,165,255,.05) 0 40%,
      rgba(61,165,255,0) 60% 100%),
    conic-gradient(from 330deg at 85% 25%,
      rgba(109,251,255,.06) 0 35%,
      rgba(109,251,255,0) 55% 100%),
    conic-gradient(from 265deg at 60% 85%,
      rgba(61,165,255,.045) 0 30%,
      rgba(61,165,255,0) 55% 100%);
  background-repeat: no-repeat;
  background-size: 140% 140%, 140% 140%, 130% 130%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========= NAVIGATION ========= */
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 0;
}

.navlinks {
  display:flex;
  gap:1.25rem;
  align-items:center;
}

.nav-toggle {
  display:none;
}

/* base nav links */
.navlinks a {
  color:var(--muted);
  text-decoration:none;
  white-space:nowrap;
  font-weight:500;
  opacity:.85;
  transition:color .2s ease, opacity .2s ease;
}

.navlinks a:hover {
  opacity:1;
  color:var(--accent-2);
}

.navlinks a.active {
  opacity:1;
  color:var(--accent-2);
  position:relative;
}

.navlinks a.active::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  border-radius:2px;
}

/* CTA buttons container (desktop) */
.cta {
  display:flex;
  gap:.6rem;
}

/* items that should ONLY show inside mobile hamburger */
.mobile-only {
  display:none;
}

/* button styled like a text link (for things like "Submit Highlight" inside nav) */
.btn-as-link {
  background:none;
  border:none;
  padding:0;
  margin:0;
  color:var(--muted);
  text-align:left;
  font:inherit;
  cursor:pointer;
}
.btn-as-link:hover {
  color:var(--accent-2);
}

/* Subtle noise texture */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .06;                     /* tweak 0.03–0.10 */
  mix-blend-mode: overlay;
  background-image:
    /* 2D micro-dither */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.02) 0, rgba(255,255,255,.02) 1px,
      transparent 1px, transparent 2px),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 1px,
      transparent 1px, transparent 2px);
  background-size: 180px 180px, 180px 180px;
}

/* ========= LINKS ========= */
a { color: inherit; text-decoration: none; }

/* ========= HEADER ========= */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(10,15,26,.9), rgba(10,15,26,.65) 60%, rgba(10,15,26,0));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(109,251,255,.12);
}

.container {
  width:min(1200px,92vw);
  margin:0 auto;
  padding:1rem 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand {
  display:flex;
  gap:.6rem;
  align-items:center;
  font-weight:800;
}

.badge {
  width:34px; height:34px;
  border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow: var(--accent-glow);
}

/* ========= BUTTONS ========= */
.btn {
  padding:.6rem .95rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(16,24,44,.9),rgba(16,24,44,.6));
  color:var(--text);
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}
.btn:hover {
  transform:translateY(-1px) scale(1.02);
  filter:brightness(1.06);
}
.btn.ghost { background:transparent; }

/* ========= MAIN LAYOUT ========= */
main { width:min(1200px,92vw); margin:1.25rem auto 3rem; }

h1 {
  font-size:1.9rem;
  margin-bottom:.25rem;
  font-weight:900;
  text-shadow:0 0 12px rgba(61,165,255,.25);
}
.meta { color:var(--muted); opacity:.9; }

.controls {
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
  margin:1rem 0;
}

/* ========= CHIPS ========= */
.chip {
  border:1px solid rgba(255,255,255,.15);
  padding:.4rem .7rem;
  border-radius:999px;
  background:rgba(16,24,44,.7);
  cursor:pointer;
}
.chip.active {
  border-color:var(--border);
  box-shadow:0 0 24px rgba(61,165,255,.35);
}

/* ========= SEARCH ========= */
.search { flex:1; min-width:220px; }
.search input {
  width:100%;
  padding:.65rem .8rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,15,26,.6);
  color:var(--text);
}

/* ========= GRID & CARDS ========= */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
@media(max-width:680px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion: no-preference) {
  body.bg-aurora::before {
    animation: auroraDrift 36s linear infinite alternate;
  }
.card {
  border:1px solid var(--border);
  background:var(--card);
  backdrop-filter:blur(12px) saturate(180%);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.thumb {
  aspect-ratio:16/9;
  background:#02060f;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:grid;
  place-items:center;
}
.thumb iframe, .thumb video {
  width:100%;
  height:100%;
  display:block;
}

.body { padding:.85rem; }
.title { font-weight:800; margin-bottom:.25rem; }
.sub { color:var(--muted); font-size:.92rem; margin-bottom:.5rem; }

.tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.35rem; }
.tag {
  padding:.25rem .55rem;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  font-size:.8rem;
  background:rgba(16,24,44,.7);
}

.row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  margin-top:.5rem;
}
.like {
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  border-radius:10px;
  padding:.35rem .6rem;
  cursor:pointer;
}
.like.liked { border-color:var(--border); }

.empty {
  opacity:.8;
  text-align:center;
  padding:2rem;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:12px;
}

/* ========= MODAL ========= */
.modal {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(2px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.modal.open { display:flex; }

.dialog {
  width:min(820px,96vw);
  border:1px solid var(--border);
  background:var(--card);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:1rem;
}
.dialog h2 { margin-bottom:.5rem; }

.form { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.field { display:flex; flex-direction:column; gap:.35rem; }

.field input,
.field textarea,
.field select {
  padding:.65rem .75rem;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(10,15,26,.6);
  color:var(--text);
  outline:none;
}

.field textarea { min-height:90px; resize:vertical; }
.row-2 { grid-column:1/-1; }

.small { font-size:.88rem; color:var(--muted); }
.pill {
  padding:.25rem .55rem;
  border:1px dashed rgba(255,255,255,.2);
  border-radius:999px;
  margin-left:.35rem;
}

.drop {
  border:1.5px dashed rgba(255,255,255,.18);
  border-radius:14px;
  padding:1rem;
  display:grid;
  place-items:center;
  background:rgba(14,20,34,.5);
}
.drop.drag { border-color:var(--accent-2); }

.actions {
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
  margin-top:.6rem;
}
.error { color:#ffb3b3; margin-top:.2rem; }
.success { color:#b3ffda; margin-top:.2rem; }

/* ========= NOISE ANIMATION ========= */
  @keyframes auroraDrift {
    0%   { background-position: 0% 0%, 0% 0%, 0% 0%; }
    100% { background-position: 2% 1%, -2% 1.5%, 1% -1%; }
  }
}

/* ========= MOBILE NAV BEHAVIOR ========= */
@media (max-width: 640px) {
  /* Only hamburger visible in header; hide brand + CTA row */
  .brand {
    display:none !important;
  }

  .cta {
    display:none !important;
  }

  .nav-toggle {
    display:block !important;
  }

  /* Hamburger dropdown */
  .navlinks {
    position:absolute;
    top:58px;
    left:0;
    right:0;
    padding:.75rem;
    background:linear-gradient(180deg, rgba(10,15,26,.98), rgba(10,15,26,.92));
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(109,251,255,.12);
    flex-direction:column;
    gap:.8rem;
    display:none;
  }

  .navlinks.show {
    display:flex !important;
  }

  /* Show mobile-only items (like Home / Submit duplicates inside nav) */
  .mobile-only {
    display:block !important;
  }
}