#check [hidden] { display: none !important; }
#check .hc-intro { margin-top: var(--s-4); }
#check .hc-field { margin-bottom: var(--s-5); }
#check .hc-filters { display: grid; gap: var(--s-4); }
#check .hc-filters .seg { display: flex; flex-wrap: wrap; }
#check .tabs button { height: auto; min-height: 44px; }
#check button, #check select { min-height: 44px; }
#check button:disabled { opacity: .55; cursor: not-allowed; }
#check #hc-channel button { min-width: 0; overflow-wrap: anywhere; }
#check #hc-channel-note:empty, #check #hc-status:empty { display: none; }
#check #hc-channel-note { margin-top: var(--s-2); }
#check :is(button, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
#check .skel { background: var(--grey-800); height: 16px; }
#check .skel.w40 { width: 40%; }
#check .skel.w70 { width: 70%; }
#check .skel.w90 { width: 90%; }
#check .stateline { display: grid; gap: var(--s-1); }
#check .empty, #check .error { border: 1px solid var(--grey-700); padding: var(--s-7) var(--s-6); display: grid; gap: var(--s-3); justify-items: start; }
#check .error .chip { background: var(--red); color: var(--white); }
#check .table-wrap { overflow: auto; max-height: 780px; border: 1px solid var(--grey-700); scrollbar-color: var(--grey-400) var(--grey-800); }
#check .table { min-width: 900px; font-size: 14px; }
#check .table caption { text-align: left; padding: var(--s-3); color: var(--grey-400); }
#check .table th, #check .table td { border-color: var(--grey-700); padding: var(--s-2) var(--s-3); }
#check .table th { background: var(--grey-800); position: sticky; top: 0; z-index: 1; }
#check .table .hc-url { min-width: 190px; max-width: 260px; overflow-wrap: anywhere; }
#check .rules { display: grid; gap: var(--s-2); padding: 0; margin: 0; list-style: none; }
#check .rule { display: grid; grid-template-columns: 32px 1fr auto; gap: var(--s-4); align-items: center; border: 1px solid var(--grey-700); padding: var(--s-3) var(--s-4); }
#check .rule .n { font-family: var(--font-mono); font-weight: 600; color: var(--grey-400); }
#check .rule .count { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
#check .bar { height: 6px; background: var(--grey-700); margin-top: var(--s-2); }
#check .bar i { display: block; height: 100%; background: var(--red); }
#check .bar i.ok { background: var(--green); }
#check .states2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
#check .states2 > div { border: 1px solid var(--grey-700); padding: var(--s-4); min-width: 0; overflow-wrap: anywhere; }
#check .states2 p + p { margin-top: var(--s-3); }
#check .hc-source-links { display: flex; flex-wrap: wrap; gap: var(--s-3); }
#check .hc-source-links a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; }
#check textarea { height: auto; width: 100%; font-family: var(--font-mono); font-size: 13px; }
#check .hc-reveal { animation: hc-reveal 320ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hc-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 834px) { #check .states2 { grid-template-columns: 1fr; } #check .rule { grid-template-columns: 28px 1fr; } #check .rule .count { grid-column: 2; } #check .demo .controls, #check .demo .result { padding: var(--s-4); } }
@media (prefers-reduced-motion: reduce) { #check .hc-reveal { animation: none; } }