.r2-temp-effects-backdrop[hidden] { display: none !important; }
.r2-temp-effects-backdrop { position: fixed; inset: 0; z-index: 2147481000; display: grid; place-items: center; padding: 12px; background: #0009; box-sizing: border-box; font: 12px Arial, sans-serif; color: #f7f1df; }
.r2-temp-effects-panel { width: min(520px, 100%); height: min(300px, calc(100dvh - 24px)); display: flex; flex-direction: column; border: 3px ridge #898068; border-radius: 4px; background: linear-gradient(#464335ef, #27261ff2); box-shadow: 0 12px 35px #000c, inset 0 0 0 1px #15140e; box-sizing: border-box; }
.r2-temp-effects-header { min-height: 27px; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 2px solid #8c846c; background: linear-gradient(#514c3b, #191b17 50%, #5b5846); text-shadow: 1px 1px #000; }
.r2-temp-effects-header strong { font-size: 11px; }
.r2-temp-effects-close { position: absolute; right: 2px; top: 1px; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: #ded6c4; font: 20px/20px Arial, sans-serif; cursor: pointer; }
.r2-temp-effects-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 9px 10px 5px; }
.r2-temp-effects-tabs button { min-height: 25px; border: 2px ridge #857963; border-radius: 3px; background: linear-gradient(#69614d, #29251d); color: #eee9d9; font: bold 11px Arial, sans-serif; text-shadow: 1px 1px #000; cursor: pointer; }
.r2-temp-effects-tabs button[aria-selected=true] { border-color: #b2a27a; background: linear-gradient(#8b7d5c, #4a4432); }
.r2-temp-effects-list { flex: 1; overflow: auto; margin: 0 9px 8px; border: 1px solid #77705c; background: #1b1b18a8; scrollbar-color: #786f54 #24231d; }
.r2-temp-effects-row { min-height: 55px; display: flex; gap: 8px; align-items: flex-start; padding: 7px 5px; border-bottom: 1px solid #827c65a8; box-sizing: border-box; }
.r2-temp-effects-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border: 2px ridge #8f8568; background: #3a382f; box-sizing: border-box; }
.r2-temp-effects-icon img { grid-area: 1/1; width: 38px; height: 38px; object-fit: contain; }
.r2-temp-effects-icon span { grid-area: 1/1; display: none; font-size: 24px; }
.r2-temp-effects-icon.missing img { display: none; }
.r2-temp-effects-icon.missing span { display: block; }
.r2-temp-effects-description { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 2px; text-shadow: 1px 1px #000; }
.r2-temp-effects-description strong { overflow-wrap: anywhere; }
.r2-temp-effects-type { white-space: nowrap; padding-top: 2px; font-weight: bold; text-shadow: 1px 1px #000; }
.r2-temp-effects-empty { margin: 20px 8px; text-align: center; color: #d2cbb8; }
.r2-temp-effects-panel button:focus-visible { outline: 2px solid #e5d6a1; outline-offset: 1px; }
@media (max-width: 500px) { .r2-temp-effects-panel { height: min(340px, calc(100dvh - 24px)); } .r2-temp-effects-type { font-size: 10px; } }