.custom-category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }.custom-category-grid label, .tag-grid label, .option-grid label { cursor: pointer; }.custom-category-grid input, .tag-grid input, .option-grid input { position: absolute; opacity: 0; }.custom-category-grid span { min-height: 76px; display: grid; place-items: center; padding: 12px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 15px; font-weight: 700; }.custom-category-grid input:checked + span, .tag-grid input:checked + span, .option-grid input:checked + span { color: #8b6100; background: #fff4d6; border-color: #d9a52c; box-shadow: inset 0 0 0 1px #d9a52c; }.custom-panel { margin-top: 30px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px; }.custom-panel h2 { margin: 0 0 19px; font-size: 19px; }.custom-panel h3 { margin: 20px 0 10px; font-size: 13px; }.custom-panel h2 + h3 { margin-top: 0; }.tag-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.tag-grid span, .option-grid span { min-height: 44px; display: grid; place-items: center; padding: 8px; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; font-size: 12px; }.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.option-grid.four { grid-template-columns: repeat(4, 1fr); }.count-block { margin-top: 24px; padding-top: 19px; border-top: 1px solid var(--line); }.count-block h3 { margin: 0 0 10px; }.random-note { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 650px) { .custom-category-grid, .tag-grid, .option-grid, .option-grid.four { grid-template-columns: repeat(2, 1fr); }.custom-panel { padding: 17px; }.tag-grid span { min-height: 42px; } }