.history-app {
    --history-bg: var(--tg-theme-bg-color, #f7f9fc);
    --history-text: var(--tg-theme-text-color, #172b4d);
    --history-hint: var(--tg-theme-hint-color, #627086);
    --history-accent: var(--tg-theme-link-color, #145bd7);
    min-height: 100dvh;
    padding: max(28px, var(--tg-content-safe-area-inset-top, 0px)) max(16px, var(--tg-content-safe-area-inset-right, 0px)) max(24px, var(--tg-content-safe-area-inset-bottom, 0px)) max(16px, var(--tg-content-safe-area-inset-left, 0px));
    background: var(--history-bg);
    color: var(--history-text);
    font-family: "Segoe UI", system-ui, sans-serif;
}
.history-header, .history-list, .request-details, .history-app > .history-state, .history-footnote { max-width: 900px; margin-inline: auto; }
.history-header { margin-bottom: 24px; }
.eyebrow { color: var(--history-accent); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.history-header h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 650; margin: 10px 0; letter-spacing: -.025em; }
.history-header p, .history-footnote, .grid-hint, .record-count, .request-metadata dt { color: var(--history-hint); }
.history-header p { font-size: 14px; line-height: 1.6; max-width: 520px; }
.history-list, .request-details { display: block; width: 100%; padding: 20px; border-radius: 12px; }
.section-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.section-heading h2 { font-size: 18px; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.record-count { white-space: nowrap; font-size: 12px; }
.grid-hint { font-size: 13px; margin-bottom: 16px; }
.history-grid { width: 100%; min-width: 0; overflow-x: auto; }
.history-grid table { width: 100%; min-width: 0; max-width: 100%; }
.history-grid tbody tr { cursor: pointer; }
.history-grid tbody tr:hover { background: color-mix(in srgb, var(--history-accent) 7%, transparent); }
.history-grid .fluent-data-grid td.history-status { align-content: center; }
.request-link { color: var(--history-accent); font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums; }
.request-link:hover, .request-link:focus { text-decoration: underline; }
.request-link { display: flex; flex-direction: column; gap: 2px; }
.request-link small { color: var(--history-hint); font-size: 11px; }
.status { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 20px; white-space: nowrap; }
.status.processed { color: #0e6b43; background: #e5f5eb; }
.status.pending { color: #805300; background: #fff3cd; }
.status.failed { color: #ad2335; background: #fce7e9; }
.history-pagination { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 20px; }
.history-pagination > span { color: var(--history-hint); font-size: 13px; font-variant-numeric: tabular-nums; }
.history-footnote { text-align: center; font-size: 12px; padding-top: 16px; }
.history-state { text-align: center; padding: 40px 20px; }
.history-state h2, .history-state h3 { font-size: 20px; }
.history-state p { color: var(--history-hint); margin-top: 14px; }
.request-metadata { display: flex; flex-wrap: wrap; gap: 16px 36px; margin-block: 20px; }
.request-metadata dt { font-size: 12px; font-weight: 400; margin-bottom: 4px; }
.request-metadata dd { font-size: 13px; margin: 0; }
.request-id { overflow-wrap: anywhere; }
.request-content { border-radius: 8px; padding: 20px; background: #101c2c; color: #e2eaf4; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 65dvh; overflow: auto; tab-size: 2; }
.request-content code { color: inherit; }
.empty-content { color: var(--history-hint); padding-block: 24px; }
@media (max-width: 480px) {
    .history-list, .request-details { padding: 14px; }
    .history-header { margin-bottom: 20px; }
    .section-heading { align-items: flex-start; }
    .status { padding: 3px 6px; font-size: 11px; }
    .request-content { padding: 14px; }
}