.scaper-sound-icon { --sound-color: #9e9e9e; position: relative; display: inline-block; width: 78%; height: 78%; aspect-ratio: 1; flex-shrink: 0; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--sound-color) 50%, transparent)); }
.scaper-sound-icon.rarity-uncommon { --sound-color: #4caf50; }
.scaper-sound-icon.rarity-rare { --sound-color: #5aadff; }
.scaper-sound-icon.rarity-epic { --sound-color: #ce93d8; }
.scaper-sound-icon.rarity-legendary { --sound-color: #ffd700; }
.scaper-sound-icon > span { position: absolute; inset: 0; mask: url('/icons/sound.svg') center / contain no-repeat; -webkit-mask: url('/icons/sound.svg') center / contain no-repeat; background: linear-gradient(125deg, var(--sound-color) 0%, #393e43 20%, var(--sound-color) 35%, #fff 43%, var(--sound-color) 50%, #263036 65%, var(--sound-color) 85%); background-size: 230% 230%; animation: sound-face-shine 6s ease-in-out infinite; }
@keyframes sound-face-shine { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.sound-preview-btn { position: absolute; right: 7px; bottom: 25px; z-index: 4; width: 29px; height: 29px; border: 1px solid #ffffff55; border-radius: 50%; background: #141b20e6; color: #e9f0e7; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.sound-preview-btn svg { width: 15px; height: 15px; pointer-events: none; }
.sound-preview-btn.is-playing, .catalog-preview-button.is-playing { color: #101b16; background: #73d6b4; }
.inv-tile-img-wrap > .scaper-sound-icon { width: 90%; height: 90%; }
.item-detail-sound-viewer { height: 210px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.item-detail-sound-viewer > .scaper-sound-icon { width: 180px; height: 180px; }
.vault-sound-art { position: relative; height: 180px; display: flex; align-items: center; justify-content: center; }
.vault-sound-art .sound-preview-btn { bottom: 5px; }
.forge-sound-thumbnail { display: inline-flex; width: 25px; height: 25px; flex-shrink: 0; }
.forge-sound-thumbnail > .scaper-sound-icon { width: 100%; height: 100%; }
.item-detail-sound-viewer[hidden] { display: none; }
.admin-items-section .admin-section { border: 0; background: transparent; padding: 0; }
.item-workspace-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.catalog-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.catalog-filters input { flex: 1 1 180px; }
.catalog-filters input, .catalog-filters select, .catalog-item-form input, .catalog-item-form select, .catalog-assign select { font: inherit; min-width: 0; color: #e4dfd5; background: #181b19; border: 1px solid #3a4039; border-radius: 4px; padding: 7px 9px; font-size: 12px; }
.admin-inner:has(#admin-items-section:not([hidden])) { max-width: 1400px; }
.catalog-workspace { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(250px, 1.2fr) 260px; gap: 24px; margin-bottom: 30px; }
.catalog-workspace > * { min-width: 0; }
.catalog-items-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); align-content: start; gap: 8px; max-height: 620px; overflow-y: auto; padding: 3px; }
.catalog-item { position: relative; display: flex; flex-direction: column; min-width: 0; background: #181c19; border: 1px solid #394038; border-radius: 4px; padding: 8px; cursor: grab; }
.catalog-item.is-selected { outline: 2px solid #d4a840; }
.catalog-item-art { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.catalog-item-art > img { width: 85%; height: 85%; object-fit: contain; }
.catalog-item-name { color: #e7e1d5; font-size: 12px; overflow-wrap: anywhere; margin: 5px 0 2px; }
.catalog-item-meta { font-size: 10px; color: #979d92; }
.catalog-preview-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid #ffffff40; border-radius: 4px; color: #e4e8de; background: #1c241e; cursor: pointer; }
.catalog-preview-button svg { width: 14px; height: 14px; }
.catalog-item-art > .catalog-preview-button { position: absolute; right: 0; bottom: 0; }
.catalog-item-form { border-left: 1px solid #3a4039; padding-left: 20px; }
.catalog-item-form h4 { margin-bottom: 12px; }
.catalog-item-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 11px; color: #b4b9ae; }
.catalog-item-form input[type="file"] { width: 100%; font-size: 10px; }
.catalog-item-preview { display: flex; align-items: center; justify-content: center; position: relative; height: 100px; margin: 12px 0; }
.catalog-item-preview > .scaper-sound-icon { width: 90px; height: 90px; }
.catalog-item-preview > img { max-width: 100%; height: 90px; object-fit: contain; }
.catalog-form-actions, .catalog-assign { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.catalog-assign { margin-top: 12px; font-size: 11px; }
.catalog-assign select { flex: 1; }
.catalog-case-drop { transition: border-color .15s, background .15s; }
.catalog-case-drop.is-drag-over { border-color: #73d6b4 !important; background: #20392c !important; }
.catalog-case-drop .ac-sticker-tag { white-space: normal; overflow-wrap: anywhere; }
.catalog-case-drop .catalog-case-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.catalog-case-drop > div:first-child { flex-wrap: wrap; }
.catalog-case-drop > div:first-child > div { min-width: 160px !important; }
.catalog-case-settings { border-top: 1px solid #3a4039; margin-top: 16px; padding-top: 12px; }
.catalog-case-settings > summary { cursor: pointer; font-size: 13px; color: #e2c877; }
.catalog-case-settings .admin-upload-row { flex-wrap: wrap; min-width: 0; }
.catalog-case-settings input[type="file"] { max-width: 100%; }
#catalog-message { overflow-wrap: anywhere; margin-top: 10px; }
.catalog-item-form [hidden], #admin-items-section [hidden] { display: none !important; }
@media (max-width: 1050px) { .catalog-workspace { grid-template-columns: minmax(180px, 1fr) minmax(250px, 1fr); }.catalog-item-form { grid-column: 1 / -1; border-left: 0; border-top: 1px solid #3a4039; padding: 18px 0 0; } }
@media (max-width: 700px) { .catalog-workspace { grid-template-columns: minmax(0, 1fr); }.catalog-items-list { max-height: 360px; }.catalog-filters > * { flex: 1 1 120px; } }
@media (prefers-reduced-motion: reduce) { .scaper-sound-icon > span { animation: none; } }