.stream-directory { padding-block: 2rem 3rem; }
.stream-directory .directory-intro { max-width: 48rem; color: var(--muted, #bdc0d7); }
.stream-directory .directory-tools { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-block: 1.5rem; }
.stream-directory label { display: grid; gap: .4rem; flex: 1 1 16rem; max-width: 32rem; }
.stream-directory input { width: 100%; padding: .8rem 1rem; border: 1px solid #77749b; border-radius: .65rem; background: #15152b; color: #fff; font: inherit; }
.directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.directory-card { min-width: 0; padding: 1.5rem; border: 1px solid #555078; border-radius: 1rem; background: linear-gradient(140deg, #282240, #15192d); }
.directory-card h2 { margin: .8rem 0 .5rem; overflow-wrap: anywhere; }
.directory-card h2 a { color: #eee5ff; }
.directory-card .directory-monogram { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; background: #594181; border-radius: 1rem; color: #fff; font-size: 1.4rem; font-weight: 800; }
.directory-card .directory-status { display: inline-block; margin-block: .3rem .8rem; color: #cdc9df; }
.directory-card[data-live=true] .directory-status { color: #8df1bc; }
.directory-card .directory-platforms { display: flex; flex-wrap: wrap; gap: .6rem 1rem; padding: 0; list-style: none; overflow-wrap: anywhere; }
.directory-card .directory-platforms a { color: #d6c0ff; }
.directory-summary { color: #cdc9df; }
.directory-empty { padding: 1.5rem; border: 1px solid #555078; border-radius: 1rem; }
.directory-grid [hidden], .stream-directory [hidden] { display: none !important; }
@media(max-width: 650px) { .directory-grid { grid-template-columns: 1fr; } .directory-card { padding: 1.15rem; } .stream-directory .stream-view-tabs { flex-wrap: wrap; } }

/* 2026-10-30 reviewed directory pass: use the approved portal width and card language. */
.stream-directory .wrap-narrow { width: min(calc(100% - 200px), 1720px); max-width: none; }
.directory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.directory-card { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; align-content: start; min-height: 292px; overflow: hidden; border-color: rgba(165,95,238,.44); background: radial-gradient(circle at 95% 5%,rgba(0,229,255,.11),transparent 35%),linear-gradient(145deg,rgba(38,24,66,.97),rgba(8,15,31,.98)); box-shadow: 0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04); transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.directory-card::before { content:""; position:absolute; inset:0 22px auto; height:2px; background:linear-gradient(90deg,transparent,#bc68ff,#53e5ff,transparent); opacity:.72; }
.directory-card:hover,.directory-card:focus-within { transform:translateY(-3px); border-color:rgba(104,224,255,.7); box-shadow:0 20px 45px rgba(0,0,0,.34),0 0 22px rgba(127,72,221,.16); }
.directory-card .directory-monogram { width:3.65rem; height:3.65rem; border:1px solid rgba(171,226,255,.4); border-radius:50%; background:linear-gradient(145deg,#7c39bd,#26377c); box-shadow:0 0 22px rgba(157,75,234,.35); }
.directory-card h2 { margin-top:1rem; font-size:clamp(1.25rem,1.7vw,1.7rem); }
.directory-card .directory-platforms { align-content:start; margin:.35rem 0 1.2rem; }
.directory-card .directory-platforms li { min-width:0; padding:.35rem .55rem; border:1px solid rgba(130,128,177,.25); border-radius:.5rem; background:rgba(7,10,24,.56); font-size:.83rem; }
.directory-card > .btn { align-self:end; justify-self:start; }
.directory-card[data-live="true"] { border-color:rgba(83,239,147,.66); box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 24px rgba(48,224,126,.14); }
.directory-card[data-live="true"]::before { background:linear-gradient(90deg,transparent,#4cff98,#5beaff,transparent); }
.stream-directory :is(input,a,button,select) { scroll-margin-block:7.5rem 11rem; }
@media(max-width:1350px){.directory-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.stream-directory .wrap-narrow{width:min(calc(100% - 40px),1080px)}}
@media(max-width:650px){.stream-directory{padding-bottom:10rem}.stream-directory .wrap-narrow{width:calc(100% - 28px)}.directory-grid{grid-template-columns:1fr;gap:14px}.directory-card{min-height:0}.directory-card:hover{transform:none}.directory-card .directory-platforms li{width:100%}}
@media(prefers-reduced-motion:reduce){.directory-card{transition:none}}