:root[data-theme="modern"] { 
  --bg: #121214; 
  --panel: #1a1a1e; 
  --panel-hover: #1a1a1e; 
  --ink: #e4e4e7; 
  --ink-muted: #a1a1aa; 
  --border: #27272a; 
  --accent: #1a1a1e; 
  --accent-hover: #1a1a1e; 
  --link: #818cf8; 
  --link-hover: #c7d2fe; 
  --table-bg: var(--panel); 
  --tr-hover: var(--panel); 
  --notes-bg: rgba(255, 255, 255, 0.03); 
  --table-border: 1px solid var(--border); 
  --radius: 2px; 
  --padding-control: 8px 12px; 
  --padding-cell: 14px 16px; 
  --font-size-base: 14px; 
  --font-size-sm: 13px; 
  --body-bg-image: none; 

  --font-family: "Zen Kaku Gothic Antique", -apple-system, 
BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
} 

:root[data-theme="retro"] { 
  --bg: #fff0f3; 
  --panel: #fff; 
  --panel-hover: #ffe4e8; 
  --ink: #4a2832; 
  --ink-muted: #8c5867; 
  --border: #d4a5b2; 
  --accent: #b05770; 
  --accent-hover: #9c4760; 
  --link: #a13d5c; 
  --link-hover: #c75276; 
  --table-bg: #fff; 
  --tr-hover: #fff; 
  --notes-bg: #fff7f9; 
  --table-border: 1px solid #d4a5b2; 
  --radius: 2px; 
  --padding-control: 8px 12px; 
  --padding-cell: 14px 16px; 
  --font-size-base: 14px; 
  --font-size-sm: 13px; 
  --body-bg-image: radial-gradient(#e4b5c2 15%, transparent 16%), radial-gradient(#e4b5c2 15%, transparent 16%); 
  --body-bg-size: 20px 20px; 
  --body-bg-position: 0 0, 10px 10px; 
  --font-family: "Kiwi Maru", "Times New Roman", Times, Georgia, serif; 
} 

* { 
  box-sizing: border-box; 
} 

html, body { 
  height: 100%; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
} 

body { 
  font-family: var(--font-family); 
  color: var(--ink); 
  background-color: var(--bg); 
  background-image: var(--body-bg-image); 
  background-size: var(--body-bg-size); 
  background-position: var(--body-bg-position); 
  display: flex; 
  justify-content: center; 
  padding: 16px; 
  position: relative; 
  -ms-overflow-style: none; 
  scrollbar-width: none; 
} 

body::-webkit-scrollbar { 
  display: none; 
} 

.theme-toggle-floating { 
  position: absolute; 
  top: 16px; 
  right: 16px; 
  z-index: 10; 
} 

.container { 
  width: min(1300px, 100%); 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
  gap: 12px; 
} 

.controls { 
  display: grid; 
  gap: 8px; 
  background: var(--panel); 
  border: var(--table-border); 
  border-radius: var(--radius); 
  padding: var(--padding-control); 
} 

.controls-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 12px; 
  flex-wrap: wrap; 
} 

.controls-group { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  flex-wrap: wrap; 
} 

.btn { 
  appearance: none; 
  border: var(--table-border); 
  background: var(--panel-hover); 
  color: var(--ink); 
  border-radius: var(--radius); 
  padding: var(--padding-control); 
  font-size: var(--font-size-base); 
  font-weight: 500; 
  cursor: pointer; 
  font-family: var(--font-family); 
  line-height: normal; 
} 

[data-theme="retro"] .btn { 
  font-weight: normal; 
} 

.btn:hover:not(:disabled) { 
  background: var(--accent); 
  border-color: var(--accent); 
  color: #fff; 
} 

[data-theme="retro"] .btn:hover:not(:disabled) { 
  background: var(--panel-hover); 
  border-color: var(--border); 
  color: var(--ink); 
} 

[data-theme="modern"] .btn:hover:not(:disabled) { 
  background: var(--panel); 
  border-color: var(--border); 
  color: var(--ink); 
} 

.btn:disabled { 
  opacity: .4; 
  cursor: not-allowed; 
} 

.page-info, .total-count, .filter-label { 
  font-size: var(--font-size-base); 
  color: var(--ink-muted); 
  font-weight: 500; 
  padding: 0 4px; 
  line-height: normal; 
  display: inline-flex; 
  align-items: center; 
  background: transparent; 
  border: none; 
  font-family: var(--font-family); 
} 

[data-theme="retro"] .page-info,  
[data-theme="retro"] .total-count,  
[data-theme="retro"] .filter-label { 
  font-weight: normal; 
} 

input[type="text"], select { 
  appearance: none; 
  border: var(--table-border); 
  background: var(--panel-hover); 
  color: var(--ink); 
  border-radius: var(--radius); 
  padding: var(--padding-control); 
  font-size: var(--font-size-base); 
  font-weight: 500; 
  outline: none; 
  font-family: var(--font-family); 
  line-height: normal; 
} 

[data-theme="retro"] input[type="text"],  
[data-theme="retro"] select { 
  font-weight: normal; 
} 

