/* Op BlackLedger - FOIA Hub (terminal theme) v2 */
:root{
  --bg:#060a06; --panel:#081008; --grid:rgba(24,255,99,.08);
  --neon:#18ff63; --text:#c8f6d6; --muted:#84b799; --outline:rgba(24,255,99,.3);
}
*{box-sizing:border-box}
html,body{height:100%}
body.crt{
  margin:0; color:var(--text); font:16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:
    radial-gradient(1000px 600px at 20% -10%, rgba(24,255,99,.08), transparent 60%),
    radial-gradient(1200px 800px at 80% 110%, rgba(0,255,180,.08), transparent 60%),
    repeating-linear-gradient(90deg, rgba(24,255,99,.05) 0 1px, transparent 1px 4px),
    #050805;
  overflow-x:hidden;
}
.scanlines{ position:fixed; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(24,255,99,.04) 0 2px, transparent 2px 4px);
  mix-blend-mode:soft-light; animation:scan 7s linear infinite;
}
@keyframes scan{from{transform:translateY(-10px)} to{transform:translateY(10px)}}

a{color:var(--neon); text-decoration:none}
a:hover{filter:brightness(1.2)}

.bar{ position:sticky; top:0; z-index:10; background:rgba(5,8,5,.8); border-bottom:1px solid var(--outline); backdrop-filter:blur(6px)}
.bar__inner{ max-width:1100px; margin:0 auto; padding:10px 14px; display:flex; align-items:center; justify-content:space-between }
.brand{ display:flex; align-items:center; gap:10px }
.brand__logo{ width:28px; height:28px; filter:grayscale(1) brightness(1.1) }
.brand__text{ color:var(--neon); letter-spacing:.12em; font-weight:700 }
.nav{ display:flex; gap:16px; flex-wrap:wrap }
.nav__link{ color:var(--text) }
.nav__link:hover{ color:var(--neon) }

.wrap{ max-width:1100px; margin:0 auto; padding:22px 14px }
.hero{ text-align:center; margin:8px 0 20px }
.hero__title{ color:var(--neon); font-size:clamp(28px,3.2vw + 8px,48px); text-shadow:0 0 16px rgba(24,255,99,.35); margin:0 }
.hero__sub{ color:var(--muted); margin:6px 0 0 }

.card{ background:linear-gradient(180deg, rgba(8,16,10,.9), rgba(5,10,7,.9)); border:1px solid var(--outline); border-radius:14px; padding:14px; margin:18px 0; box-shadow:0 0 0 1px rgba(24,255,99,.1) inset, 0 0 32px rgba(24,255,99,.12) }
.term__header{ display:flex; align-items:center; gap:8px; margin:-4px 0 10px }
.term__header h2{ margin:0; color:var(--neon) }
.dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--outline); box-shadow:0 0 14px rgba(24,255,99,.3) inset; display:inline-block }
.grid{ display:grid; gap:10px; grid-template-columns:1fr }
label{ display:grid; gap:6px; color:var(--muted) }
input,textarea,select{ background:#071007; color:var(--text); border:1px solid var(--outline); border-radius:10px; padding:8px 10px; font:inherit; width:100% }
.actions{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 0 }
.btn{ border:1px solid var(--outline); background:rgba(24,255,99,.08); color:var(--neon); padding:8px 12px; border-radius:10px }

/* OUTPUT: now a textarea so it wraps long lines and stays inside the box */
.output{
  display:block; width:100%; min-height:12rem; resize:vertical;
  background:#061207; border:1px solid var(--outline); border-radius:10px; padding:10px;
  box-shadow:inset 0 0 20px rgba(24,255,99,.08);
  white-space:pre-wrap; word-break:break-word; overflow:auto; line-height:1.55;
}
.output.small{ min-height:auto; height:auto }

.filters{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 12px }
.table-wrap{ overflow:auto; border:1px solid var(--outline); border-radius:12px }
.table{ width:100%; border-collapse:collapse; font-size:14px }
.table th, .table td{ padding:10px; border-bottom:1px solid rgba(24,255,99,.15) }
.table th{ color:var(--neon); background:rgba(24,255,99,.08); position:sticky; top:0 }

details{ background:rgba(24,255,99,.06); border:1px solid var(--outline); border-radius:12px; padding:8px 10px; margin:10px 0 }
summary{ cursor:pointer; color:#d6ffe6 }

.foot{ text-align:center; color:var(--muted); padding:18px }

@media (min-width: 740px){
  .grid{ grid-template-columns: repeat(2, 1fr) }
}