/* ============ FILTER OPS ============ */
.skin-filterops { --fo-bg: #070B16; --fo-ink: #E6EAF2; --fo-dim: #8A93A6; --fo-line: #C9CFDA; --fo-cyan: #4FD8E8; --fo-amber: #F5B935; --fo-coral: #F07A6E; --fo-green: #7BE07B;
  background: var(--fo-bg); color: var(--fo-ink); font: 700 16px/1 "DejaVu Sans Mono", Menlo, monospace; }
.skin-filterops .fo-sp { flex: 1; }

/* header + stats */
.skin-filterops .fo-top { position: absolute; left: 0; right: 0; top: 0; height: 48px; padding: 0 6px 0 16px; display: flex; align-items: center; gap: 16px; font-size: 19px; white-space: nowrap; }
.skin-filterops .fo-bar { color: var(--fo-ink); }
.skin-filterops .fo-state { display: flex; align-items: center; gap: 10px; color: var(--fo-dim); overflow: hidden; min-width: 0; font-variant-numeric: tabular-nums; }
.skin-filterops .fo-state::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; flex: none; }
.skin-filterops .fo-state.ok { color: var(--fo-green); }
.skin-filterops .fo-state.warn { color: var(--fo-amber); }
.skin-filterops .fo-state.warn::before { border-radius: 0; }
.skin-filterops .fo-state.bad { color: var(--fo-coral); }
.skin-filterops .fo-btn { height: 48px; padding: 0 9px; font-size: 17px; font-weight: 400; color: var(--fo-ink); white-space: nowrap; }
.skin-filterops .fo-btn:active { background: var(--fo-ink); color: var(--fo-bg); }
.skin-filterops .fo-rule { position: absolute; left: 0; right: 0; height: 2px; background: var(--fo-line); }
.skin-filterops .fo-rule.r1 { top: 48px; } .skin-filterops .fo-rule.r2 { top: 84px; } .skin-filterops .fo-rule.r3 { top: 430px; }
.skin-filterops .fo-stats { position: absolute; left: 0; right: 0; top: 50px; height: 34px; padding: 0 18px; display: flex; align-items: center; gap: 16px; font-size: 19px; white-space: nowrap; }
.skin-filterops .fo-sl { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.skin-filterops .fo-last { color: var(--fo-cyan); font-weight: 400; flex: none; }
.skin-filterops.paused .fo-last { color: var(--fo-amber); }

/* ASCII boxes: +----+ rules top/bottom/under the title, | rails on the sides */
.skin-filterops .fo-box { position: absolute; display: flex; flex-direction: column;
  background: repeating-linear-gradient(180deg, var(--fo-line) 0 17px, transparent 17px 23px) 6px 6px / 2px calc(100% - 12px) no-repeat,
              repeating-linear-gradient(180deg, var(--fo-line) 0 17px, transparent 17px 23px) calc(100% - 6px) 6px / 2px calc(100% - 12px) no-repeat; }
.skin-filterops .fo-hr { position: relative; display: block; flex: none; height: 2px; margin: 0 2px 0 3px;
  background: repeating-linear-gradient(90deg, var(--fo-line) 0 7px, transparent 7px 11px) 9px 0 / calc(100% - 18px) 2px no-repeat; }
.skin-filterops .fo-hr::before, .skin-filterops .fo-hr::after { content: "+"; position: absolute; top: -9px; width: 12px; text-align: center; font: 700 19px/19px "DejaVu Sans Mono", Menlo, monospace; color: var(--fo-line); font-style: normal; }
.skin-filterops .fo-hr::before { left: -1px; } .skin-filterops .fo-hr::after { right: -1px; }
.skin-filterops .fo-h { flex: none; height: 34px; padding: 0 22px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--fo-cyan); font-size: 18px; white-space: nowrap; overflow: hidden; }
.skin-filterops .fo-hs { color: var(--fo-amber); font-weight: 400; font-size: 15px; }
.skin-filterops .fo-in { left: 6px; top: 94px; width: 392px; height: 192px; }
.skin-filterops .fo-res { left: 402px; top: 94px; width: 392px; height: 192px; }
.skin-filterops .fo-act { left: 6px; right: 6px; top: 294px; height: 128px; }