input[type="text"]::placeholder { 
  color: var(--ink-muted); 
  opacity: 1; 
} 

input[type="text"]:focus, select:focus { 
  border-color: var(--accent); 
} 

select { 
  background-color: var(--panel-hover); 
  color: var(--ink); 
} 

select option { 
  background: var(--panel); 
  color: var(--ink); 
  font-family: var(--font-family); 
} 

[data-theme="retro"] select option { 
  background: #fff; 
  color: #4a2832; 
} 

.search-input { 
  width: 140px; 
} 

.event-select { 
  width: calc(160px * 3 + 9px); 
} 

.year-input { 
  width: 58px; 
  text-align: center; 
  padding: var(--padding-control); 
  font-size: var(--font-size-base); 
} 

.search-options { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: var(--font-size-base); 
  color: var(--ink-muted); 
  padding: 0 4px; 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  font-family: var(--font-family); 
  text-decoration: none !important; 
} 

[data-theme="retro"] .search-options { 
  font-weight: normal; 
} 

.year-range-group { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  font-size: var(--font-size-base); 
  color: var(--ink-muted); 
  padding: 0 4px; 
  background: transparent; 
  border: none; 
  font-family: var(--font-family); 
} 

[data-theme="retro"] .year-range-group { 
  font-weight: normal; 
} 

.year-range-group .divider { 
  color: var(--border); 
  margin: 0 2px; 
} 

.table-wrap { 
  flex: 1; 
  min-height: 0; 
  overflow: auto; 
  background: var(--table-bg); 
  border: var(--table-border); 
  border-radius: var(--radius); 
} 

table { 
  width: 100%; 
  border-collapse: collapse; 
  table-layout: fixed; 
} 

thead th { 
  position: sticky; 
  top: 0; 
  z-index: 2; 
  background: var(--panel); 
  border-bottom: var(--table-border); 
  padding: var(--padding-cell); 
  font-size: var(--font-size-sm); 
  font-weight: 600; 
  text-transform: uppercase; 
  letter-spacing: .05em; 
  text-align: left; 
  color: var(--ink-muted); 
  font-family: var(--font-family); 
} 

[data-theme="retro"] thead th { 
  text-transform: none; 
  letter-spacing: normal; 
  font-weight: bold; 
  background: #fae1e7; 
} 

tbody td { 
  padding: var(--padding-cell); 
  border-bottom: var(--table-border); 
  vertical-align: top; 
  font-size: var(--font-size-base); 
  color: var(--ink); 
  word-wrap: break-word; 
  font-family: var(--font-family); 
} 

tbody tr:last-child td { 
  border-bottom: none; 
} 

tbody tr:hover td { 
  background: var(--tr-hover); 
} 

a { 
  color: var(--link); 
  font-weight: 500; 
  text-decoration: none; 
} 

[data-theme="retro"] a { 
  font-weight: normal; 
  text-decoration: underline; 
} 

a:hover { 
  color: var(--link-hover); 
  text-decoration: underline; 
} 

.notes { 
  background: var(--notes-bg); 
  border: var(--table-border); 
  border-radius: var(--radius); 
  padding: 8px 12px; 
  font-size: var(--font-size-sm); 
  color: var(--ink-muted); 
  line-height: 1.5; 
  white-space: pre-line; 
} 

.product-thumb { 
  width: 200px; 
  height: 200px; 
  object-fit: cover; 
  border-radius: 4px; 
} 

table th:nth-child(1), 
table td:nth-child(1) { 
  width: 32%; 
  padding-right: 5px;  
} 

table th:nth-child(2), 
table td:nth-child(2) { 
  width: 15%; 
  padding-right: 5px; 
} 

table th:nth-child(3), 
table td:nth-child(3) { 
  width: 11%; 
  padding-right: 5px; 
} 

table th:nth-child(4), 
table td:nth-child(4) { 
  width: 12%; 
  padding-right: 5px; 
} 

table th:nth-child(5), 
table td:nth-child(5) { 
  width: 30%; 
} 

* { 
  scrollbar-width: thin; 
  scrollbar-color: var(--border) var(--panel); 
} 

*::-webkit-scrollbar { 
  width: 8px; 
  height: 8px; 
} 

*::-webkit-scrollbar-track { 
  background: var(--panel); 
  border-radius: var(--radius); 
} 

*::-webkit-scrollbar-thumb { 
  background-color: var(--border); 
  border-radius: var(--radius); 
  border: 2px solid var(--panel); 
} 

*::-webkit-scrollbar-thumb:hover { 
  background-color: var(--ink-muted); 
} 

/* --- New Control Elements & Layout Fixes --- */

.controls-group-tight { 
  gap: 4px; 
} 

#resetFiltersLabel { 
  padding: 0 2px; 
  margin-left: 2px; 
} 

#labelCd, 
#labelCdR, 
#labelVocaloid, 
#labelTouhou { 
  cursor: pointer; 
  padding: 0 2px; 
} 

#labelRange, 
#labelNaDates { 
  cursor: pointer; 
} 

#yearToWrapper { 
  display: none; 
  align-items: center; 
  gap: 6px; 
}