: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 {
  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); }

.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; }

.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) }

/* Animated page 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)}

.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; }