.subtitle { font-size: 14px; color: var(--color-text-secondary); }
.controls { display: flex; gap: 8px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.controls input { flex: 1; min-width: 160px; padding: 7px 12px; font-size: 14px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-primary); }
.controls select { padding: 7px 12px; font-size: 14px; border-radius: var(--border-radius-md); border: 0.5px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-primary); }
.count { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 1rem; }
.example-grid { display: flex; flex-direction: column; border: 0.5px solid var(--color-border-tertiary); border-radius: var(--border-radius-lg); overflow: hidden; }
.example-row { background: var(--color-background-primary); padding: 0.25rem 1.125rem; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: background 0.1s; border-top: 0.5px solid var(--color-border-tertiary); }
.example-row:first-child { border-top: none; }
.example-row:hover { background: var(--color-background-secondary); }
.row-num { font-size: 12px; color: var(--color-text-tertiary); min-width: 32px; font-family: var(--font-mono); }
.row-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); flex: 1; }
.row-cat { font-size: 11px; padding: 2px 8px; border-radius: 99px; white-space: nowrap; }
.cat-math      { background: #E6F1FB; color: #0C447C; }
.cat-string    { background: #EAF3DE; color: #27500A; }
.cat-io        { background: #FAEEDA; color: #633806; }
.cat-data      { background: #EEEDFE; color: #3C3489; }
.cat-control   { background: #FAECE7; color: #712B13; }
.cat-graphics  { background: #E1F5EE; color: #085041; }
.cat-game      { background: #FBEAF0; color: #72243E; }
.cat-crypto    { background: #FCF0E8; color: #633806; }
.cat-misc      { background: #F1EFE8; color: #444441; }
.empty { text-align: center; padding: 2rem; color: var(--color-text-tertiary); font-size: 14px; }
@media (prefers-color-scheme: dark) {
  .cat-math      { background: #0C447C; color: #B5D4F4; }
  .cat-string    { background: #27500A; color: #C0DD97; }
  .cat-io        { background: #633806; color: #FAC775; }
  .cat-data      { background: #3C3489; color: #CECBF6; }
  .cat-control   { background: #712B13; color: #F5C4B3; }
  .cat-graphics  { background: #085041; color: #9FE1CB; }
  .cat-game      { background: #72243E; color: #F4C0D1; }
  .cat-crypto    { background: #633806; color: #FAC775; }
  .cat-misc      { background: #444441; color: #D3D1C7; }
}
.example-row.hidden { display: none; }