/* domain rows */
.skin-filterops .fo-rows { flex: 1; min-height: 0; overflow: hidden; padding: 5px 22px 0 26px; }
.skin-filterops .fo-rows ol { will-change: transform; }
.skin-filterops .fo-rows ol.go { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.skin-filterops .fo-rows li { height: 23px; display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; white-space: nowrap; }
.skin-filterops .fo-rows li.new { animation: fo-in .6s ease-out; }
.skin-filterops .fo-rows li:active { background: #16203A; }
.skin-filterops .fo-rows .ts { flex: none; color: var(--fo-ink); font-variant-numeric: tabular-nums; }
.skin-filterops .fo-rows .d { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.skin-filterops .fo-rows .tag { flex: none; width: 76px; font-weight: 700; }
.skin-filterops .tag.bk { color: var(--fo-coral); }
.skin-filterops .tag.ck { color: var(--fo-amber); }
.skin-filterops .tag.off { color: var(--fo-amber); }
.skin-filterops.paused .fo-res .d { color: var(--fo-dim); }
.skin-filterops .fo-rows .empty { color: var(--fo-dim); }

/* activity chart: columns of ## cells, stacked amber (blocked) under cyan (queries) */
.skin-filterops .fo-leg { font-weight: 400; font-size: 15px; color: var(--fo-ink); }
.skin-filterops .fo-leg em { font-style: normal; }
.skin-filterops .fo-chartw { flex: 1; min-height: 0; overflow: hidden; padding: 0 20px 0 24px; display: flex; align-items: flex-end; }
.skin-filterops .fo-chart { flex: 1; height: 80px; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 5px; }
.skin-filterops .fo-chart.shift { transform: translateX(25px); }
.skin-filterops .fo-chart.go { transition: transform .5s ease-out; }
.skin-filterops .fo-chart i { display: flex; flex-direction: column-reverse; font: 700 14px/12px "DejaVu Sans Mono", Menlo, monospace; font-style: normal; letter-spacing: -.5px; }
.skin-filterops .fo-chart b { display: block; height: 12px; font-weight: 700; }
.skin-filterops .fo-chart b.c { color: var(--fo-cyan); }
.skin-filterops .fo-chart b.a { color: var(--fo-amber); }
.skin-filterops .fo-chart b.z { color: #2A3348; }
.skin-filterops .fo-chart i.est { opacity: .45; }
.skin-filterops .fo-chart i.live b { opacity: .75; }
.skin-filterops.paused .fo-chart b.c { color: #2E7F8A; }

/* footer */
.skin-filterops .fo-foot { position: absolute; left: 0; right: 0; top: 432px; bottom: 0; padding: 0 4px 0 16px; display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 400; white-space: nowrap; }
.skin-filterops .fo-prompt { display: flex; align-items: center; gap: 4px; overflow: hidden; min-width: 0; }
.skin-filterops .fo-prompt span { overflow: hidden; text-overflow: ellipsis; }
.skin-filterops.paused .fo-prompt span { color: var(--fo-amber); }
.skin-filterops .fo-cur { flex: none; width: 11px; height: 20px; background: var(--fo-amber); animation: fo-blink 1.1s steps(1, end) infinite; }
.skin-filterops .fo-meta { color: var(--fo-ink); flex: none; font-variant-numeric: tabular-nums; }
.skin-filterops .fo-pause { height: 48px; padding: 0 10px; color: var(--fo-cyan); font-weight: 700; font-size: 18px; white-space: nowrap; flex: none; }
.skin-filterops .fo-pause:active { background: var(--fo-cyan); color: var(--fo-bg); }
.skin-filterops .fo-pause.resume { color: var(--fo-amber); }
.skin-filterops .fo-pause.resume:active { background: var(--fo-amber); color: var(--fo-bg); }
@keyframes fo-blink { 0% { opacity: 1; } 65% { opacity: 0; } }
@keyframes fo-in { from { opacity: 0; } to { opacity: 1; } }