.hp-history-button {display:block;width:100%;text-align:left;padding:10px 14px;border:0;border-top:1px solid var(--border-color);background:transparent;color:var(--text-primary);cursor:pointer;font:inherit;border-radius:0}
.hp-history-button:hover {background:rgba(20,184,166,.08)}
.hp-history-button:focus-visible {outline:2px solid #14b8a6;outline-offset:-3px}
.hp-history-button > div {cursor:pointer!important}
.hp-history-link {display:block;color:var(--text-primary);font-size:12px;font-weight:700;margin-top:5px}
#hp-history-modal {position:fixed;inset:0;z-index:12000;align-items:center;justify-content:center;background:rgba(5,13,25,.72);padding:20px;overscroll-behavior:contain}
.hp-history-dialog {width:800px;max-width:100%;max-height:90dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface-color,#152625);color:var(--text-primary);border:1px solid var(--border-color);border-radius:18px;padding:22px;box-shadow:0 24px 80px #0005}
.hp-history-header,.hp-history-controls {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.hp-history-header h3 {font-size:19px;margin:0}
.hp-history-dialog button {color:var(--text-primary);background:var(--accent-bg);border:1px solid var(--border-color);border-radius:7px;padding:7px 10px;cursor:pointer}
.hp-history-controls label {display:inline-flex;align-items:center;gap:5px;margin-right:14px;font-size:14px;cursor:pointer}
.hp-history-controls input {accent-color:#14b8a6}
#hp-history-body {min-height:220px}
#hp-history-body h4 {margin:0 0 8px;font-size:21px}
.hp-history-note {color:var(--text-secondary);font-size:12px;line-height:1.6;margin:5px 0}
.hp-history-empty {padding:45px 10px;text-align:center;line-height:1.8}
@media(max-width:600px){#hp-history-modal{padding:8px}.hp-history-dialog{padding:16px 10px;border-radius:12px;max-height:94dvh}.hp-history-controls{gap:5px}.hp-history-controls label{font-size:13px;margin-right:8px}.hp-history-controls button{font-size:12px;padding:7px}.hp-history-dialog .dash-table-container .previous-next-container{color:var(--text-primary)}}

#hp-history-period label, #hp-history-period label span {color:var(--text-primary)!important}