.highlight-catalog-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: var(--text-sm); color: var(--ink-600); }
.highlight-editor-list { margin: 16px 0; }
.highlight-editor { border-top: 1px solid var(--line-200); }
.highlight-editor:last-child { border-bottom: 1px solid var(--line-200); }
.highlight-editor > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 0; cursor: pointer; list-style: none; }
.highlight-editor > summary::-webkit-details-marker { display: none; }
.highlight-number { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 6px; background: var(--paper-100); font-size: var(--text-sm); color: var(--ink-600); }
.highlight-summary { display: grid; gap: 4px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.highlight-summary strong { font-size: var(--text-sm); }
.highlight-summary small { font-size: var(--text-xs); color: var(--ink-600); font-weight: 400; }
.highlight-editor[open] > summary > .icon { transform: rotate(180deg); }
.highlight-editor-body { display: grid; gap: 16px; padding: 4px 0 20px; }
.highlight-editor label { display: grid; gap: 6px; min-width: 0; font-size: var(--text-sm); }
.highlight-editor input:not([type="checkbox"]), .highlight-editor select { min-height: 44px; width: 100%; min-width: 0; }
.highlight-image-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; align-items: start; }
.highlight-image-preview { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--paper-100); color: var(--ink-600); font-size: var(--text-xs); text-align: center; }
.highlight-image-preview > span { display: grid; justify-items: center; gap: 8px; padding: 8px; }
.highlight-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.highlight-image-preview[data-position="top"] img { object-position: top; }
.highlight-image-preview[data-position="bottom"] img { object-position: bottom; }
.highlight-image-actions { display: grid; gap: 12px; justify-items: start; }
.highlight-image-actions label { width: 100%; }
.highlight-image-actions .button { min-height: 44px; }
.highlight-product-names { display: grid; gap: 12px; margin: 12px 0 0; padding: 12px; border-radius: 8px; background: var(--paper-100); }
.highlight-product-names > div { min-width: 0; }
.highlight-product-names dt { margin-bottom: 4px; font-size: var(--text-xs); color: var(--ink-600); }
.highlight-product-names dd { margin: 0; font-size: var(--text-sm); color: var(--ink-900); overflow-wrap: anywhere; }
.highlight-target-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.highlight-playback { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; }
.highlight-playback > label { display: grid; gap: 6px; font-size: var(--text-sm); }
.highlight-playback > .highlight-enable { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.highlight-playback input[type="number"] { width: 100%; max-width: 160px; min-height: 44px; }
.highlight-editor-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.highlight-editor-actions .highlight-enable { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.highlight-enable input { width: 20px; height: 20px; accent-color: var(--brand-600); }
.highlight-editor-actions [role="group"] { display: flex; gap: 4px; }
.highlight-editor-actions button { min-width: 44px; min-height: 44px; }
.highlight-empty { padding: 24px 0; color: var(--ink-600); }
.highlight-empty p { margin: 8px 0 4px; font-size: var(--text-sm); color: var(--ink-900); }
.highlight-empty small { font-size: var(--text-xs); }
.highlight-editor summary:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
@media (max-width: 599px) { .highlight-target-row { grid-template-columns: minmax(0, 1fr); } }