.btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-accent);
    color: var(--color-panel-text);
    border: 2px solid var(--color-accent);
    padding: 0.75rem 1.5rem;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-primary:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border-solid);
    padding: 0.75rem 1.5rem;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-secondary:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-accent);
    color: var(--color-panel-text);
    border: 2px solid var(--color-accent);
    padding: 0.75rem 1.5rem;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition-property: color, background-color, border-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.btn-danger:hover {
    background-color: var(--color-text);
    border-color: var(--color-text);
}

.panel {
    border: 1px solid var(--color-border-solid);
    background-color: var(--color-bg);
    padding: 1.5rem;
}

/* ── Section ─────────────────────────────────── */
.section {
    border: 1px solid var(--color-border-solid);
    margin-bottom: 0;
}

.section-header {
    background: rgba(26, 26, 26, 0.06);
    border-bottom: 1px solid var(--color-border-solid);
    padding: 6px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.section-header-label {
    font-family: "Courier New", monospace;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-text);
}

.section-header-meta {
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(26, 26, 26, 0.5);
}

.section-header-action {
    font-family: "Courier New", monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text);
    text-decoration: none;
    border-bottom: 1px solid var(--color-text);
    padding-bottom: 1px;
}
.section-header-action:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.section-body {
    padding: 20px 16px;
    background: var(--color-bg);
}

/* Stacked sections — no double borders */
.section-stack .section {
    border-bottom: none;
}
.section-stack .section:last-child {
    border-bottom: 1px solid var(--color-border-solid);
}

/* State variants */
.section-critical .section-header { background: rgba(232, 71, 42, 0.08); }
.section-warning  .section-header { background: rgba(217, 158, 0, 0.08); }
.section-success  .section-header { background: rgba(59, 166, 105, 0.08); }

/* ── Tables ──────────────────────────────────── */
/* Section tables always use collapsed borders (required for tr/td borders) */
.section table {
    border-collapse: collapse;
}

.th-taw {
    padding: 0.625rem 1rem;
    text-align: left;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.65rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Dark header row (used in overview tab tables) */
.thead-dark {
    background-color: var(--color-panel-dark);
}
.thead-dark .th-taw {
    color: var(--color-panel-text);
}

/* Light header row (used in section tables) */
.thead-light tr {
    border-bottom: 1px solid var(--color-border-solid);
}
.thead-light .th-taw {
    color: var(--color-text);
}

.tr-taw {
    border-bottom: 1px solid var(--color-border);
    transition: background-color 100ms ease;
}
.tr-taw:hover {
    background-color: rgba(26, 26, 26, 0.04);
}

.td-taw {
    padding: 0.625rem 1rem;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* ── Empty state ─────────────────────────────── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.empty-state-label {
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8rem;
    opacity: 0.4;
}
.empty-state-hint {
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.65rem;
    opacity: 0.3;
    margin-top: 0.25rem;
}

.stat-block {
    background-color: var(--color-panel-dark);
    color: var(--color-panel-text);
    padding: 1.5rem;
}

.badge {
    display: inline-block;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.65rem;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.125rem 0.375rem;
}

.label-taw {
    display: block;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.75rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.375rem;
}

.input-taw {
    width: 100%;
    border: 1px solid var(--color-border-solid);
    background-color: var(--color-bg);
    padding: 0.625rem 0.875rem;
    font-family: Proto, ui-monospace, SFMono-Regular, monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text);
    transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input-taw:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 0;
    border-color: var(--color-text);
}