:root { --color-bg: #fafaf8 }
:root { --color-text: #1a1a1a }
:root { --color-text-light: #666666 }
:root { --color-accent: #24364f }
:root { --color-accent-soft: #eef2f7 }
:root { --color-border: #e5e5e0 }
:root { --font-sans: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif }
:root { --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace }

* { box-sizing: border-box }
* { margin: 0 }
* { padding: 0 }

body { background: var(--color-bg) }
body { color: var(--color-text) }
body { font-family: var(--font-sans) }
body { line-height: 1.6 }
body { min-height: 100vh }

a { color: var(--color-accent) }
a { font-weight: 500 }
a { text-decoration: none }

button,
input,
select { font: inherit }

button,
select,
input { border: 1px solid var(--color-border) }
button,
select,
input { border-radius: 4px }
button,
select,
input { min-height: 2.65rem }

button { background: var(--color-accent) }
button { color: #ffffff }
button { cursor: pointer }
button { font-weight: 600 }
button { padding: 0 1rem }

input,
select { background: transparent }
input,
select { color: var(--color-text) }
input,
select { padding: 0 0.7rem }
input,
select { width: 100% }

table { border-collapse: collapse }
table { min-width: 980px }
table { width: 100% }

th { color: var(--color-text-light) }
th { font-family: var(--font-mono) }
th { font-size: 0.75rem }
th { font-weight: 500 }
th { letter-spacing: 0.05em }
th { text-align: left }
th { text-transform: uppercase }

th,
td { border-bottom: 1px solid var(--color-border) }
th,
td { padding: 0.8rem 0.75rem }
th,
td { vertical-align: middle }

td { font-size: 0.94rem }

th:last-child,
td:last-child { background: var(--color-bg) }
th:last-child,
td:last-child { position: sticky }
th:last-child,
td:last-child { right: 0 }
th:last-child,
td:last-child { z-index: 2 }

.page-shell { margin: 0 auto }
.page-shell { max-width: 1380px }
.page-shell { padding: 0 2.4rem }

main.page-shell { padding-bottom: 2.5rem }

.site-header { background: rgba(250, 250, 248, 0.94) }
.site-header { border-bottom: 1px solid var(--color-border) }
.site-header { position: sticky }
.site-header { top: 0 }
.site-header { z-index: 20 }

.header-inner { align-items: center }
.header-inner { display: flex }
.header-inner { gap: 1.5rem }
.header-inner { justify-content: space-between }
.header-inner { min-height: 68px }

.brand-block { display: grid }
.brand-block { gap: 0.22rem }

.brand { color: var(--color-text) }
.brand { font-size: 1.1125rem }
.brand { font-weight: 600 }

.header-link { color: var(--color-accent) }
.header-link { font-family: var(--font-mono) }
.header-link { font-size: 0.78rem }
.header-link { font-weight: 500 }
.header-link { letter-spacing: 0.05em }

.eyebrow { color: var(--color-accent) }
.eyebrow { font-family: var(--font-mono) }
.eyebrow { font-size: 0.78rem }
.eyebrow { font-weight: 500 }
.eyebrow { letter-spacing: 0.05em }
.eyebrow { text-transform: uppercase }

.tabs { display: flex }
.tabs { gap: 0.4rem }
.tabs { padding-top: 1.25rem }

.tab-link { border-bottom: 2px solid transparent }
.tab-link { color: var(--color-text-light) }
.tab-link { font-size: 0.95rem }
.tab-link { padding: 0.65rem 1rem }

.tab-link.active { border-bottom-color: var(--color-accent) }
.tab-link.active { color: var(--color-text) }

.tab-panel { display: none }
.tab-panel.active { display: block }

.filters { align-items: end }
.filters { display: grid }
.filters { gap: 0.9rem }
.filters { grid-template-columns: minmax(8rem, 0.9fr) minmax(8rem, 0.9fr) minmax(12rem, 1.4fr) minmax(9rem, 0.75fr) minmax(9rem, 0.75fr) auto }
.filters { padding: 1.5rem 0 2rem }

.filters label,
.case-search label { display: grid }
.filters label,
.case-search label { gap: 0.35rem }

.filters span,
.case-search span { color: var(--color-text-light) }
.filters span,
.case-search span { font-size: 0.82rem }
.filters span,
.case-search span { font-weight: 500 }

.results { min-width: 0 }

.section-heading { align-items: end }
.section-heading { display: flex }
.section-heading { gap: 1rem }
.section-heading { justify-content: space-between }
.section-heading { margin-bottom: 1rem }

.section-heading h1 { font-size: 1.35rem }
.section-heading h1 { font-weight: 600 }

.section-heading.compact { align-items: start }

.results-meta { align-items: center }
.results-meta { display: flex }
.results-meta { justify-content: space-between }
.results-meta { margin-bottom: 0.85rem }

.limit-note { color: var(--color-text-light) }
.limit-note { font-size: 0.85rem }

.table-wrap { background: transparent }
.table-wrap { border-bottom: 1px solid var(--color-border) }
.table-wrap { border-radius: 0 }
.table-wrap { border-top: 1px solid var(--color-border) }
.table-wrap { overflow: auto }
.table-wrap { margin-bottom: 1.25rem }

.case-id-cell { align-items: center }
.case-id-cell { display: flex }
.case-id-cell { gap: 0.45rem }

.icon-button { align-items: center }
.icon-button { background: transparent }
.icon-button { border: none }
.icon-button { color: var(--color-accent) }
.icon-button { display: inline-flex }
.icon-button { font-family: var(--font-mono) }
.icon-button { font-size: 0.86rem }
.icon-button { font-weight: 500 }
.icon-button { height: 1.4rem }
.icon-button { justify-content: center }
.icon-button { min-height: 1.4rem }
.icon-button { min-width: 1.4rem }
.icon-button { padding: 0 }

.copy-action { position: relative }
.copy-action { width: 1.4rem }
.copy-action::before,
.copy-action::after { background: currentColor }
.copy-action::before,
.copy-action::after { border-radius: 2px }
.copy-action::before,
.copy-action::after { content: "" }
.copy-action::before,
.copy-action::after { height: 0.72rem }
.copy-action::before,
.copy-action::after { position: absolute }
.copy-action::before,
.copy-action::after { width: 0.58rem }
.copy-action::before { height: 0.72rem }
.copy-action::before { left: 0.52rem }
.copy-action::before { opacity: 0.45 }
.copy-action::before { top: 0.18rem }
.copy-action::before { width: 0.58rem }
.copy-action::after { left: 0.32rem }
.copy-action::after { top: 0.42rem }
.copy-action[data-copied="true"] { min-width: 4rem }
.copy-action[data-copied="true"]::after { display: none }
.copy-action[data-copied="true"]::before { background: none }
.copy-action[data-copied="true"]::before { content: "Copied" }
.copy-action[data-copied="true"]::before { height: auto }
.copy-action[data-copied="true"]::before { left: auto }
.copy-action[data-copied="true"]::before { position: static }
.copy-action[data-copied="true"]::before { top: auto }
.copy-action[data-copied="true"]::before { width: auto }

.details-action { color: var(--color-accent) }
.details-action { font-family: var(--font-mono) }
.details-action { font-size: 0.78rem }
.details-action { font-weight: 500 }
.details-action { letter-spacing: 0.05em }
.details-action { text-transform: uppercase }

.case-search { align-items: end }
.case-search { display: grid }
.case-search { gap: 0.75rem }
.case-search { grid-template-columns: minmax(16rem, 28rem) 6rem }
.case-search { padding: 1.5rem 0 }

.error { background: #fff5f5 }
.error { border: 1px solid #f1c6c6 }
.error { border-radius: 6px }
.error { color: #8a2626 }
.error { margin-bottom: 1rem }
.error { padding: 0.75rem }

.details-card,
.empty-state { background: transparent }
.details-card,
.empty-state { border: none }
.details-card,
.empty-state { border-radius: 0 }
.details-card,
.empty-state { padding: 0 }

.details-card { width: 100% }
.details-card { border-top: 1px solid var(--color-border) }
.details-card { margin-bottom: 1.25rem }
.details-card { padding-top: 1.4rem }

.meta-list { border-bottom: 1px solid var(--color-border) }
.meta-list { display: grid }
.meta-list { gap: 0.85rem }
.meta-list { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.meta-list { margin-bottom: 1.25rem }
.meta-list { padding-bottom: 1.25rem }

.meta-list div { display: grid }
.meta-list div { gap: 0.15rem }

dt { color: var(--color-accent) }
dt { font-family: var(--font-mono) }
dt { font-size: 0.75rem }
dt { letter-spacing: 0.05em }
dt { text-transform: uppercase }

dd { color: var(--color-text) }

.text-section { border-bottom: 1px solid var(--color-border) }
.text-section { margin-bottom: 1.25rem }
.text-section { padding-bottom: 1.25rem }

.text-section:last-child { border-bottom: none }
.text-section:last-child { margin-bottom: 0 }
.text-section:last-child { padding-bottom: 0 }

.text-section h2 { font-size: 1rem }
.text-section h2 { margin-bottom: 0.6rem }

.text-section p { color: var(--color-text-light) }
.text-section p { margin-bottom: 0.8rem }

.empty-state { max-width: 560px }
.empty-state { padding-top: 1rem }

.empty-state h1 { font-size: 1.2rem }
.empty-state h1 { margin-bottom: 0.35rem }

.empty-state p { color: var(--color-text-light) }

@media (max-width: 1100px) {
    .filters { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .filters button { width: 100% }
}

@media (max-width: 720px) {
    .page-shell { padding: 0 1.25rem }
    .header-inner { align-items: flex-start }
    .header-inner { flex-direction: column }
    .header-inner { gap: 0.75rem }
    .header-inner { justify-content: center }
    .header-inner { min-height: 96px }
    .filters { grid-template-columns: 1fr }
    .case-search { grid-template-columns: 1fr }
    .case-search button { width: 100% }
    .meta-list { grid-template-columns: 1fr }
    th,
    td { padding: 0.7rem 0.6rem }
}