:root {
  --nav-h: 80px;
  --ring-red: rgba(239,68,68,.40);
}

html, body { scroll-behavior: smooth; }
body {
  background:#000; color:#fff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
a { color:#fff; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0,0,0,.8); backdrop-filter: blur(6px);
  border-bottom: 1px solid #ef4444;
  height: var(--nav-h);
}
.nav ul { height:100%; display:flex; align-items:center; justify-content:center; gap:1rem; margin:0; padding:0 1rem; list-style:none; }
.nav a { padding:.5rem .75rem; border-radius:.5rem; text-decoration:none; }
.nav a:hover { color:#ef4444; }
.nav a.active { color:#fff; background: rgba(239,68,68,.15); border:1px solid var(--ring-red); }

/* Layout */
.container { width:100%; max-width:1200px; margin:0 auto; padding:1rem; }
.hero { min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem 1rem; position:relative; }
.hero h1 { font-size:clamp(2.25rem,4vw,3.5rem); color:#ef4444; margin:0 0 .5rem; }
.hero p { color:rgba(255,255,255,.85); max-width:60ch; margin:0 auto; }
.footer { text-align:center; padding:2rem 1rem; border-top:1px solid #ef4444; font-size:.9rem; }

/* Buttons */
.btn{
  display:inline-block; padding:.7rem 1.1rem; border-radius:9999px;
  border:2px solid #ef4444; font-weight:800; letter-spacing:.04em;
  background:linear-gradient(180deg, rgba(239,68,68,.15), rgba(239,68,68,.05));
  box-shadow:0 0 0 2px rgba(239,68,68,.25) inset, 0 8px 32px rgba(239,68,68,.2);
  text-decoration:none; color:#fff;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 0 0 2px rgba(239,68,68,.35) inset, 0 12px 40px rgba(239,68,68,.28) }

/* Backdrop */
.bg-grid{
  background:
    radial-gradient(ellipse at 50% 20%, rgba(239,68,68,.10), transparent 50%),
    repeating-linear-gradient(0deg, rgba(239,68,68,.08) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(239,68,68,.08) 0 1px, transparent 1px 24px),
    #000;
  animation:gridFloat 18s linear infinite;
}
@keyframes gridFloat{ 0%{background-position:0 0,0 0,0 0}100%{background-position:0 0,0 24px,24px 0} }

/* Cards */
.card{ border:2px solid #ef4444; border-radius:.75rem; padding:1rem; transition:all .3s ease; cursor:pointer; background:rgba(255,0,0,.05); }
.card:hover{ background:rgba(255,0,0,.12); transform:translateY(-1px); }
.card.expanded{ background:rgba(255,0,0,.2); box-shadow:0 0 0 1px #ef4444, 0 10px 30px rgba(239,68,68,.15); }

/* Embed shells */
.shell{ border:1px solid var(--ring-red); border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px var(--ring-red) inset, 0 10px 30px rgba(239,68,68,.15); }
.shell-70{ height:70svh; min-height:420px; max-height:900px; }
.shell-80{ height:80svh; min-height:420px; max-height:1000px; }

/* EOR fixed module */
.eor-shell{ height:78svh; min-height:520px; display:flex; flex-direction:column; }
.eor-body{ flex:1; min-height:0; }
.eor-grid{ height:100%; display:grid; gap:1rem; grid-template-columns:1fr; }
@media (min-width:1024px){ .eor-grid{ grid-template-columns:1fr 1fr; } }
.left-col,.right-col{ min-height:0; display:flex; flex-direction:column; }
#eor-list{ flex:1; min-height:0; overflow:auto; }
#eor-detail{ flex:1; min-height:0; overflow:auto; }
#eor-images{ max-height:30%; overflow:auto; }
pre.wrap-json{ white-space:pre-wrap; word-wrap:break-word; overflow-x:auto; }

/* Filters */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.chip{
  border:1px solid var(--ring-red); border-radius:9999px; padding:.35rem .7rem; font-size:.85rem;
  background:rgba(255,0,0,.06); cursor:pointer; user-select:none;
}
.chip.active{ background:rgba(239,68,68,.25); box-shadow:0 0 0 1px #ef4444 inset; }
.input{ background:rgba(0,0,0,.7); border:1px solid var(--ring-red); color:#fff; padding:.55rem .75rem; border-radius:.5rem; }
.small{ font-size:.9rem; opacity:.9; }

/* Search highlight */
.mark{ background:#7f1d1d; color:#fff; border-radius:.25rem; padding:0 .15rem; }

/* Force-hidden utility (beats Tailwind hidden) */
.is-hidden{ display:none !important; }

/* Masonry grid so neighbors don't visually expand */
.cards-masonry{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  grid-auto-rows:8px;
  grid-auto-flow:dense;
  align-items:start;
}
.cards-masonry > .card{ align-self:start; }

/* Make YouTube iframes fill their shell perfectly */
.card .shell,
.card .shell-70,
.card .shell-80 { position: relative; }

.card .shell iframe,
.card .shell-70 iframe,
.card .shell-80 iframe {
  position: absolute;     /* stretch to the shell’s edges */
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  display: block;
}

/* Optional: use a fixed 16:9 shell if you want equal-height cards instead of svh */
.shell-16x9 { 
  position: relative; 
  aspect-ratio: 16 / 9; 
  height: auto; 
  min-height: 0; 
}
.shell-16x9 iframe { position:absolute; inset:0; width:100% !important; height:100% !important; }