.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:56px 0 30px;flex-wrap:wrap}
.page-title{font-size:clamp(34px,4.6vw,52px);line-height:1}
.page-sub{color:var(--ink-dim);font-size:16px;max-width:58ch;margin-top:10px}
.board-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.filters{display:flex;gap:4px}
.f{background:none;border:1px solid transparent;color:var(--ink-dim);padding:7px 14px;border-radius:100px;
  font-size:14px;font-weight:500;cursor:pointer;transition:all .15s}
.f:hover{color:var(--ink)}
.f{position:relative;overflow:hidden}
.f.active{color:var(--ink);border-color:var(--line);background:rgba(244,241,235,.05)}
.f.active::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1.5px;
  background:var(--red);transform-origin:left;animation:wipe .18s ease-out}
@keyframes wipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sort{display:flex;align-items:center;gap:9px;color:var(--ink-faint);font-size:13px}
.sort select{background:var(--void-2);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 10px;font-family:var(--mono);font-size:13px}

.obs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;padding:30px 0}
.obs{display:flex;gap:18px;padding:22px;border:1px solid var(--line);border-radius:6px;
  background:#0f0f12;transition:border-color .18s,transform .18s,box-shadow .18s}
.obs:hover{border-color:rgba(193,55,45,.5);transform:translateY(-2px);box-shadow:0 10px 30px -12px rgba(193,55,45,.3)}
.obs-ecl{flex:none}.obs-ecl svg{display:block}
.obs-body{flex:1;min-width:0}
.obs-stmt{font-size:21px;line-height:1.14;margin:8px 0 4px}
.obs-sub{font-size:12px;color:var(--ink-faint)}
.obs-stats{display:flex;gap:18px;margin-top:14px;flex-wrap:wrap}
.obs-stats>div{display:flex;flex-direction:column;gap:2px}
.s-k{font-size:11px;color:var(--ink-faint);letter-spacing:.03em}
.s-v{font-size:13.5px}

.empty{text-align:center;padding:80px 20px;max-width:560px;margin:0 auto}
.empty-mark{display:flex;justify-content:center;margin-bottom:22px;opacity:.9}
.empty h3{font-size:28px;margin-bottom:12px}
.empty p{color:var(--ink-dim);font-size:16px;line-height:1.6;margin-bottom:22px}

@media(max-width:860px){
  .obs-grid{grid-template-columns:1fr}
  .page-head{padding:34px 0 20px}
}