* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #111; color: #ddd; font: 14px/1.4 ui-monospace, Menlo, Consolas, monospace; }
nav { padding: 12px 16px 0; border-bottom: 1px solid #222; display: flex; gap: 4px; }
nav button { background: none; border: none; color: #777; padding: 8px 14px; cursor: pointer; font: inherit; border-bottom: 2px solid transparent; }
nav button:hover { color: #ccc; }
nav button.active { color: #eee; border-bottom-color: #d4a14a; }
nav a { color: #777; padding: 8px 14px; text-decoration: none; border-bottom: 2px solid transparent; }
nav a:hover { color: #ccc; }
main { padding: 16px; overflow-x: auto; }
table { border-collapse: collapse; width: 100%; max-width: 1200px; }
th, td { padding: 6px 10px; text-align: left; white-space: nowrap; }
th { color: #888; font-weight: normal; cursor: pointer; user-select: none; border-bottom: 1px solid #333; }
th:hover { color: #ccc; }
th.sort-asc::after { content: " ▲"; color: #d4a14a; }
th.sort-desc::after { content: " ▼"; color: #d4a14a; }
tbody tr:nth-child(odd) { background: #161616; }
tbody tr:hover { background: #1e1e1e; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.win { color: #6c6; }
.loss { color: #c66; }
.hk { color: #d4a14a; }
.am { color: #5a8fc0; }
#addform { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
#addform[hidden] { display: none; }
#table[hidden] { display: none; }
#addform input { background: #1a1a1a; border: 1px solid #333; color: #ddd; padding: 8px 10px; font: inherit; border-radius: 3px; }
#addform input:focus { outline: none; border-color: #d4a14a; }
#addform button { background: #d4a14a; color: #111; border: none; padding: 8px 16px; font: inherit; cursor: pointer; border-radius: 3px; }
#addform button:hover { background: #e0b05a; }
#addform button:disabled { opacity: 0.5; cursor: wait; }
#addmsg { color: #888; }
#addmsg.ok { color: #6c6; }
#addmsg.err { color: #c66; }