:root {
--ess-primary:      #3d1a6b; --ess-primary-dark: #2b1150;
--ess-primary-light:#5a2d9a;
--ess-accent:       #7b3fb5; --ess-bg:           #f7f5fa; --ess-border:       #d8cfe8;
--ess-text:         #1c1c2e;
--ess-muted:        #6b5f80;
--ess-radius:       6px;
--ess-shadow:       0 2px 8px rgba(61,26,107,.10);
} .ess-records {
font-family: inherit;
color: var(--ess-text);
max-width: 900px;
margin: 0 auto;
}   .ess-filters {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-end;
background: var(--ess-bg);
border: 1px solid var(--ess-border);
border-radius: var(--ess-radius);
padding: 16px 20px;
margin-bottom: 24px;
box-shadow: var(--ess-shadow);
}
.ess-filter-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.ess-filter-label {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ess-muted);
} .ess-filter-pills {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.ess-pill {
padding: 6px 16px;
border: 2px solid var(--ess-border);
border-radius: 20px;
background: #fff;
color: var(--ess-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s, border-color .15s, color .15s;
line-height: 1.4;
}
.ess-pill:hover {
border-color: var(--ess-primary);
color: var(--ess-primary);
}
.ess-pill.active {
background: var(--ess-primary);
border-color: var(--ess-primary);
color: #fff;
} .ess-toggle {
display: flex;
border: 2px solid var(--ess-border);
border-radius: 20px;
overflow: hidden;
}
.ess-toggle-btn {
padding: 6px 18px;
border: none;
background: #fff;
color: var(--ess-text);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background .15s, color .15s;
line-height: 1.4;
}
.ess-toggle-btn + .ess-toggle-btn {
border-left: 2px solid var(--ess-border);
}
.ess-toggle-btn:hover { background: var(--ess-bg); }
.ess-toggle-btn.active {
background: var(--ess-primary);
color: #fff;
}
.ess-no-cat {
font-size: 13px;
color: var(--ess-muted);
font-style: italic;
}   .ess-table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--ess-radius);
box-shadow: var(--ess-shadow);
}
.ess-records-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
background: #fff;
} .ess-records-table thead tr th {
background: var(--ess-primary);
color: #fff;
padding: 12px 16px;
text-align: left;
font-weight: 700;
font-size: 13px;
letter-spacing: .04em;
}
.ess-records-table thead tr th:nth-child(2) {
text-align: center;
} .ess-records-table tbody tr {
border-bottom: 1px solid var(--ess-border);
transition: background .1s;
}
.ess-records-table tbody tr:hover { background: #f3eeff; }
.ess-records-table tbody tr:last-child { border-bottom: none; }
.ess-records-table td {
padding: 10px 16px;
vertical-align: middle;
}
.ess-discipline {
font-weight: 600;
color: var(--ess-text);
border-right: 2px solid var(--ess-border);
width: 40%;
}
.ess-perf {
font-family: 'Courier New', monospace;
font-weight: 700;
color: var(--ess-primary);
text-align: center;
white-space: nowrap;
background: #f7f5fa;
font-size: 15px;
width: 20%;
border-right: 2px solid var(--ess-border);
}
.ess-athlete {
color: var(--ess-text);
width: 40%;
}
.ess-year {
font-size: 12px;
color: var(--ess-muted);
font-weight: normal;
} .ess-empty {
text-align: center;
padding: 32px;
color: var(--ess-muted);
font-style: italic;
background: var(--ess-bg);
border-radius: var(--ess-radius);
border: 1px dashed var(--ess-border);
margin-top: 8px;
}   @media (max-width: 640px) {
.ess-filters {
flex-direction: column;
align-items: stretch;
gap: 14px;
padding: 12px;
}
.ess-filter-pills,
.ess-toggle { flex-wrap: wrap; }
.ess-pill, .ess-toggle-btn { font-size: 12px; padding: 5px 12px; }
.ess-records-table { font-size: 13px; }
.ess-records-table td { padding: 8px 10px; }
.ess-perf { font-size: 13px; }
.ess-discipline { width: auto; }
}